TODOリスト
このチュートリアルでは、簡易的な「TODOリスト」アプリケーションを作りながら、Vue.js の基礎を体系的に学びます。
ブラウザだけで Nuxt と Vue を使った開発を体験できるため、環境構築に時間をかけずに、すぐに学習を始められます。
学習の流れ
本チュートリアルは、アプリを完成させるステップごとに章が分かれています。 各章では、Vue.js の主要な機能や概念をひとつずつ学びながら進めます。
| 項目 | 内容 |
|---|---|
| 1. リアクティビティー パート1 | ref を使ったリアクティブな状態管理とビューの自動更新 |
| 2. リストレンダリング | v-for を使った配列やリストの繰り返し表示 |
| 3. 条件付きレンダリング | v-if / v-else による条件分岐と UI の切り替え |
| 4. コンポーネント化 | コンポーネント分割 |
| 5. コンポーネント間でのデータ受け渡し | props・emit・v-on をコンポーネント間でのデータ受け渡し |
| 6. フォーム入力バインディング | フォーム要素とデータを同期する v-model の基本と活用 |
| 7. リアクティビティー パート2 | computed によるリアクティブな算出プロパティの利用 |
| 8. コンポーネントの v-model | コンポーネントの v-model 実装と defineModel の使い方 |
| 9. スロット | slot と名前付きスロットで柔軟にコンテンツを差し込む方法 |
| 10. 復習・まとめ | 学んだ要素を組み合わせて TODO リストアプリを完成させるチャレンジ |
使用する技術
このチュートリアルでは、以下の技術・ツールを使用します。
- TypeScript
- JavaScript のスーパーセットで、静的型付けを特徴とする言語です。
- Web開発におけるデファクトスタンダードのため、本チュートリアルでも採用しています。
- Vue.js
- 本チュートリアルは、バージョン 3.5.18 で動作確認しています。
- Vue コンポーネントは、Composition API (
<script setup>) スタイルを採用しています。
- Nuxt
- 本チュートリアルは Nuxt 上で構築されていますが、Nuxt 特有の機能は使用しません。