Vue.js&Nuxt.js超入門
秀和システム
著者：掌田津耶乃
はじめに
目次
Chapter1 Vue.jsを使ってみよう
1-1 Vue.jsのセットアップ
フロントエンドの開発って？
フレームワークってなに？
Vue.jsってどんなもの？
Vue.jsを利用するために必要なもの
scriptタグ1つで使えるように！
Vue.jsでメッセージを表示しよう
Vue.js devtoolsを用意しよう
機能拡張の設定をする
デベロッパーツールを開こう
スタンドアロン版を使うには？
スタンドアロン版を起動する
1-2 より本格的なプロジェクト
プロジェクトとしての開発
Node.jsのインストール
Vue CLIをインストールする
プロトタイプを動かす
1-3 プロジェクトを作ろう
プロジェクトってなに？
hello_appプロジェクトを作る
プロジェクトを実行しよう
プロジェクトの中身をチェック！
プロジェクトをビルドする
GUIツールを使おう！
プロジェクトを作成してみる
プロジェクトの内容
プロジェクトを操作しよう
この章のまとめ
Chapter2 Vue.jsの基本をマスターしよう
2-1 Vue.jsの基本的な仕組み
基本コードをチェックしよう
Vueオブジェクトについて
データの橋渡し
Vueのデータは活きている！
入力テキストをリアルタイムに表示！
{{}}は値だけじゃない！
2-2 レンダリングをマスターする
renderの使い方
renderを使ってみる
ソースコードをチェックしよう
アロー関数は難しい！
引数の関数について
仮想DOMについて
属性を設定しよう
子ノードの組み込み
複雑なVNodeを作るには？
2-3 テンプレート構文を覚えよう
テンプレート構文とは
v-htmlでHTMLを出力する
v-htmlを使ってリストを増やそう
属性に値をバインドする
オブジェクト構文について
v-bind:classにオブジェクトを設定する
スタイルとオブジェクト構文
v-bind:styleにオブジェクトを指定する
v-ifによる条件付きレンダリング
複雑な表示はtemplateタグ！
v-forによるリストレンダリング
インデックス番号の取得
オブジェクトをv-forする場合は？
v-forとv-ifの併用
この章のまとめ
Chapter3 コンポーネントを使おう
3-1 コンポーネントの基本をマスター！
コンポーネントってなに？
コンポーネントの定義と利用
helloコンポーネントを作ってみる！
変数をコンポーネントに渡す
属性の利用
3-2 v属性を使いこなす
v-bindで属性を設定する
v-modelで値をバインド！
v-onでイベントをバインドする
イベント処理を別途用意する
イベント処理とmethods
算術プロパティについて
ローカルコンポーネント
3-3 プロジェクトによる開発
プロジェクトで開発しよう！
main.jsの役割
App.vueをチェックする
index.htmlについて
結局、何がどうなってるの？
HelloWorldコンポーネントを修正する
App.vueを修正する
v-onによるイベントの利用
AppからHelloWorldに値を渡す
子コンポーネントから親コンポーネントへ！
3-4 計算アプリを作ろう
Calcコンポーネントで計算！
作成するプログラムの内容
Calc.vueを作成する
Calcの構成
Appコンポーネントの構成
この章のまとめ
Chapter4 コンポーネントを更に掘り下げる！
4-1 プロパティを強化する
Vue.jsを使いこなすには？
プロパティのバリデーション
より詳しいバリデーションを！
算出プロパティのGetter/Setter
監視プロパティについて
4-2 イベントを掘り下げる
イベントの修飾子について
イベントの伝搬を考えよう
イベントの流れを調べよう
キーイベントについて
キーイベントの修飾子について
機能キーの組み合わせ
ボタンの修飾子
4-3 テンプレートを考える
組み込まれる側の表示
スロットを使おう
名前付きスロットを使う
スロットに値を設定する
renderメソッドを利用する
JSXで書く！
Vueオブジェクトで使う場合は？
JSXに値を埋め込む
4-4 トランジションとアニメーション
トランジションで状態操作
フェードイン/フェードアウト
イベントを追加
transformで動かす
transformを試してみよう
キーフレームによる複雑なアニメーション
この章のまとめ
Chapter5 Nuxt.jsにアップグレード！
5-1 Nuxt.jsってなに？
Vue.jsの弱点は？
そこで、Nuxt.jsだ！
手作業でアプリを作ろう！
ページを作る
本式にプロジェクトを作ろう
プロジェクトのフォルダ構成をチェック！
5-2 Nuxt.jsプロジェクトの基本
デフォルトページはどうなってる？
layouts/default.vueをチェック
pages/index.vueをチェック
コンテンツを書こう！
他のページも用意しよう
パラメーターを利用する
idとpassをパラメーターで渡す
パラメーターのチェック
5-3 Vuexによる状態管理
コンポーネント間の値の管理
「store」フォルダにスクリプトを配置する
ステートに値を保管する
ストアの値を利用する
ストアの値は変更できない？
ミューテーションを使う
counterを操作するミューテーション
ミューテーションの引数指定
typeを利用したオブジェクト引数
アクションを利用する
値をずっと保持するには？
vuex-persistedstateとモードについて
Vuexでvuex-persistedstateを利用する
5-4 メモアプリを作ろう！
アプリ作成に挑戦！
プロジェクトを作る
store/memo.jsを作成する
クラシックモードからモジュールモードへ！
memoストアに用意するもの
memo.vueを作成する
memo.vueのテンプレートをチェック！
memo.vueのスクリプトをチェック！
この章のまとめ
Chapter6 外部サービスを利用しよう！
6-1 axiosで外部サイトにアクセス！
「データ」の扱いはどうする？
axiosでサイトにアクセスするには？
非同期処理ってなんだ？
README.mdを表示する
asyncDataについて
JSONデータのサイトを活用しよう
自分で非同期通信するときは？
入力したIDのデータを表示する
エラー対策はどうする？
6-2 FirebaseとREST API
データベースサービスを使おう！
Firebaseってなに？
プロジェクトを作ろう
データベースを作ろう
データベースにアクセスしよう
Nuxt.jsからデータベースにアクセスする
特定のデータを表示しよう！
6-3 Firebaseアクセスをマスターしよう
インデックスを追記する
キーによる検索を書き直す
年齢の範囲を指定して検索する
データを追加しよう
データの削除
Firebaseのポイントは、アドレス！
6-4 Firebase APIを活用しよう！
ソーシャルログインが使える！
Authenticationにアクセス！
Firebase APIをインストールする
Google認証の使い方
Google認証を使ってみる
ログイン状態でデータベースアクセスするには？
ミニ伝言板を作ってFirebase APIをマスター！
データベースのアクセス権を設定する
board.vueを作成する
Firebase APIを使う
データを取得する
この章のまとめ
これから先はどうするの？
Addendum JavaScriptオブジェクト超入門
A-1 JavaScriptの基本を超簡単おさらい！
この章の目的は？
値と変数について
制御構文について
配列について
関数について
アロー関数について
A-2 オブジェクトをマスターしよう
オブジェクトについて
オブジェクトを使う
メソッドについて
コンストラクタ関数
クラスを使おう
スクリプトファイルの読み込み
モジュールについて
export defaultについて
モジュールはVue.jsでは必須！
Vue.jsのために必要な知識とは？
索引