BEST

Programming

Full-stack

フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

Name: フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]
Price: 44000 KRW

この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

（4.7）受講レビュー 43件

受講生 1,033名

John Ahn

React

Firebase

Web Application

学習した受講者のレビュー

こんなことが学べます

リアクト
ファイアベース

フォローして学習するチャットアプリケーションを作成し、
コア機能をひとつひとつに従って学習してみてください！

こんにちは^^
この講義では最初から機能一つ一つ、
1ページ1ページずつ直接チャットアプリケーションを作成します。

この講義では、ノードは使用しませんが、
ノード＋リアクト基本選手知識があれば、より理解しやすいので、
ノード+リアクトを学んでいない人は、次のレッスンを最初に学んでください。

フォローして学ぶノード、リアクトシリーズ - 基本講義
実際のWebアプリを作成するためのノード+リアクト基礎概念学習

💡川の特徴

John Ahn, Firebase

リアルタイムストリーミングプロトコル（RTSP）方式のサポート

Firebaseは、認証、データベース、ストレージ、プッシュ通知、展開など
ほとんどのアプリを作成するときに必要な部分を自動的に作成するプラットフォームで、
リアルタイム（Real-Time）データ転送が必要なチャットアプリ、タクシーアプリなどを簡単に実装できます。

チャットアプリケーションの重要な機能を最大限に活用しようとしましたが、
作る過程で難しいロジックがたくさん入る
説明をする中で理解が良くなるように図表を利用し、
なぜこの部分がこうなるのか実際にお見せしながら講義が進むように努力して作りました。

💻使用スキル＆学習内容

^{▲JavaScript（JavaScript）、リアクト（React）、Redux（Redux）関連の選手知識が必要です。}

ログイン/会員登録、検証
DMに参加したユーザーのリアルタイム反映、DMメッセージルーム
チャットルームの作成、説明の追加、お気に入りの追加/削除
メッセージ通知数の表示
オープンルームで話す
相手の会話を入力するときに教えてください
チャット検索、スケルトン効果
ファイルアップロードの割合を表示
ユーザーイメージの交換、イメージメッセージの送信
アプリケーションのデプロイ
etc.

🧰 ここで扱うツール

Visual Studio Codeを使用しますが、自分が好きなEditorを使用できます。
MACを使用しますが、ウィンドウでも可能です。

🙋🏻‍♂️ Q&A

Q. 非専攻者も聞くことができますか？
A. うん！専攻者、非専攻者に関係なく聞ける講義です。

こんな方に
おすすめです

学習対象は
誰でしょう？

楽しくコーディングしたい人
最新技術に興味のある人

前提知識、
必要でしょうか？

JavaScript
リアクト

こんにちは
です。

84,083

受講生

2,691

受講レビュー

2,430

回答

4.8

講座評価

講座

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

カリキュラム

全体

