Vue.jsは、まだまだその技術書が少なく、入門書と言いながらも分かりにくかったり、不要な情報に振り回されることが多いのが現状です。本書では、Vueに関する基本的な情報に重点を置いています。入門書の定番であるTODOアプリの作成をしていきますが、構文の説明だけでなくどのような場面で使うのかなど、できる限り実践に即して解説しています。本書の目的は「Webアプリの実装を通し、最新バージョンであるVue3の基本的な動きを理解する」ことです。
【目次】
第1章 Vueの準備
第2章 VSCodeの設定
第3章 GitHubとVercelの設定
第4章 Vueの基本
第5章 TODOアプリ
第6章 TODOの登録
第7章 TODOの一覧表示
第8章 TODOの編集・削除
第9章 ロジックの分離
第10章 TODOのチェック
第11章 その他の重要機能
第12章 ライフサイクル
第13章 Vue Router
第14章 外部API連携
第1章 Vueの準備
第2章 VSCodeの設定
第3章 GitHubとVercelの設定
第4章 Vueの基本
第5章 TODOアプリ
第6章 TODOの登録
第7章 TODOの一覧表示
第8章 TODOの編集・削除
第9章 ロジックの分離
第10章 TODOのチェック
第11章 その他の重要機能
第12章 ライフサイクル
第13章 Vue Router
第14章 外部API連携
目次プレビュー
- はじめに
- 第1章 Vueの準備
- 第2章 VSCodeの設定
-
1.1 実行環境
-
1.2 Viteでプロジェクトを作成する
-
1.3 Vueアプリを確認する
-
1.4 Vueアプリを終了する
-
2.1 プロジェクトを開く
-
2.2 拡張機能をインストールする
-
2.3 Prettierの設定を行う
-
2.4 Prettierの設定を確認する
-
3.1 リポジトリーを作成する
-
3.2 ソースを連携する
-
3.3 ページをWebに公開する
-
5.1 サンプルアプリ
-
5.2 レイアウトを決める
-
5.3 リセットCSSでデザインしやすくする
-
5.4 コンポーネントを理解する
-
5.5 ヘッダー、フッターをコンポーネント化する
-
5.6 コミットとプッシュを行う
-
5.7 scopedとは
-
6.1 入力欄を作る
-
6.2 入力欄と値を連動させる
-
6.3 マスタッシュ構文とは
-
6.4 @clickを使ってみよう
-
6.5 アロー関数とは
-
6.6 ローカルストレージに登録する
-
6.7 TODOをリスト化する
-
7.1 TODO一覧をイメージする
-
7.2 繰り返し構文
-
7.3 TODOを繰り返し表示する
-
8.1 編集の仕様
-
8.2 入力欄にTODOを表示する
-
8.3 条件によってボタンを表示する
-
8.4 v-ifとv-showの使い分け
-
8.5 非表示ラッパーとは
-
8.6 ローカルストレージの値を変更する
-
8.7 TODOを削除する
-
9.1 ロジックを分離する
-
9.2 分離ロジックの使い方
-
9.3 分離ロジックのリファクタリング
-
9.4 分離ロジックで置き換える
-
10.1 チェック情報を追加する
-
10.2 チェックを保存する
-
10.3 データバインディング（v-bind）
-
12.1 ライフサイクルフック
-
12.2 onMounted
-
12.3 onUpdated
-
12.4 onUnmounted
-
14.1 JSON Placeholderとは
-
14.2 Fetch APIでデータを取得する
-
14.3 ブログの詳細ページを作る
