Course curriculum

    1. 本講座で学べること

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

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

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

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

    4. 【補足】開発効率が2倍になるVSCodeショートカットキー

    1. ReactとTypescriptでDiscordクローン開発用プロジェクトを作成しよう

    2. CSSのスタイリングはSassで記述してみよう

    3. サイドバーコンポーネントを作成してみよう

    4. サイドバーの中身のHTMLとCSSの記述をはじめよう

    5. 【補足】ブラウザ上の色を取得できるグーグル拡張機能の紹介

    6. MaterialUIをインストールしてアイコンを利用してみよう

    7. Discordチャンネルのヘッダーを記述してみよう

    8. Discordチャンネルリストを作成してみよう

    9. サイドバーのフッターアカウントを作成してみよう

    10. サイドバーフッターをCSSでスタイリングしてみよう

    11. Googlefontで全体の文字フォントを変更してみよう

    12. Discordチャットコンポーネントを作成してみよう

    13. チャットヘッダーを作成してみよう

    14. チャットヘッダーをCSSでスタイリングしてみよう

    15. Discordチャット送信のHTMLとCSSを実装してみよう

    16. チャットメッセージコンポーネントを作成してみよう

    17. 【補足】HTMLとCSSを記述するときの考え方について

    18. 【補足】Discordアイコンを追加しよう

    1. Firebaseの準備をはじめよう

    2. Firebaseの初期設定をはじめよう

    3. ReduxをTypescriptで用意してみよう

    4. StoreとuserSliceを準備してみよう

    5. ユーザーの初期状態をTypescriptで準備してみよう

    6. Providerを使ってアプリ全体でstoreが使える状態にしよう

    7. ログイン用ページを作成してみよう

    8. 型付きのuseSelectorとuseDispatchを準備しよう

    9. Firebaseを使ってGoogleログイン機能を実装してみよう

    10. ログインしたユーザー情報をStoreに通知して状態更新しよう

    11. ログアウト機能とログインしたユーザー情報をUIに反映させよう

    12. 【補足】Redux DevToolsプラグインでstate状態を視覚的に確認してみよう

    1. CloudFirestoreにチャンネルデータを設定してみよう

    2. onSnapshotでチャンネルデータをリアルタイムで取得してみよう

    3. react-error-boundaryライブラリでエラーの詳細を出力してみよう

    4. エラーを修正してチャンネルデータを取得してみよう

    5. チャンネルデータをDiscordに出力してみよう : その１

    6. チャンネルデータをDiscordに出力してみよう：その２

    7. コレクションを取り出すカスタムフックスを作ってみよう

    8. Discordチャンネルを追加する実装をしてみよう

    9. チャンネル情報をReduxで管理してみよう

    10. 設定したReducerに名前をつけてエラーを回避してみよう

    11. チャット送信するために入力文字列を取得してみよう

    12. サブコレクションにメッセージ情報を追加してみよう

    13. onSnapshotでリアルタイムでメッセージ情報を取得してみよう

    14. ディスコードチャット欄にメッセージを表示してみよう

    15. メッセージを投稿した順番にソートして表示してみよう

    16. 投稿しすぎるとレイアウトがずれるバグを修正してみよう

    17. 【補足】サブコレクションデータ取得をカスタムフックスで切り出してみよう

    1. 完成したDiscordをFirebaseでデプロイしてみよう

About this course

  • 24,000円
  • 55回のレッスン
  • 4時間の動画コンテンツ

Discover your potential, starting today