一口サイズで作って食べるReact.js実践プロジェクト - SNS編

いよいよ実践に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証&認可、無限スクロール、画像アップロード、「いいね」、無限ネストコメント、ダークモードなどの機能を作っていきます。この過程で、ZustandとTanstack Queryを使ったサーバーおよびグローバル状態管理の手法も見ていく予定です。

難易度 中級以上

受講期間 無制限

React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand
React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand

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

5.0

5.0

pgaey

57% 受講後に作成

学習者の立場から感じた個人的な見解を残します。 受講を悩んでいる方々の助けになれば幸いです。 1. システムの流れについて理解しやすいです。 講義ごとに、現在実装しようとしている機能のシステムフローを資料で説明してくださいます。流れに沿って視覚資料も更新されるので、難しい概念をまずイメージしてから取り組めるようになっているのが良いです。コードの実装よりもアーキテクチャが重要なので、本当に素晴らしい要素だと思います。 2. 概念を扱っています 概念をしっかり扱ってくださるので理解しやすく、なぜそうするのかという理由が分かります。そうして知識を得るうちに、個人的には講師の方がどのように勉強されたのかが気になりました。結局、公式ドキュメントのリファレンスをどれだけ掘り下げたかの差ではないかと考え、コードを読み解き、公式ドキュメント「でも」知識を習得することが重要だという挑戦意欲が湧きました。単なるクローンコーディングではありません。 3. 決して簡単ではありません 概念を丁寧に扱ってくださいますが、すごく簡単というわけではありません。実践プロジェクトであるだけに、重要な部分は難易度が高いです。個人的には難易度が自分にぴったりでした。難しすぎず、かといって簡単すぎもしないので、ちょうど良かったです。 4. 滑舌(ディクション) 講師の方の滑舌が良いです。よく「逆体感(悪いものに触れて初めて良さに気づくこと)」が大きいと言いますよね。滑舌が良いからといって、より集中できるという感覚はあまりなかったのですが、逆の場合(滑舌が悪い場合)は本当に大変です。そういったストレスが全くありません。 ** 締めくくり ** プロジェクトの流れを掴みたい方は、受講すると助けになると思います。私は部分的な実装は経験がありましたが、結局プロジェクトを構成するアーキテクチャとシステムフロー図を知ることが重要だと感じました。プロジェクトをAからZまで経験したことがない方は、受講すれば多くの助けを得られるはずです。

5.0

민경언

31% 受講後に作成

Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。

5.0

kaeuhy

10% 受講後に作成

講義カリキュラムを見て、本当に充実していると思いました。 これより完璧なフロントエンドのための講義は存在しません。 フロントエンド = 이정환

受講後に得られること

  • React.js + TypeScript + Supabaseを使って実務レベルのSNSプロジェクトを作ってみます。

  • 認証&認可、無限スクロール、画像アップロード、「いいね」、無限ネストコメント、ダークモードなどの機能を作ってみます

  • ZustandとTanStack Queryを利用したサーバーおよびグローバル状態管理の手法を見ていきます。

로드맵-강의상세

画像をクリックするとロードマップに移動できます。 
> ロードマップリンク:https://link.onebitefe.com/r/3fr3f6

シリーズ講義リンク
> 一口サイズで学ぶReact :https://inf.run/kdHbe
一口サイズで学ぶTypeScript : https://inf.run/FpLm4
一口サイズで学ぶNext : https://inf.run/v3XAj

React.js + TypeScriptを通じて

実務レベルのSNSサービスを作成します。

AIに質問しながらチュートリアルだけを繰り返しているなら、今こそ本格的な実践プロジェクトに挑戦する番です。

本講義ではReact.js + TypeScript + Supabaseを活用して

実際のユーザーに提供できるレベルの実務的なSNSサービスを、最初から最後まで作ってみます。

デモサイト:https://demo-onebite-log.vercel.app/

> テストアカウントのメールアドレス:test@onebitefe.com

> テストアカウントのパスワード:123456


単純なUI実装ではなく、

実際のサービスを構成する中核機能を自ら開発していきます。 các tính năng cốt lõi tạo nên một dịch vụ thực tế.you will build them yourself.

この講義は、AIが生成する程度の単純なUIやCRUDの実装にとどまりません。

認証・認可、画像アップロード、無限スクロール、いいね、無限ネストコメント、ダークモードなど

今日の実際のサービスで使われている中核的な機能を、自ら設計・実装してみます。


⚙️ ユーザー認証 & 認可

  • メールアドレスでの会員登録/ログイン

  • ソーシャルログイン(GitHub)

  • パスワードを忘れた場合

  • セッション管理

  • RLSを利用した認可

