AI開発
買い切りパッケージ AIに コードを 書かせて、 自分の サービスを 公開する。
Claude Code × Next.js × Supabase
Claude Codeを使った"本格的な"Webアプリケーション開発の流れを、
開発未経験の方でも、ハンズオン形式で再現できる買い切り教材です。
買い切り ¥39,800（税込）/ 閲覧期限なし
第1章「Webアプリケーションの全体像」は、購入なしで全文読めます
買ってから「思っていた内容と違った」が一番もったいないので、最初の1章をそのまま公開しています。 説明の丁寧さ、図解の粒度、想定しているレベル感を、実物で確かめてください。
読み終えたときに「第2章から先も、この温度で書かれているなら読みたい」と思えたら、それがそのまま購入の判断材料になります。
こんな方へ
AIに何から頼めばいいか分からない
Claude Code は入れてみたが、指示が曖昧で望んだコードが返ってこない。AIに正しく指示を出すための「概念」から押さえたい。
本格的なWebサービスを作って公開したい
簡単なアプリでなく、ログイン機能やサーバーにデータを保存する機能など、本格的Webサービスを作って実際に公開するまでの一本道を通しで体験したい。
セキュリティや法規周りが怖い
いざ自分がやるとなると、セキュリティや、公開後の運用や、法規周りが怖い。その辺りも基礎を押さえてから公開したい。
このコースのゴール
あなた自身がコードを書けるようになることではなく、AIにコードを書かせて、自分のサービスをインターネットに公開することをゴールに設計しています。
AIに指示を出すための地図が手に入る
リクエスト/レスポンス、フロント・バック・DBの役割、APIとは何か。コードを書かないからこそ必要になる「概念の地図」を最初に渡します。
詰まりやすい環境構築を手順どおりに完走できる
VSCode・ターミナル・Node.js・Claude Code のインストールを、画面の指示を追うだけで終わる形に分解。第2章の終わりにはAIにLPを1枚作らせるところまで進みます。
ログイン機能付きのアプリを公開できる
第7章では Supabase Auth と RLS を使い、ユーザーごとにデータが分離されたTODOアプリを作って Vercel で公開。8項目のチェックリストで動作確認まで行います。
自分のアイデアをサービスにできる
第8章では要件定義書の作り方から。Claude Code に要件を渡して土台を一気に作り、「動かす→直す」を繰り返してオリジナルサービスを公開します。
カリキュラム（全10チャプター）
第1〜6章で土台をつくり、第7章で作って公開、第8章で自分のサービスを公開します。
第9・10章は付録で、課金機能が必要になったとき・本番公開の直前に辞書のように開く章です。
- ■リクエストとレスポンス ― ブラウザで何が起きているか
- ■フロントエンド / バックエンド / データベースの役割
- ■APIとは何か
- ■HTML / CSS / JavaScript がそれぞれ担当すること
- ■VSCode のインストールと最低限の操作
- ■ターミナルの基礎（pwd / ls / cd）
- ■Node.js と npm のセットアップ
- ■Claude Code のインストールと初回起動
- ■演習：Claude Code に LP を1ページ作らせる
- ■なぜコード管理が必要なのか（セーブポイントの考え方）
- ■init / add / commit / push の4コマンド
- ■GitHub リポジトリの作成と連携
- ■ブランチを切って安全に機能を追加する
- ■演習：ブランチで問い合わせフォームを実装してマージ
- ■良いプロンプトの3原則と、実践で使えるプロンプトの型
- ■CLAUDE.md でプロジェクトのルールをAIに渡す
- ■Skills（スキル）で専門作業を自動化する
- ■AIに「見えているもの / 見えていないもの」を意識する
- ■エラーメッセージの読み方とAIへの渡し方
- ■Next.js 16 を選ぶ理由と技術スタックの考え方
- ■create-next-app でのプロジェクト作成
- ■ディレクトリ構成の役割（app / components / AGENTS.md）
- ■フォルダ＝URL のルーティングと動的ルーティング
- ■演習：Claude Code に指示してページを追加する
- ■BaaS とは何か、Next.js だけでは足りない理由
- ■アカウント作成とプロジェクト作成（東京リージョン）
- ■MCP で Claude Code から Supabase を直接操作する
- ■API Keys の扱い方（公開キーと秘密キーの違い）
- ■テーブル設計と RLS（Row Level Security）の設定
- ■Supabase Auth で新規登録・ログイン・ログアウト
- ■ユーザーごとにデータを分離した TODO の CRUD
- ■GitHub へのプッシュと Vercel へのデプロイ
- ■環境変数・リダイレクトURLの設定まで完走
- ■アイデアの決め方とスコープの絞り方
- ■Claude Code に要件定義書（requirements.md）を作らせる
- ■要件定義書を渡してアプリの土台を一気に作る
- ■「動かす → 直す」を繰り返して完成度を上げる
- ■自分のサービスをインターネットに公開する
- ■Product / Price / Checkout Session など主要6概念
- ■買い切りとサブスクの違い（mode の1行で切り替え）
- ■Server Action から Checkout Session を作る実装
- ■Webhook の署名検証と、決済完了をDBに反映する処理
- ■本番公開前チェックリスト
- ■RLS・キー管理・認証まわりの落とし穴（§1〜§2）
- ■メール / 決済 / Next.js のサーバー・クライアント境界
- ■セキュリティヘッダとVercelデプロイ保護
- ■SEO / OGP / パフォーマンス / アクセシビリティ
- ■リーガル（特商法・規約・ドメイン）まで全11セクション
第1章を読んで「この続きが読みたい」と思ったら、
残り9章はすぐに開けます。
扱う技術スタック
実務でもそのまま通用する、2026年現在のスタンダードな構成です。 Claude Code が最も得意とする組み合わせでもあります。
制作者
立川修平（ぶべ）
株式会社bubekichi 代表 / ShiftB 運営 / YouTube「ぶべの開発日記」
経理系SaaSの企業でエンジニアを経験後、独立・起業。複数スタートアップでリードエンジニアを務めながら、自社サービスも複数展開中。YouTube「ぶべの開発日記」では、Claude Code を使った開発の様子をそのまま公開しています。 このコースは、その動画で使っている技術スタックと進め方を、未経験の方が同じ手順で再現できるように教材化したものです。
YouTube「ぶべの開発日記」を見る ›料金
買い切りプラン
月額課金なし / 更新手続きなし / 閲覧期限なし
含まれるもの
全10チャプターの教材（本編8章＋付録2章）- ログイン機能付きTODOアプリを公開するまでのハンズオン
- オリジナルサービスを開発・公開するまでのハンズオン
- 【付録】Stripe決済の実装手順
- 【付録】公開前セルフレビュー チェックリスト（全11セクション）
- 各章の理解度チェッククイズ
- 閲覧期限なし・追加課金なしで何度でも読み返せる
含まれないもの
- ×チャット・メール等での質問対応
- ×個別面談・メンタリング
- ×コードレビュー
決済完了後、ポータルサイトへの招待リンクがメールで届きます
※ Claude Code の利用には Anthropic のアカウントとAPI利用料（従量課金／本コースの範囲では数百円〜数千円程度）が別途必要です。
※ Supabase・Vercel・GitHub は、いずれも無料プランのままコースを完走できます。
購入後の流れ
購入ページで決済する
メールアドレスを入力して決済に進みます。買い切り ¥39,800（税込）、月額課金はありません。
メールでポータルサイトへの招待が届く
決済完了後、ご登録のメールアドレス宛に学習ポータルサイトへの招待リンクが自動で届きます。
登録すると、全チャプターが閲覧可能に
招待リンクから登録すれば、その場で全10チャプターが読める状態になります。閲覧期限はありません。
ご購入前の注意事項
チャット・面談などのサポートは含まれません
本コースはコンテンツのみの買い切り販売です。質問対応・コードレビュー・メンタリングは一切含まれません。ご自身のペースで進められる方に向いています。
Claude Code の利用料は別途かかります
Anthropic のアカウント作成とAPI利用料（従量課金）が必要です。本コースの範囲では数百円〜数千円程度が目安です。
購入後の返金には対応しておりません
デジタルコンテンツの性質上、返金はお受けできません。第1章を無料公開していますので、内容をご確認のうえご購入ください。
よくある質問
プログラミング未経験でも大丈夫ですか？
はい。第1章はコードを一切書かずに「Webアプリがどう動いているか」を掴むところから始まり、第2章でVSCode・ターミナル・Node.js・Claude Codeを手順どおりインストールしていきます。コードを書くのはあなたではなくClaude Codeなので、必要なのは「AIに正しく指示を出すための概念理解」です。それをこのコースで身につけます。
チャットや面談でのサポートはありますか？
ありません。本コースはコンテンツのみの買い切り販売です。質問対応・コードレビュー・面談などのサポートは一切含まれませんので、ご自身のペースで進められる方に向いています。サポートや仲間との交流を求める方は、別途ご案内しているコミュニティや個別コースをご検討ください。
閲覧期限はありますか？
ありません。買い切りのため、一度購入すれば無期限で閲覧いただけます。月額課金や更新手続きも不要です。PC・タブレット・スマートフォンなど、どのデバイスからでも閲覧できます。
購入前に中身を確認できますか？
第1章「Webアプリケーションの全体像」は購入なしで全文お読みいただけます。文章の粒度・説明の丁寧さ・レベル感がご自身に合うかを確認したうえでご判断ください。第2章以降の目次も公開しています。
受講にかかる追加費用はありますか？
Claude Code の利用にはAnthropicのアカウントとAPI利用料（従量課金／コースの範囲では数百円〜数千円程度）が別途必要です。Supabase・Vercel・GitHub はいずれも無料プランで完走できます。Stripe は付録章で扱いますが、サンドボックス（テスト環境）を使うため費用はかかりません。
どれくらいの期間で終わりますか？
全10チャプターで、目安は2〜4週間です。第1〜6章で土台をつくり、第7章でログイン機能付きのTODOアプリを公開、第8章でご自身のオリジナルサービスを公開するところまで進みます。第9・10章は付録なので、必要になったタイミングで読み返す使い方を想定しています。
教材はどこで閲覧できますか？
専用の学習ポータルサイト上で閲覧します。決済完了後、ご登録のメールアドレス宛に招待リンクが届きますので、そこから登録すればすぐに全チャプターが読める状態になります。
返金はできますか？
デジタルコンテンツの性質上、購入後の返金には対応しておりません。第1章を無料で公開しているほか、全チャプターの目次も掲載していますので、内容をご確認のうえご購入ください。