diff --git a/app/Livewire/TodoEdit.php b/app/Livewire/TodoEdit.php
index bd996b0..42e0960 100644
--- a/app/Livewire/TodoEdit.php
+++ b/app/Livewire/TodoEdit.php
@@ -6,10 +6,37 @@
 
 class TodoEdit extends Component
 {
-    public $counter = 0;
+    // public $counter = 0;
+    public $is_editing = false;
+    public $todo;
+    public $task;
 
+    // ★コンポーネントの初期化★
+    public function mount($todo)
+    {
+        $this->todo = $todo;
+        $this->task = $todo->task;
+    }
+
+    // ★コンポーネントの描画★
     public function render()
     {
         return view('livewire.todo-edit');
     }
+
+    // ★★★ wire:model.liveから更新される関数の名前は、updated + プロパティ名(先頭大文字)にしなければならない★★★
+    public function updatedTask()
+    {
+        // info('updateTask called'); // for debug
+        $this->todo->task = $this->task;
+        $this->todo->save();
+    }
+
+    // ここは、自由な関数名で良い
+    public function saveMyData()
+    {
+        $this->updatedTask(); // 保存する
+        $this->is_editing = false;
+    }
+
 }
diff --git a/resources/views/livewire/todo-edit.blade.php b/resources/views/livewire/todo-edit.blade.php
index c791010..9a6dfd6 100644
--- a/resources/views/livewire/todo-edit.blade.php
+++ b/resources/views/livewire/todo-edit.blade.php
@@ -1,5 +1,11 @@
-<div>
-    値は: {{ $counter }} です。
-    <button wire:click="$set('counter', {{ $counter }} + 1)">カウントアップ</button>
-</div>
-
+<td>
+    @if ($is_editing)
+        <input type="text" wire:model.live.debounce.500ms="task" class="w-full p-2 border border-gray-300 rounded-md"
+            wire:keydown.enter="saveMyData" wire:keydown.escape="$set('is_editing', false)" x-init="$el.focus()" />
+    @else
+        <span wire:dblclick="$set('is_editing', true)">{{ $todo->task }}</span>
+        <button wire:click="$set('is_editing', true)" class="px-1 bg-blue-500 text-white rounded-md">Edit</button>
+    @endif
+    {{-- 値は: {{ $counter }} です。
+    <button wire:click="$set('counter', {{ $counter }} + 1)">カウントアップ</button> --}}
+</td>
diff --git a/resources/views/todo/index.blade.php b/resources/views/todo/index.blade.php
index af3b7a4..2fc9a2a 100644
--- a/resources/views/todo/index.blade.php
+++ b/resources/views/todo/index.blade.php
@@ -8,8 +8,6 @@
     @endif
     <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
 
-        <livewire:todo-edit />
-
         <div class="mx-4">
             <table class="min-w-full divide-y divide-gray-200">
                 <thead>
@@ -26,7 +24,7 @@
                     @foreach ($todos as $todo)
                         <tr class="{{ $loop->iteration % 2 === 0 ? 'bg-slate-200' : 'bg-white' }}">
                             <td class="p-1 text-center">{{ $todo->id }}</td>
-                            <td class="p-1">{{ $todo->task }}</td>
+                            <livewire:todo-edit :todo="$todo" />
                             <td class="p-1 text-center">{{ $todo->created_at }}</td>
                             <td class="p-1 text-center">{{ $todo->updated_at }}</td>
                             <td class="p-1 text-center">