目次

はじめに
第1章　Vueの準備
1.1　実行環境
1.2　Viteでプロジェクトを作成する
1.3　Vueアプリを確認する
1.4　Vueアプリを終了する
第2章　VSCodeの設定
2.1　プロジェクトを開く
2.2　拡張機能をインストールする
2.3　Prettierの設定を行う
2.4　Prettierの設定を確認する
第3章　GitHubとVercelの設定
3.1　リポジトリーを作成する
3.2　ソースを連携する
3.3　ページをWebに公開する
第4章　Vueの基本
4.1　SPA（Single Page Application）
4.2　単一ファイルコンポーネント
4.3　Options APIとComposition API
4.4　Vue3.2のsetup
4.5　Vueを起動する
第5章　TODOアプリ
5.1　サンプルアプリ
5.2　レイアウトを決める
5.3　リセットCSSでデザインしやすくする
5.4　コンポーネントを理解する
5.5　ヘッダー、フッターをコンポーネント化する
5.6　コミットとプッシュを行う
5.7　scopedとは
第6章　TODOの登録
6.1　入力欄を作る
6.2　入力欄と値を連動させる
6.3　マスタッシュ構文とは
6.4　@clickを使ってみよう
6.5　アロー関数とは
6.6　ローカルストレージに登録する
6.7　TODOをリスト化する
第7章　TODOの一覧表示
7.1　TODO一覧をイメージする
7.2　繰り返し構文
7.3　TODOを繰り返し表示する
第8章　TODOの編集・削除
8.1　編集の仕様
8.2　入力欄にTODOを表示する
8.3　条件によってボタンを表示する
8.4　v-ifとv-showの使い分け
8.5　非表示ラッパーとは
8.6　ローカルストレージの値を変更する
8.7　TODOを削除する
第9章　ロジックの分離
9.1　ロジックを分離する
9.2　分離ロジックの使い方
9.3　分離ロジックのリファクタリング
9.4　分離ロジックで置き換える
第10章　TODOのチェック
10.1　チェック情報を追加する
10.2　チェックを保存する
10.3　データバインディング（v-bind）
第11章　その他の重要機能
11.1　リアクティブ変数
11.2　算出プロパティー
11.3　コンポーネント間のやりとり（親から子へ）
11.4　コンポーネント間のやりとり（子から親へ）
第12章　ライフサイクル
12.1　ライフサイクルフック
12.2　onMounted
12.3　onUpdated
12.4　onUnmounted
第13章　Vue Router
13.1　インストール
13.2　Vue Routerを使うための準備をする
13.3　ルートを設定する
13.4　ページを追加してみよう
13.5　遅延ローディングルートとは
13.6　404ページに誘導する
13.7　リンクからページ遷移する
13.8　プログラムからページ遷移する
13.9　動的ルート
13.10　パラメータ渡し
13.11　リアクティブの監視
第14章　外部API連携
14.1　JSON Placeholderとは
14.2　Fetch APIでデータを取得する
14.3　ブログの詳細ページを作る
おわりに

はじめに

　私はVue.jsを学習するにあたり、まだまだその技術書が少なく、Vue.jsに限らず入門書と言いながらもわかりにくかったり、不要な情報に振り回されている本が多いと感じました。本書はそのようなことがないよう、極力Vueに関することに重点を置いていきたいと思います。


　本書の目的は「Webアプリの実装を通し、Vue3の基本的な動きを理解する」ことです。


　JavaScriptを取り巻く環境は、ここ数年で劇的に変わりました。ターゲットは自分のようなエンジニアでありながら、モダンなJavaScriptに置いて行かれた、けれど学びたい人向けです。対象読者は全くのWeb初心者ではなく、JavaScriptの経験があり、後述の「前提」の条件を満たすことのできる人を想定しています。


　サンプルとして作成するWebアプリは最終的にWeb上に公開できるところまでを記述していますが、Web上に公開する必要がない、またはしたくない場合は、その操作を省略するだけで続けることができます。