142件 ∙ (19時間 4分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．講義資料

2件

1. ソースコード素材
2. 講義図表資料

セクション 2．講義紹介と基本構造

6件 ∙ (44分)

3. リアクトファイアベーススラックアプリ紹介映像
03:03
4. リアクトアプリをインストールして構造を作成する
12:50
5. ESLintの設定
04:46
6. React Router Domを設定する
05:10
7. Reduxの設定
09:57
8. Firebaseを使う
08:47

セクション 3．チャットページ基本構造の作成

9件 ∙ (1時間 1分)

9. CSS Framework React Bootstrap
02:05
10. 会員登録ページUIの作成
06:53
11. react-hook-formを使う
12:19
12. firebaseで電子メールでユーザーを作成する
10:03
13. Firebaseで作成したユーザーに詳細情報を追加する
05:18
14. Firebaseで作成したユーザーデータベースに保存する
07:49
15. ログインページの作成
04:22
16. 認証後のページ移動
05:54
17. Reduxストアにログインユーザー情報を保存する
06:31

セクション 4．認証機能の作成

9件 ∙ (1時間 21分)

セクション 5．パブリックメッセージ部分の作成

7件 ∙ (1時間 5分)

セクション 6．Direct Message 機能の作成

2件 ∙ (21分)

セクション 7．チャットルームのお気に入り機能を作成する

4件 ∙ (36分)

セクション 8．チャットルーム情報を表示する

2件 ∙ (18分)

セクション 9．Typing機能の実装

4件 ∙ (19分)

セクション 10．Auto ScrollとSkeletonの実装

2件 ∙ (11分)

セクション 11．データベース、ストレージルール＆amp;展開する

4件 ∙ (37分)

セクション 12．[参照]リダックス

8件 ∙ (1時間 28分)

セクション 13．ここからは、以前の講義資料です。 (Deprecated)

0件

セクション 14．講義資料

5件

セクション 15．講義の紹介＆amp;

9件 ∙ (45分)

セクション 16．認証処理

14件 ∙ (1時間 37分)

セクション 17．チャットページの基本構造

12件 ∙ (1時間 45分)

セクション 18．公開ルームチャット

10件 ∙ (1時間 46分)

セクション 19．DM (direct message) チャット

5件 ∙ (46分)

セクション 20．通知＆amp;お気に入りの部屋

9件 ∙ (1時間 27分)

セクション 21．チャットルーム情報

3件 ∙ (29分)

セクション 22．Typing...

4件 ∙ (36分)

セクション 23．Auto Scroll＆amp; Skeleton

3件 ∙ (26分)

セクション 24．Firebase v9でソースコードを修正する

9件 ∙ (1時間 15分)

講座掲載日:

最終更新日:

受講レビュー

全体

43件

4.7

43件の受講レビュー

familyman803619
受講レビュー 14
∙
平均評価 5.0
5
58% 受講後に作成
本当にReactとnodejs、firebaseの最高の先生ではないかと思います。 ReactとReudxの基礎講座を完全に行った後に、john ahnさんが載せてくれたすべての講義だけをしっかりと熟知して、1度は徹底的につくりながら丁寧に手書きし、1度は手書きしたものを見ながら参考しながら作ってみて、1度は見ていない作り見て、最後にまた見て、それを創作で自分がいくつか作ってみると、とても早い実力向上になると見てください。ただ残念なのは、cloud functionに関する内容が込められた川の一つ作っていただければとても良いようですㅠㅠ
kbba785883
受講レビュー 32
∙
平均評価 4.8
4
33% 受講後に作成
良い講義、素晴らしい講義ということには断然異議を提起する考えはありません。しかし、最近2週間前に購読を行った私としてはこれまでアップデートとなり、多くの部分が日焼けします。リアクトーム、リダックス、ファイアベースv9バージョン講座を聞いて、ダメな部分になるまで探さなければならないので、苦しいですね。もし最新バージョンで再講座を作る考えがあれば、購読して聞くようにします。 ......
near
受講レビュー 25
∙
平均評価 5.0
5
77% 受講後に作成
ファイアベース初めてやってみるのが面白い講義でした。講義はクラスでしたがフックで一応やってみました。リアクトコンポーネントの構造化に適応されたようです。
oan63103756
受講レビュー 1
∙
平均評価 5.0
5
78% 受講後に作成
もう半分くらい聞いているのに私がいくつかの講義を聞いてみましたが確かにdiagramで授業進行されますので、はるかに目にすっぽり入ってきて私もダイアグラムで今回まとめて勉強してみると本当のこれが効率が違いますね。おかげで勉強する道具一つ新しく習得していきます。 Youtubeでfirebaseの講義を聞いてとても理解できなかったのですが、この講義のため、本当の講師がどれくらい準備をして進行しているのかを感じますね。お勧めします。
obj1227
受講レビュー 5
∙
平均評価 5.0
5
76% 受講後に作成
いつも感謝しているジョン先生！おかげで3日でreactを復習しました。

￥5,193

John Ahnの他の講座

知識共有者の他の講座を見てみましょう！

フォローして学ぶリアクトネイティブ基礎

John Ahn

この講義を通じてリアクトネイティブを利用してアプリケーション開発を行うことができます。

Basic

React Native, React, expo

フォローして学ぶリアクトネイティブ基礎

John Ahn

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

この講義を通して、Reactの基礎から中級までを学ぶことができます。一つの講義で概念を理解し、実習を通して、Reactに必要なほとんどの知識を一度に習得できるように構成されています。

Basic

React, Next.js, TypeScript

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

フォローして学ぶドッカーとCI環境[2023.11アップデート]

John Ahn

このレッスンでは、ドッカーについて学び、CI環境を設定できます。

Basic

GitHub, AWS, Docker

フォローして学ぶドッカーとCI環境[2023.11アップデート]

John Ahn

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

Basic

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

John Ahn

この講義を通じてショッピングモールウェブサイトを最初から一つ一つ作ってみることができます。

Intermediate

React, Redux, Node.js

真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

John Ahn

フォローして学ぶノード、リアクトシリーズ - チャットボットサイトを作る

John Ahn

このレッスンでは、Googleが提供するAPIを使用してチャットボットを作成できます。

Basic

React, Node.js

フォローして学ぶノード、リアクトシリーズ - チャットボットサイトを作る

John Ahn

フォローして学ぶタイプスクリプトA-Z

John Ahn

この講義を通じてタイプスクリプトについて学ぶことができます。

Basic

TypeScript, JavaScript

フォローして学ぶタイプスクリプトA-Z

John Ahn

真似しながら学ぶJavaScript A-Z

John Ahn

ウェブ開発の基礎となるJavaScriptの基礎から中級まで学ぶことができます。

Beginner

JavaScript

真似しながら学ぶJavaScript A-Z

John Ahn

フォローして学ぶHTML、CSS

John Ahn

このレッスンを通して、HTML、CSSの基礎を固めることができます。

Beginner

HTML/CSS

フォローして学ぶHTML、CSS

John Ahn

フォローして学ぶウェブゲーム

John Ahn

このレッスンを通して、Webゲームをどのように開発するかを知ることができます。

Intermediate

React

フォローして学ぶウェブゲーム

John Ahn

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

このレッスンでは、リアクトアプリケーションをテストする方法を学びます。

Basic

React, React Context, Web Application

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

フォローして学ぶNestJS

John Ahn

このレッスンでは、NestJSについて学ぶことができます。

Basic

NestJS, PostgreSQL, TypeORM

フォローして学ぶNestJS

John Ahn

フォローして学ぶTDD開発[2023.11アップデート]

John Ahn

このレッスンでは、テスト主導開発（TDD）を使用してNode.jsアプリケーションを作成します。

Basic

TDD, Node.js, Express

フォローして学ぶTDD開発[2023.11アップデート]

John Ahn

フォローして学ぶデノ（DENO） - 基本講義

John Ahn

発売前から多くの関心を受けていたデノがいよいよ出てきました。このレッスンでは、デノがノードとどのように異なり、デノをどのように扱うかを学ぶことができます。

Basic

Deno

フォローして学ぶデノ（DENO） - 基本講義

John Ahn

フォローして学ぶノード、リアクトシリーズ - 基本講義

John Ahn

このレッスンでは、リアクトとノードをどのように使用するのかを学ぶことができます。

Basic

React, Node.js

フォローして学ぶノード、リアクトシリーズ - 基本講義

John Ahn

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

この講義を通じてリアクトやノードなどの概念だけでなく、実質的にどのようにWebサイトを作るかを学ぶことができます。

Basic

React, Node.js, Web Application

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

フォローして学習するノード、リアクトシリーズ - YouTubeサイトを作成

John Ahn

このレッスンでは、リアクトとノードの概念を習得するだけでなく、実際にどのようにWebサイトを作成できるかを学ぶことができます。

Basic

React, Redux, Node.js

フォローして学習するノード、リアクトシリーズ - YouTubeサイトを作成

John Ahn

似ている講座

同じ分野の他の講座を見てみましょう！

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

Intermediate

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

開発から配布まで！一つのサービスを完成するための険しい旅をろ過なくお見せします。初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！

Basic

React, GraphQL, Firebase

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

Basic

React, Next.js, TypeScript

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

Basic

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

このレッスンでは、リアクトアプリケーションをテストする方法を学びます。

Basic

React, React Context, Web Application

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

構造探索と操作のすべて - [DOM完全攻略 Part 1]

nhcodingstudio

React、Next.js、Vueをいくら勉強してもコードが抽象的に感じられ、構造がはっきりと理解できないのであれば、その根本的な原因は、DOMへの理解不足である可能性があります。DOMは、すべてのフロントエンドフレームワークの基盤であり、ウェブページの構造と動作を繋ぐ実体です。この講義は、単純なセレクターや操作方法を超え、HTMLがどのようにDOMオブジェクトに変わり、この構造をどのように選択し、探索し、操作できるのかを最初から段階的に教えてくれるDOM完全攻略のPart 1入門講義です。 HTMLタグは構造に過ぎず、JavaScriptは動作に過ぎませんが、その二つを繋ぐ核心がDOMです。この繋がりを明確に理解すれば、どのようなフレームワークを使ってもその中の本当の構造と流れを正確に見抜けるようになります。

Beginner

HTML/CSS, JavaScript, React

構造探索と操作のすべて - [DOM完全攻略 Part 1]

nhcodingstudio

イベントからSPAまで、インタラクティブWebの必須エンジン - [DOM完全攻略 Part 2]

nhcodingstudio

この講座では、単純なDOM操作に留まらず、実際のユーザーとのインタラクションの中でWeb UIを動的に構築し、反応する方法を深く学びます。イベントシステムのしくみ、バブリングとキャプチャリング、イベント委譲、リアルタイムUXフィードバック、そしてthrottle & debounceを活用したパフォーマンス最適化まで、実務で頻繁に遭遇する課題を実際に実装しながら習得できるように構成しました。DOMツリーの構造理解に基づいて、イベントの流れと状態の変化を柔軟に連携させる能力を身につけることができます。

Basic

HTML/CSS, JavaScript, React

イベントからSPAまで、インタラクティブWebの必須エンジン - [DOM完全攻略 Part 2]

nhcodingstudio

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

Basic

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

この講座では、代替不可能なNFT（Non Fungible Token）を活用して、非アプリを作成することができます。

Intermediate

Web Application, Blockchain, NFT

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

DOMからピクセルまで、ブラウザレンダリングとCRP完全攻略 - [DOM完全攻略 Part 3]

nhcodingstudio

この講義は、ブラウザがHTMLを受け取ってDOMを作成し、CSSOMと結合して画面にピクセルを描画するCritical Rendering Path（CRP）過程を最初から最後まで扱います。単純なDOM操作を超えて、CSSとJSが性能にどのような影響を与えるか、画像・フォント最適化、Lazy Loading、Intersection Observer、仮想リスト、そしてDevTools実習まで続き、実際のWeb性能を目に見えて改善できる実戦戦略を学ぶことができます。

Basic

HTML/CSS, JavaScript, React

DOMからピクセルまで、ブラウザレンダリングとCRP完全攻略 - [DOM完全攻略 Part 3]

nhcodingstudio

Flutterでメッセンジャーアプリ作り

DEV MOO

FlutterのRiverpodの状態管理とFirebaseを活用してメッセンジャーアプリを制作します。

Basic

Flutter, Firebase, riverpod

Flutterでメッセンジャーアプリ作り

DEV MOO

[2021]最近誰が有料でウェブサービスを構築するのか、ファイアベースのすべて - Javascript

David

2021年に新しく戻ってきた、＆quot;最近、誰が有料でWebサービスを構築していますが、Firebaseのすべて - JavaScript＆quot;講義！ 1人創業を夢見る初級開発者のためのバイブルになります。

Basic

Firebase

[2021]最近誰が有料でウェブサービスを構築するのか、ファイアベースのすべて - Javascript

David

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

迅速な実行と検証の時代、Vibeコーディングで誰よりも速く実行しましょう！広告、決済など収益化まで漏らさずに自分の手で実現してみましょう。

Beginner

React, Web Application, Next.js

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

非専攻者でも可能なAIバイブコーディング入門コース

itconnect

💡 非開発者もAIと一緒にたった10時間で創業MVPから収益化サービスまで！ 💰 外注費数千万円が必要だった開発、今や12万円で完全解決 🎯 名刺認識、感情分析、立地分析まで実戦ビジネスプロジェクト5個完走 🔥 企画者、マーケター、予備創業者なら開発者なしでもアイデア実現 ⚡ 今始めれば一生使える開発自立能力を獲得しましょう！

Beginner

HTML/CSS, Java, Web Application

非専攻者でも可能なAIバイブコーディング入門コース

itconnect

開発者の間で通じるバイブコーディング – 実務型 (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

Intermediate

React, Next.js, cursor

開発者の間で通じるバイブコーディング – 実務型 (Cursor AI, Figma)

codecamp

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

Basic

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123