導入部
  • テキスト資料を必ず参照してください
CodeSandbox で始める Vue プロジェクト
  • CodeSandbox で初めての Vue プロジェクトを作ろう
  • main.js が Vue のアプリケーションを始めるためのエントリーポイントになっている
  • App.vue を変更してみよう
  • Style 機能を使って見た目を変えてみよう
  • Scoped CSS を使って、メンテナブルな CSS を書こう
  • 初めての Vue Component の import と使用
  • 普通の Web Page を Vue の Component を活かしながら作成する
  • main.js における new Vew() の設定項目詳細
  • Scoped CSS の例外的挙動について
宣言的レンダリングと Reactive Data
  • 値の変化に追従する UI を作成するのに便利
  • Vue の template から参照できるのは Reactive Data のみ
  • DOM がクリックされた時にメソッドを実行する
  • @click で実行するメソッドに引数を渡す
  • クリックすると 1 増えるようにする
  • 任意の値分数値を増やせるようにする
  • Computed を使って、Reactive Data を元に、計算を加えた Reactive な値を作る
  • Class を動的に変化させて、スタイルを変化させる
  • Template から参照できる変数, View への bind
v-for を使いこなしてバスケットボールチーム名簿を作る
  • v-for を活用して配列をレンダリングする
  • object を持った配列に対して v-for を適用する
  • key に一意=絶対に被らない値を与える
  • 身長の高さで色を変える
Props を使ってコンポーネントからコンポーネントへでデータを渡す
  • Props の基礎
  • 複数の Props を渡す
  • 受け取った Props をさらに Props として子コンポーネントに渡す
  • 受け取った Props と Computed を組み合わせて使う
  • 状態を変更するメソッドを props として渡す
Map, Filter を身につけるために JavaScript 寺子屋をやってほしい
  • Map, Filter を身につけるために JavaScript 寺子屋をやってほしい
Vue 基礎実践アプリケーション
  • reactive なデータの定義と描画
  • Component への分割と Props の受け渡し
  • Component をさらに細かく Component に分ける
  • Method を Component に Props として渡していく
  • 身長を変更するために必要な値を引数として受け取る
  • 配列の中にオブジェクトがしまわれた data を変更する複雑なメソッドを定義する
  • Computed を活用し、身長順に並べ替えたリストを表示する
  • Template を使って v-for の可読性をあげる
Vue-router を使ってページを遷移させる
  • Vue-router を使う準備をする
  • Routing の設定をする
  • Router-link を使ってページを移動する
  • Dynamic Route Matching を使って動的に変化する URL を活用する
  • メンバーのプロフィール情報から router-link を作る
  • this.$route.params.id とプロフィール情報を使ってページを作る
  • 404 not found ページと、存在しない選手ページを作る
Vuex で状態管理の複雑さと戦う
  • Vuex はどんな時に便利？
  • Vuex, store の設定と state の参照
  • Mutation で state を変更する / mutation を実行する（commit）
  • State を直接参照せず、getter 経由で参照することを強く推奨する
  • mutaion に直接 commit せず、action 経由で実行することを強く推奨する
  • Vuex を使うことでバケツリレーが必要なくなったので色々やってみよう
  • Vuex 総復習
  • Vuex の Modules 機能
Vuex と input 要素を組み合わせてサーチ風機能を作る
  • Vuex の復習と準備
  • input 要素が変更された時のイベントをつかまえてメソッドを実行する
  • Action を発行し、mutation を経由して state を変更する
  • MyJSON というサービスを使って、ダミーの API を作る
  • Axios, async/await を使って非同期にデータを取得する
  • action の中で複数の commit を実行することで Loading 機能を追加する
GIPHY を使った画像検索アプリケーション
  • GIPHY API から画像データを取得する
  • 取得した image url を使って img 要素を作る
  • なんとなくスタイリングする