Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【React19対応】初心者から中級者へ!React+Typescriptで本格的なSlackクローンを作ろう
Highest Rated
Rating: 4.6 out of 5(47 ratings)
786 students

【React19対応】初心者から中級者へ!React+Typescriptで本格的なSlackクローンを作ろう

React + Typescriptで有名メッセージングサービス「Slack」のクローンアプリを作る。リアルタイムのメッセージング機能、ユーザー登録/ログイン、ユーザーの検索など様々な機能を実装。
Last updated 6/2026
Japanese

What you'll learn

  • ReactとTypescriptを使い、実践的なSlackのクローンアプリの作成方法を学べる
  • 転職/就職時に重要なポートフォリオに入れる自作アプリケーションを作る基礎ができる
  • jotaiを使い、グローバルステートを使ってアプリの状態を効率的に管理できる
  • Websocketを使ったリアルタイムチャットの機能を作れる
  • 実務に近いより実践的なReactを使った開発が学べる
  • 効率よくWeb開発をするために便利な環境、ツールを学べる
  • APIとやりとりする本格的なアプリケーションの作り方がわかる

Course content

10 sections57 lectures5h 47m total length
  • 本講座で学ぶこと3:45
  • 完成版アプリのデモ5:13
  • 完成版のソースコード0:10
  • 無料の専用学習コミュニティに参加しよう0:27

Requirements

  • 別で提供している「就職/転職で有利なポートフォリオに! 基礎〜応用4つのReactアプリで実践的な開発を学ぼう」の内容を理解されてるとスムーズかと思います
  • Reactの基礎(Progateレベルの内容)は理解している前提の講座となっております
  • HTML/CSS/JavaScriptの基本的な文法とルールは解説していません
  • Typescriptについても基本的な解説はないため、基礎レベルを理解している前提です

Description

「ReactやTypeScriptの基礎は理解したけど、実際に自分でWebアプリを作ったことがない…」

「もっと実践的なスキルを身につけて、早くエンジニアとして働けるレベルになりたい!」


そんなあなたのために、ログイン/ユーザー登録、ワークスペースやチャンネルの作成、リアルタイム通信など、本格的な機能を持ったSlackクローンを作成しながら実務レベルのReactアプリ開発について学べる講座です。


【この講座で学べること】

  • Slackライクな高機能メッセージングアプリ開発:

    • メッセージの送信、削除などのリアルタイム同期

    • 画像の送信

    • ユーザー登録/ログイン機能

    • ユーザー検索機能

    • ワークスペースやチャンネルの作成機能

    • ワークスペースへのユーザー招待機能

  • モダンなReact開発

  • TypeScript による型安全なコーディングと、保守性の高いアプリケーション設計


【本コースの対象者】

  • Reactエンジニアとしての転職/就職を本気で目指している方

  • React + Typescriptを使って自分でアプリを作ってみたい方

  • Reactの基礎は一定理解しており、実務レベルのアプリ構築について学びたい方

  • Reactの理解をもっと深めたい方


【受講する際の注意点】

  • HTML/CSS/Typescriptの基礎については解説していません

  • HTML/CSS、アプリの見た目を作る部分のコードについてはこちらで用意したものを利用していただく想定のため、本講座の解説には入っておりません

  • Reactの基本(Progateの内容等)、および別で提供している講座「就職/転職で有利なポートフォリオに! 基礎〜応用4つのReactアプリで実践的な開発を学ぼう」の内容は理解している前提となっております

  • 今回できる限り内容を優しくするため、コンポーネントの再描画の最適化などパフォーマンスチューニングには触れておりません

  • QAで質問いただいた際に、Githubでコードの共有を依頼する場合があります。質問される場合は、必ずGithubのアカウントを作成してください

  • 当方身体的な事情により、少し喋り方が聞き取りづらいところがあるかもしれません。気になさる方は受講をご遠慮いたければと思います

Who this course is for:

  • Reactエンジニアとしての転職/就職を本気で目指している方
  • React + Typescriptを使って自分でアプリを作ってみたい方
  • Reactの基礎は一定理解しており、実務レベルのアプリ構築について学びたい方
  • Reactの理解をもっと深めたい方