⚙️ フィードの無限スクロール

  • useInfiniteQueryを利用したフィードの無限スクロール管理

  • キャッシュデータ管理


⚙️ 画像添付

  • Supabase Storageを利用した画像のアップロードおよび管理

  • 投稿・プロフィール画像のアップロード機能を実装


⚙️ いいね!

  • 同時実行性の問題を解決(RPC)

  • キャッシュ操作による高速な結果反映


⚙️ 無限ネストコメント

  • 無限にネストされるコメント機能の実装

  • 再帰的なコンポーネントレンダリング


⚙️ テーマ変更機能

  • システム、ダーク、ライトテーマを提供

  • Persistを利用したテーマの維持およびちらつき防止機能の実装




より強力なReactアプリのためのツールをご紹介します

TailwindCSS + Zustand + Tanstack Query

複雑な機能をうまく扱うためには、私たちのツールも同時にアップグレードする必要があります。

本講義では、以下にご案内する強力なツールを一つずつ習得し、

実際のプロジェクトで積極的に活用していく予定です。


Tailwind CSS


  • CSSのスタイリングをより便利にサポートするツール

  • スタイリングのための別途CSSファイルは不要

  • https://tailwindcss.com/


Shadcn/ui


  • Tailwind CSSベースのデザインライブラリ

  • 高品質なコンポーネントを提供(例:Input、Button、Dialogなど)

  • https://ui.shadcn.com/

Zustand


Tanstack Query


  • サーバー状態管理ライブラリ

  • 非同期データフェッチのローディングやエラー処理をサポートします


  • https://tanstack.com/query/latest


ただコードを真似して打ち込むだけのクローンコーディングではありません。

機能の背景や構造まで、概念の説明も余すところなく盛り込みました。

この講義は、単にコードを写して終わるだけの講義では決してありません。

なぜそのように実装するのか、どのような流れで構成されているのか

自分で理解し、身につけられるよう、理論的な説明もたっぷり盛り込んでいます。

講義の受講対象者について

本講義はReact.jsとTypeScriptの基礎知識がある方を対象に制作されています

もし上記の技術に慣れていない場合は、以下の前提講座を先に受講することをおすすめします。

ひと口シリーズの5つの原則

⚖ 原則1. 直感的で豊富な視覚資料

同じ食べ物でも見た目のよいもののほうがおいしく感じられるように
同じ概念の説明であっても、より直感的で魅力的なビジュアル資料のほうが理解しやすいだろうと考えています。

そのため、アニメーションを含む直感的な視覚資料を作成するために、たゆまぬ努力をしました。

⚖ 原則2. 親切さ

新しい用語や概念が登場した際に、簡単な説明だけで済ませたり、すでにご存じだろうと早合点したりはしませんでした。講義を受講しながら別途Google検索をする必要がないよう、最大限努力しました。

⚖ 原則3. 蓋然性

受講生の皆さまの興味を維持するため、講義中に新しい内容が登場する際は、常に前の内容との関連性があるか、突然流れが途切れたように感じられないかを考え、つながりを意識しながら講義を作成しました。

⚖ 原則4.良い発声とディクション

長時間私の声をお聞きいただくことになるため、良い発声と滑舌を心がけ、常に努力しています。
そのため、2倍速で再生してもすべて聞き取っていただけるように講義を制作しました。

一度聴いてみてください!2倍速再生リンク

⚖ 原則5. コミュニケーション

受講生専用コミュニティに集まり、互いに知識や情報を共有しながら成長していきます。

知識共有者の紹介


イ・ジョンファン | Winterlood

どんなことでも分かりやすく楽しく説明する方法があると信じる
フロントエンド開発者 & 教育者

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 一口シリーズの受講生の皆さま(React.js + TypeScriptの受講を修了された方)

  • React.jsとTypeScriptに関する知識をすでにお持ちの方々

  • チュートリアルの段階を抜け出し、実践的なプロジェクトに挑戦してみたい方々

  • 質問への回答が月曜から金曜まで毎日最低1回以上行われる講義をお探しの方々

  • 知識共有者が直接運営する受講生コミュニティが活発な講座をお探しの方々

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

  • React.jsの基礎(一口React講座の受講者レベル)

  • TypeScriptの基礎(「ひとくちTypeScript」講座の受講者レベル)

こんにちは
winterloodです。

インフラン認証

キャリア認証

44,192

受講生

3,392

受講レビュー

1,772

回答

4.9

講座評価

34

講座

何でも簡単に説明する方法はある!


