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

React & Next & Redux & Redux-Saga & Expressスタックで、Twitterに似たSNSサービスを作成します。 最後に検索エンジン最適化を行い、AWSにデプロイします。

難易度 中級以上

受講期間 無制限

React
React
Redux
Redux
Node.js
Node.js
Express
Express
Next.js
Next.js
React
React
Redux
Redux
Node.js
Node.js
Express
Express
Next.js
Next.js

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

4.9

5.0

Choi Boo

99% 受講後に作成

講義の購入 悩みながらこの記事をご覧いただくと、すぐに受講してください後悔しません。 こんにちはこの講義を聞いて就職することになりました。 この講義を受講した後や受講しながらトイプロジェクトを定めて実行してください。 そして記録する習慣があれば良いです。または開発ブログを作成してください。 講義を受講しながら知らない部分は必ず記録してください。 開発ブログには完全に理解し、私のものにしたという気持ちで書けば役に立ちます。 私のストーリーを解きたいのですが、長すぎて... 私が就職するまで、学習順序は 1. ゼロ秒 Node クロール (JavaScript 何も知らないとき) 2. JavaScript(継続的に繰り返し学習し、インフラストラクチャ中心に勉強しました。) 3. ゼロ秒、キャプテン板橋vue 4.ライフコーディングreact、redux(YouTube) 5. John Ahnリアクトシリーズ(インフラ) 6. ゼロ秒 [リニューアル] react nodebird 7. nextjs トイプロジェクト (一番重要!! 人生の転換点) 8. github草の管理 9. 開発ブログ 10. 履歴書、ポートフォリオ管理 11. 面接と就職 ちゃんと就職するために準備した期間が思ったより短いのに(4ヶ月?)何か少しした感じもします。 勉強をたくさんできたきっかけが金土日夜間アルバしながら仕事がない時勉強してきたが、コロナで商売しなくてアルバできない時その時勉強すごいようです。 必ずこの講義だけを見て就職していませんでしたが、この講義を受講することで就職に役立っています。おそらくこの講義がなければ、他のアルバの仕事をしながら勉強を続けていると思います。 この講義を見てみると、どんなサイトでも作れる自信が生まれます。ファイティング!!

5.0

자유인

91% 受講後に作成

こんにちは!ゼロチョの授業を聞いてブロックチェーン会社に就職もしたし、別に私のプロジェクトの広報もする兼して受講評を作成するようになりました:) 現在も会社通いながらメンテナンス中のプロジェクト先に公開します!スタックなのにタイプスクリプト、Nestが追加されました! https://musicsseolprise.com ここに入ってくればいいです! 私が公開するプロジェクトはフロントに限ってノードバード講義だけをよく理解しても十分にできる難易度です! 私は専攻者でしたが、学部の時期、最後の学期の時は、データベースを除いてさまようことが多く、単位も良くなく、非専攻自慢とベースが差がなかったと見てください。 とりあえず講義の最大のメリットは質問解答!大きな助けになりました! そして、フロントアンドは変化が速すぎますので、勉強しているときにライブラリを書く理由を自分で質問してみてください。 個人的には私は就学生なら状態管理をRecoil.jsをすることをお勧めします。勉強する方がいいので、勉強してみて、リファクタリングで質問しながら勉強しています。お勧めします! ちなみに、私はタイプスクリプトを勉強して編んだコードをすべてタイプスクリプトに置き換えました!とブラウザ内蔵のapiを書きました。 とにかく忙しいのですが、質問いつも親切につけてくださってゼロチョー本当にありがとうございました!

5.0

OCK Sam

97% 受講後に作成

現業のフロントエンド開発者としてバックエンドの開発を困難にし、配布してみたかったのですが、曖昧な恐怖のために始めることができませんでした。 さてこの講義を通じて直接配布もしてみて、バックエンド作業もして本当に良かったです! 講義を聞く方は redux と saga の授業を聞くとき、ある程度パターンに慣れて指示面ゼロチョ様が redux、saga 作業する前にあらかじめ止めておき、フロントで redux と saga、backend router 作業をあらかじめしてみて講義を聞けばいいこと同じです^^!

受講後に得られること

  • React開発

  • Redux&Redux-Saga

  • React Hooksの使用

  • Styled Components

  • Ant Design

  • SWR

  • サーバーサイドレンダリング

  • 検索エンジン最適化

  • AWS デプロイ

新しく出会うZeroChoReact NodeBirdプロジェクト!

リニューアルされた事項

