Slackクローンコーディング[Reactによるリアルタイムチャット]

Slackサービスを模倣しながら、本格的なReactウェブ開発を始めてみましょう!会員登録、ログイン、ルーム作成、そしてリアルタイムチャットまで!

難易度 中級以上

受講期間 無制限

Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel

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

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

4.8

5.0

shut up and squat

96% 受講後に作成

本物ちゃんです フロントの全体的な技術をたくさん扱ってくれます 回答もほぼスラッククローンコーディングなので、リアルタイムソケット通信するレベルに早く取り付けていただき、コミュニケーションもすごく上手な方です。ゼロチョーのリアクト無料講座を聞いて、これを聞くと、たくさんのことを手に入れることができます。

5.0

Milkyway

100% 受講後に作成

まだ講義は全部聞いていませんが、十分に良い講義だと思われ、インフラで受講評してほしいポップアップが浮いて事前に少ないです。 まず講座紹介そのままタイプスクリプトを書いたが、与えるリアクト、ウェブパック、SWR、Emotion、Socket.IO講座と考えればいいと思います。リアクト+タイプスクリプトを勉強しに講座を聞くと少し残念です。逆に言えば、タイプスクリプトを知らなくても講義を聞くには何の問題もありません。 ただ、私のおすすめはオールインワンタイプスクリプト講座を進め、リアクト+タイプスクリプトの勉強をしようとする方が軽くタイプスクリプトも書いて聴きやすい講座という気がします。 長所を先に言えば、まずはリアクトに忠実な講義であるだけにリアクト構造、開発方向をつかむのに最適です。 2つ目はWebパックの初期設定を知らせて起動するのには分からなくても開発するのに支障はありませんが、後で本当に重要なのが初期設定だと思うほど初期設定に関する内容が本当に良かったです。 3つ目は、スタイルを身に着けるときにどの単位でスタイルコンポーネントを作るかを提示し、そのまま授業進行するのもよかったです。最後にソケット通信に関する基本説明とヒントを与えるのも良かったのですが、これは今聞いているので確信はありませんね。 欠点は、私が見たときに出てきたか、ちょっとした講義とコードが変わっていることです。ただ、FitHubにアップデートコードを着実に上げておいて、詰まっていることがあるなら、インフラの質問掲示板やSlackに質問すれば、答えを早くしてくれるので、一人で勉強する気があれば十分補完可能で、私は講義内容と並行してFetHub react-query内容も一緒に反映して聞いているのにライブラリアップデートに変わった内容は十分に検索して解決できるレベルでした。 最後に講義聞くヒントを言えば初期セッティングのような場合には変わり点があるので、追いつきながら聞かないで一旦フェイトハブコードを貼り付けてからじっくりと講義を聞いてみて一人でセッティングしてみる方法も良いと思います。 そして基礎講義であるだけに、すでにリアクトとタイプスクリプトを実務でうまく使用中であり、ソケット通信も適用してうまく書いたことがあれば、思ったより内容が少ないでしょう。 個人的に前に得ていくことが多く、良い経験になった講義でした。

5.0

넉리

50% 受講後に作成

もともと私がインターネット講義とうまく合わないと思っていましたが、頑強な講義がほとんどないからです。

受講後に得られること

  • React Web 開発

  • フロント初期設定(CRAなし)

  • SWR(Reduxの代替)

  • Emotion(スタイルドコンポーネント)

  • Socket.io リアルタイムチャット

自分の手で作るチャットアプリケーション、
効果的に、よりシンプルに! 💬

この講座では?

Slack(スラック)サービスを模倣して作りながら
本格的なReactウェブ開発を始めてみましょう!
(Slack+React、通称Sleact!)

React Web開発、
どのように学ぶべきでしょうか?

最近はReduxをあまり使わない傾向にあると聞きましたが…
JavaScriptからTypeScriptに移行していると聞きましたが…
本当ですか?

このような話をよく耳にしませんか?悲しいことに、それは事実です。そのため、この講義でもリダックス(Redux)を取り除き、JavaScriptの代わりにTypeScriptを適用しました。ReduxがなくてもReactアプリの開発は可能ですし、TypeScriptも思ったより難しくないということをお見せします!


