動かして身につく。RailsAPIとNuxt.jsで作るJWT（JSONWebToken）ログイン認証【22時間超解説】

この動画では、Docker for Macをインストールする手順を解説しています。

00:00 このチャプターについて

00:22 このチャプターで達成すること

00:40 Docker for Macのインストール

02:06 Docker for Macの起動確認

この動画では、Dockerの基礎知識について解説しています。

00:00 この動画で達成すること

00:37 Dockerとは何か?

00:50 仮想環境とは?

01:25 Dockerを使った仮想環境の具体例（コンテナとは?）

02:51 Dockerの特徴（Dockerイメージとは?）

03:30 Dockerfileとは?

04:22 まとめ

この動画では、DockerComposeについて解説しています。

00:00 この動画で達成すること

00:27 webアプリケーションが動く仕組み

02:14 webアプリケーションのDockerコンテナ設計

04:04 DockerComposeとは何か?

05:09 docker-compose.ymlとは?

06:21 まとめ

この動画では、今回作成するアプリケーションの全体像を解説しています。

00:00 このチャプターで達成すること

00:40 開発環境のディレクトリ構成の解説

この動画では、HombrewのインストールとGitのインストールを行います。

00:00 この動画で達成すること

01:06 Homebrewとは?

02:16 Homebrewのインストール

03:26 Homebrew経由でGitをインストール

04:16 現状の整理

05:29 SHELLにGitのパスを通す

07:04 $ vi ~/.zshrc の実行

09:37 Gitの初期設定

10:47 まとめ

この動画では、Rails用のDockerfileを作成します。

00:00 この動画で達成すること

00:49 作業ディレクトリの作成

02:14 Gitリポジトリの作成

02:39 RailsとNuxt.jsを格納するディレクトリを作成

03:41 Rails用のDockerfileを作成する

04:55 Gemファイルの編集

05:20 Gemバージョン指定の書き方

06:14 Dockerfileの編集

この動画では、Rails用のDockerfileを解説します。

00:00 この動画で達成すること

00:37 FROM命令

01:35 ベースイメージのタグ検索方法

04:26 Alpine Linuxとは?

06:42 ARG命令

07:22 ENV命令

08:00 RUN命令

09:15 WORKDIR命令

10:06 COPY命令

12:41 apkコマンド

13:04 apk update

13:28 apk upgrade

13:42 apk add

14:02 --no-cacheオプション（apk add）

14:42 --virtualオプション（apk add）

15:46 bundle install

16:05 -j4オプション（bundle install）

16:25 apk del

17:19 COPY . . 解説

18:13 CMD命令

18:30 rails server -bオプション

18:57 rails server -b 0.0.0.0の意味

この動画では、Nuxt.jsを動かすDockerfileを作成します。

00:00 この動画で達成すること

00:51 Dockerfileの作成

01:32 Dockerfileの編集

01:58 ベースイメージのタグ指定

03:28 環境変数とは?

04:24 HOME, LANG, TZの意味

05:40 LANG=C.UTF-8とは?

07:22 HOST=0.0.0.0の意味

08:27 Nuxt.jsのホストアドレス変更方法

09:17 EXPOSE命令

10:05 まとめ

この動画では、RailsとNuxt.jsのDockerfileをベストな書き方に改善します。

この動画を通して、Dockerfileを自分で書く力を付けましょう。

00:00 この動画で達成すること

00:27 Rails用のDockerfileを改善する

02:05 ベースイメージのパッケージ確認方法

04:16 Nuxt.jsのDockerfileを改善する

05:19 まとめ

この動画では、DockerComposeの環境変数の使い方について解説します。

00:00 この動画で達成すること

00:21 Dockerで環境変数を使用する3つの場所

00:56 DockerComposeで環境変数を定義する4つの方法

01:43 環境変数の流れ

03:12 .envファイルで環境変数を定義する方法

03:39 docker-compose.ymlで変数を展開する方法

04:06 Dockerfileへ環境変数を渡す方法（args）

