From fe8d0b102e53b141a615d7a2aad3406f3bf69252 Mon Sep 17 00:00:00 2001 From: Kazuyuki Miyake Date: Wed, 30 Jul 2025 14:24:58 +0900 Subject: [PATCH] Add Vue TODO application template with conditional rendering and assets --- .../3.conditional/.template/files/app.vue | 288 +++++++++++++++++ .../files/assets/check-circle-gray.svg | 1 + .../files/assets/check-circle-green.svg | 1 + .../.template/files/assets/close-gray.svg | 1 + .../.template/files/assets/person-gray.svg | 1 + .../3.conditional/.template/index.ts | 10 + .../3.conditional/.template/solutions/app.vue | 300 ++++++++++++++++++ .../solutions/assets/check-circle-gray.svg | 1 + .../solutions/assets/check-circle-green.svg | 1 + .../.template/solutions/assets/close-gray.svg | 1 + .../solutions/assets/person-gray.svg | 1 + .../1.todo-list/3.conditional/index.md | 72 +++++ 12 files changed, 678 insertions(+) create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/files/app.vue create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-green.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/close-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/person-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/index.ts create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/app.vue create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-green.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/close-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/person-gray.svg create mode 100644 content/ja/9.workspace/1.todo-list/3.conditional/index.md 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 @@ + + + + + diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-gray.svg new file mode 100644 index 00000000..8b64f7f4 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-green.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-green.svg new file mode 100644 index 00000000..b260e8a3 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/check-circle-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/close-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/close-gray.svg new file mode 100644 index 00000000..751b33ff --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/close-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/person-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/person-gray.svg new file mode 100644 index 00000000..246115d7 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/files/assets/person-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/index.ts b/content/ja/9.workspace/1.todo-list/3.conditional/.template/index.ts new file mode 100644 index 00000000..ef7e2068 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/index.ts @@ -0,0 +1,10 @@ +import type { GuideMeta } from '~/types/guides' + +export const meta: GuideMeta = { + startingFile: 'app.vue', + features: { + terminal: false, + fileTree: false, + navigation: false, + }, +} diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/app.vue b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/app.vue new file mode 100644 index 00000000..31a925a5 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/app.vue @@ -0,0 +1,300 @@ + + + + + diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-gray.svg new file mode 100644 index 00000000..8b64f7f4 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-green.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-green.svg new file mode 100644 index 00000000..b260e8a3 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/check-circle-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/close-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/close-gray.svg new file mode 100644 index 00000000..751b33ff --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/close-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/person-gray.svg b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/person-gray.svg new file mode 100644 index 00000000..246115d7 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/.template/solutions/assets/person-gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/ja/9.workspace/1.todo-list/3.conditional/index.md b/content/ja/9.workspace/1.todo-list/3.conditional/index.md new file mode 100644 index 00000000..21900606 --- /dev/null +++ b/content/ja/9.workspace/1.todo-list/3.conditional/index.md @@ -0,0 +1,72 @@ +--- +ogImage: true +--- + +# 条件付きレンダリング + +Vueでは `v-if` ディレクティブを使って、ブロックを条件に応じてレンダリングできます。ブロックは、ディレクティブの式が真を返す場合のみレンダリングされます。 + +## `v-if` の基本 + +`v-if` ディレクティブは、指定した式が真の場合のみ要素をレンダリングします。`v-else` は `v-if` に対する "else block" を示すために使用できます: + +```vue + + +``` + +重要なポイント: +- `v-else` 要素は、`v-if` 要素の直後になければなりません +- 条件の式が真の場合のみ、該当する要素がレンダリングされます + +## 現在の実装の課題 + +プレイグラウンドでは、ToDoリストの「完了」欄にボタンとアイコンを表示する部分で、まだ条件分岐ができていません: + +```vue + + + {{ 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が実現できます!