このような方におすすめです!

Reactウェブ開発の方法を学んでみたい方

TypeScriptを新しく学んでみたい方

クローンコーディングを通じてフロントエンドパートを実装してみたい方


ZeroChoスラッククローン、
フロントエンドの悩みを完璧に解決!

  • 最新のフロントエンドトレンドに合わせて、TypeScriptでサービスを制作します。ただし、TypeScriptに抵抗がある方のために、JavaScriptでも進められるように講義を構成しました。(JavaScriptのソースコードを提供!)
  • Reduxは使用しません。代わりにSWRというライブラリを使用します。
  • 会員登録、ログイン、チャットルーム作成、ユーザー招待、リアルタイムチャット、ユーザーメンション、画像アップロードなど、チャットアプリケーションの実装に必要な機能をすべて実装します。
  • 講義では説明しませんが、バックエンドのソースコードも一緒に提供されます。

このようなスキルを学びます。

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


直接作ってみてください!

회원가입, 로그인, 워크스페이스
각종 워크스페이스 기능 구현

リアルタイムチャットおよびオンラインリスト


#1
ソースコードを

提供します。

https://github.com/zerocho/sleact (ショートカット)

#2
質問に素早く
お答えします。

私の講座の長所はQ&Aです。質問していただければ、1日以内に回答いたします。
講座の内容について自由に質問しながら、能動的に学んでみてください。
内容を理解するのにより役立つはずです!


講師を紹介します。

Web開発ベストセラー
<Node.js教科書> 著者

株式会社 今日のピックアップ
CTO


よくある質問 💬

Q. タイプスクリプトは、必ず知っておく必要がありますか?

個人的にTypeScriptを学ぶことをおすすめします。JavaScriptのエコシステムは、ますますTypeScriptへと移行しています。ただし、この講座ではJavaScriptのソースコードを提供し、動画内でTypeScriptを適用する部分をお教えしますので、JavaScriptだけでも進めることができます。(tsx、tsファイルをjsx、jsに変えて、:型、<型>の部分を消せば終わりです。とても簡単です)

Q. SWRは検証済みのライブラリですか?

Next.jsとnow.shを作ったVercel(旧Zeit)が作ったライブラリです。安心して使ってください。GitHubのスターが16,000個もありますよ〜

Q. セッティングの際にCRAを使わなかった理由はありますか?

私は常に講義において、CRAを使わずに手動でセッティングすることを原則としています。手動でのセッティング方法を知ることで、CRAの原理も理解できるからです。原理を理解した上でCRAを使うことをおすすめします。

受講前にご確認ください!

  • Socket.ioはバージョン2を使用します。バージョン2をインストールする必要があります。
  • 実際の配信サービスは sleact.nodebird.com でご確認いただけます。
  • よくある質問はFAQとしてまとめて、Inflearnのブログにアップロードします。
  • 映像や内容に問題がある場合、お問い合わせいただければ再編集してアップロードいたします。
  • 講義にはありませんが実装方法が気になるものがある場合、多くの方から質問があればボーナス動画を制作します。

前提知識 & 関連講義

必須の前提知識

8つのウェブゲームでReact、Babel、Webpackまで!

TypeScriptをさらに学ぶには!

今や大勢!JSより安定したTSの世界

他のクローンコーディング講座が気になるなら?

驚異の22時間、Twitterクローン!

 

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactの文法を学び、本格的にウェブ開発を始めたい方

  • 単なるチュートリアルではなく、本格的なサービスを再現して作りたい方

  • TypeScriptで安全性を高めた開発を学びたい方

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

  • HTML/CSS

  • JSの基礎知識

  • Reactの基本文法(無料講座を受けてきてください)

こんにちは
zerochoです。

67,671

受講生

1,741

受講レビュー

9,765

回答

4.8

講座評価

25

講座

私の講義の強みはQ&Aです(Inflearn回答王を2回受賞)。24時間以内にできる限りお答えします!一緒に悩んでいるという気持ちで回答させていただきます!

私の講座の大きな強みはQ&Aサポートです。(インフラーンQ&A王賞を2回受賞)24時間以内にご質問にお答えし、最善を尽くしてサポートいたします!問題を一緒に解決している感覚を味わっていただけるでしょう。