06:02 コンテナへ環境変数を渡す方法（environment）

06:27 コンテナへ環境変数を渡す方法（env_file）

07:28 まとめ

08:33 本番環境での環境変数の定義

この動画では、ルートディレクトリに3つのファイルを作成します。

00:00 この動画で達成すること

00:56 3つのファイルを作成

01:34 .gitignoreの編集

03:09 .envの編集

04:01 docker-compose.ymlの編集

この動画では、前回作成したdocker-compose.ymlの解説と編集を行います。

00:00 この動画で達成すること

00:21 versionキー

00:49 versionの確認方法

02:13 servicesキー

02:55 imageキー

04:25 TZ変数

04:44 PGTZ変数

05:08 POSTGRES_PASSWORD変数

05:38 volumesキー（dbサービス）

06:11 volumesとは?

09:10 buildキー

10:24 volumesキー（apiサービス）

10:50 depends_onキー

11:44 portsキー

13:20 commandキー

この動画では、Railsアプリを立ち上げ、初期画面をブラウザに表示します。

00:00 この動画で達成すること

00:27 前回までに行ったことをおさらい

01:08 buildコマンドの実行

02:47 Railsアプリ作成コマンドの解説

03:17 runコマンド（docker-compose）

03:43 --rmオプション（docker-compose）

04:20 rails new . コマンド

05:11 -fオプション（rails new）

05:31 -Bオプション（rails new）

05:59 -dオプション（rails new）

06:21 --apiオプション（rails new）

06:35 Railsアプリ作成コマンドの実行

08:06 再buildコマンドの実行

09:29 Railsアプリの立ち上げ・確認

10:56 PG Connection Badエラーの対応

14:17 RailsのDB作成コマンドの実行

15:07 Railsアプリの再起動

15:50 docker-composeコマンドまとめ

18:10 Dockerイメージの削除

この動画では、Nuxt.jsアプリを立ち上げ、初期画面をブラウザに表示します。

00:00 この動画で達成すること

00:49 Nuxt.js作成コマンド実行時のエラー対応

02:12 Nuxt.js作成コマンドの実行

03:00 create nuxt-appコマンドのQ&A解説

06:11 ファイル一式の移動コマンドを実行

07:48 Nuxt.jsアプリの立ち上げ・確認

09:23 ここまでの作業まとめ

10:09 このチャプターまとめ

10:58 次回予告

この動画では、Git管理の全体像とサブモジュールについて解説しています。

00:00 このチャプターで達成すること

00:43 Git管理の全体像

01:34 サブモジュールとは?

03:10 まとめ

この動画では、apiとfrontディレクトリをローカルリポジトリへコミットします。

00:00 この動画で達成すること

00:25 apiリポジトリへのコミット

03:28 frontリポジトリへのコミット

05:15 まとめ

この動画では、rootディレクトリをローカルリポジトリへコミットします。

00:00 この動画で達成すること

00:26 rootリポジトリへのコミット

03:04 サブモジュールの設定ファイル（.gitmodules）の作成

06:18 まとめ

この動画では、GitHubへSSH接続するための設定を行います。

00:00 この動画で達成すること

01:10 SSHとは?

01:38 SSHの認証方法

02:17 公開鍵認証方式の仕組み

03:25 秘密鍵と公開鍵の生成

07:10 SSH設定ファイルの作成・編集

09:15 $pbcopyコマンドの実行

09:59 GitHubへ公開鍵を登録する

11:38 GitHubとのSSH接続を確認する

12:19 まとめ

この動画では、ローカルリポジトリをGitHubのリモートリポジトリにPushします。

00:00 この動画で達成すること

00:40 GitHubにリポジトリを作成

04:16 リモートリポジトリのURLを追加する

06:16 git push --set-upstream origin master オプションの意味

06:43 .ssh/configファイルの編集

08:37 apiディレクトリのPush

09:02 frontディレクトリのPush

10:28 .gitmodulesにリモートリポジトリのURLを登録する

11:11 rootディレクトリのPush

13:43 このチャプターまとめ

