Vue.js 3 超入門
書籍情報
発売日 : 2020年12月19日
著者／編集 : 掌田津耶乃
出版社 : 秀和システム
発行形態 : 単行本
書籍説明
目次
Chapter1 Vueを使ってみよう！
1-1 Vue3のセットアップ
フロントエンドの開発って？
フレームワークってなに？
Vue3ってどんなもの？
Vue ver.2とVue3は別のもの！
Vue3を利用するために必要なもの
＜script＞タグ1つで使えるように！
Vue3でメッセージを表示しよう
Vue.js devtoolsを用意しよう
機能拡張の設定をする
デベロッパーツールを開こう
スタンドアロン版について
1-2 より本格的なプロジェクト
プロジェクトとしての開発
Node.jsのインストール
Vue CLIをインストールする
プロトタイプを動かす
1-3 プロジェクトを作ろう
プロジェクトってなに？
hello_appプロジェクトを作る
プロジェクトを実行しよう
プロジェクトの中身をチェック！
プロジェクトをビルドする
もう1つのプロジェクト生成ツール「Vite」
GUIツールを使おう！
プロジェクトを作成してみる
プロジェクトの内容
プロジェクトを操作しよう
開発ツールについて
Visual Studio Codeのインストール
Visual Studio Codeでプロジェクトを開く
この章のまとめ
Chapter2 Vue3の基本をマスターしよう！
2-1 Vue3の基本的な仕組み
基本コードをチェックしよう
Vue3の基本コードについて
データの橋渡し
Vue3のデータは活きている！
mountedについて
アロー関数について
タイマーを停止する
createdで初期化する
必要なものはすべて内部に用意する！
{{}}は値だけじゃない！
2-2 要素と表示を考える
HTML要素を出力する
JavaScriptエクスプレッション
mapによる繰り返し処理
スタイルとBootstrap
Bootstrapの基本的なクラス
コンテンツの表示デザインに関するクラス
2-3 v属性を活用しよう
v属性について
属性に値をバインドする
オブジェクト構文について
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について
結局、何がどうなってるの？
index.htmlを修正する
HelloWorldコンポーネントを修正する
App.vueを修正する
v-onによるイベントの利用
AppからHelloWorldに値を渡す
子コンポーネントから親コンポーネントへ！
テンプレート参照について
テンプレート参照を使う
3-4 計算アプリケーションを作ろう
Calcコンポーネントで計算！
作成するプログラムの内容
Calc.vueを作成する
Calcの構成
Appコンポーネントを作る
Appコンポーネントの構成
この章のまとめ
Chapter4 コンポーネントを更に掘り下げる！
4-1 レンダリングとJSX
Vue3を使いこなすには？
renderによる描画
renderでHTMLを出力できる？
h関数を利用する
JSXについて
propsを使う
属性の指定
4-2 プロパティを強化する
プロパティのバリデーション
より詳しいバリデーションを！
算出プロパティのGetter/Setter
ウォッチャについて
4-3 イベントを掘り下げる
イベントの修飾子について
イベントの伝搬を考えよう
イベントの流れを調べよう
キーイベントについて
キーイベントの修飾子について
機能キーの組み合わせ
ボタンの修飾子
4-4 スロットを使いこなす
組み込まれる側の表示
スロットを使おう
名前付きスロットを使う
スロットに値を設定する
4-5 トランジションとアニメーション
トランジションで状態操作
フェードイン／フェードアウト
イベントを追加
transformで動かす
transformを試してみよう
キーフレームによる複雑なアニメーション
この章のまとめ
Chapter5 Vue3を更にパワーアップしよう！
5-1 Composition APIを使おう
コンポーネントは複雑すぎる！
コンポーネントを作ってみよう
JSXでも使えるの？
dataはダメ！ refを使え！
refで値を表示する
refによる参照の利用
refとreactive
メソッドの利用
setupのcontextについて
従来方式か、Composition APIか？
5-2 Vue Routerによるルーティング管理
複数ページを管理するには？
Vue Routerについて
2つのコンポーネントを用意する
router.jsの作成
routerを利用する
Appを作成する
ページはリロードされているか？
名前付きビューの利用
パラメータの利用
:toの指定について
5-3 Vuexによる状態管理
コンポーネント間の値の管理
Vuexを用意する
Vuexの基本を理解する
store.jsにスクリプトを記述する
ステートに値を保管する
storeをアプリケーションに組み込む
ストアの値を利用する
ミューテーションを使う
counterを操作するミューテーション
ミューテーションの引数指定
typeを利用したオブジェクト引数
アクションを利用する
vuex-persistedstateを利用する
Vuexでvuex-persistedstateを利用する
5-4 メモアプリを作ろう！
アプリケーション作成に挑戦！
プロジェクトを作る
index.htmlの作成
main.jsとApp.vueの作成
store.jsの作成
Memo.vueの作成
Memo.vueのテンプレートをチェック！
Memo.vueのスクリプトをチェック！
算術プロパティについて
onMountedも忘れずに！
Composition API利用の注意事項
この章のまとめ
Chapter6 外部サービスを利用しよう！
6-1 axiosで外部サイトにアクセス！
「データ」の扱いを考えよう
axiosでサイトにアクセスするには？
同期処理と非同期処理
テキストファイルを表示する
コンポーネントをチェックする
onMountedについて
axiosを非同期処理で実行するには？
JSONデータのサイトを活用しよう
入力したIDのデータを表示する
エラー対策はどうする？
ネットワークアクセスの限界
6-2 FirebaseとREST API
データベースサービスを使おう！
Firebaseってなに？
Firebaseプロジェクトを作ろう
プロジェクトのオーバービュー
データベースを作ろう
personデータを作成する
データベースにアクセスしよう
axiosでデータベースにアクセスする
特定のデータを表示しよう！
6-3 Realtime Databaseをマスターしよう
インデックスを追記する
キーによる検索を書き直す
年齢の範囲を指定して検索する
データを追加しよう
データの削除
Realtime Databaseのポイントは、アドレス！
6-4 Firebase SDKを活用しよう！
Firebase SDKとは？
プロジェクトにWebアプリケーションを追加する
CDNによるFirebase SDKの利用
Firebaseの初期化とfirebaseConfig
personデータを表示する
npmでFirebase SDKを利用する
ソーシャル認証を使おう！
Authenticationにアクセス！
Google認証の手順
Google認証を使ってみる
ログイン状態でデータベースアクセスするには？
データベースのアクセス権を設定する
ログインするとデータベースを表示する
6-5 ミニ伝言板を作ろう
ミニ伝言板を作ってFirebaseをマスター！
Viteでアプリケーションを作る
Board.vueを作成する
Firebase SDK利用のポイント
この章のまとめ
これから先はどうするの？
Addendum JavaScript超入門！
A-1 JavaScriptの基本を超簡単おさらい！
この章の目的は？
値と変数について
文の書き方
制御構文について
配列について
関数について
アロー関数について
A-2 オブジェクトをマスターしよう
オブジェクトについて
オブジェクトを使う
メソッドについて
クラスを使おう
Vue3のために必要な知識とは？
1-1 Vue3のセットアップ
フロントエンドの開発って？
フレームワークってなに？
Vue3ってどんなもの？
Vue ver.2とVue3は別のもの！
Vue3を利用するために必要なもの
＜script＞タグ1つで使えるように！
Vue3でメッセージを表示しよう
Vue.js devtoolsを用意しよう
機能拡張の設定をする
デベロッパーツールを開こう
スタンドアロン版について
1-2 より本格的なプロジェクト
プロジェクトとしての開発
Node.jsのインストール
Vue CLIをインストールする
プロトタイプを動かす
1-3 プロジェクトを作ろう
プロジェクトってなに？
hello_appプロジェクトを作る
プロジェクトを実行しよう
プロジェクトの中身をチェック！
プロジェクトをビルドする
もう1つのプロジェクト生成ツール「Vite」
GUIツールを使おう！
プロジェクトを作成してみる
プロジェクトの内容
プロジェクトを操作しよう
開発ツールについて
Visual Studio Codeのインストール
Visual Studio Codeでプロジェクトを開く
この章のまとめ
Chapter2 Vue3の基本をマスターしよう！
2-1 Vue3の基本的な仕組み
基本コードをチェックしよう
Vue3の基本コードについて
データの橋渡し
Vue3のデータは活きている！
mountedについて
アロー関数について
タイマーを停止する
createdで初期化する
必要なものはすべて内部に用意する！
{{}}は値だけじゃない！
2-2 要素と表示を考える
HTML要素を出力する
JavaScriptエクスプレッション
mapによる繰り返し処理
スタイルとBootstrap
Bootstrapの基本的なクラス
コンテンツの表示デザインに関するクラス
2-3 v属性を活用しよう
v属性について
属性に値をバインドする
オブジェクト構文について
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について
結局、何がどうなってるの？
index.htmlを修正する
HelloWorldコンポーネントを修正する
App.vueを修正する
v-onによるイベントの利用
AppからHelloWorldに値を渡す
子コンポーネントから親コンポーネントへ！
テンプレート参照について
テンプレート参照を使う
3-4 計算アプリケーションを作ろう
Calcコンポーネントで計算！
作成するプログラムの内容
Calc.vueを作成する
Calcの構成
Appコンポーネントを作る
Appコンポーネントの構成
この章のまとめ
Chapter4 コンポーネントを更に掘り下げる！
4-1 レンダリングとJSX
Vue3を使いこなすには？
renderによる描画
renderでHTMLを出力できる？
h関数を利用する
JSXについて
propsを使う
属性の指定
4-2 プロパティを強化する
プロパティのバリデーション
より詳しいバリデーションを！
算出プロパティのGetter/Setter
ウォッチャについて
4-3 イベントを掘り下げる
イベントの修飾子について
イベントの伝搬を考えよう
イベントの流れを調べよう
キーイベントについて
キーイベントの修飾子について
機能キーの組み合わせ
ボタンの修飾子
4-4 スロットを使いこなす
組み込まれる側の表示
スロットを使おう
名前付きスロットを使う
スロットに値を設定する
4-5 トランジションとアニメーション
トランジションで状態操作
フェードイン／フェードアウト
イベントを追加
transformで動かす
transformを試してみよう
キーフレームによる複雑なアニメーション
この章のまとめ
Chapter5 Vue3を更にパワーアップしよう！
5-1 Composition APIを使おう
コンポーネントは複雑すぎる！
コンポーネントを作ってみよう
JSXでも使えるの？
dataはダメ！ refを使え！
refで値を表示する
refによる参照の利用
refとreactive
メソッドの利用
setupのcontextについて
従来方式か、Composition APIか？
5-2 Vue Routerによるルーティング管理
複数ページを管理するには？
Vue Routerについて
2つのコンポーネントを用意する
router.jsの作成
routerを利用する
Appを作成する
ページはリロードされているか？
名前付きビューの利用
パラメータの利用
:toの指定について
5-3 Vuexによる状態管理
コンポーネント間の値の管理
Vuexを用意する
Vuexの基本を理解する
store.jsにスクリプトを記述する
ステートに値を保管する
storeをアプリケーションに組み込む
ストアの値を利用する
ミューテーションを使う
counterを操作するミューテーション
ミューテーションの引数指定
typeを利用したオブジェクト引数
アクションを利用する
vuex-persistedstateを利用する
Vuexでvuex-persistedstateを利用する
5-4 メモアプリを作ろう！
アプリケーション作成に挑戦！
プロジェクトを作る
index.htmlの作成
main.jsとApp.vueの作成
store.jsの作成
Memo.vueの作成
Memo.vueのテンプレートをチェック！
Memo.vueのスクリプトをチェック！
算術プロパティについて
onMountedも忘れずに！
Composition API利用の注意事項
この章のまとめ
Chapter6 外部サービスを利用しよう！
6-1 axiosで外部サイトにアクセス！
「データ」の扱いを考えよう
axiosでサイトにアクセスするには？
同期処理と非同期処理
テキストファイルを表示する
コンポーネントをチェックする
onMountedについて
axiosを非同期処理で実行するには？
JSONデータのサイトを活用しよう
入力したIDのデータを表示する
エラー対策はどうする？
ネットワークアクセスの限界
6-2 FirebaseとREST API
データベースサービスを使おう！
Firebaseってなに？
Firebaseプロジェクトを作ろう
プロジェクトのオーバービュー
データベースを作ろう
personデータを作成する
データベースにアクセスしよう
axiosでデータベースにアクセスする
特定のデータを表示しよう！
6-3 Realtime Databaseをマスターしよう
インデックスを追記する
キーによる検索を書き直す
年齢の範囲を指定して検索する
データを追加しよう
データの削除
Realtime Databaseのポイントは、アドレス！
6-4 Firebase SDKを活用しよう！
Firebase SDKとは？
プロジェクトにWebアプリケーションを追加する
CDNによるFirebase SDKの利用
Firebaseの初期化とfirebaseConfig
personデータを表示する
npmでFirebase SDKを利用する
ソーシャル認証を使おう！
Authenticationにアクセス！
Google認証の手順
Google認証を使ってみる
ログイン状態でデータベースアクセスするには？
データベースのアクセス権を設定する
ログインするとデータベースを表示する
6-5 ミニ伝言板を作ろう
ミニ伝言板を作ってFirebaseをマスター！
Viteでアプリケーションを作る
Board.vueを作成する
Firebase SDK利用のポイント
この章のまとめ
これから先はどうするの？
Addendum JavaScript超入門！
A-1 JavaScriptの基本を超簡単おさらい！
この章の目的は？
値と変数について
文の書き方
制御構文について
配列について
関数について
アロー関数について
A-2 オブジェクトをマスターしよう
オブジェクトについて
オブジェクトを使う
メソッドについて
クラスを使おう
Vue3のために必要な知識とは？
著者情報
掌田, 津耶乃
掌田津耶乃
