diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/app.vue b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/app.vue
new file mode 100644
index 00000000..a9991baa
--- /dev/null
+++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/app.vue
@@ -0,0 +1,288 @@
+
+
+
+
+
+
+
+
+
+
+ | 完了 |
+ タイトル |
+ メモ |
+ 期限 |
+
+
+
+
+ |
+
+ {{ todo.done }}
+ |
+ {{ todo.title }} |
+ {{ todo.note }} |
+ {{ todo.dueDate }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 完了 |
+ タイトル |
+ メモ |
+ 期限 |
+
+
+
+
+ |
+
+
+ |
+ {{ todo.title }} |
+ {{ todo.note }} |
+ {{ todo.dueDate }} |
+
+
+
+
+
+
+
+
+ {{ todo.done }}
+ |
+```
+
+現在は固定のテキストが表示されているだけで、ToDoの完了状態に応じたアイコンの切り替えができていません。
+
+## チャレンジ
+
+`` 内に `v-if` と `v-else` を使って、完了状態（`todo.done`）に応じて異なるボタンとアイコンを表示してください：
+
+1. `todo.done` が `true` の場合：緑色のチェック付きアイコンを含むボタンを表示
+2. `todo.done` が `false` の場合：グレーの丸いアイコンを含むボタンを表示
+3. 各ボタンには適切な `alt` 属性を設定してアクセシビリティを向上させます
+
+参考実装：
+```vue
+
+
+```
+
+::note
+`v-else` 要素は、`v-if` 要素の直後になければなりません。それ以外の場合は認識されません。
+::
+
+## 実装後の効果
+
+`v-if` と `v-else` を実装すると：
+- 各ToDoの完了状態に応じてアイコンが切り替わります
+- 条件付きレンダリングの基本概念が理解できます
+- より動的で視覚的に分かりやすいUIになります
+
+もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
+
+:ButtonShowSolution
+
+`v-if` と `v-else` を使うことで、状態に応じた柔軟なUIが実現できます！
| 
+ {{ userName }}
+