next@9, styled-components@5, antd@4, node.js@14などのバージョンを扱います。

next@14およびnode.js@20とも互換性があるため、最新バージョンで進めていただいても構いません。 antd@5、next-redux-wrapper@8のマイグレーション方法は、講義ノートと新着情報(お知らせ)にまとめてあります。参考にしながらご覧ください!

この講座はPages Routerを扱います。App Routerの講座はこちらのリンク(クリック)にあります。App Routerの講座の方がより最新ですが、この講座を残している理由は、App Routerがまだ不安定で実務で使うには少しリスクがあるからです。安定するまでは、実務ではPages Routerを使われることをおすすめします。


お願いの言葉

昨年、多くの受講生の方々がこの講座を受講してくださいました。ありがとうございます。ただ、一つお伝えしたいことがあります。単に講義を目で見るだけでは、フルスタックエンジニアにはなれません(それは欲張りというものです)。実際に手を動かしてコードを書き、発生するエラーを解決し、講座にはない機能を作ってみることで、出てくる技術を自分のものにしなければなりません。

この講座は、実際には6ヶ月以上かかるカリキュラムを20時間近くにわたって凝縮してお見せするものです。 HTML、CSS、JS、Node、MySQL、AWSのすべてにおいて、ある程度習得するには少なくとも1ヶ月以上の投資が必要です。したがって、講座は20時間の分量であっても、別途自習が必要となります。


ZeroChoのReactで学ぶ
20時間フルスタック講座!

▲ NodeBird SNS作り

  • Twitterと似た(と書いてパクリと読む)ZeroChoのシグネチャープロジェクトNodeBird SNSを作りながら、サービスの実装からデプロイまでをすべて学んでみましょう。
  • Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)を学びます。
  • 検索エンジン最適化とAWSデプロイ(簡単にEC2 + Lambda + S3 + Route53を使用)はボーナス!

実際に作ってみましょう!

ログイン、投稿作成、いいね
画像アップロード、コメント、リツイート

 

無限スクロール、フォロー、フォロー解除

 

ハッシュタグ検索、ユーザープロフィール

 

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

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


知識共有者を紹介します。

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

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


関連講義

ウェブゲームを作りながら学ぶReact
無料でウェブゲームを通じてReactを学んでみます。
フロントエンドを中心に扱い、バックエンドは補助的な役割を果たします。
[リニューアル] Node.js教科書 - 基本からプロジェクト実習まで
Nodeの核心概念を習得した後、
実践的な例題を通じて実務に飛び込む準備を整えます。
VueでNodebird SNS作り
Vueで作るフルスタックSNS講座!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React HooksやNext.jsのように、Reactを応用したい方

  • フルスタック開発に関心がある方

  • フロントエンドエンジニア志望

  • Next Page Routerを積極的に使ってみたい方

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

  • HTML、CSSの知識

  • JavaScriptの最新文法知識

  • ZeroChoのReact無料講座を視聴

こんにちは
zerochoです。

67,847

受講生

1,756

受講レビュー

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(カカオモビリティに買収、最年少リード開発者として合流)

もっと見る

カリキュラム

全体

94件 ∙ (23時間 3分)

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

受講レビュー

全体

177件

4.9