この動画では、Railsに"Hello"の文字列を返すコントローラーを作成します。

00:00 このチャプターで達成すること

00:58 API通信に使用するURLを設定する

03:16 frontサービスだけ環境変数をDockerfileに渡した理由

06:23 hello_controller.rbを作成する

07:34 hello_controller.rbにindexアクションを追加する

08:28 routes.rbの編集

09:09 apiサービスの起動

10:37 まとめ

この動画では、API通信に使用するaxiosモジュールの初期設定を行います。

00:00 この動画で達成すること

01:06 axiosの設定ファイルを作成

02:33 nuxt.config.jsに設定ファイルを登録

03:32 axiosプロパティのbaseURL解説

05:41 Railsにリクエストを行うボタンの設置

06:15 index.vueの解説

08:26 Logo.vueの削除

09:48 ESLintのエラー対応

10:37 ブラウザ上で実装の確認

12:16 まとめ

この動画ではRailsにCORS設定を行い、Helloアプリケーションを完成させます。

00:00 この動画で達成すること

00:37 CORSエラーの原因

00:51 同一オリジンポリシーとは?

01:10 オリジンとは?

02:05 CORSとは?

02:26 CORS設定の方法

02:51 Gem rack-corsのインストール

04:47 rack-corsの設定

06:16 アプリケーションの確認

07:59 GitHubにPush

10:13 このチャプターのまとめ

この動画では、Herokuへ会員登録し、HerokuCLIをインストールします。

00:00 このチャプターで達成すること

01:18 デプロイの全体像

02:13 Herokuとは?

03:13 Herokuにクレジットカードを登録する

04:08 Herokuの請求・無料枠について

05:23 HerokuCLIのインストール

07:17 まとめ

この動画では、RailsのPumaの設定とheroku.ymlの作成を行います。

00:00 この動画で達成すること

00:43 Pumaとは?

01:37 puma.rbの編集

04:36 heroku.ymlの作成・編集

06:03 setup（heroku.yml解説）

06:21 setup.addons（heroku.yml解説）

06:41 setup.config（heroku.yml解説）

07:06 Docker環境デプロイ時に必要なRailsの環境変数について

07:52 RACK_ENV（Rails環境変数解説）

08:14 RAILS_ENV（Rails環境変数解説）

08:41 RAILS_LOG_TO_STDOUT（Rails環境変数解説）

09:00 RAILS_SERVE_STATIC_FILES（Rails環境変数解説）

09:37 build（heroku.yml解説）

09:52 build.docker（heroku.yml解説）

10:11 Heroku web dynoについて

11:23 build.config（heroku.yml解説）

12:30 run（heroku.yml解説）

13:28 まとめ

この動画では、開発環境のRails起動起動コマンドをdocker-compose.ymlに変更します。この動画を通して、Dockerのコマンドについても学びます。

00:00 この動画で達成すること

00:42 Dockerイメージの構成を確認するコマンド（$ docker inspect）

02:52 docker-compose.ymlにRailsコマンドを追記する

04:41 Dockerコンテナに入るコマンド（$ sh）

05:00 シェルコマンドのcオプション（$ /bin/sh -c）

05:31 コンテナからRailsを起動するコマンド（$ bundle exec rails s -p 3000 -b '0.0.0.0'）

06:28 Railsのtmp/pids/server.pidファイルとは

08:10 .ash_historyを.gitignoreに追加する

09:21 .irb_historyを.gitignoreに追加する

09:56 ローカルにファイルを残したままGitの管理外とするコマンド（$ git rm --cached）

12:56 Dockerイメージのnoneタグを一掃するコマンド（$ docker image prune）

14:13 まとめ

この動画では、HerokuCLIのプラグインmanifestを使ってHerokuアプリケーションを構築します。この動画を通して、Herokuの操作について学びます。

00:00 この動画で達成すること

00:45 ターミナルからHerokuにログインする

01:15 HerokuCLIをbeta版にアップデートする

01:45 プラグインmanifestをインストールする

