Migrate ja todo list to 09.workspace and remove legacy directory per fix/todo fix #273 (#277)

* 09 workspaceを最新データに変更

* ゼロパディングなし toso-list を削除

* fix: 誤って削除したファイルを戻す

Author: kokoe

content/ja/09.workspace/01.todo-list/06.v-model/index.md

@@ -26,10 +26,10 @@ Vueでは [`v-model`](https://ja.vuejs.org/api/built-in-directives.html#v-model)
 ```vue
 <!-- template -->
 <!-- :value がバインド、 @input がイベント監視 -->
-<input :value="message" @input="message = $event.target.value" type="text" />
+<input :value="text" @input="(event) => text = event.target.value" type="text" />
 
 <!-- 上と同じ -->
-<input v-model="message" type="text" />
+<input v-model="text" type="text" />
 ```
 
 フォームタイプごとにバインドされる属性やイベントが異なります：
@@ -42,13 +42,13 @@ Vueでは [`v-model`](https://ja.vuejs.org/api/built-in-directives.html#v-model)
 
 ```vue
 <script setup lang="ts">
-const memo = ref('')
+const note = ref('')
 const isDone = ref(true)
 const showUnDoneOnly = ref(false)
 </script>
 
 <template>
-  <textarea v-model="memo" placeholder="メモを入力" />
+  <textarea v-model="note" placeholder="メモを入力" />
 
   <input v-model="isDone" :value="true" type="radio">完了
   <input v-model="isDone" :value="false" type="radio">未完了
@@ -92,26 +92,26 @@ const showUnDoneOnly = ref(false)
 ## チャレンジ
 
 次の手順に沿って、まずは `:checked` バインディングと `@change` イベント監視で、値が同期されるよう修正し、
-次に `v-model` で、値が同期されるよう修正して、 `v-model` の使い方を学びましょう。
+次に `v-model` で、値が同期されるよう修正しましょう。
 
 ### 1. `:checked` と `@change` による値の同期
 
-`<input>`の`@change`イベントを使い、ユーザーがチェックボックスを変更したタイミングで`showUnDoneOnly`の値を切り替えましょう。これにより、`showUnDoneOnly`がユーザー操作に連動して変更されるようになります。
+`<input>` の `@change` イベントを使い、ユーザーがチェックボックスを変更したタイミングで `showUnDoneOnly` の値を切り替えましょう。これにより、 `showUnDoneOnly` がユーザー操作に連動して変更されるようになります。
 
 ```vue
-<!-- template -->
+<!-- app.vue: template -->
 <input
   :checked="showUnDoneOnly"
   type="checkbox"
-  @change="showUnDoneOnly = $event.target.checked"
+  @change="(event) => showUnDoneOnly = event.target.checked"
 >
 未完了のみ表示
 ```
 
 ### 2. `v-model` による値の同期
 
-次に、`:checked` を `v-model`に切り替えて、 `@change` の値変更のコードを削除しましょう。
-そうすることで、 `v-model` の双方向データバインディングによって、バインドとイベント監視の指定がなくても、値が自動的に同期されるようになります。
+次に、 `<input>` の `:checked` を `v-model`に切り替えて、 `@change` の値変更のコードを削除しましょう。
+そうすることで、 `v-model` だけで、バインドとイベント監視の指定がなくても、値が自動的に同期されるようになります。
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 :ButtonShowSolution

content/ja/09.workspace/01.todo-list/07.reactivity-2/index.md

@@ -25,11 +25,11 @@ const color = computed(() => grade.value === 'A' ? '#ff0000' : 'inherit')
 </template>
 ```
 
-`score` が変わると自動で `grade` が自動で再計算されます。
+`score` が変わると自動で `grade` が再計算されます。
 逆に `score` が変わらない限り、何度使っても前回の計算結果を使います。
 
 変数 `color` に注目してください。依存データに `computed` を利用することもできます。
-`grade` が変わると、 `<p>` のstyle属性 `color` プロパティ値がリアクティブに変更されます。
+`grade` が変わると、 `<p>` 要素のstyle属性 `color` プロパティ値がリアクティブに変更されます。
 
 ::note
 値は `ref` と同じく `.value` を通してアクセスすることができます。
@@ -113,12 +113,15 @@ const doubled = computed({
 
 次の手順に沿って実装してみましょう。
 
-1. `<script setup>` の中で、新しく `filteredTodos` という算出プロパティ（ `computed` ）を定義しましょう。この中で、`showUnDoneOnly` の値によって表示するTodoリストを切り替えるロジックを書きます。
+1. `<script setup>` の中で、 `filteredTodos` という算出プロパティ（ `computed` ）を定義しましょう。
 
-2. `showUnDoneOnly` が `true` の場合は「 `done: false` のTodoのみ」を返し、 `showUnDoneOnly` が `false` の場合は「すべてのTodo」を返すようにコードを組みましょう。
+2. `filteredTodos` の実装をしましょう。`showUnDoneOnly` の値によって、 `todos` の絞り込みをします。
 
-3. 今までは `:todos="todos"` で直接全てのリストを渡していましたが、
-   実装した `filteredTodos` を `TodoList` コンポーネントに渡してみましょう。
+- `showUnDoneOnly` が `true` の場合は、 `done: false` のTodoのみを返します
+- `showUnDoneOnly` が `false` の場合は、すべてのTodoを返します
+
+3. `TodoList` コンポーネントに `:todos="todos"` で、全てのリストを渡していましたが、
+   1,2 で実装した `filteredTodos` を `TodoList` コンポーネントの `todos` propsに渡してみましょう。
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 :ButtonShowSolution

content/ja/09.workspace/01.todo-list/08.componentization-3/index.md

@@ -34,6 +34,11 @@ const showUnDoneOnly = ref(true)
 </template>
 ```
 
+::note
+[`$event`](https://ja.vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers) は、「その場で起きたイベントそのもの」を受け取るためのプレースホルダーです。
+上記コードの `v-on` は、 `@update:model-value="(event) => showUnDoneOnly = event"` と置き換えることができます。
+::
+
 ```vue
 <!-- IncompleteOnlyToggle: 子コンポーネント -->
 <script setup lang="ts">
@@ -52,16 +57,16 @@ const emit = defineEmits<{
     <input
       :checked="modelValue"
       type="checkbox"
-      @change="emit('update:modelValue', $event.target.checked)"
+      @change="(event) => emit('update:modelValue', event.target.checked)"
     >
     未完了のみ表示
   </label>
 </template>
 ```
 
-親から `props` `modelValue` で、値を受け取り、
-子は `emit` で `update:modelValue` で、更新後の値を送信し、
-親が、 `v-on` `update:modelValue` で、子が送信した値を受け取り、状態を更新
+- 親から `props` `modelValue` で、値を受け取り、
+- 子は `emit` で `update:modelValue` で、更新後の値を送信し、
+- 親が、 `v-on` `update:modelValue` で、子が送信した値を受け取り、状態を更新
 
 をすることで、親子の値の同期ができますが、これらをシンプルにしたのが `v-model` です。
 
@@ -96,7 +101,7 @@ const checked = defineModel()
     <input
       :checked="checked"
       type="checkbox"
-      @change="checked = $event.target.checked"
+      @change="(event) => checked = event.target.checked"
     >
     -->
     未完了のみ表示
@@ -176,15 +181,15 @@ const emit = defineEmits<{
     <input
       :checked="isShowUnDone"
       type="checkbox"
-      @change="emit('update:isShowUnDone', $event.target.checked)"
+      @change="(event) => emit('update:isShowUnDone', event.target.checked)"
     >
     未完了を表示
   </label>
   <label>
     <input
       :checked="isShowExpired"
       type="checkbox"
-      @change="emit('update:isShowExpired', $event.target.checked)"
+      @change="(event) => emit('update:isShowExpired', event.target.checked)"
     >
     期限切れを表示
   </label>
@@ -224,9 +229,10 @@ TODOリストに、新規タスクを追加するために、
 `app.vue` の `isCreateModalOpen` の状態が、モーダルの表示を制御していますので、
 `isCreateModalOpen` を `v-model` で同期させることがゴールです。
 
-1. 子コンポーネントで `defineModel()` を使って、`modelValue`（または任意の名前）を定義する
-2. モーダルの「閉じる」ボタンをクリックしたら、この値が `false` になるようにする
-3. 親コンポーネントから `v-model` で `isCreateModalOpen` を子に渡して動作を確認する
+1. `AppModal.vue`（子コンポーネント）に `defineModel()` で `modelValue` を定義しましょう。
+   `defineModel()` 返り値は、変数 `isOpen` に格納します。
+2. `AppModal.vue` の「閉じる」ボタンをクリックしたら、`isOpen` （`modelValue`）の値を `false` にしましょう。
+3. `app.vue`（親コンポーネント）で `AppModal` コンポーネントへ `v-model` で `isCreateModalOpen` を渡しましょう。
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 

content/ja/09.workspace/01.todo-list/09-1.v-slot/index.md

@@ -79,8 +79,8 @@
 
 ## フォールバックコンテンツ（デフォルト）
 
-親から `slot` が渡されなかった場合に、フォールバック（つまりデフォルト）を設定することもできます。
-やり方は、 `slot` タグの間にフォールバックコンテンツを設定します。
+親からスロットコンテンツが渡されなかった場合に、フォールバック（つまりデフォルト）を設定することもできます。
+やり方は `<slot>` 要素の間に、フォールバックコンテンツを設定します。
 
 ```vue
 <!-- AppButton: 子コンポーネント -->
@@ -111,9 +111,10 @@
 
 ## 名前付きスロット
 
-スロットに名前を付けると、1つのコンポーネントに複数の差し込み場所（スロットアウトレット）が作れます。
+`<slot>` に名前を付けると、1つのコンポーネントに複数の差し込み場所（スロットアウトレット）が作れます。
 
 名前付きのスロットコンテンツを渡すためには、 `v-slot` を利用します。（例: `<template v-slot:title>`）
+
 `v-slot` は `#` で省略表記ができます。（例: `<template #:title>`）
 
 ```vue
@@ -140,7 +141,7 @@
 <template>
   <AppModal>
     <template #title>
-      <!-- v-slot. 左のように # で省略表記ができます -->
+      <!-- v-slot. 上のように # で省略表記ができます -->
       <!-- ↓ titleという名前の スロットコンテンツ -->
       <span>✏️</span>
       <span class="padding-start-1">タスクの編集</span>
@@ -203,7 +204,7 @@
 
 ## チャレンジ
 
-### 1. AppModal.vue に slot を追加
+### 1. `AppModal.vue` に `<slot>` を追加
 
 `AppModal.vue` に、
 
@@ -212,13 +213,13 @@
 
 が差し込みできるよう、 `<slot>` を追加してみましょう。
 
-1. `AppModal.vue` の `<h2>新規作成モーダル</h2>` を削除して `<slot name="title" />` を追加
-2. `AppModal.vue` に、モーダルコンテンツを追加するための `<slot />` を追加
+1. `AppModal.vue` の `<h2>新規作成モーダル</h2>` を削除して `<slot name="title" />` を追加しましょう。
+2. `AppModal.vue` に、モーダルコンテンツを追加するための `<slot />` を追加しましょう。
 
-### 1. モーダルに、モーダルタイトルと新規作成フォームを表示
+### 2. `AppModal` コンポーネントに、モーダルタイトルと新規作成フォームの `v-slot` を追加
 
-1. `app.vue` 側で `AppModal.vue` に表示する、モーダルタイトル `<h2>タスクの新規作成</h2>`を追加
-1. `app.vue` 側で `AppModal.vue` に表示する、以下のHTMLを追加
+1. `app.vue` で `AppModal` コンポーネントに、モーダルタイトルの `v-slot` `<template #title><h2>タスクの新規作成</h2></template>` を追加しましょう。
+1. `app.vue` で `AppModal` コンポーネントに、 `v-slot` （名前なし）に、以下のHTMLを追加しましょう。
 
 ```html
 <form>

content/ja/09.workspace/01.todo-list/09-2.todo-app-goal/index.md

@@ -1,18 +1,25 @@
 # 復習・まとめ
 
 TODOリストの作成を通して学べる、基本的なVue.jsの機能の説明は以上になります。
+
 それでは、これまで学んだ機能を利用して、TODOリストのアプリケーションを完成させましょう。
+これまで学んだ知識を活かせば実装できます。ぜひ自分のやり方で挑戦してみてください。
+
+## 現在の実装の課題
+
+タスクの新規作成モーダルに、タイトル、メモ、期限を入力して、「登録」ボタンをクリックしても、
+TODOリストにタスクを追加することがきません。
 
 ## チャレンジ
 
-フォームが表示されたら、いよいよ実際にデータを登録できるようにして、TODOリストを完成させましょう！
-これまで学んだ知識を活かせば実装できます。ぜひ自分のやり方で挑戦してみてください。
+タスクの新規作成モーダルで入力されたフォーム（タイトル、メモ、期限）データを、
+フォーム送信で、TODOリストへタスク追加できるようにしましょう。
 
 **実装のヒント（例）**
 
 1. 各フォーム入力欄に対応するリアクティブ変数（ `ref` ）を用意し、 `v-model` でフォームと同期させる
 2. フォームの submitイベントに `handleSubmit` などの関数を渡す
-3. `handleSubmit` 内で、以下の情報を持つ新しい `Todo` オブジェクトを作成し、 `todos.value` の先頭に追加
+3. `handleSubmit` 内で、以下の情報を持つ新しい `Todo` オブジェクトを作成し、 `todos.value` の先頭に追加する
    - フォームから入力された値
    - `done: false`（新規作成時は未完了）
    - `id: Date.now()`（一意なID）