177件の受講レビュー

  • kaei25740567님의 프로필 이미지
    kaei25740567

    受講レビュー 2

    平均評価 4.5

    5

    97% 受講後に作成

    現業のフロントエンド開発者としてバックエンドの開発を困難にし、配布してみたかったのですが、曖昧な恐怖のために始めることができませんでした。 さてこの講義を通じて直接配布もしてみて、バックエンド作業もして本当に良かったです! 講義を聞く方は redux と saga の授業を聞くとき、ある程度パターンに慣れて指示面ゼロチョ様が redux、saga 作業する前にあらかじめ止めておき、フロントで redux と saga、backend router 作業をあらかじめしてみて講義を聞けばいいこと同じです^^!

    • ksw50621916님의 프로필 이미지
      ksw50621916

      受講レビュー 4

      平均評価 5.0

      5

      91% 受講後に作成

      こんにちは!ゼロチョの授業を聞いてブロックチェーン会社に就職もしたし、別に私のプロジェクトの広報もする兼して受講評を作成するようになりました:) 現在も会社通いながらメンテナンス中のプロジェクト先に公開します!スタックなのにタイプスクリプト、Nestが追加されました! https://musicsseolprise.com ここに入ってくればいいです! 私が公開するプロジェクトはフロントに限ってノードバード講義だけをよく理解しても十分にできる難易度です! 私は専攻者でしたが、学部の時期、最後の学期の時は、データベースを除いてさまようことが多く、単位も良くなく、非専攻自慢とベースが差がなかったと見てください。 とりあえず講義の最大のメリットは質問解答!大きな助けになりました! そして、フロントアンドは変化が速すぎますので、勉強しているときにライブラリを書く理由を自分で質問してみてください。 個人的には私は就学生なら状態管理をRecoil.jsをすることをお勧めします。勉強する方がいいので、勉強してみて、リファクタリングで質問しながら勉強しています。お勧めします! ちなみに、私はタイプスクリプトを勉強して編んだコードをすべてタイプスクリプトに置き換えました!とブラウザ内蔵のapiを書きました。 とにかく忙しいのですが、質問いつも親切につけてくださってゼロチョー本当にありがとうございました!

      • heruse7318님의 프로필 이미지
        heruse7318

        受講レビュー 4

        平均評価 2.5

        5

        37% 受講後に作成

        JavaScriptの仕事も知らない開発者でした。 ユツクゼロ秒チャンネルを通して ゲームで学ぶJavaScriptジャストンまで聞いて 早くリアクト開始したい気持ちでリアクト初級講座でコンセプトだけがピッタリと得てこれを聞きました。原則を中心に説明しているスターだから興味があれば、非専攻者が聞いても従うことができます。文法については中途半端なGoogleで検索して知ればいいですからね。そして、質問に答えて早くつけてくれるのも大きな手引きになりました。

        • qnrjs42님의 프로필 이미지
          qnrjs42

          受講レビュー 18

          平均評価 4.8

          5

          99% 受講後に作成

          講義の購入 悩みながらこの記事をご覧いただくと、すぐに受講してください後悔しません。 こんにちはこの講義を聞いて就職することになりました。 この講義を受講した後や受講しながらトイプロジェクトを定めて実行してください。 そして記録する習慣があれば良いです。または開発ブログを作成してください。 講義を受講しながら知らない部分は必ず記録してください。 開発ブログには完全に理解し、私のものにしたという気持ちで書けば役に立ちます。 私のストーリーを解きたいのですが、長すぎて... 私が就職するまで、学習順序は 1. ゼロ秒 Node クロール (JavaScript 何も知らないとき) 2. JavaScript(継続的に繰り返し学習し、インフラストラクチャ中心に勉強しました。) 3. ゼロ秒、キャプテン板橋vue 4.ライフコーディングreact、redux(YouTube) 5. John Ahnリアクトシリーズ(インフラ) 6. ゼロ秒 [リニューアル] react nodebird 7. nextjs トイプロジェクト (一番重要!! 人生の転換点) 8. github草の管理 9. 開発ブログ 10. 履歴書、ポートフォリオ管理 11. 面接と就職 ちゃんと就職するために準備した期間が思ったより短いのに(4ヶ月?)何か少しした感じもします。 勉強をたくさんできたきっかけが金土日夜間アルバしながら仕事がない時勉強してきたが、コロナで商売しなくてアルバできない時その時勉強すごいようです。 必ずこの講義だけを見て就職していませんでしたが、この講義を受講することで就職に役立っています。おそらくこの講義がなければ、他のアルバの仕事をしながら勉強を続けていると思います。 この講義を見てみると、どんなサイトでも作れる自信が生まれます。ファイティング!!

          • next.jsトイプロジェクトはどこで受講しましたか?

          • この部屋の回答がたくさん遅れましたね アラームが出てこなかったので返事が付いたこともわかりませんでした。 トイプロジェクトはクローンコーディングと似ていますが、講義ではありません。 特定サイト定めて一つ一つクローンしました。

        • 9uke님의 프로필 이미지
          9uke

          受講レビュー 2

          平均評価 3.5

          3

          88% 受講後に作成

          この講義の長所と短所を記録しようと思います。 利点 1. 講義内容があまりにもわかる 欠点 1. コードをコピー・ペーストする区間や、編集して突然完成したコードが出るたびに突然生じたコードなので、このコードをどこから取り込んだのか、どんな内容を修正したのかについての説明が足りず、この部分で時間がかかります。 2. 講義によく従うと、途中でエラーが発生するが、講義自体で生じたミスなので、次の講義で訂正する区間が出るが、これに対する言及がないため、次の講義を見るまでは、本人がどこでミスをしたのか探し続ける。 講義内容があまりにもわかるが編集部分がたくさん残念だ。

          zerochoの他の講座

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

          似ている講座

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