diff --git a/content/ja/9.workspace/1.todo-list/2.list-rendering/.template/files/app.vue b/content/ja/9.workspace/1.todo-list/2.list-rendering/.template/files/app.vue
new file mode 100644
index 00000000..ef04b48c
--- /dev/null
+++ b/content/ja/9.workspace/1.todo-list/2.list-rendering/.template/files/app.vue
@@ -0,0 +1,286 @@
+
+
+
+
+
+
+
+
+
+
+ | 完了 |
+ タイトル |
+ メモ |
+ 期限 |
+
+
+
+
+
+ | {{ todos[0].done }} |
+ {{ todos[0].title }} |
+ {{ todos[0].note }} |
+ {{ todos[0].dueDate }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 完了 |
+ タイトル |
+ メモ |
+ 期限 |
+
+
+
+
+
+ | {{ todo.done }} |
+ {{ todo.title }} |
+ {{ todo.note }} |
+ {{ todo.dueDate }} |
+
+
+
+
+
+
+
+ | {{ todos[0].done }} |
+ {{ todos[0].title }} |
+ {{ todos[0].note }} |
+ {{ todos[0].dueDate }} |
+
+```
+
+この方法では：
+- 1件目のデータしか表示されない
+- データが増えても自動で表示されない
+
+## チャレンジ
+
+現在の固定インデックス `[0]` による参照を `v-for` を使った動的なレンダリングに変更してください：
+
+1. `` 内の固定の `` 要素を `v-for` を使って書き換えます
+2. `v-for="todo in todos"` を使って全ての ToDoアイテムを動的にレンダリングします
+3. 各項目に一意の `:key="todo.id"` 属性を指定します
+
+::note
+`key` 属性は、Vue に各ノードを一意に追跡するためのヒントを与え、既存の要素を再利用して並べ替えを適用できるようにする際に必要となります。
+::
+
+## 実装後の効果
+
+`v-for` を実装すると：
+- 配列内の全てのToDoアイテムが表示される
+- データが追加・削除されても自動で表示が更新される
+- より保守性の高いコードになる
+
+もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
+
+:ButtonShowSolution
+
+`v-for` を使うことで動的なデータ表示がとても簡単になりましたね！
\ No newline at end of file
+ {{ userName }}
+