02:38 プラグインを削除するコマンドは?

02:46 HerokuCLIをbeta版から安定板に戻すコマンドは?

03:12 Railsアプリケーションを作成する

05:17 Herokuの管理画面からアプリケーションを確認する

05:43 Herokuの管理画面からアドオンを確認する

06:26 Herokuの管理画面から環境変数を確認する

07:24 まとめ

この動画では、HerokuにSSH接続設定を行い、Railsアプリケーションをデプロイします。

00:00 この動画で達成すること

00:51 Herokuに追加する秘密鍵と公開鍵を生成する

02:38 HerokuCLIを使って公開鍵を追加する

04:23 .ssh/configファイルの設定を行う

06:07 HerokuとのSSH接続を確認する

07:33 GitにHerokuのリポジトリURLを追加する

09:34 HerokuのStackとは何か

11:18 Railsをデプロイする

13:01 まとめ

この動画では、本番環境用のデータベースを初期化し、Railsのデプロイを完了させます。

00:00 この動画で達成すること

00:36 RailsマスターキーをHerokuの環境変数に追加する

03:18 Herokuデータベースの初期化コマンドを実行する

03:52 本番環境のRailsの稼働を確認する

04:34 Herokuの起動プロセスを確認する

05:11 Herokuのタイムゾーンを確認する

06:21 MacにPostgreSQLをインストールする

08:01 Heroku PostgreSQLのタイムゾーンを確認する

09:59 まとめ

この動画では、Nuxt.js用のDockerfileとheroku.ymlを編集します。

00:00 この動画で達成すること

00:40 Dockerfileに本番環境用のコードを追加する

01:12 Dockerfile解説

02:23 yarn run buildは何をしているのか?

04:04 heroku.ymlの作成と編集

04:57 heroku.yml解説

05:13 NPM_CONFIG_PRODUCTION=falseとは何か

08:02 環境変数API_URLにRailsの本番環境用URLを追加する

08:36 yarn run startコマンド

09:10 Gitにコミットする

09:40 まとめ

この動画では、Nuxt.jsをHerokuにデプロイし、Hello API アプリケーションをインターネット上に公開します。

00:00 この動画で達成すること

00:48 Herokuアプリケーションを作成する

02:31 GitにHerokuリモートリポジトリのURLを変更する

03:56 Nuxt.jsをHerokuにPushする

04:34 Hello API アプリケーションのデプロイ確認

05:51 RailsのHerokuに環境変数API_DOMAINを追加する

07:15 最終的なRailsの環境変数

07:42 Hello API アプリケーションのデプロイ確認

08:33 rootディレクトリをGitHubにPushする

09:41 このチャプターまとめ

この動画では、Railsアプリケーションのタイムゾーン設定を行います。

00:00 このチャプターで達成すること

02:07 Railsで扱うTimeクラスについて

02:49 RubyのTimeクラスが参照するタイムゾーンは?

03:34 RailsのTimeWithZoneクラスが参照するタイムゾーンは?

04:27 TimeWithZoneクラスのタイムゾーン設定を行う

05:45 タイムゾーン設定の確認を行う

06:34 まとめ

この動画では、Railsのデータベースの読み書きに使用するタイムゾーンを設定します。

00:00 この動画で達成すること

00:48 active_record.default_timezoneとは?

01:47 active_record.default_timezoneの挙動

03:14 ユーザーテーブルの保存時間の違い

05:20 まとめ

この動画では、i18nとオートロードの設定を行います。

00:00 この動画で達成すること

00:42 i18nのデフォルト言語設定

01:11 config.i18n.default_localeとは?

02:05 オートロードシステムの設定

02:27 add_autoload_paths_to_load_pathとは?

03:10 $LOAD_PATHとは?

04:14 autoload_pathsとは?

06:43 git commitする

07:18 まとめ

この動画では、Railsのモデル開発に必要なGemをインストールし、Hirbの自動読み込み設定を行います。

00:00 この動画で達成すること

00:47 Gem hirbをインストールする

