Vue.js勉強記録 目次

■CHAPTER1 Vueを使ってみよう

・1-1 Vue3のセットアップ

・1-2より本格的なプロジェクト

・1-3プロジェクトを作ろう

■CHAPTER2 Vue3の基本をマスターしよう！

・2-1 Vue3の基本的な仕組み

-基本コードをチェックしよう
-Vue3の基本コードについて
-データの橋渡し
-Vue3のデータは活きている！
-mountedについて
-アロー関数について
-タイマーを停止する
-createdで初期化する
-必要なものはすべて内部に用意する！
-{{}}は値だけじゃない！

・2-2 要素と表示を考える

-HTML要素を出力する
-JavaScriptエクスプレッション
-mapによる繰り返し処理
-スタイルとBootstrap
-Bootstrapの基本的なクラス
-コンテンツの表示デザインに関するクラス

・2-3 v属性を活用しよう

-v属性について
-属性に値をバインドする
-オブジェクト構文について
-v-bind:classにオブジェクトを設定する
-スタイルとオブジェクトを指定する
-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コンポーネントの構成
-この章のまとめ

■コンポーネントを更に掘り下げる！

・4-1 レンダリングとJSX

-Vue3を使いこなすには?
-renderによる描画
-renderでHTMLを出力できる?
-h関数を利用する

-JSXについて
-propsを使う
-属性の指定

・4-2 プロパティを強化する

-プロパティのバリデーション
-より詳しいバリデーションを！

-算出プロパティのGetter / Setter
-ウォッチャについて

・4-3 イベントを掘り下げる

-イベントの修飾子について
-イベントの伝搬を考えよう
-イベントの流れを調べよう

-キーイベントについて
-キーイベントの修飾子について

-機能キーの組み合わせ
-ボタンの修飾子

・4-4 スロットを使いこなす

-組み込まれる側の表示
-スロットを使おう
-名前付きスロットを使う
-スロットに値を設定する

・4-5 トランジションとアニメーション

-トランジションで状態操作
-フェードイン / フェードアウト

-イベントを追加
-transformで動かす
-transformを試してみよう

-キーフレームによる複雑なアニメーション
-この章のまとめ

■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利用の注意事項
-この章のまとめ

■外部サービスを利用しよう！

・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利用のポイント
-この章のまとめ
-これから先はどうするの？

■番外編