
フロントエンド開発者のためのバックエンド101 (NestJS, TypeORM)
lopun
最も速くバックエンドに入門できるようサポートするNestJS! 様々な実習プロジェクトを通じて、バックエンドフレームワークであるNestJSとTypeORM、そしてサーバー開発者なら必ず知っておくべき必須の理論知識まで、短期間で習得します。
初級
NestJS, TypeORM, PostgreSQL
🔥 講義の登録から動画のアップロードまで、知識共有者機能をそのまま実装してみる実践フルスタック講義です。Next.js 15とNestJSを活用し、講義の作成、カリキュラム構成、サムネイルおよび動画のアップロード、詳細紹介の作成まで、実際のInflearn(インフラン)の流れに沿って作りながら、Prismaモデリング、JWT認証、S3 + CloudFrontアップロード、Swagger API設計など、実務に近い経験を積むことができます。
学習した受講者のレビュー
5.0
치현
フロントエンド開発をしていますが、バックエンドも触ってみたいと思っていたところ、ロ펀様のNext.jsフルスタック講座が良かった記憶があったので受講しました。 個人的にInflearnのようなサイトを作ってみたくて、Inflearnの講座データをクロールしても良いかと正式に問い合わせて断られたこともあったのですが、今回の講座でその願いを叶えることができたように思います。 Nest.jsを初めて触る者として、プロジェクトを進めるならこのように構成すれば良いという感覚を掴める講座でした。「Inflearnプロダクトを覗いてみる」という企画部分も含まれており、アーキテクチャや構造について考えてみることができたと思います。 Part1にはデプロイが含まれていないのが少し残念ですが、早くPart2が出たらデプロイまで加えた完成されたポートフォリオにしたいですね 😊😊
5.0
찬우 이
私はフロントエンド開発者になるために勉強していますが、以前ロ펀さんのsupabaseの講義を聞いて大変役立ったため、今回のクローンコーディング講義も受講することにしました。 チームプロジェクトでバックエンドの方からAPIを受け取り、Swaggerを参考にフロントコードを作成する際、常にバックエンドではどのようなロジックでデータが流れているのか気になっていましたが、今回の講義を通してその流れを直接経験することができ、本当に有益でした。 NestJS, Prismaなど初めて触れる技術も多く、難しい部分もありましたが、講師の方が実務でよく使う最新技術を分かりやすく説明してくださり、Notionにもよく整理されていたため、ついていきやすかったです。Shadcn UI, TailwindCSS, S3など様々なツールを活用してみる過程も興味深く、実務ですぐに使えるヒントやノウハウをたくさん学ぶことができました。 特に、フロントとバックエンドがどのように接続され、全体的にどのような構造で動作するのかを実際に実装してみることで、フルスタック開発への理解度が確実に高まりました。ポートフォリオとして活用できる完成度の高いプロジェクトを作成したい方や、実務志向のフルスタック開発を学びたい方に、この講義をお勧めします!
5.0
cafe small house
講義を全て聞き終え、改めて記述します。まず、本当に素晴らしいです。以前は、きれいな講義だな、とだけ思っていましたが、得られるものが多かったです。 まず、私にとってはhey-apiを通じてフロントエンドからバックエンドのスペックを受け取れることを学べてとても良かったと思います。正直、これだけでも講義の価値は十分にありました。 もちろん、graphql、trpcなど、そういった方法はたくさんあると思いますが、結局、就職すると皆rest apiだけで行うので、どうすればそういった方法がないのか、お互いの作業を減らせる方法はないのか、と考えていたのですが、良い方法を知ることができたと思いますし、 nextとnestについても、私が使わずに、もっと良い方法があるのだなと思わせてくれた講義だったので良かったと思います。
最新のフルスタック開発トレンド (Next.js 15, NestJS, Prisma)
ポートフォリオとして活用可能な「自分だけのInflearn」プラットフォームの完成
講義の登録、修正、動画のアップロード、カリキュラムの編集など、実サービスの機能全般の開発
Shadcn UI + TailwindCSS + Cursor AIで実務レベルの洗練されたUI制作
Swagger + OpenAPIベースの自動化されたバックエンド呼び出し構造の構築
Prismaでデータベースをモデリングし、PostgreSQLベースの構造を設計する
S3 + CloudFrontベースのストリーミングアップロードシステムの構築
たった一つの講義で企画、開発、デプロイまで完成させるフルスタックの旅を始めましょう。
"Next.js + NestJSの組み合わせで、実務に近いInflearnプラットフォームを最初から直接作ってみます。"
Next.js 15は、Reactベースのプロジェクトにサーバーコンポーネント・App Router・Server Actionsを加え、画面のレン더링から簡単なAPIまで、一つのコードベースで処理できるようにしてくれます。
NestJSは同じTypeScriptで記述されており、依存性の注入とモジュール構造のおかげで、チームの規模が大きくなってもメンテナンスが容易なバックエンドを構築できます。
2つのフレームワークを併用することで、UIとサーバーが一つの型定義を共有してデータの不一致を減らし、開発者は言語やツールセットを切り替えることなくフロントエンドとバックエンドを行き来することができます。
🔥 Next.js v15 🔥
🔥 Nest.js v10 🔥
小さなサンプルアプリでは、フルスタックの1サイクルを十分に体験することは困難です。ログイン機能だけのブログやToDoリストでは、「実際のサービスがどのように動いているのか」を肌で感じることができないからです。
そこで私は、Inflearnの核となるフローをそのまま再現したミニInflearnを作ることにしました。
会員管理から講義の登録、カリキュラムの編集、動画をS3にアップロードした後にCloudFrontでストリーミングする過程を直接実装しながら、設計 → 認証 → メディア処理 → 権限管理を一度に経験することになります。
今回のPart 1講座では
フロントとバックエンドのプロジェクト設定を行い(Next.js 15 · NestJS · Prisma · Docker)
Auth.jsを活用してJWT認証を実装した後、
知識共有者機能(講義管理、カリキュラム管理、詳細ページ作成、動画・サムネイルアップロード)を完成させます。
TailwindCSS · ShadcnUI、Cursor AIを活用して素早くスタイリングを行い、実際のロジックとフルスタック体験に集中できるように設計しました。
講義を終えると、「講義をアップロードしてストリーミングまで可能なプラットフォーム」が手に入り、データモデリングからクラウドストリーミングまで続くフルスタックの能力を自然に習得することになります。
Part 2では、この土台の上に講義の探索・受講・受講レビュー・Q&A機能を載せ、最終的にAWSデプロイまで完了させて「誰でもアクセスできる本物のサービス」として完成させる予定です。
Part 1で築いた基礎がPart 2へと自然につながるようにカリキュラムを設計しているため、2つのパートを続けて受講することで設計から運用までフルスタックの全過程をしっかりと体験することができます。
App Router、Server Actionなど
最新のNext機能の実習
NestJS モジュールアーキテクチャ & REST API 設計
Prisma + PostgreSQL + Swaggerで実務バックエンドを実装
講義の登録・修正、詳細紹介の作成、サムネイルのアップロード
セクション/講義の追加およびカリキュラム構成機能
知識共有者専用の管理者機能を直接開発
S3 + CloudFrontでセキュリティ保護された動画アップロード
Multerを活用した動画アップロード + プレビューの実装
リアルタイムのアップロード結果表示まで完成
TailwindCSS + ShadcnUIでセンスの良いUIを構築
Cursor AIでスタイル自動化および高速開発
レスポンシブレイアウト、共通コンポーネントを直接設計
フロントエンドNext.js 15 – 最新のフロントエンドフレームワーク
TailwindCSS – 素早くスタイリングができるCSSライブラリ
Shadcn/UI – 実戦用UIコンポーネントライブラリ
React Query – サーバーデータのキャッシングおよびリクエスト状態管理ライブラリ
Jotai v2 – 直感的なグローバル状態管理ツール
バックエンド・インフラNestJS – バックエンドAPIサーバーフレームワーク
Prisma – 安全で便利なDB接続用ORM
PostgreSQL – 拡張性と安定性を備えたリレーショナルデータベース
Docker – 一貫した開発・デプロイ環境を構築するためのツール
AWS S3 / CloudFr
ont – 講義動画の保存および高速配信のためのクラウドインフラ
単純なToDoアプリから脱却し、
本格的なサービスを
作りたいフロントエンドエンジニア
ポートフォリオとして
すぐに活用できるプロジェクトが
必要な 転職・就職準備生
講義プラットフォームのような
実サービスを作りたい
個人開発者
セクション 1〜3
基本を固めて Next + Nest プロジェクトをセッティング
Next.js 15, TailwindCSS, ShadcnUI、Jotai、React Queryまでフロントエンドサーバーを構築し、
NestJS, Prisma, DockerでバックエンドとDBまで一度に準備します。
Cursor AIを活用した実践的な開発ワークフローも一緒に学びます。
セクション 4
実際のサービスのようにログインから認証まで
Auth.js(next-auth)とJWTの組み合わせで、
会員登録、ログイン、セッション維持、権限保護までをすべて実装します。
SSR/CSRを考慮した認証処理から
NestJS Auth Guardの適用まで、実務で即戦力となる認証システムを身につけます。
セクション 5
インフロンの構造を分析して直接企画してみる
本物のサービスを作るために、まずはInflearnを分析してみます。
どんな機能とデータモデルが必要か直接企画し、Course, Section, LectureなどのモデルをPrismaで直接定義して、Seedデータも作ってみましょう。
セクション 6
知識共有者機能の実装(講義管理)
知識共有者が直接講義を登録し、修正する全体のフローを実装します。
CKEditorを活用して詳細ページを作成し、
S3 + CloudFrontの組み合わせで動画とサムネイルのアップロード機能を構築します。(ストリーミングも実装)
Swagger CodegenでAPI呼び出しも自動化します。
この講義は「Inflearnクローンプロジェクト」シリーズの一部です。
Part 1とPart 2はそれぞれ独立して受講可能ですが、
セットで受講することで、企画からデプロイまで、実際のサービスを丸ごと一つ完成させることができます。
知識共有者機能中心
受講生機能中心
講義登録、カリキュラム構成、動画アップロード
講義の探索、受講申請、動画視聴、決済、デプロイ
JWT認証、S3アップロード、管理者ページの構成
視聴記録の保存、質問/受講レビュー、決済API、EC2デプロイ
1⃣ プロジェクト構造を最初から最後まで自ら設計できるようになります。
2⃣ サービスに必要な機能をEnd-to-Endで実装する力が身につきます。
3⃣ AWSを通じて必要なインフラを構築できます。
4⃣ Cursor AIを活用して、完成度の高いサービスを構築できます。
5⃣ 「自分が作りたいサービスの一つくらいは自分で作れる!」という根拠のある自信が持てるようになります。
合計7つのセクション、約15時間のボリューム、約50の講義(生涯アップデート)
GitHubのサンプルコードおよび参考資料の提供
完成したプロジェクトはポートフォリオとして使用可能
Typescript文法の基礎、Reactの使用経験
Git, Node.jsに対する理解
#Next.js #Nest.js #NextJS #NestJS #Fullstack #フルstack #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #クローンコーディング #Node.js #AWS #S3 #Cloudfront
学習対象は
誰でしょう?
ブログやToDoアプリはもう卒業!サービス全般を直接実装してみたいフロントエンドエンジニア
NestJSバックエンド設計を実践で身につけたいジュニア〜ミドル開発者
転職やポートフォリオのために、完成度の高いプロジェクトを必要としている就活生
講義一つで実践スタックをA to Zまで身につけたい実務志向の受講生
単一言語ベースのフルスタック構成を最初から最後まで習得したい実務志向の受講生
前提知識、
必要でしょうか?
HTML/CSS/JS 基本文法
Reactの基礎的な使用経験
REST API、Node.jsに対する理解
インフラン認証
キャリア認証
3,823
受講生
234
受講レビュー
67
回答
4.8
講座評価
8
講座
🚀 「トレンドの技術スタックで実践的なサービスを作る過程を包み隠さずお見せします」
理論よりもプロジェクト中心の実務講義を通じて、現場ですぐに役立つ内容を提供します。
(現) ネカラクベ在職
(現) 7年目フルスタックエンジニア
(講義) スパルタコーディングクラブ講師
(教育) 韓国科学技術院 (KAIST) 電算学科 卒業
全体
55件 ∙ (14時間 42分)
講座資料(こうぎしりょう):
4. はじめに
02:23
全体
41件
4.8
41件の受講レビュー
受講レビュー 6
∙
平均評価 5.0
修正済み
5
🎯フロントエンド開発者も気軽にフルスタックの流れを習得できる講座 フロントエンド開発をする中でバックエンド知識の必要性を感じ、以前「フロント開発者のためのバックエンド101」講座を受講したのですが、満足度が高かったため、今回の講座もすぐに続けて受講することにしました。 この講座は、単純な機能実装を超えて、Next.js 15, NestJS, Prisma, React Query, TailwindCSS, Cursor AI, Jotai など最新技術スタックの理論をまず押さえてくれるため、初心者でも十分に付いていける構成でした。実際のサービスをクローンしながら一つ一つ機能を実装してみると、フロントエンド開発者としてバックエンドの流れを一緒に理解したい方々にとって、非常に適した講座だと感じました。 特に印象深かった点は ✅ Prismaを活用したAPI実装とPostgreSQLベースのデータベースモデリング ✅ Swagger + OpenAPIベースの自動化されたバックエンド呼び出し構造の構築 ✅ AWS S3 + CloudFrontベースの動画ストリーミングアップロードシステムの構築など 実務ですぐに活用できるレベルの具体的な実装内容が多かった点です。 また、学習中に疑問に思ったことやフィードバックが必要な部分は、Slackチャンネルを通じて質問を残せば回答を得られるため、学習環境も非常に満足でした。 ただ残念だったのは、CKEditor関連の課題により動画の順序がスムーズでない部分があった点です。大きな流れには支障はありませんが、少し混乱しました。 👉 フロントエンドからバックエンドまで網羅するプロジェクト経験を積みたい方々に、強くお勧めする講座です。 ⭐⭐⭐⭐⭐ 実務感覚、技術スタック、クローン対象全て満足でした。
受講レビュー 2
∙
平均評価 5.0
修正済み
5
私はフロントエンド開発者になるために勉強していますが、以前ロ펀さんのsupabaseの講義を聞いて大変役立ったため、今回のクローンコーディング講義も受講することにしました。 チームプロジェクトでバックエンドの方からAPIを受け取り、Swaggerを参考にフロントコードを作成する際、常にバックエンドではどのようなロジックでデータが流れているのか気になっていましたが、今回の講義を通してその流れを直接経験することができ、本当に有益でした。 NestJS, Prismaなど初めて触れる技術も多く、難しい部分もありましたが、講師の方が実務でよく使う最新技術を分かりやすく説明してくださり、Notionにもよく整理されていたため、ついていきやすかったです。Shadcn UI, TailwindCSS, S3など様々なツールを活用してみる過程も興味深く、実務ですぐに使えるヒントやノウハウをたくさん学ぶことができました。 特に、フロントとバックエンドがどのように接続され、全体的にどのような構造で動作するのかを実際に実装してみることで、フルスタック開発への理解度が確実に高まりました。ポートフォリオとして活用できる完成度の高いプロジェクトを作成したい方や、実務志向のフルスタック開発を学びたい方に、この講義をお勧めします!
チャヌさん、大切な受講レビューありがとうございます! 講義が有益だったとおっしゃっていただけて、とてもやりがいがありますね 😊😊 最後まで受講していただき、大変お疲れ様でした。 幸せな一日をお過ごしください! :)
受講レビュー 5
∙
平均評価 5.0
5
Part1とPart2を一緒に購入しました。 実務者として現在会社に導入する技術力を模索中、nestとnextフレームワークを使用した技術が必要で導入しようとしています。講義を通じて様々な技術を知ることができ、取り入れています。流れも良く、使用するライブラリや何とかなるプロジェクトではなく、効率的に開発/管理/運営に直接的な影響を与える構成だと思うので、講義は満点中百万点です。良い講義に感謝いたします。 ところで先生... 先生がご存知のことを私たち受講生は知らないから学びたくて講義を聞いているのです...この講義は初級ではありません... 受講している大部分はおそらく公式ドキュメントを見ても「一体私は何を見ればいいのか?」という考えをします..よく分からないからです...😊 突然「この部分がこの部分を代替するので削除します。」とおっしゃると、受講生の大部分はこの部分とこの部分が一体何なのかをしばらく考えなければならず、見つけ出すことに非常に困難を感じるようになると思います.. 先生の講義が良いです。 私が必要とするもの、私が望むものを全て構成してくださっています。 ち...ちょっとだけ、本当にちょっとだけです。 まだ一人で呼吸することもうまくできない「だめなじゃがいも」たちが受講していると思ってくださると感謝いたします。
良いご意見をいただき、ありがとうございます!おっしゃっていただいた内容を反映して、初心者の方々も比較的もっと簡単についてこられるよう努力いたします😊 ご質問や詰まってしまう部分がございましたら、いつでもSlackでお問い合わせください。完走まで頑張ってください!
受講レビュー 22
∙
平均評価 4.8
修正済み
受講レビュー 13
∙
平均評価 5.0
修正済み
5
フロントエンド開発をしていますが、バックエンドも触ってみたいと思っていたところ、ロ펀様のNext.jsフルスタック講座が良かった記憶があったので受講しました。 個人的にInflearnのようなサイトを作ってみたくて、Inflearnの講座データをクロールしても良いかと正式に問い合わせて断られたこともあったのですが、今回の講座でその願いを叶えることができたように思います。 Nest.jsを初めて触る者として、プロジェクトを進めるならこのように構成すれば良いという感覚を掴める講座でした。「Inflearnプロダクトを覗いてみる」という企画部分も含まれており、アーキテクチャや構造について考えてみることができたと思います。 Part1にはデプロイが含まれていないのが少し残念ですが、早くPart2が出たらデプロイまで加えた完成されたポートフォリオにしたいですね 😊😊
チヒョン様、心のこもったご受講レビュー、本当にありがとうございます! Inflearnのようなサイトをご自身で作ってみたいという願いを、今回の講義で少しでも実現されたとのこと、嬉しく思います 😊😊 Nest.jsは初めてだったとのことですが、構造を理解して感覚を掴まれたということで、講義を作った立場としても大変嬉しいです! おっしゃる通り、Part1にはデプロイが含まれておらず、物足りなさを感じられたかと思いますが、Part2ではデプロイと合わせて、より完成度の高いポートフォリオを構築していただけるよう、最大限しっかりと準備を進めてまいります。ご期待ください! 😊 改めて貴重なご受講レビュー、ありがとうございます!
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!