【AI駆動開発入門】AIをフル活用して個人開発スピードを爆速にする入門講座
Cursor/Bolt.new/Claudeを駆使してAI駆動開発する入門講座です。Xクローンを作りながらフルスタック開発の流れが分かります。応用すれば皆さんの個人開発も捗ることは間違いないでしょう。
本講座で学べる事
AI駆動開発で使用するAIツールの紹介
Cursorの初期設定をしよう
Cursorで使うショートカットキーの紹介
Node.js環境を構築しよう
Webアプリ開発全体工程フローを理解しよう:その①
Webアプリ開発全体工程フローを理解しよう:その②
Claudeを使って要件定義・機能要件からスタートしよう
詳細設計を考慮した機能要件の洗い出し
要件定義書をNotionにまとめてみよう
データベース設計からRDB図を出力してみよう
開発するための技術スタックを選定してみよう
アプリ全体の構成図をClaudeに聞いてみよう
Claudeでディレクトリ設計をしてみよう
CursorでAI駆動開発をはじめよう
.cursorrulesを作成してCursorにルール設定をしてみよう
CursorのComposer機能を使ってファイルを自動生成させよう
SNSのUIはBolt.newに任せてみよう
Boltで作ったUIをCursorに取り込もう
残りのUIの修正とフォントを日本語に修正しよう
ホバー時の色の修正とプロフィールの追加
プロフィールページをCursorで作ってみよう
.cursorrulesの見直しとリファクタリング
AIで修正するのが面倒な時の対処法
レスポンシブ対応してみよう
スマホサイズ表示の細かいUI修正をしよう
スマホサイズ表示の細かいUI修正をしよう:その②
Webアプリケーション開発でデータを取り扱う場合
Supabaseでデータベースを準備しよう
SupabaseとPrismaの初期セットアップを始めよう
テーブル設計とモデルのマイグレーション操作
SQLエディタを使ってシードデータを用意してみよう
SNSタイムラインにシードデータを表示してみよう
プロフィールページでもシードデータを表示してみよう
データフェッチをDALに分けて実装しよう
ポストへの返信も表示できるようにしよう
ポストへの返信の細かい修正をしよう
CursorのAgentモードでコード全体をリファクタリングしてみよう
GitHubの用意と開発用ブランチに切って開発しよう
Clerkでユーザー認証を始めよう
ユーザー操作時に認証用ポップアップを表示させよう
ユーザーアイコンを追加してログアウトできるようにしよう
ユーザー認証後にWebhookを発火させよう
ngrokを使って一時的にサーバーをパブリックに公開してみよう
ミドルウェアでClerk用のAPIをパブリックに修正しよう
usersテーブルの修正とユーザー認証後にデータ保存しよう
※以降の動画は準備中です。