Course curriculum

    1. 本講座で学ぶこと

    2. 本講座の完成品のデモ

    1. VSCodeをインストールしよう

    2. Node.jsをインストールしよう

    3. Notion開発用プロジェクトフォルダを用意しよう

    4. 【補足】React開発効率が上がるオススメVSCodeプラグイン紹介

    5. 【追加】本レクチャーのソースコード

    1. Expressフレームワークを使ってローカルサーバーを構築しよう

    2. 指定したPORT番号でサーバーが立ち上がるのか確認してみよう

    3. Notionユーザー管理の流れを理解してみよう

    4. ユーザー管理用にMongoDBを利用してみよう

    5. ユーザースキーマを構築してみよう

    6. サーバーとデータベースを接続してみよう

    7. dotenvモジュールを使ってURLを第三者に見られないように保護しよう

    1. ユーザー新規登録API作成の流れ

    2. 早速WebAPIを作成してみよう

    3. パスワードを暗号化してユーザーをDBに保存してみよう

    4. JWTってなに？どの場面で使うの？

    5. JWTをクライアント側に発行してみよう

    6. Postmanをインストールしよう

    7. PostmanでWebAPIテストをしてみよう

    8. express-validatorを使ってバリデーションチェックをはじめよう

    9. すでにDBにユーザーが存在している場合のエラーハンドリング

    10. バリデーションエラーを出力する機能を実装しよう

    11. 正常にバリデーションチェックができているかテストしてみよう

    12. 運用・保守しやすくするためにリファクタリングしよう：その１

    13. 運用・保守しやすくするためにリファクタリングしよう：その２

    14. ログイン用APIを構築しよう

    15. ログイン時のパスワードの照合をはじめよう

    16. ログインAPIをPostmanでテストしてみよう

    17. JWT認証APIってなに？

    18. JWT認証APIを作ってみよう

    19. JWTをデコード(複合)する関数を作成しよう

    20. JWTをデコードするミドルウェアを完成させよう

    21. JWT認証APIをPostmanでテストしよう

    1. Reactでフロントエンド側の開発環境を構築しよう

    2. React18からReact17のバージョンへダウングレードしよう

    3. 認証に関するコンポーネントを用意しよう

    4. react-router-domでルーティング設定をはじめよう

    5. Material UIをインストールしよう

    6. ThemeProviderを利用してアプリ全体のテーマを決定しよう

    7. 認証に関する共通ページの構築をはじめよう

    8. ユーザー新規登録用のページを作成しよう

    9. 送信用ボタンとログイン遷移用のボタンを作成しよう

    10. Axiosインスタンスを導入してAPIを叩く下準備をはじめよう

    11. Axios interceptorsを利用してリクエストの前処理を設定してみよう

    12. Axios interceptorsを利用してレスポンスの前処理を設定してみよう

    13. 認証用APIファイルを用意しておこう

    14. フォームから名前やパスワードを取得してみよう

    15. 実際にユーザー新規登録APIを叩いてユーザー登録してみよう

    16. CORSエラーを回避する方法

    17. APIを叩くときに404 not foundになったときの対処方法

    18. 新規登録フォーム入力時のバリデーションチェックをしよう：その１

    19. エラーがはっきりと分かるように修正しよう

    20. 新規登録フォーム入力時のバリデーションチェックをしよう：その２

    21. 送信時のローディング設定をしよう

    22. ユーザー作成が完了したらホームにリダイレクトさせよう

    23. 【修正】ローカルストレージにトークンが設定されてない問題を修正しよう

    24. ログインページを作成しよう

    25. ログイン用APIを準備して叩いてみよう

    26. クライアントがすでにJWTを持っているかチェックするロジックを作ろう

    27. JWTチェック用ファイルを完成させよう

    28. 実際にJWTチェックでリダイレクトされる実装をしよう

    1. Notion本体の機能実装をするためのルーティング設定をはじめよう

    2. AppLayoutでNotionアプリ共通コンポーネントを作成しよう

    3. サイドバーを作ってみよう：その１

    4. サイドバーを作ってみよう：その２

    5. サイドバーの背景色を変更してみよう

    6. ページからログアウトする機能を実装しよう

    7. ユーザー管理用にReduxを実装しよう

    8. userSliceを実装しよう

    9. グローバルにユーザー管理ができるようにしよう

    10. useDispatchとuseSelectorを使ってユーザー保存と取り出しをはじめよう

    11. 仮置きでメモを追加してみよう

    12. Notionメモ用のスキーマを作成してみよう

    13. 【※追加修正】Schemaをインポートしよう

    14. メモ新規作成APIを作ってみよう

    15. メモAPI用ルーティング設定をしよう

    16. Homeコンポーネントを完成させよう

About this course

  • 27,800円
  • 104回のレッスン
  • 7時間の動画コンテンツ

Discover your potential, starting today