강의

멘토링

로드맵

NEW
Applied AI

/

Utilize AI

バイブコーディングで掲示板作成 + 会員登録ログイン (React + FastAPI)

バイブコーディングでReact会員登録ログイン + 掲示板作り (React + FastAPI)は、AIプロンプトを活用してフルスタックWebアプリケーションを直接完成させる実習型講義です。 OpenAI CodexとClaude Code この講義では、React(Typescript)フロントエンドとFastAPIバックエンドを連携して、 会員登録 & ログイン機能 掲示板CRUD(作成、照会、修正、削除) JWT認証と権限処理 を一つのプロジェクト内で実装します。 特に、単純にコードを作成するだけで終わるのではなく、 👉 AIプロンプトでコード生成 → 実行及び修正 → テスト → 拡張 という「バイブコーディング」学習方式を通じて、AIと一緒に開発する新しい流れを体験できます。 完走後には「自分だけの会員制掲示板サービス」を直接完成させることができ、 追加でコメント、いいね、画像アップロードのような拡張機能まで挑戦できます。

2名 が受講中です。

  • Kyung-il In
바이브코딩
Reactjs
FastAPI
풀스택
인공지능
React
Node.js
TypeScript
AI

こんなことが学べます

  • AI基盤開発経験

  • フロントエンド (React + TypeScript)

  • バックエンド (FastAPI)

  • バイブコーディングでCRUD開発

バイブコーディングでReact会員登録ログイン + 掲示板作成 (React + FastAPI)

バイブコーディング: React + FastAPIで会員登録/ログイン + 掲示板フルスタック作成

  • この講義はフロントエンド(React)バックエンド(FastAPI)を組み合わせて活用し、実際のサービスで最も多く使用される会員登録・ログイン機能掲示板CRUD機能を実装するプロジェクトベースの講義です。

こんな内容を学びます

  1. 開発環境設定

    • Node.js、Python、VS Code、GitHub等の基本ツールのインストールと活用

    • Linux(WSL)ベースの開発環境経験

  2. AIベース開発ワークフロー

    • OpenAI Codex CLI 使用方法

    • Claude Codeの使用方法

    • プロンプト作成 → コード自動生成 → エラー修正・改善

  3. フロントエンド(React)

    • 掲示板UI制作(一覧、投稿、修正/削除)

    • 会員登録/ログイン画面構成


  4. バックエンド(FastAPI)

    • 掲示板CRUD API実装

    • 会員登録/ログイン API + JWT 認証/認可

    • 権限処理(本人の投稿のみ修正/削除)

  5. プロジェクト統合

    • React フロントエンド ↔ FastAPI バックエンド連携

    • 全体サービスフロー(会員登録 → ログイン → 投稿 → 修正/削除)完成

    • 実務型フルスタックWebサービス構築経験


🎯 学習結果

  • 自分だけのフルスタックWebサービス完成

  • AI開発ツール活用スキルの習得

  • React + FastAPI連携経験

  • 会員管理 + 掲示板CRUDというWebサービスの核心ロジック直接実装


👉 一言で言うと、この講義は「自分が作ったサービスにログインして記事を書いて管理できるWebサービス」AIツールを活用してフルスタックで完成させる体験を提供します。

この講義を作った人

こんにちは、Kyung-il Inです。

  • KAIST経営大学院修了

  • 国民大学校修士

  • 漢陽大学校博士(勉強中)

  • 人工知能を利用したビッグデータ分析

  • AIチャットボットエンジン及びチャットボットシステム開発

  • Android Force システム及びサーバー開発

    研究分野

  • ブロックチェーンと分散ファイルシステムを利用した電子文書の信頼性向上に関する研究

  • ブロックチェーンシステムを活用したデータ価値形成と創出に関する研究

  • 人工知能チャットボットシステムの産業適用とRPA活用に関する研究

  • マルチドメイン対話型チャットボットシステムに関する研究

受講前の参考事項

実習環境

  • CPU: Intel i5(4コア以上)またはAMD Ryzen 5以上

  • メモリ(RAM): 8GB以上(実習のみであれば4GBでも可能、ただし速度低下あり)

  • ディスク: 10GB以上の空き容量(Nodeモジュール、Python仮想環境、DBファイル保存を含む)

  • グラフィックカード(GPU): 必須ではない(ウェブ開発はCPU性能に依存)

学習資料 - Notionリンク提供方式

  • 講義紹介ページ: 講義概要、カリキュラム、受講前の準備事項まとめ

  • 実習ガイド文書: インストール方法、開発環境設定、コマンド集

  • サンプルコード/スクリーンショット:講義で出てきた例をすぐに確認可能

  • 追加学習資料: 公式ドキュメント、ブログ、参考動画リンクの整理

前提知識および注意事項

  • ウェブ開発の基礎知識

  • 推奨予備知識

    • Reactを初めて触れる方でも受講は可能ですが、コンポーネントの概念を知っていると理解速度が速くなります。

    • Python基礎文法を知っていればFastAPIの学習が楽になります。

👉 難易度: 初級〜中級
👉 プログラミングを全く初めて学ぶ方よりも、ウェブ開発を少しでも触れたことがある方に適しています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ウェブ開発を初めて始める入門者

  • フルスタック開発に挑戦したいフロントエンド/バックエンド開発者

  • AI基盤開発方式(バイブコーディング)に関心のある学習者

  • トイプロジェクトのアイデアが必要な学習者

  • 実習中心の短くて集中的な講義をお探しの方

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

  • CHAT GPT

  • React.js

  • FastAPI

こんにちは
です。

1,044

受講生

29

受講レビュー

21

回答

4.9

講座評価

3

講座

열공

カリキュラム

全体

20件 ∙ (1時間 44分)

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール

¥35,750

35%

¥6,535

Kyung-il Inの他の講座

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

似ている講座

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