02:30 Gem hirb-unicode-steakknifeをインストールする

03:38 Gem bcryptをインストールする

06:17 コンテナ内のGemを確認する

07:39 Gem hirbを自動で有効化する

08:29 .irbrcファイルの作成と編集

10:07 Railsコンソール内でhirbの挙動を確認する

12:49 GitHubとHerokuにPushする

14:27 本番環境でのhirbの挙動を確認する

16:01 このチャプターまとめ

この動画では、ユーザーテーブル設計とユーザー認証設計について解説します。

00:00 このチャプターで達成すること

00:38 ユーザーテーブル設計の解説

05:10 ユーザー認証設計の解説

08:05 まとめ

この動画では、Railsにユーザーテーブルを作成します。

00:00 この動画で達成すること

00:22 apiディレクトリでブランチを切っとく

01:09 ユーザーモデルを作成する

03:10 マイグレーションファイルを編集する

04:48 rails db:migrateコマンドの実行

05:40 データベースコンソールに入る

07:29 ユーザーテーブルの構造を確認する

10:32 まとめ

この動画では、ユーザーモデルにバリデーションを設定します。

00:00 今回設定するバリデーション設計

02:12 has_secure_password解説

06:34 nameのバリデーションを設定する

07:37 allow_blank: trueの使い所

08:58 passwordのバリデーションを設定する

09:59 正規表現（/\A[\w-]+\z/）解説

13:17 allow_nil: trueの使い所

17:08 型Booleanにバリデーションを設定するには？

18:15 まとめ

この動画では、i18nモジュールの日本語化対応を行い、バリデーションエラーメッセージを日本語に変換します。

00:00 この動画で達成すること

00:27 ja.ymlファイルの作成と編集

03:42 ユーザーカラム名を日本語化する

05:16 バリデーションのカスタムエラーメッセージを追加する

08:02 Railsコンソール内でバリデーションメッセージを確認する

10:05 I18n.t()の使い方

13:23 コミットする

13:50 まとめ

この動画では、EachValidatorクラスを使って、カスタムバリデーションを設定します。

00:00 この動画で達成すること

00:42 カスタムバリデーションファイルの作成と編集

01:45 カスタムバリデーションクラスの命名規則

02:29 user.rbからカスタムバリーデーションを呼び出す

04:06 validate_eachメソッドの3つの引数を解説

06:11 文字数制限のカスタムバリデーション

07:48 書式チェックのカスタムバリデーション

09:03 一意性のカスタムバリデーション

09:26 一意性を判定するメソッドの作成

12:10 before_validationでメールアドレスを小文字化するメソッドの作成

13:48 Railsコンソールからバリデーションを確認する

18:43 コミットする

19:13 まとめ

この動画では、ユーザーテーブルにSeedデータを投入し、環境ごとにデータを切り替える設定を行います。

00:00 Seedデータとは?

00:47 Seedデータを切り分ける3つのディレクトリを作成する

01:33 seeds.rbの編集とコードの解説

04:09 users.rbの作成と編集

04:55 find_of_initialize_byメソッドの解説

06:02 Seedデータを投入するRailsコマンドの実行

07:35 コミットする

07:57 まとめ

この動画では、バリデーションのテストを行うためのセットアップを行います。

00:00 この動画で達成すること

00:33 Gem minitest-reportersのインストール

03:32 minitest-reportersのセットアップ

05:17 テスト環境にSeedデータを使用するためのセットアップ

07:33 並列テスト解説

09:17 マシンのコア数を確認するLinuxコマンド

10:24 並列テストによるデータベースの挙動

12:18 テスト用データベースにSeedデータが入っているか確認する

12:14 コミットする

16:00 まとめ

この動画では、ユーザーモデルファイルのバリデーションテストを行います。

今回は、nameとemailカラムのテストです。

00:00 この動画で達成すること

00:31 テスト共通ユーザーを作成する

02:16 nameのバリデーションテストを実装する

04:04 assert_equalの書き方

05:14 テスト結果の読み方

