実践AI SaaS フルスタック開発:ビデオチャットアプリを作る
antonio
¥6,991
初級 / React, Next.js, TailwindCSS, saas, AI Agent
5.0
(1)
リアルタイムAIエージェント、会議内容の要約、そして通話後機能を備えたAIベースのビデオ会議アプリケーションを作ります。
初級
React, Next.js, TailwindCSS
この24時間のチュートリアルでは、自分だけのYouTubeクローンを作る方法を学びます。Next 15とReact 19(tRPCを含む)、サーバーコンポーネントでのプリフェッチ、クライアントコンポーネントでのサスペンス活用、ビデオ処理、バックグラウンドジョブ、AI機能など、高度なトピックを扱います。
受講生 587名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
ㄱㅇ
「クローンコーディング」と言うには機能が本当に多様で、各技術をなぜ使うのかの説明もよくされているので、設計感覚まで身につくと思います。 YouTubeクローンコーディングの中でもAI活用、様々なスタックを多様に活用してみることができる講義なので、個人的には意味があると思います!
5.0
김용민
YouTubeでしか触れることのできなかった講義を、Inflearnを通して韓国語翻訳で聞くと、また違った感覚でとても新しく感じました。おかげで理解度もさらに高まった気がします! 今後は、Next.js一つでフロントとサーバーの両方を処理する方式だけでなく、NestJS、Express、Honoのようなサーバーフレームワークと共にモノレポ環境を構築して進める講義も制作計画があるか気になります!
5.0
미묘한채널
講義を楽しく聞いています
YouTubeのような動画プラットフォームを自分で設計・構築する経験
Next.js 15 (App Router) と TypeScript、tRPC を基盤とした最新のフルスタックフレームワークや React 19 を活用した現代的なフルスタックWeb開発技術の習得
PostgreSQL + Drizzle ORM を活用した型安全なデータベース管理技術習得
Bunランタイムを活用した、高速で効率的なサーバーサイド環境構築経験
Clerk認証システムに基づいたユーザー認証および安定性確保方法の学習
AI自動化機能と非同期処理設計により、実践レベルのサービス機能を実現
無限スクロールとデータフロー最適化による実践パフォーマンス改善
クローンコーディングは、実際のサービスの構造と流れを身につける最速の方法です。単なる例ではなく、私たちが知っている実際のアプリを実装すると、技術がどのように組み合わせられ、どのように動作するかが自然に理解されます。
機能一つ一つがなぜ必要なのか、どのような順序で作らなければ効率的なのか直接ぶつかりながら学ぶので、実戦感覚と設計力まで同時に育てることができます。
今回のレッスンでは、YouTubeスタイルのビデオプラットフォームを作成し、Next.js 15、tRPC、Drizzle、Clerk、Bunなど、最新のWebテクノロジで構成された、ビジネスレベルのフルスタックアプリケーションを直接構築します。
リアルタイム映像処理&AIコンテンツ生成
🎥画質選択が可能なビデオプレーヤー
🎬Muxを活用したリアルタイム映像処理
🖼AIでサムネイル/タイトル/説明を自動生成
📝字幕の自動生成
パーソナライズされたフィード&レスポンシブUIデザイン
🗂ユーザーカスタムプレイリスト管理機能
🔄複数のコンテンツフィードの設定
🎯個人別視聴履歴追跡
📱すべてのデバイスに最適化されたレスポンシブデザイン
コメント・いいね・ダッシュボード実装
💬インタラクティブなコメント/返信システム
👍 いいね、購読システム
📊クリエイタースタジオ
(照会数、いいね、トラフィック管理)
✅実装に使用したコア技術
📦モジュールベースの構造設計
🗄DrizzleORMベースのPostgreSQL連携
🚀Next.js 15&React 19ベースの最新スタック
🔄tRPCで実装する型安定API
💅 TailwindCSSとShadcnUIを活用
クローンコーディング教育の最強者が作った2025年最新講義
38万購読者、1,440万視聴数!実務型クローンコーディング教育最強者!
25以上のクローンコーディング講義を設計したアントニオのノウハウを盛り込んだ2025年の最新講義に会いましょう。
完成度の高い機能設計と実装プロセスに従い、実戦プロジェクトを最初から最後まで経験することができます。
Next.js 15など、最近開発者が書く技術の組み合わせそのまま
Next.js 15(App Router)、React 19、Drizzle ORMなど、最近の実務で最も注目されているフルスタックの組み合わせが含まれています。認証、DB、API、ビデオ処理、AIオートメーション、フィード、プレイリスト、コメントシステム、検索、購読、配信まで、YouTubeスタイルのフルスタックサービスを1つ1つ直接作成します。
サービスに生成型AI機能を加える
YouTubeのように生成型AIを活用してサムネイルとタイトル・説明(description)を自動生成する機能を実装します。単にAI機能をのせるレベルではなく、遅延やエラーを自動的に処理するバックグラウンドワークフローまで設計し、実際のサービスレベルで安定して動作するAIシステムを作成します。
最も実践的な最新のフルスタックの組み合わせ
Next.js 15 + React 19 + TypeScript
Next.js 15(App Router)のファイルベースのルーティングとReact 19は、最新のWebトレンドを反映した強力な組み合わせです。ここにTypeScriptまで加えると、エラーを減らしてメンテナンスが容易になり、実務投入にもすぐに活用できます。最近最も使われる組み合わせなので、基本機と一緒に実戦設計感覚まで一緒に身につけることができます。
タイプセーフAPI通信
tRPC
APIの指定がなくてもフロントとバックエンドを自動的に接続できるタイプベースのフレームワークです。
タイプスクリプトの強みを最大化し、フロントとバックエンド間のコードの一貫性を確保してメンテナンスが容易になります。速いスピードと生産性を同時に手に入れることができ、最近実務プロジェクトで脚光を浴びているトレンディな技術です。
デザインまでコードのようにすばやくTailwindCSS + Shadcn UI
CSSを心配する必要がないようにするTailwindと、スタイリッシュなコンポーネントを備えたShadcn UIの組み合わせは、高速なクオリティのUIを実装するために最適化されています。スタイルガイドを守りながらも柔軟なカスタマイジングが可能で、開発とデザインの境界を自然に行き来できる実戦経験を提供します。
安全性と生産性の両方を備えたDB設計PostgreSQL + Drizzle ORM
検証済みのオープンソースDBであるPostgreSQLの信頼性と、タイプベースでコードを設計できるDrizzle ORMの生産性が出会い、データ層をより安全かつ効率的に構成できます。 SQLとコード間の矛盾なく管理でき、データ中心のサービスに必要な設計能力を積み重ねることができます。
複雑な認証を簡単に実装Clerk
ソーシャルログイン、電子メール認証、セッション管理など、実際のサービス用の認証システムをわずか数行のコードで実装できます。直接実装すると、複雑でセキュリティの問題も多くの認証ロジックをSaaSに簡単に置き換えることができ、迅速なMVP開発や安定性を重視するサービスでますます広く使われています。
Youtube級映像処理経験Mux
映像をアップロードすると自動的にトランスコードされ、各デバイスに合わせてストリーミングまで処理される強力なメディアプラットフォームです。 YouTubeのようなサービスで必要なコア機能をクローンしながら映像処理全般を直接設計・構築してみる経験は、実務でメディアサービスを扱う際に強力な競争力になります。
最近注目されるランタイム、Bunも出会えますよ!
Bunは速い実行速度とビルド性能で、最近のプロジェクトで注目されているJavaScriptランタイムです。
この講義は、Code with Antonio YouTubeチャンネルにも公開されていますが、
実際にクローンコードを完成させるには有料学習資料が必須です。
(フルコードベース、設定ファイル、構造化コンポーネントを含む)
💬は、Inflearn講義でのみ提供されます!
23時間の長い映像を体系的なカリキュラムに分けました。好きな部分をすばやく見つけて学習し、いつでも楽に復習できます。
英語が見知らぬ人でも心配しないでください!
韓国語のダビングが提供されて楽に聞くことができます。
学んだ内容、ちょうどめくりません🙂
中途半端なAIクイズで楽しく復習してみることができますよ!
学習対象は
誰でしょう?
最新のウェブ開発トレンドを学んで、実際のプロジェクトに適用したいエンジニア
Next.js 15, React 19, tRPC に基づいたモダンアプリ設計を経験したいエンジニア
YouTubeクローンプロジェクトを自分で完成させてみたい開発者
ポートフォリオを強化したいジュニア開発者
前提知識、
必要でしょうか?
JavaScriptとReactに関する基本知識
656
受講生
18
受講レビュー
4
回答
4.1
講座評価
2
講座
こんにちは、ソフトウェアエンジニアのAntonioです。7年以上の開発経験があり、プログラミングの世界に魅了され、この分野で働けることを大きな幸運だと感じています。
これまで様々なプログラミング言語や技術を扱う経験を通じて、開発者として大きな成長を遂げることができました。これまでに培った知識や経験も大切ですが、私は今もなお学び、成長することに対して強い情熱を持っています。
このような経験と情熱を糧に、プログラミングへの愛を分かち合い、共に学び成長するために「Code With Antonio」というYouTubeチャンネルと学習プラットフォームを運営しています。私が制作したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。
作成したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。 📺 YouTube 📚 学習プラットフォーム
全体
40件 ∙ (23時間 41分)
講座資料:
1. イントロ&デモ
04:11
3. プロジェクト初期設定
25:04
4. 基本レイアウト構成
59:37
5. ユーザー認証システム
24:45
6. データベース構築
21:12
7. ウェブフック同期
29:57
8. TRPC 設定
45:44
9. TRPC 環境構築
25:49
10. ビデオカテゴリ管理
51:25
全体
17件
4.0
17件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
修正済み
5
「クローンコーディング」と言うには機能が本当に多様で、各技術をなぜ使うのかの説明もよくされているので、設計感覚まで身につくと思います。 YouTubeクローンコーディングの中でもAI活用、様々なスタックを多様に活用してみることができる講義なので、個人的には意味があると思います!
丁寧なレビュー、本当にありがとうございます! 特にアーキテクチャやAI活用に関する説明が、お役に立ち、有意義だと感じていただけたようで、大変嬉しく思います。 今後も様々なスタックを探求される際に、このコースが引き続きインスピレーションとなれば幸いです🙏
受講レビュー 8
∙
平均評価 5.0
修正済み
5
YouTubeでしか触れることのできなかった講義を、Inflearnを通して韓国語翻訳で聞くと、また違った感覚でとても新しく感じました。おかげで理解度もさらに高まった気がします! 今後は、Next.js一つでフロントとサーバーの両方を処理する方式だけでなく、NestJS、Express、Honoのようなサーバーフレームワークと共にモノレポ環境を構築して進める講義も制作計画があるか気になります!
丁寧なフィードバック、本当にありがとうございます!韓国語に翻訳された講義が、より深い理解に繋がったと伺い、大変嬉しく思っております。 ご提案いただいた内容についても感謝いたします。monorepo環境や、NestJS、Express、Honoといったフレームワークを扱う講義は、大変興味深いアイデアだと感じました。今後のコンテンツ作成の際に、必ず参考にさせていただきます。
受講レビュー 5
∙
平均評価 3.6
修正済み
3
ハングルの説明が足りない
こんにちは、현성様 Inflabの향로です。 ご不便をおかけし、大変申し訳ございません。 韓国語の説明が不十分とのこと、具体的にどのような点かお教えいただけますでしょうか。改善に努めさせていただきます。 翻訳と吹き替えの品質問題については、全体的に再度検証を行い、不十分だったシステムの問題を改善いたしましたので、様々な改善が適用されております。 いただいたフィードバックを常に念頭に置きながら、より良いシステムを構築できるよう努めてまいります。 Inflearnをご利用いただき、誠にありがとうございます。より良いサービスでお応えできるよう努めます。
受講レビュー 1
∙
平均評価 1.0
1
翻訳の品質がひどすぎます。 自動生成された英語字幕をAIで翻訳して、少しだけ手直ししたようなレベルですが、人間が作った字幕では見られない問題があまりにも多く見られます。 「'bunx'」が「'banx'」になるなど 「'/feed/123'」が「'スラッシュ feed スラッシュ 123'」になるなど 「'123'」が「'1、2、3'」や「'one, two, three'」になるなど 「'lucide-react'」が「'Lucid React'」になるなど 「'true'」が「'truth'」になるなど 「'duration'」と言ったり「'持続時間'」と言ったり 韓国語の音声は抜け落ちている部分もあり ハングルだったり英語だったり、大文字小文字が混在したり、ハイフンが入ったり抜かれたり 序盤だけ見ましたが、講義中ずっとこの調子なので、とても疲れます。 Inflearnの講義キュレーションページがかなり印象的だったので購入した講義ですが、このような翻訳になっているとは信じられません。
受講レビュー 1
∙
平均評価 1.0
修正済み
1
翻訳の品質がひどすぎますね。 YouTubeにある講義を韓国語で楽に聞こうと思って購入したのに 'mux'を먹스、맥스、最大というように、でたらめに吹き替えていますね。 'snake_case'を'세우네이트 케이스'と吹き替えていて 'bunx'を'뱅크'と吹き替えていて… 機械翻訳を使ったとしても、ある程度チェックしてからリリースすべきではないでしょうか?
DH様、こんにちは。 Inflabのヒャンロです。 ご不便をおかけし、誠に申し訳ございません。 改めて全体的に確認を行い、おっしゃっていた単語、文章の翻訳と、吹き替え再生に関する問題点を改善いたしました。その他、一般的な翻訳システムでは把握できない技術的な部分についても、開発チームが共に確認し対応いたしました。 いただいたフィードバックを引き続き参考にしながら、より良いシステム構築のため努力してまいります。 Inflearnをご利用いただき、誠にありがとうございます。より良いサービスでお応えいたします。
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥5,241
25%
¥6,991