👉ZeroCho Lectures
ZeroCho(ゼロチョ)講義の全ロードマップ。私の全コースの完全なロードマップはこちらでご確認いただけます。

– 『Node.js教科書』、『コーディング自律学習 ZeroChoのJavaScript』、『Let's Get IT JavaScript』、『TypeScript教科書』著者
ZeroCho.com 運営者
– 現) YouTubeにてZeroCho TVで開発関連の放送中
– 元) Smoretalk CTO
– 元) 今日のピックアップ CTO(カカオモビリティにエグジット後、カカオモビリティ最年少開発パート長)

  • Node.js教科書ZeroChoの独学JavaScriptLet's Get IT JavaScriptTypeScript教科書の著者

  • ZeroCho.comの運営者

  • 現在、開発関連のトピックを扱うYouTubeチャンネルZeroCho TVを運営中

  • SmoreTalk CTO

  • Today Pickup CTO(カカオモビリティに買収、最年少リード開発者として合流)

もっと見る

カリキュラム

全体

46件 ∙ (11時間 1分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

97件

4.8

97件の受講レビュー

  • dla14347593님의 프로필 이미지
    dla14347593

    受講レビュー 4

    平均評価 4.3

    4

    100% 受講後に作成

    ゼロチョ様の講義を着実に聞いていますが、説明や例も実務で活用するほど良いと感じています。しかし、残念なことは、一度講義で服用したり、それほど重要ではないソースは急速に進むことがあり、そのコードを適用するのに時間がかかることがあります。コースごとにgit branchが分離されていれば、もう少し簡単に例を確認してテストしてみることができるようです。また、途中で説明や言及したサイトや文書はリンクを残していただければ簡単に参考にできるようです。最後に、毎回良い内容で講義していただきありがとうございます。

    • dyonglove님의 프로필 이미지
      dyonglove

      受講レビュー 25

      平均評価 4.2

      4

      100% 受講後に作成

      手ごろな価格ではないのに、クラスを聴くのは難しいです。 YouTubeで無料で公開する講義なら十分に聞くことができるだろうが、整頓もされておらず、毎回公式文書にすべて出ていると言われるが…ありますか?定石があるので、誰もが一等級を受けるわけではないですね。定石に全部出ているので見ればいいと、ある部分は大まかに説明すれば聞く人によっては非常に難しくて混同して感じることもあります。バックエンドとフロントエンドをあえて分けるのも値上げする方便だと思います。二つの講義が自然に繋がらない感じですが、まずバックエンドを作ったのですがフロントに来てみると、講師様が作った部分にコンフィグ部分が私が作った側にはないとか。また、その前のレベルに該当するのはすでに知っている内容なので、忙しい会社員として、すべての講義に多時間を投資することはできません。まるで数学をめちゃくちゃうまくやっているわけではありませんが、毎回集合だけ見ているとは思えません。前講義より上位レベルの講義を撮っても独立した講義で作っていただきたいです。実は色々な講義を聞いて、私が感じる不便さを最大限過ぎないように伝えるためにたくさん悩んだので、この部分はタイプスクリプト講義を聞いて感じた感想が出てきたようですが。全講義を知らなかった私としてはあまり得られる感じではありませんでした。だから何度も聞いて把握しようとしているのですが、本業も忙しいのでそれほど講義を聞く負担が上がり、その不満が講師様に向けられて申し訳ない心もありますが、こういう意見もあることをご確認ください。最後の配布部分も、それでどのように実質的に配布し、目に見える結果を見ることができるのか気になることが解決されない感じです。それぞれスタイルが違うと思いますが、個人的に価格に比べて良い質の講義ではないと思います。しかし、私が今まで聞いたゼロチョの講義の中で、今回のフロントエンド講義が一番良かったと思います。前後の部分に音楽を取り出してくださったことも、受講生たちの意見を聞いて心配してくださったという考えに感謝した気がしました。これからも発展するゼロチョ様になりますように。

      • zerocho
        知識共有者

        大切なコメントありがとうございます。私が最近講座は講義教案も作成し、より体系的に授業を作っていますが、タイプスクリプトの方は初創期講座なので、はるかに精神のない感じが強く召されたようです。私が最近講座を出したとしたら、JavaScript+タイプスクリプトを合わせて講座を出してJavaScript部分はYouTubeに無料で解放されたようですね。この部分は私が次第にリニューアルしながら改善していくようにします。スラッククローンコーディング講座については、もともとフロントとバックエンドを合わせて9~10万ウォンに発売しようとしたが、フルスタック講座の負担になる方が多く、ターゲット層を分離しました。ところが分離したまま発売してみると、それぞれバグや講座改善事項が積み重ねられ、二つのつながりが少しずれた部分があったようですね。もう一度練習して修正します。知っている部分を教えてください。苦情が多かったのですが、できるだけ配慮して受講評を残してくださったのが感じられます。誠実なスカンピョン残してくれてありがとうと申し訳ありません。

    • milkyway님의 프로필 이미지
      milkyway

      受講レビュー 6

      平均評価 5.0

      5

      100% 受講後に作成

      まだ講義は全部聞いていませんが、十分に良い講義だと思われ、インフラで受講評してほしいポップアップが浮いて事前に少ないです。 まず講座紹介そのままタイプスクリプトを書いたが、与えるリアクト、ウェブパック、SWR、Emotion、Socket.IO講座と考えればいいと思います。リアクト+タイプスクリプトを勉強しに講座を聞くと少し残念です。逆に言えば、タイプスクリプトを知らなくても講義を聞くには何の問題もありません。 ただ、私のおすすめはオールインワンタイプスクリプト講座を進め、リアクト+タイプスクリプトの勉強をしようとする方が軽くタイプスクリプトも書いて聴きやすい講座という気がします。 長所を先に言えば、まずはリアクトに忠実な講義であるだけにリアクト構造、開発方向をつかむのに最適です。 2つ目はWebパックの初期設定を知らせて起動するのには分からなくても開発するのに支障はありませんが、後で本当に重要なのが初期設定だと思うほど初期設定に関する内容が本当に良かったです。 3つ目は、スタイルを身に着けるときにどの単位でスタイルコンポーネントを作るかを提示し、そのまま授業進行するのもよかったです。最後にソケット通信に関する基本説明とヒントを与えるのも良かったのですが、これは今聞いているので確信はありませんね。 欠点は、私が見たときに出てきたか、ちょっとした講義とコードが変わっていることです。ただ、FitHubにアップデートコードを着実に上げておいて、詰まっていることがあるなら、インフラの質問掲示板やSlackに質問すれば、答えを早くしてくれるので、一人で勉強する気があれば十分補完可能で、私は講義内容と並行してFetHub react-query内容も一緒に反映して聞いているのにライブラリアップデートに変わった内容は十分に検索して解決できるレベルでした。 最後に講義聞くヒントを言えば初期セッティングのような場合には変わり点があるので、追いつきながら聞かないで一旦フェイトハブコードを貼り付けてからじっくりと講義を聞いてみて一人でセッティングしてみる方法も良いと思います。 そして基礎講義であるだけに、すでにリアクトとタイプスクリプトを実務でうまく使用中であり、ソケット通信も適用してうまく書いたことがあれば、思ったより内容が少ないでしょう。 個人的に前に得ていくことが多く、良い経験になった講義でした。

      • dongwooklee96님의 프로필 이미지
        dongwooklee96

        受講レビュー 5

        平均評価 4.4

        5

        50% 受講後に作成

        もともと私がインターネット講義とうまく合わないと思っていましたが、頑強な講義がほとんどないからです。

        • ckdduf6651459님의 프로필 이미지
          ckdduf6651459

          受講レビュー 2

          平均評価 5.0

          5

          96% 受講後に作成

          本物ちゃんです フロントの全体的な技術をたくさん扱ってくれます 回答もほぼスラッククローンコーディングなので、リアルタイムソケット通信するレベルに早く取り付けていただき、コミュニケーションもすごく上手な方です。ゼロチョーのリアクト無料講座を聞いて、これを聞くと、たくさんのことを手に入れることができます。

          zerochoの他の講座

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

          似ている講座

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

          ¥5,038