08:18 assert_differenceの書き方

09:37 emailのバリデーションを実装する

11:57 テスト環境でのデバッグ方法（byebug）

13:09 assertの書き方

15:03 email書式チェックのバリデーションテストを実装する

19:59 email小文字化のテストを実装する

22:10 まとめ

この動画では、ユーザーモデルファイルのバリデーションテストを行います。

今回は、アクティブユーザーemailの一意性とpasswordカラムのテストです。

00:00 この動画で達成すること

00:42 アクティブユーザーの一意性テストを実装する

02:22 アクティブユーザーがいない場合

05:00 アクティブユーザーがいる場合

08:57 アクティブユーザーがいなくなった場合

10:32 アクティブユーザーのemailの一意性は保たれているか

11:51 passwordカラムのバリデーションテストを実装する

14:34 まとめ

この動画では、Nuxt.jsからRailsのユーザーテーブルを取得する実装を行います。

00:00 この動画で達成すること

00:46 hello_controller.rbを削除する

01:47 users_controller.ebの作成と編集

03:25 as_json()メソッドとは?

04:15 routes.rbにユーザーアクションのルートを追加する

06:15 Nuxt.jsからユーザーテーブルを取得する

07:15 asyncData()メソッドとは?

08:11 async・awaitとは?

10:47 算出プロパティとは何か?

14:20 Herokuにデプロイする

16:38 Herokuにユーザーテーブルを作成する

19:26 このチャプターまとめ

この動画では、CSSフレームワークのVuetifyモジュールをインストールします。

00:00 このチャプターで達成すること

00:38 ブランチ切っとく

01:14 Vuetifyをインストールする

02:56 Vuetifyのセットアップを行う

05:07 v-btnコンポーネントを表示させる

06:59 Vuetifyにオリジナルカラーを追加する

09:21 Vuetifyのコンポーネントを使ってindex.vueを書き換え

11:20 v-containerのfluidプロパティとは

11:46 v-cardのflatプロパティとは

12:05 v-cardのtailプロパティとは

12:50 v-simple-tableのdenseプロパティとは

14:02 コミットしとく

14:26 まとめ

この動画では、VuetifyにカスタムCSSを追加します。

00:00 この動画で達成すること

00:25 Vuetifyに用意されているブレイクポイント

01:15 カスタムCSSファイルを作成する

02:05 VuetifyにカスタムCSSファイルを登録する

03:58 カスタムCSSファイルの編集

04:38 $material-lightとは?（Vuetify CSS変数）

05:32 $grid-breakpointsとは?（Vuetify CSS変数）

05:51 $display-breakpointsとは?（Vuetify CSS変数）

07:01 index.vueにカスタムCSSを検証するコードを追加する

10:47 ブラウザで編集を確認する

13:16 Nuxt.js用のCSSファイルを登録する

13:56 main.scssの編集を行う

14:47 index.vueにmain.scssの編集を確認するコードを追加する

16:42 コミットする

17:12 まとめ

注）nuxt-i18nは@nuxtjs/i18nに名称が変わりました。(2021/08/03)

モジュールのインストールは、下記コマンドを実行してください。

$ yarn add @nuxtjs/i18n

この動画では、Nuxt.jsに翻訳モジュールのi18nを導入します。

00:00 この動画で達成すること

00:23 nuxt-i18nモジュールをインストールする

02:41 nuxt-i18nのセットアップを行う

04:22 nuxt.config.jsにi18のオプションを追加する

05:30 localesとは?（i18nプロパティ）

05:46 defaultLocaleとは?（i18nプロパティ）

05:56 vueI18nとは?（i18nプロパティ）

06:16 fallbackLocaleとは?（i18n.vueI18nプロパティ）

08:05 silentTranslationWarnとは?（i18n.vueI18nプロパティ）

09:00 silentFallbackWarnとは?（i18n.vueI18nプロパティ）

09:39 messagesとは?（i18n.vueI18nプロパティ）

10:23 翻訳ファイルの作成と編集

12:41 翻訳データを表示する

