この記事には
カテゴリー「Udemy」の歩き方を記載しています。
カテゴリー内で迷子になったらここにお戻りくださいませ。
Chapter1. このカテゴリーの歩き方
今回作るアプリケーションの基本情報を掲載しています。
-
カテゴリー「Udemy」の歩き方（今ここ）
Chapter2. Docker入門
このチャプターで達成すること
まずはDockerの基礎知識を習得します。
Chapter3. Dockerを使ったRails+Nuxt.js環境構築
このチャプターで達成すること
Dockerで開発環境を構築し、ブラウザ上にRailsとNuxt.jsの初期画面を表示します。
Chapter4. 複数プロジェクトのGit管理
このチャプターで達成すること
複数のプロジェクトで動く一つのアプリケーションを、Gitでどのように管理するかを学びます。
そしてGitHubに3つのプロジェクトをプッシュするところまでを行います。
Chapter5. RailsAPI×Nuxt.js初めてのAPI通信
このチャプターで達成すること
Nuxt.jsのボタンを押すと、Railsから"Hello"が返ってくるアプリケーションを作ります。
また、APIアプリケーションには付き物の「オリジン・CORS」について理解します。
Chapter6. Heroku.ymlを使ったDockerデプロイ
このチャプターで達成すること
Chapter5で作成したアプリケーションをHerokuにデプロイし、"Hello"APIアプリケーションをインターネット上に公開します。
今回のデプロイ方法は「heroku.yml」を使い、DockerイメージをHerokuにビルドする方法となります。
- Herokuアカウントを作成・HerokuCLIをインストールする
- Rails用のpuma.rb・heroku.ymlの編集を行う
- Railsデプロイ完了。HerokuCLI-プラグイン「manifest」を使ったデプロイを行う
- Nuxt.jsデプロイ準備。Dockerfileを編集する
- デプロイ完結。Nuxt.jsをHerokuにデプロイする
Chapter7. モデル開発事前準備
このチャプターで達成すること
ユーザーモデル開発を行う前のRailsの事前準備を行います。
このチャプターを通してモデル開発の前にやるべき事を学んでいきましょう。
Chapter8. ユーザーモデル開発
このチャプターで達成すること
ユーザーモデルのバリデーション設定から、エラーメッセージの日本語化、バリデーションが正しく動いているかのテストを行います。
このチャプターを通してユーザーテーブル設計の考え方やモデル開発の基礎知識を学びましょう。
- ユーザーテーブル設計・ユーザー認証設計を理解する
- nameとpasswordのバリデーション設定
- バリデーションエラーメッセージの日本語化
- Emailカスタムバリデーション設定
- ユーザーSeedデータの投入
- テスト環境事前準備(Rails6からの並列テスト解説)
- ユーザーモデルのバリデーションテスト
- Nuxt.jsにユーザーテーブルを表示しHerokuへデプロイする
chapter9. Nuxt.jsフロント開発事前準備
このチャプターで達成すること
これから開発を進めるにあたって、必要なパッケージをインストールしていきます。
Docker環境のNuxt.jsにVuetifyをインストールする際に必要な依存関係、Vuetifyのカスタマイズの方法、i18nのセットアップ方法などの知識を習得します。
-
既にNuxt.jsのバージョンが2.13以上の場合は、新機能の解説だけお読みください。
Chapter10. ログイン前のレイアウト構築
このチャプターで達成すること
ログイン前のトップページ（ウェルカムページ）、会員登録ページ、ログインページを構築します。
Nuxt.jsの実務的な知識と実装方法、レイアウト設計が学べます。
- Nuxt.jsのレイアウト、ページ、コンポーネントファイルを理解する
- ウェルカムページの構築 1/4 コンポーネントファイルの作成
- ウェルカムページの構築 2/4 アイキャッチ画像とツールバーの作成
- ウェルカムーページの構築 3/4 スクロールイベントを追加する
- ウェルカムページの構築 4/4 レスポンシブデザインに対応させる
- 会員登録ページの構築 1/4 レイアウトファイルの作成
- 会員登録ページの構築 2/4 フォームコンポーネントの作成
- 会員登録ページの構築 3/4 親子コンポーネント間のデータ通信
- 会員登録ページの構築 4/4 Vuetifyフォームバリデーション
- ログインページの実装とHerokuデプロイ
Chapter11. ログイン後のレイアウト構築
このチャプターで達成すること
ユーザーがログインした後に表示される、プロジェクト一覧ページ、プロジェクトページ、アカウントメニューページを構築します。
Nuxt.jsの実装レベルは上がりますが、「inject機能」や「nuxt-childタグ」の使い方を学んでいき、より実務で使える知識を習得しましょう。
- ログイン後のツールバー構築 (inject解説)
- アカウントメニュー、ログアウト機能の実装 (nuxt-child解説)
- プロジェクト一覧ページの構築
- プロジェクトページにナビゲーションドロワーを追加する
- URLパラメーターから現在のプロジェクトを取得する
Chapter12. サーバーサイドのログイン認証
このチャプターで達成すること
RailsでJWT（ジェーソン ウェブ トークン）を発行し、クライアントのCookieに保存する実装を行います。
また、クライアントから投げられたJWTが有効なものであるかの検証を行います。
これにより、有効なトークンを持った、ログインユーザーしかアクセスできないコントローラーアクションを作成することができます。
このチャプターで、JWTを使ったサーバーサイドの認証機能の手法を学んでいきましょう。
13. フロントエンドのログイン認証
このチャプターで達成すること
Nuxt.js側のログイン認証を実装します。
ログイン後のレイアウト切り替え処理、ログイン前後のリダイレクト処理、エラーページやトースターの作成を行います。
このチャプターを通して、フロントエンドのログイン認証設計を学んでいきましょう。
- クロスオリジン通信でのCookie共有設定
- Railsからのログイン成功レスポンスを保存
- ローカルストレージの有効期限を暗号化
- JWT有効期限内のユーザーをログインしたままにする
- ログイン前後のリダイレクト処理
- ログイン失敗時のトースターを作成
- エラーページの作成
- デモプロジェクトの作成とHerokuデプロイ
14. 本番環境への対応
このチャプターで達成すること
ブラウザのSafari上でログインできない問題に対応します。
このチャプターには、Herokuアプリに独自ドメインを設定する方法、SSL化する方法、Herokuアプリのドメインからリダイレクトする方法が書かれています。