【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座
人気アプリ「Discord」を１からReactで開発する講座。使用する技術はReact/Redux/Typescript/Firebase。近年はTypescriptの実装が増えてきており実務に近い形式で学びたい方は知っておいて損はない講座
4.67 (165 reviews)
1,482
students
4 hours
content
Mar 2023
last update
$44.99
regular price
What you will learn
Reactを使ってチャットやりとりができるDiscordクローンを構築します
ReactとReduxを使った状態管理手法が学べます
React × Typescript実装の基本が学べます
Firebaseバージョン9.0でのライブラリの使用法が学べます
HTMLとCSSの基礎がハンズオン形式で学べます
DiscordのようなUIを実装できます
Material UIでアイコンの利用法が学べます
Reduxの意義と使い方が学べます
ReactとReduxとFirebaseにTypescriptを適用させています
Firebaseを利用したユーザーログイン/ログアウト手法が学べます
型付きのuseSelectorやuseDispatchの使い方が学べます
Redux DevToolsプラグインで状態管理を視認する方法を学べます
onSnapshotを使ったリアルタイムデータ取得が学べます
react-error-boundaryライブラリでエラーの詳細の出力方法が学べます
Firebaseにおけるサブコレクション実装が学べます
Reactのカスタムフックスを実装する方法を学べます
Firebaseを利用してアプリをホスティング/デプロイする方法を学べます
Description
React/Redux/Typescript等の基礎を学び終え、Discordクローンをハンズオン開発することでWebアプリケーション開発の大まかな流れを把握して基礎力～応用力を高める講座です。
■ 本コースの対象者
・React等の基礎技術を学んだだけでは物足りない方
・React/Reduxは一通り学んだからもっとアプリケーションを作ってみたい方
・Typescriptを用いて実務に近いWebアプリ開発をしてみたい方
・Firebaseバージョン9.0での実装を学んでおきたい方
・Reactのフックスやカスタムフックス実装を体験してみたい方
・Firebaseでデプロイして他のユーザーにアプリを触ってもらい方
・Discordクローンを作ってポートフォリオにしたい方
・ただただWebアプリ開発好きで好奇心がある方
・etc...
ReactとTypescriptを使ったWebアプリ開発をして実務に近い経験を積んでおきたい・・・
Typescriptの理解は手を動かして理解することが１番の近道です。
ReactやTypescriptの基礎は分かるけど「実用的なアプリ開発がしたい」「もっとステップアップしたい」という方におすすめの講座内容となっています。
今回はReact/Redux/Firebase/Typescriptのモダン技術スタックを使用してDiscordクローンを開発します。
特にTypescriptは近年流行りの技術でどの企業でも採用されている型指定JSなので、この講座で基礎をしっかり理解することができます。理解すると案外簡単なことが分かることでしょう。
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。
・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。
Content
はじめに
本講座で学べること
本講座の完成品のデモ
【Discordクローン】開発環境構築からはじめよう
VSCodeをインストールしよう
Node.jsをインストールしよう
【補足】React開発効率が上がるオススメVSCodeプラグイン紹介
【補足】開発効率が2倍になるVSCodeショートカットキー
【追加】本レクチャーのソースコード
【Discordクローン】フロントエンド開発編（サイドバー＆チャット欄実装編）
ReactとTypescriptでDiscordクローン開発用プロジェクトを作成しよう
CSSのスタイリングはSassで記述してみよう
サイドバーコンポーネントを作成してみよう
サイドバーの中身のHTMLとCSSの記述をはじめよう
【補足】ブラウザ上の色を取得できるグーグル拡張機能の紹介
MaterialUIをインストールしてアイコンを利用してみよう
Discordチャンネルのヘッダーを記述してみよう
Discordチャンネルリストを作成してみよう
サイドバーのフッターアカウントを作成してみよう
サイドバーフッターをCSSでスタイリングしてみよう
Googlefontで全体の文字フォントを変更してみよう
Discordチャットコンポーネントを作成してみよう
チャットヘッダーを作成してみよう
チャットヘッダーをCSSでスタイリングしてみよう
Discordチャット送信のHTMLとCSSを実装してみよう
チャットメッセージコンポーネントを作成してみよう
【補足】HTMLとCSSを記述するときの考え方について
【補足】Discordアイコンを追加しよう
【Discordクローン】バックエンド開発編（Firebase＆Redux実装編）
Firebaseの準備をはじめよう
Firebaseの初期設定をはじめよう
ReduxをTypescriptで用意してみよう
StoreとuserSliceを準備してみよう
ユーザーの初期状態をTypescriptで準備してみよう
Providerを使ってアプリ全体でstoreが使える状態にしよう
ログイン用ページを作成してみよう
型付きのuseSelectorとuseDispatchを準備しよう
Firebaseを使ってGoogleログイン機能を実装してみよう
ログインしたユーザー情報をStoreに通知して状態更新しよう
ログアウト機能とログインしたユーザー情報をUIに反映させよう
【補足】Redux DevToolsプラグインでstate状態を視覚的に確認してみよう
【Discordクローン】バックエンド開発編（FireStore & チャンネル & チャット追加編）
CloudFirestoreにチャンネルデータを設定してみよう
onSnapshotでチャンネルデータをリアルタイムで取得してみよう
react-error-boundaryライブラリでエラーの詳細を出力してみよう
エラーを修正してチャンネルデータを取得してみよう
チャンネルデータをDiscordに出力してみよう : その１
チャンネルデータをDiscordに出力してみよう：その２
コレクションを取り出すカスタムフックスを作ってみよう
Discordチャンネルを追加する実装をしてみよう
チャンネル情報をReduxで管理してみよう
設定したReducerに名前をつけてエラーを回避してみよう
チャット送信するために入力文字列を取得してみよう
サブコレクションにメッセージ情報を追加してみよう
onSnapshotでリアルタイムでメッセージ情報を取得してみよう
ディスコードチャット欄にメッセージを表示してみよう
メッセージを投稿した順番にソートして表示してみよう
投稿しすぎるとレイアウトがずれるバグを修正してみよう
【補足】サブコレクションデータ取得をカスタムフックスで切り出してみよう
【Discordクローン】完成したアプリのデプロイ編
完成したDiscordをFirebaseでデプロイしてみよう
ボーナスレクチャー
最後まで受講いただいた方へ
ボーナスレクチャー
Screenshots
Reviews
Kyo
October 11, 2023
とても勉強になりました。
個人的にはこの動画のおかげでポートフォリオ製作の悩みがある程度解決しました。
ところどころ自分で対応しないといけない場面がありますので、そこはAIに質問しながら乗り切ったら大丈夫です。
勇拓
October 1, 2023
Discordではなく、ただのチャットアプリです。
Discordと言うなら音声機能は必須だと思います。
エラー対応をその場で行うので、自分が同じようなエラーに陥った時にどう対処すればいいか分かりやすい。
ただ、セクションを通してバグを残されると部分的に学習できないので学び難いと思います。
型はファイルにまとめた方が良かったと思います。
同じ型や同じような方を複数箇所で定義していたので、それがバグになれば初心者は対応し難いと思います。
Taro
September 26, 2023
Reactの文法などを勉強し、次に実践的な開発に関わりたい人に超おすすめです。初めてReactに触れる人というよりは、最低限の文法や用語に触れてからが良いと思いました。特にReduxを使って情報を管理する時は、dispatchとreducerとstateがどこでどう動いているのか追う必要があるので、完全初心者には厳しいと思います。そんなに長くないコースですが、これを受けるだけですごく自信が付きます！！
N
August 30, 2023
shinさんの講座５つです。
他のReactやReduxの講座を受けてからこちら受講しました。
やっぱり毎回の講座でフロント側のHTMLやCSS、UIのところも詳しく説明実装してくれるのが個人的にすごくうれしい(わたしフロントエンドエンジニアになりたいのでね)。今後新しい講座出される時もそのスタンスでいってほしい！
ほかのShinさんの講座のおかげでReactの書き方は慣れていきましたが、、
本講座のバックエンド開発編、かなり難しかったですー(´;ω;｀)
もっとがんばりますよ！
あと、エラーのデバッグを実況してくれるところがうれしいですね(*´ω｀*)
ちの
June 24, 2023
TypeScript + Reactの基礎が学べて非常に良い内容だと思います。
ただNo.54の講座の内容が早すぎて理解がおいついていかなかったので、もうすこし詳細な説明をしてほしかったという事で、★4.5とさせていただきました。
川津
June 21, 2023
Discordがどう実装しているか学ぶことができました。TypeScriptになると型指定がうまくいかないことが多々ありましたので、TypeScriptの知識を深めたいと思います。また今回のことも今後に活かせたらと思います。
ありがとうございました。
図師
May 5, 2023
終盤までつまることなく学習を終えてメッセージアプリをリリースすることができました。
【気になった所・問題点】
動画の通りに作った場合のコードとgithubにある手本のコードが違い戸惑いました。
学習中に自分が書いたコードに記載ミスがないか調べるために、githubのコードと比較したのですが、階層構造や一部のコードの記載が動画の内容と異なるため少し戸惑いました。
Ubuntu
February 23, 2023
typescript学習仕立ての自分でもなんとかついていくことができました。
実際に動作するアプリケーションをデプロイできて感動です！
コードのリファクタリングとか実際に使えそうな考え方も講座ないで紹介されているので、おすすめです。
Leaf
February 18, 2023
react,redux,typescript,firebaseのフロントエンド開発フルセットをしっかり学べる素晴らしい講座
他の講師の同様の講座を学んだことがあるが比べ物にならない程分かりやすいしやたら古いライブラリーを使わされるという事もない（sassがnode-sassなのが気になりましたが@importや除算を使ってないので代わりにdart-sass入れても全く問題ないです）
ただし、講座の難易度はこの講師の他の講座と比べても少し高めなことには注意
全部入りだからといきなりこの講座を受けるのではなくそれぞれのツールについて順番にステップアップしていった上で受けるとベスト
udemyのフロントエンド講座では最高クラスなので文句なしの星5
Charts
Price
Rating
Enrollment distribution
4986222
udemy ID
11/20/2022
course created date
2/8/2023
course indexed date
Bot
course submited by