14:10 $t('path')の書き方

14:34 ここまでの編集をブラウザで確認する

15:57 GitHubと本番環境にpushする

17:11 本番環境での動作確認

18:28 rootディレクトリのコミット

18:54 このチャプターまとめ

この動画では、Nuxt.jsのlayouts, pages, componentsディレクトリについて解説しています。

00:00 このチャプターで達成すること

00:33 それぞれの役割について

01:44 layoutsファイルからpagesファイルの呼び出し方法

02:18 pagesファイルからlayoutsファイルの指定方法

03:02 pagesファイルパスとURLの関係

04:01pagesファイルとcomponentsファイルの違い

04:53 componentsファイルの命名規則

06:06 今回作成するのアプリの命名規則

07:49 この動画のまとめ

この動画では、トップページの土台となるコンポーネントファイルを作成します。

00:00 この動画で達成すること

02:09 コンポーネントファイルの作成と仮編集

06:13 index.vueから作成したコンポーネントを呼び出す

08:37 isプロパティによるコンポーネント呼び出し時の注意点

10:00 コンテナを起動してブラウザで確認

11:01 コンポーネントの呼び出しはディレクトリ名に依存しない

11:55 共通フッターの作成

13:30 absoluteプロパティとは?（v-footer）

13:44 Footerをindex.vueから呼び出す

15:59 コミットしとく

16:21 まとめ

この動画では、トップページにアイキャッチ画像とツールバーを追加します。
00:00 この動画で達成すること

00:54 前回の修正

01:30 トップページにアイキャッチ画像を追加する

02:59 v-imgタグの使い方（Vuetify）

03:11 サンプルイメージ画像を提供するロレムピクサムの使い方

04:20 gradientプロパティ（v-img）

04:45 styleプロパティをオブジェクトで指定する方法

05:34 メニュータイトルとサブタイトルを表示する

10:19 Toolbarを作成する

10:40 環境変数にアプリ名を用意する

11:18 環境変数をNuxt.jsに登録する（publicRuntimeConfig）

12:51 Toolbarにアプリ名を表示する

13:54 publicRuntimeConfigに登録した環境変数をVueファイルから呼び出す方法

16:38 appプロパティ（v-app-bar）

17:00 Toolbarにアプリロゴを追加する

18:54 Toolbarにメニューボタンを追加する

19:53 配列を受け取るpropsのdefaultの書き方

23:17 コミットする

23:54 まとめ

この動画では、スクロールポイントでツールバーのスタイルを切り替える設定を行い、各メニューのクリックイベントを追加します。

00:00 この動画で達成すること

00:49 ツールバーにスクロールを検知するイベントを追加する

03:16 mounted()とは?

05:10 beforeDestory()とは?

07:04 Vuexを扱うindex.jsを作成する

08:06 stateとは?         （Vuex）

08:27 gettersとは?     （Vuex）

08:46 mutationsとは?（Vuex）

09:06 actionsとは?     （Vuex）

10:19 Vuexのstateの値をdata()メソッド内で取得する方法

11:33 スクロールポイントでtrue・falseを返す算出プロパティを追加する

15:15 スタイルを切り替える算出プロパティを追加する

19:02 メニューボタンにクリックイベントを追加する

19:12 子コンポーネントにクリックイベントを追加する方法（@click.native）

19:52 $vuetify.goTo()メソッドとは?

22:48 まとめとコミット

この動画では、ツールバーをレスポンシブデザインに対応させて、本番環境での動作確認を行います。

00:00 この動画で達成すること

01:16 会員登録・ログインリンクコンポーネントファイルを作成する

01:58 ログインリンクコンポーネントの編集

03:00 会員登録リンクコンポーネントの編集

05:56 ツールバーをレスポンシブデザインに対応させる

07:24 ハンバーガーメニューの追加

11:01 「サイトについて」を別のブレイクポイントで表示・非表示させる

12:09 Htmlのclassを条件分岐で切り替える書き方

13:29 フッターにコピーライトを追加する