もっと見る

共同知識共有者

カリキュラム

全体

90件 ∙ (22時間 9分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

148件

5.0

148件の受講レビュー

  • nataek2159님의 프로필 이미지
    nataek2159

    受講レビュー 15

    平均評価 3.3

    5

    31% 受講後に作成

    Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。

    • pgaey0106님의 프로필 이미지
      pgaey0106

      受講レビュー 2

      平均評価 5.0

      5

      57% 受講後に作成

      学習者の立場から感じた個人的な見解を残します。 受講を悩んでいる方々の助けになれば幸いです。 1. システムの流れについて理解しやすいです。 講義ごとに、現在実装しようとしている機能のシステムフローを資料で説明してくださいます。流れに沿って視覚資料も更新されるので、難しい概念をまずイメージしてから取り組めるようになっているのが良いです。コードの実装よりもアーキテクチャが重要なので、本当に素晴らしい要素だと思います。 2. 概念を扱っています 概念をしっかり扱ってくださるので理解しやすく、なぜそうするのかという理由が分かります。そうして知識を得るうちに、個人的には講師の方がどのように勉強されたのかが気になりました。結局、公式ドキュメントのリファレンスをどれだけ掘り下げたかの差ではないかと考え、コードを読み解き、公式ドキュメント「でも」知識を習得することが重要だという挑戦意欲が湧きました。単なるクローンコーディングではありません。 3. 決して簡単ではありません 概念を丁寧に扱ってくださいますが、すごく簡単というわけではありません。実践プロジェクトであるだけに、重要な部分は難易度が高いです。個人的には難易度が自分にぴったりでした。難しすぎず、かといって簡単すぎもしないので、ちょうど良かったです。 4. 滑舌(ディクション) 講師の方の滑舌が良いです。よく「逆体感(悪いものに触れて初めて良さに気づくこと)」が大きいと言いますよね。滑舌が良いからといって、より集中できるという感覚はあまりなかったのですが、逆の場合(滑舌が悪い場合)は本当に大変です。そういったストレスが全くありません。 ** 締めくくり ** プロジェクトの流れを掴みたい方は、受講すると助けになると思います。私は部分的な実装は経験がありましたが、結局プロジェクトを構成するアーキテクチャとシステムフロー図を知ることが重要だと感じました。プロジェクトをAからZまで経験したことがない方は、受講すれば多くの助けを得られるはずです。

      • cjswodmsgus5064님의 프로필 이미지
        cjswodmsgus5064

        受講レビュー 2

        平均評価 5.0

        修正済み

        5

        10% 受講後に作成

        講義カリキュラムを見て、本当に充実していると思いました。 これより完璧なフロントエンドのための講義は存在しません。 フロントエンド = 이정환

        • hisu0712님의 프로필 이미지
          hisu0712

          受講レビュー 2

          平均評価 5.0

          修正済み

          5

          100% 受講後に作成

          「ひとくち」シリーズは受講するたびに楽しく、今回の「ひとくちSNS」講座もとても有益で面白かったです! 個人的に「ひとくち」シリーズを受講する際、進捗表や本、ミッションを活用して復習すると記憶に残りやすかったのですが、 今回の講座はプロジェクト型なので、上記のような方法よりは、講座を視聴した後、新しいプロジェクトでもう一度クローンコーディングをする形で復習しました。 これからも、このようなプロジェクト型で難易度のある講座がもっと出てほしいという個人的な願いが…。 フロントエンド開発の講座をInflearnで受講したいなら、間違いなくイ・ジョンファン先生をおすすめします!!!

          • choileo09108916님의 프로필 이미지
            choileo09108916

            受講レビュー 1

            平均評価 5.0

            5

            35% 受講後に作成

            ジョンファン先生、こんにちは! 先生の「一口サイズでかじりつくReact(한입 크기로 잘라먹는 리액트)」の本で開発に入門した受講生の一人です。 入門当時、先生の本のおかげで開発の楽しさを知ることができ、本当に大きな助けとなりました。就職準備の過程で一時的に挫折を味わい、夢を諦めかけた時期もありましたが、一番幸せだった記憶を思い返してみると、結局は開発をしていた自分の姿でした。再び勇気を出して戻ってきた時、いつの間にか素晴らしい講師へと成長された先生を拝見し、迷うことなくこの講義を選択しました。 期待通りの完璧なクオリティと説明のおかげで、空白期間が気にならないほど多くのことを学びました。私の道を再び照らしてくださり、心から感謝しています。いつも心の中で応援しています!ありがとうございました。

            winterloodの他の講座

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

            似ている講座

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