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