16:03 各メニューのコンテンツを追加する

16:27 HomeAbount.vueの編集

17:05 HomeProducts.vueの編集

18:57 HomePrice.vueの編集

23:34 HomeContact.vueの編集

24:32 HomeCompany.vueの編集

27:01 assetsディレクトリ以下の画像をVueファイルで読み込む方法

29:20 コミットと本番環境へのpush

32:23 Herokuに環境変数を登録する

33:51 予告とまとめ

この動画では、ログイン前ページに使用する共通レイアウトファイルを作成します。

00:00 この動画で達成すること

00:41 レグイン前のレイアウトファイルを作成する

01:43 会員登録ページとログインページを作成する

03:51アプリタイトル部分をコンポーネントファイルにする

06:53 ログイン前レイアウトのツールバーを作成する

10:14 レイアウトファイルからツールバーを呼び出す

11:27 v-app-barのappプロパティを使用する際の注意点

12:00 ツールバー以下のコンテンツ領域を指定するv-mainタグ

13:01 レイアウトファイルからフッターを呼び出す

14:30 コミットする

15:05 まとめ

この動画では、会員登録ページに名前、メールアドレス、パスワードフォームを設置します。

00:00 この動画で達成すること

00:21 会員登録ページのコンポーネント設計

01:39 会員登録ページを構成するコンポーネントファイルを作成する

03:03 UserFormCard.vueの編集

04:27 $routeとは?

05:27 slotとは?

05:52 各フォームコンポーネントの編集

07:18 signup.vueにコンポーネントファイルを設置する

10:23 ルートパスのロケール表示を無効にする（nuxt-i18n）

12:17 signup.vueに「登録する」ボタンを設置する

13:42 disabledプロパティとは?（v-btn）

16:51 コミットする

17:26 まとめ

この動画では、双方向バインディングについて、実際のコードを交えながら解説しています。

00:00 今回のアプリケーションの実装

00:57 双方向バイディングとは何か?

01:49 双方向バイディングの方法

02:25 親子コンポーネント間の双方向バイディングの方法

03:22 親から子へデータを送信する方法（v-bind）

05:14 子から親へデータを送信する方法（$emit）

08:03 v-bindとv-onの省略記法

08:22 sync修飾子を使った親子間データバインディング

09:26 v-modelを使った親子間データバインディング

11:54 まとめ

この動画では、会員登録ページのフォームのデータバインディングを実装します。

00:00 この動画で達成すること

00:53 signup.vueに子コンポーネントへのデータ送信設定を行う

02:40 子コンポーネントにデータ受信設定を行う

06:13 ここまでの編集をブラウザで確認

07:06 コミットする

07:55 まとめ

この動画では、会員登録フォームにバリデーションを設定します。

00:00 この動画で達成すること

00:37 UserFormName.vueにバリデーションを追加する

01:46 入力必須のバリデーション

02:50 文字数制限のバリデーション

04:17 UserFormEmail.vueにバリデーションを追加する

05:06 書式チェックのバリデーション

05:58 placeholderの切り替え設定を行う

08:49 UserFormPassword.vueにバリデーションを追加する

10:49 パスワードの文字数と書式を同時にチェックする正規表現の書き方

14:09 hide-detailsプロパティとは?（v-text-field）

17:18 パスワードフォームの表示・非表示を切り替えるボタンを設置する

18:15 append-iconと@clickイベントの設定方法（v-text-field）

19:18 コミットする

19:46 まとめ

この動画では、ログインページを作成し、本番環境での動作確認を行います。

00:00 この動画で達成すること

01:15 login.vueを編集する

01:55 DOMを操作するrefプロパティとは?（v-form）

02:02 refプロパティと3つの関数

04:32 loadingプロパティとは?（v-btn）

09:53 signup.vueを編集する

12:15 ボタンクリックと同時にフォームの値をリセットする

12:52 refプロパティにアクセスする方法

15:46 GitHubとHerokuにpushする

16:54 本番環境での動作確認

18:47 このチャプターまとめ