一口サイズで楽しむバイブコーディング - 基礎から実践デプロイまで (Claude & Codex)
winterlood
AIはまさにあなた次第で素晴らしくなります。AI活用法 → 基礎・核心知識 → プロジェクト開発の3段階で完成する完璧なバイブコーディング。バイブコーディングを本格的に学んでみたい方のために、どんなAIを使用しても変わらない核心概念を、一口サイズに凝縮してお届けします。
入門
Web Application, Network, security training
いよいよ実践に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証・認可、無限スクロール、画像アップロード、いいね、無限ネストコメント、ダークモードなどの機能を実装します。この過程で、ZustandとTanstack Queryを利用したサーバーおよびグローバル状態管理の手法も学んでいく予定です。
受講生 1,574名
難易度 中級以上
受講期間 無制限
学習した受講者のレビュー
5.0
pgaey
学習者の立場から感じた個人的な見解を残します。 受講を悩んでいる方々の助けになれば幸いです。 1. システムの流れについて理解しやすいです。 講義ごとに、現在実装しようとしている機能のシステムフローを資料で説明してくださいます。流れに沿って視覚資料も更新されるので、難しい概念をまずイメージしてから取り組めるようになっているのが良いです。コードの実装よりもアーキテクチャが重要なので、本当に素晴らしい要素だと思います。 2. 概念を扱っています 概念をしっかり扱ってくださるので理解しやすく、なぜそうするのかという理由が分かります。そうして知識を得るうちに、個人的には講師の方がどのように勉強されたのかが気になりました。結局、公式ドキュメントのリファレンスをどれだけ掘り下げたかの差ではないかと考え、コードを読み解き、公式ドキュメント「でも」知識を習得することが重要だという挑戦意欲が湧きました。単なるクローンコーディングではありません。 3. 決して簡単ではありません 概念を丁寧に扱ってくださいますが、すごく簡単というわけではありません。実践プロジェクトであるだけに、重要な部分は難易度が高いです。個人的には難易度が自分にぴったりでした。難しすぎず、かといって簡単すぎもしないので、ちょうど良かったです。 4. 滑舌(ディクション) 講師の方の滑舌が良いです。よく「逆体感(悪いものに触れて初めて良さに気づくこと)」が大きいと言いますよね。滑舌が良いからといって、より集中できるという感覚はあまりなかったのですが、逆の場合(滑舌が悪い場合)は本当に大変です。そういったストレスが全くありません。 ** 締めくくり ** プロジェクトの流れを掴みたい方は、受講すると助けになると思います。私は部分的な実装は経験がありましたが、結局プロジェクトを構成するアーキテクチャとシステムフロー図を知ることが重要だと感じました。プロジェクトをAからZまで経験したことがない方は、受講すれば多くの助けを得られるはずです。
5.0
민경언
Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。
5.0
kaeuhy
講義カリキュラムを見て、本当に充実していると思いました。 これより完璧なフロントエンドのための講義は存在しません。 フロントエンド = 이정환
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
AIに質問しながらチュートリアルばかり繰り返しているなら、今はもう本当の実戦プロジェクトに挑戦する番です。
本講義では、React.js + TypeScript + Supabaseを活用して
実際のユーザーに提供可能なレベルの実務級SNSサービスを、最初から最後まで作ってみます。
デモサイト : https://demo-onebite-log.vercel.app/
> テストアカウントのメールアドレス : test@onebitefe.com
> テストアカウントのパスワード : 123456
この講義は、AIが作成するレベルの単純なUIやCRUDの実装にとどまりません。
認証・認可、画像アップロード、無限スクロール、いいね、無限階層コメント、ダークモードなどの
今日の実サービスで使用されている核心的な機能を直接設計し、実装してみます。
メールによる会員登録/ログイン
ソーシャルログイン(GitHub)
パスワードを忘れた場合
セッション管理
RLSを利用した認可
useInfiniteQueryを利用したフィードの無限スクロール管理
キャッシュデータの管理
Supabase Storageを利用した画像のアップロードおよび管理
ポスト、プロフィール画像のアップロード機能の実装
同時実行性の問題の解決 (RPC)
キャッシュ操作による素早い結果反映
無限に入れ子になるコメント機能の実装
再帰的コンポーネントレンダリング
システム、ダーク、ライトテーマを提供
Persistを利用したテーマの維持およびちらつき防止機能の実装
複雑な機能をうまく扱うためには、私たちのツールも共にアップグレードされなければなりません。
本講義では、以下に案内する強力なツールを一つずつ習得し、
実際のプロジェクトに積極的に活用していく予定です。
Tailwind CSS
CSSスタイリングをより便利にするためのツール
スタイリングのための別途のCSSファイルが不要
Shadcn/ui
Tailwind CSSベースのデザインライブラリ
高品質なコンポーネントを提供(例:Input、Button、Dialogなど)
Zustand
小さくて軽量なグローバル状態管理ライブラリ
従来のReduxを押し退けている新興勢力
Tanstack Query
サーバー状態管理ライブラリ
非同期データフェッチのローディング、エラー処理をサポート
この講義は、単にコードを書き写して終わるような講義では決してありません。
なぜそのように実装するのか、どのような流れで構成されるのか
直接理解して自分のものにできるよう、理論の説明もたっぷりと盛り込みました。
本講義はReact.jsとTypeScriptの基礎がある方を対象に制作されました。
もし上記の技術に慣れていない場合は、以下の事前講義を先に受講することをお勧めします。
同じ料理でも見た目が良い方がより美味しく感じられるように、
同じ概念の説明であっても、より直感的で魅力的な視覚資料の方が理解しやすいと考えています。
したがって、アニメーションを含む直感的な視覚資料を作成するために、絶えず努力しました。
新しい用語や概念が登場した際、適当に説明して済ませたり、すでに知っているだろうと決めつけたりはしませんでした。講義を聴きながら別途ググる必要がないよう、最大限努力しました。
受講生の皆さんの興味を維持するために、講義の中で新しい内容が登場する際、常に前の内容と関連があるか、急に流れが途切れるような感じを与えないか、常に蓋然性を考えながら講義を作成しました。
長い時間私の声を聞いていただくことになるため、良い発声と滑舌のために常に努力しています。
そのために、2倍速で再生してもすべて聞き取れるように講義を制作しました。
一度聴いてみてください! 2倍速再生リンク
受講生専用コミュニティに集まり、お互いに知識や情報を共有しながら成長します。
オープンチャット:授業資料で参加リンクを確認してください
何でも分かりやすく、楽しく説明する方法があると信じている
フロントエンド開発者 & 教育者
📚 著書
📹 講義
一口サイズでかじり取るNext.js
一口サイズで食べられるTypeScript
一口サイズでかじりつくReact
学習対象は
誰でしょう?
「一口シリーズ」の受講生の皆様(React.js + TypeScript 受講完了者)
React.jsとTypeScriptの知識をすでにお持ちの方
チュートリアルレベルを脱して、実践プロジェクトに挑戦してみたい方へ
質疑応答が月〜金に最低1回以上、毎日行われる講義をお探しの方
知識共有者が自ら運営する、受講生コミュニティが活発な講義をお探しの方
前提知識、
必要でしょうか?
React.js 基礎 (「一口リ액트(한입 리액트)」講座受講生レベル)
TypeScriptの基礎 (「一口TypeScript」講座受講生レベル)
インフラン認証
キャリア認証
41,464
受講生
3,193
受講レビュー
1,723
回答
5.0
講座評価
30
講座
どんなことでも簡単に説明する方法はある!
📚 書籍
🏆 アワード
2025 インフラン年末アワード ベストセラー受賞
2024 インフラン年末アワード 受講生PICK賞 受賞
2023 インフラン年末アワード 受講生PICK賞 受賞
📹 講義
一口サイズでかじり取るバイブコーディング
一口サイズで食べられる React.js 実践プロジェクト - SNS編
一口サイズでかじりつくNext.js
一口サイズでかじり取るTypeScript
一口サイズで食べられるReact
全体
90件 ∙ (22時間 9分)
講座資料(こうぎしりょう):
全体
139件
5.0
139件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
修正済み
受講レビュー 2
∙
平均評価 5.0
修正済み
5
「ひとくち」シリーズは受講するたびに楽しく、今回の「ひとくちSNS」講座もとても有益で面白かったです! 個人的に「ひとくち」シリーズを受講する際、進捗表や本、ミッションを活用して復習すると記憶に残りやすかったのですが、 今回の講座はプロジェクト型なので、上記のような方法よりは、講座を視聴した後、新しいプロジェクトでもう一度クローンコーディングをする形で復習しました。 これからも、このようなプロジェクト型で難易度のある講座がもっと出てほしいという個人的な願いが…。 フロントエンド開発の講座をInflearnで受講したいなら、間違いなくイ・ジョンファン先生をおすすめします!!!
受講レビュー 1
∙
平均評価 5.0
5
ジョンファン先生、こんにちは! 先生の「一口サイズでかじりつくReact(한입 크기로 잘라먹는 리액트)」の本で開発に入門した受講生の一人です。 入門当時、先生の本のおかげで開発の楽しさを知ることができ、本当に大きな助けとなりました。就職準備の過程で一時的に挫折を味わい、夢を諦めかけた時期もありましたが、一番幸せだった記憶を思い返してみると、結局は開発をしていた自分の姿でした。再び勇気を出して戻ってきた時、いつの間にか素晴らしい講師へと成長された先生を拝見し、迷うことなくこの講義を選択しました。 期待通りの完璧なクオリティと説明のおかげで、空白期間が気にならないほど多くのことを学びました。私の道を再び照らしてくださり、心から感謝しています。いつも心の中で応援しています!ありがとうございました。
受講レビュー 2
∙
平均評価 5.0
5
学習者の立場から感じた個人的な見解を残します。 受講を悩んでいる方々の助けになれば幸いです。 1. システムの流れについて理解しやすいです。 講義ごとに、現在実装しようとしている機能のシステムフローを資料で説明してくださいます。流れに沿って視覚資料も更新されるので、難しい概念をまずイメージしてから取り組めるようになっているのが良いです。コードの実装よりもアーキテクチャが重要なので、本当に素晴らしい要素だと思います。 2. 概念を扱っています 概念をしっかり扱ってくださるので理解しやすく、なぜそうするのかという理由が分かります。そうして知識を得るうちに、個人的には講師の方がどのように勉強されたのかが気になりました。結局、公式ドキュメントのリファレンスをどれだけ掘り下げたかの差ではないかと考え、コードを読み解き、公式ドキュメント「でも」知識を習得することが重要だという挑戦意欲が湧きました。単なるクローンコーディングではありません。 3. 決して簡単ではありません 概念を丁寧に扱ってくださいますが、すごく簡単というわけではありません。実践プロジェクトであるだけに、重要な部分は難易度が高いです。個人的には難易度が自分にぴったりでした。難しすぎず、かといって簡単すぎもしないので、ちょうど良かったです。 4. 滑舌(ディクション) 講師の方の滑舌が良いです。よく「逆体感(悪いものに触れて初めて良さに気づくこと)」が大きいと言いますよね。滑舌が良いからといって、より集中できるという感覚はあまりなかったのですが、逆の場合(滑舌が悪い場合)は本当に大変です。そういったストレスが全くありません。 ** 締めくくり ** プロジェクトの流れを掴みたい方は、受講すると助けになると思います。私は部分的な実装は経験がありましたが、結局プロジェクトを構成するアーキテクチャとシステムフロー図を知ることが重要だと感じました。プロジェクトをAからZまで経験したことがない方は、受講すれば多くの助けを得られるはずです。
受講レビュー 15
∙
平均評価 3.3
5
Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと1日日で終了
¥5,159
28%
¥7,185