
フロントエンド開発者のためのバックエンド101 (NestJS, TypeORM)
lopun
最も速くバックエンドに入門できるようサポートするNestJS! 様々な実習プロジェクトを通じて、バックエンドフレームワークであるNestJSとTypeORM、そしてサーバー開発者なら必ず知っておくべき必須の理論知識まで、短期間で習得します。
初級
NestJS, TypeORM, PostgreSQL
🔥 講義の受講から決済、デプロイまで、受講生が経験する全過程をそのまま実装してみる実践フルスタック講義です。講義の探索、詳細ページ、受講申し込み、動画視聴、受講レビューと質問、カートおよび実際の決済、続きから再生、Docker + AWSデプロイまでをすべて自ら作り、実際のサービスに近いユーザーフローと構造設計を学び、高度なフルスタック経験を完成させます。
学習した受講者のレビュー
5.0
조내일
パート1に続き、ついにパート2まで全講義を修了しました! 今回のパート2の講義では、普段から疑問に思っていた技術(ビデオプレイヤー実装、カート機能、決済処理、Sentry連携など)が実際のコードと共に自然に説明されていて、とても面白く、有益でした。 ジュニア開発者である私にとっては、実務にすぐに適用できる部分が多く、ついていきながら学ぶ楽しさもありました :) 設計意図や選択の理由も一緒に説明してくださったので、単に写すだけにとどまらず、「理解しながら実装」できる講義でした。 素晴らしい講義を作ってくださり、ありがとうございます!次の講義も楽しみにしています! 🙌
5.0
5undaye
Part 2の講義もPart 1の講義に続いて見ているのですが、 大きな助けになっています。 フロントエンド開発者職群を担当しているのですが、バックエンド関連内容も分かるようになり、流れの把握に役立ちますね。 良い講義を提供してくださってありがとうございます。
5.0
cafe small house
個人的に本当に良い講義だと思います。cursorを使ってフロントエンドがどのように構成されていくのかも把握でき、全体的にある程度規模のあるバックエンドも作っていくことができ、決済もポートワンを学びながら実務でも使えて、ミッションを進めていくうちにいつの間にかポートフォリオ一つは埋めていくことができます。すでにある程度開発をされている方も、初めて開発を始める方も、皆さんに良さそうな講義です。
最新のフルスタック開発トレンド (Next.js 15, NestJS, Prisma)
ポートフォリオとして活用可能な「自分だけのInflearn」プラットフォームの完成
講義の探索から受講申請、続きから再生、決済まで、ユーザー中心の受講システム全体を実装
Shadcn UI + TailwindCSS + Cursor AIで実務レベルの洗練されたUI制作
Prismaでデータベースモデリングを行い、PostgreSQLベースの構造を設計する
AWSとDockerを活用した実務に近いデプロイ方法
たった一つの講義で企画、開発、デプロイまで完成させるフルスタックの旅を始めましょう。
"Next.js + NestJSの組み合わせで、実務に近いInflearnプラットフォームを一から直接作ってみます。"
この講義では、この組み合わせをベースに受講申請、続きから見る、決済およびデプロイまで、フルスタックの全プロセスを実装します。
Next.js 15は、Reactベースのプロジェクトにサーバーコンポーネント・App Router・Server Actionsを加え、画面のレンダリングから簡単なAPIまでを一つのコードベースで処理できるようにしてくれます。
NestJSは同じTypeScriptで記述されており、依存性の注入とモジュール構造のおかげで、チームの規模が大きくなってもメンテナンスが容易なバックエンドを構築できます。
2つのフレームワークを併用することで、UIとサーバーが一つの型定義を共有してデータの不整合を減らし、開発者は言語やツールセットを切り替えることなくフロントエンドとバックエンドを行き来することができます。
今回のPart 2講座では
講義リストの検索から詳細ページ、お気に入り、受講申し込みボタンまで実装します。
視聴時間の保存と続きから再生機能が含まれた受講ページを作成します。
受講評価と質問機能を設計し、知識共有者管理UIまで完成させます。
ショッピングカート、決済API、PortOne(トスペイメンツ)連携を通じて、実際の決済フローを実装します。
AWS EC2デプロイ、HTTPS接続、GitHub Actions自動化により、運用レベルまで完成させます。
Part 1で作成したプロジェクトをベースに、講義の探索、受講、ショッピングカート、決済などの機能を追加し、
最終的にAWSデプロイまで完了させて「誰でもアクセスできる本物のサービス」として完成させます。
Part 1で固めた基礎がPart 2へと自然につながるようにカリキュラムを設計しているため、2つのパートを続けて受講することで設計から運用までフルスタックの全過程をしっかりと体験することができます。
カテゴリー、ページネーションベースの講義検索
星評価および知識共有者の情報を含む詳細ページ
お気に入り機能と受講申し込み / カート機能の実装
ビデオプレーヤーコンポーネントを直接開発
視聴時間の保存と続きから再生機能の完成
カスタム再生ボタンの制作ミッションを含む
星評価ベースの受講評一覧および作成UI
質問の作成/照会/回答までのフローを完成
知識共有者用の管理ページまで直接実装
ショッピングカート・決済APIを直接設計
PortOne サーバーSDKと Toss Payments PG 連動
実際の決済、例外処理、決済後の学習リスト反映まで
Sentry連携、日次統計バッチジョブ開発、
In-memoryキャッシュまで深化学習
EC2 + Docker + Route53 デプロイ構成
GitHub ActionsでCI/CD自動化まで完了
単純なToDoアプリから脱却し、
本格的なサービスを
作りたいフロントエンド開発者
ポートフォリオとして
すぐに活用可能なプロジェクトが
必要な 転職・就職準備生
講義プラットフォームのような
実サービスを作りたい
個人開発者
セクション 2
講義の探索から詳細ページまで、受講前の流れを完成
カテゴリー、ページネーション機能を含む検索機能を実装し、講義一覧画面とカテゴリー検索ページを作成します。
詳細ページには星評価と知識共有者の情報を併せて表示し、受講申し込みボタンはログインの有無や講義のタイプによって動作が変わるように処理します。
セクション 3
視聴時間の保存&続きから再生が可能な受講ページ
ビデオプレーヤーコンポーネントを自作し、
視聴時間の保存と続きから再生するロジックまで実装します。
バックエンドでは受講情報を保存して応答するAPIを設計し、
フロントでは視聴状態に応じて動作するUIとカスタム再生ボタンを構成して、実際のInflearnに近い受講体験を作り上げます。
セクション 4
受講評と質問機能 - 受講生 & 知識共有者
受講生は星評価とレビューを残し、
質問を登録して回答を受け取ることができ、
知識共有者は管理ページで受講評に返信したり、質問に回答を残したりできるよう、それぞれの役割に合わせたUIを設計します。
セクション 5
ショッピングカートから決済まで、購入フロー全体の開発
カートに講義を入れ、
PortOne SDKとToss Paymentsを連動させて実際の決済を実装します。
決済成功時に学習リストへ自動的に反映され、
決済フロー全体と例外状況まで考慮してユーザーエクスペリエンスを完成させます。
セクション 6〜7
実務レベルのバックエンド運用経験と実際のデプロイまで
NestJSのCron機能で日次統計を自動収集し、頻繁に呼び出されるAPIはIn-memoryキャッシングでレスポンス速度を改善します。
Sentryを連携してエラーをリアルタイムでモニタリングし、
EC2 · Docker · GitHub Actions · Route 53を利用した実際のデプロイ環境を直接構築します。
HTTPSとドメイン接続も一緒に実習します。
この講義は「インフラン・クローンプロジェクト」シリーズの一部です。
Part 1とPart 2はそれぞれ独立して受講可能ですが、
合わせて受講することで、企画からデプロイまで、本物のサービスを一つ完成させることができます。
知識共有者機能中心
受講生機能中心
講義登録、カリキュラム構成、動画アップロード
講義の探索、受講申請、動画視聴、決済、デプロイ
JWT認証、S3アップロード、管理者ページの構成
視聴記録の保存、質問/受講レビュー、決済API、EC2デプロイ
1⃣ プロジェクト構造を最初から最後まで自ら設計できるようになります。
2⃣ サービスに必要な機能をEnd-to-Endで具現化する力が身につきます。
3⃣ AWSを通じて必要なインフラを構築できます。
4⃣ Cursor AIを活用して、完成度の高いサービスを構築できます。
5⃣ 「自分が作りたいサービスを一つくらいは直接作れる!」という根拠のある自信が湧いてきます。
合計7つのセクション、14時間以上のボリューム、40以上の講義(無期限アップデート)
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バックエンド設計を実践で身につけたいジュニア〜ミドル開発者
転職やポートフォリオのために、完成度の高いプロジェクトを必要としている就活生
1つの講義で実践スタックをA to Zまで身につけたい実務志向の受講生
Next.js + NestJSベースでフルスタック構成を直接実装してみたい、実務志向の開発者
前提知識、
必要でしょうか?
HTML/CSS/JS 基本文法
Reactの基礎的な使用経験
REST API、Node.jsに対する理解
インフラン認証
キャリア認証
3,823
受講生
234
受講レビュー
67
回答
4.8
講座評価
8
講座
🚀 「トレンドの技術スタックで実践的なサービスを作る過程を包み隠さずお見せします」
理論よりもプロジェクト中心の実務講義を通じて、現場ですぐに役立つ内容を提供します。
(現) ネカラクベ在職
(現) 7年目フルスタックエンジニア
(講義) スパルタコーディングクラブ講師
(教育) 韓国科学技術院 (KAIST) 電算学科 卒業
全体
44件 ∙ (14時間 11分)
講座資料(こうぎしりょう):
1. オリエンテーション
06:31
2. [企画] 講義検索機能 API設計
04:23
全体
8件
4.9
8件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
受講レビュー 12
∙
平均評価 4.6
受講レビュー 22
∙
平均評価 4.8
受講レビュー 8
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!