【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座

人気アプリ「Discord」を1からReactで開発する講座。使用する技術はReact/Redux/Typescript/Firebase。近年はTypescriptの実装が増えてきており実務に近い形式で学びたい方は知っておいて損はない講座

4.65 (77 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座
666
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の理解は手を動かして理解することが1番の近道です。


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に出力してみよう : その1
チャンネルデータをDiscordに出力してみよう:その2
コレクションを取り出すカスタムフックスを作ってみよう
Discordチャンネルを追加する実装をしてみよう
チャンネル情報をReduxで管理してみよう
設定したReducerに名前をつけてエラーを回避してみよう
チャット送信するために入力文字列を取得してみよう
サブコレクションにメッセージ情報を追加してみよう
onSnapshotでリアルタイムでメッセージ情報を取得してみよう
ディスコードチャット欄にメッセージを表示してみよう
メッセージを投稿した順番にソートして表示してみよう
投稿しすぎるとレイアウトがずれるバグを修正してみよう
【補足】サブコレクションデータ取得をカスタムフックスで切り出してみよう

【Discordクローン】完成したアプリのデプロイ編

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

ボーナスレクチャー

最後まで受講いただいた方へ
ボーナスレクチャー

Screenshots

【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Screenshot_01【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Screenshot_02【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Screenshot_03【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Screenshot_04

Reviews

Ubuntu
February 23, 2023
typescript学習仕立ての自分でもなんとかついていくことができました。 実際に動作するアプリケーションをデプロイできて感動です! コードのリファクタリングとか実際に使えそうな考え方も講座ないで紹介されているので、おすすめです。
Leaf
February 18, 2023
react,redux,typescript,firebaseのフロントエンド開発フルセットをしっかり学べる素晴らしい講座 他の講師の同様の講座を学んだことがあるが比べ物にならない程分かりやすいしやたら古いライブラリーを使わされるという事もない(sassがnode-sassなのが気になりましたが@importや除算を使ってないので代わりにdart-sass入れても全く問題ないです) ただし、講座の難易度はこの講師の他の講座と比べても少し高めなことには注意 全部入りだからといきなりこの講座を受けるのではなくそれぞれのツールについて順番にステップアップしていった上で受けるとベスト udemyのフロントエンド講座では最高クラスなので文句なしの星5

Charts

Price

【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Price chart

Rating

【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Ratings chart

Enrollment distribution

【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座 - Distribution chart
ComiDoc
ComiDoc

Realtime Udemy coupons in our Telegram channel

topics
FREE
Comidoc
Comidoc

Want FREE online courses ? Our CHROME extension lists Udemy freebies in realtime !

Free
4986222
udemy ID
11/20/2022
course created date
2/8/2023
course indexed date
Bot
course submited by