　本書は全体を通してひとつのアプリを作成するだけのものと捉えられるかもしれませんが、基本的なものは詰まっておりますので、次のアプリを作成する際の教科書的なものとすることができます。


　プログラミング経験者にとって実際に動くものがあるというのは、土台を手に入れたようなものです。そこから応用や他の機能を試すことができます。入門書という一冊を通して、自分の土台作りができるものがあればいいなと思い執筆しました。


　構文の説明だけでなくどのような場面で使うのかなど、できる限り実践に即して書いております。Vueの歴史やreactなどとの比較、最初に学ばなくてもよい機能やツールについては触れておりません。それにより、入門には最適なものになったと思っております。

　自身が初学者だった気持ちを忘れず、なるべくわかりやすい説明を入れ、最後まで一緒に完走できるように尽くしました。


　それでは早速始めていきましょう！


前提

　・（必須）Node.js、パッケージマネージャー（npm/yarn）がインストールされていること。

　・（任意）使用するエディターは何でもいいのですが、本書はMicrosoft社の「Visual Studio Code」（VSCode）を使用していきます。
　※同じエディターを使用していただくことで説明がわかりやすくなる場合があります。

　・（Web公開する場合）git（https://git-scm.com）がインストールされていること。

　・（Web公開する場合）GitHub（https://github.com）がインストールされていること。

　・（Web公開する場合）Vercel（https://vercel.com）のアカウントを持っていること。
　※GitHubアカウントでログインしてもらえると、GitHubとVercelの連携がスムーズになります。

第1章　Vueの準備

　Vueでアプリを作るための準備をします。この章ではVueで新規プロジェクトを作り、実際に動くところまでの準備をします。


　♦ここで学べること

　・Vueプロジェクトの作成

　・Vueプロジェクトの開始と終了

1.1　実行環境

　参考までに本書の実行環境を紹介します。本書のバージョン以上になるようにしてください。

# ターミナル or コマンドラインで実行

$ node -v

v16.13.0


$ npm -v

8.1.2


$ yarn -v

1.22.10

1.2　Viteでプロジェクトを作成する

　Vue3インストールは公式に提供されているVue CLIを利用するのが一般的でしたが、本書はVite（ヴィート）を使ってインストールしていきます。


　Viteは最近出てきたビルドツールですが、Vueを作ったEvan You氏が開発しており、Vue公式ページにもViteでのインストール方法が記載されています。今後はViteを使っての開発が一般的になることでしょう。今までのビルドツールより、かなり高速に実行することができます。


　ターミナルあるいはコマンドラインでプロジェクトを作成したい任意のフォルダーに移動し、以下のコマンドを実行します。プロジェクト名（Webアプリ名）は何でもいいですが、本書では「my-vite-todo」とします。

# npmの場合

$ npm init vite@latest my-vite-todo -- --template vue


# yarnの場合

$ yarn create vite my-vite-todo --template vue

　任意のフォルダーにプロジェクト名の「my-vite-todo」フォルダーが生成されていれば、成功です。

1.3　Vueアプリを確認する

　それでは、Vueの最初のアプリを動かしてみましょう。以下のコマンドを実行してください。

# npmの場合

$ cd my-vite-todo

$ npm install

$ npm run dev


# yarnの場合

$ cd my-vite-todo

$ yarn

$ yarn dev

　これで開発用のサーバーが起動できましたので、ブラウザーを起動し、以下のアドレスにアクセスしてください。

　http://localhost:3000/

　以下のような画面が表示されれば、Vue3アプリの最初の関門は突破できました！

図1.1:

1.4　Vueアプリを終了する

　開発用のサーバーを止めるには、ターミナルあるいはコマンドラインで「Ctrl+C」を押下します。次の章から開発用サーバーはVSCodeから動かしていくので、今は止めたままで大丈夫です。

試し読みはここまでです。
この続きは、製品版でお楽しみください。