Bolt.newでフルスタックWebアプリを作る方法

TL;DR

Bolt.newに要件を入力し、生成された画面を日本語化した後、Supabase認証とデータ保存、Gemini API、AIチャット、Stripe課金を順に実装する。Netlifyと連携すれば、初心者でも自然言語による修正を重ねながら公開まで進められる。

Transcript

はい、どうも皆さんこんにちは。しです。 今回はB.完全ガイドということでですね 、え、ボルトニュ1つだけでですね、 アプリケーション開発をリリースデプロイ まで終わらせようと、え、いう動画になっ ています。え、ま、最近だとね、非 エンジニアの方がですね、ま、ボルト.2 を使ってですね、ま、簡単な アプリケーション、え、作る方増えてき ました。なので、はい、ま、僕の周りにも ですね、ボルト2を使ってる方増えてき ましたので、ま、ここで一旦、え、ま、 完全ガイドということで撮っていきたいと 思います。ま、私実際の個人開発において ですね、実際にボルト2を使って、ま、 キャッチアップっていうアプリね、ま、 最近リリースしました。え、技術トレンド をキャッチアップするために記事を キリエーションした... Read More

Key Insights

• Bolt.newは、自然言語で要件を入力すると、画面だけでなく認証、データベース、API、課金を含むWebアプリ開発を段階的に進められるツールである。
• 初期設定では、残りトークンの表示とエディター機能を有効にし、公開に使うNetlifyとデータ保存に使うSupabaseを事前に接続する。
• Enhance Promptは、短く曖昧な開発要件を、機能、画面構成、認証、セキュリティなどを含むAIが処理しやすい指示へ詳細化する機能である。
• ViteとReactで生成された画面はシングルページアプリとして動作するが、初期状態のログインやAI応答には仮処理やダミーデータが含まれる場合がある。
• Supabase認証は、ユーザー固有のコンテンツやチャット履歴を永続化する前提であり、プロフィールテーブルやRLSを含む設計と合わせて実装する。
• 画面の日本語化は一度の指示で全箇所が直るとは限らず、テンプレート、設定、コンテンツなど対象ページを分けて修正すると進めやすい。
• 有料機能の差分更新は変更箇所だけを書き換えるため、ページ全体の再生成よりトークン消費と処理時間を抑えられると話者は説明している。
• 実装順序は、UI生成、認証とデータ設計、フロントエンドとの接続、Gemini API、AIチャット、Stripe課金、エラー修正、公開の流れである。
• 🎬 このチャンネルの他の動画:
  • Claude Codeで有料記事アプリを作る方法
  • Notionで高速ブログを作る方法とは？
  • Claude Coworkで業務を効率化する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Bolt.newでフルスタックWebアプリを作る方法は？

最初にアプリの目的、必要機能、画面構成を自然言語で入力し、生成されたUIを確認して修正します。次にSupabaseで認証とデータベースを用意し、Gemini APIによる生成機能、AIチャット、Stripe課金を順番に接続します。最後にNetlifyへ公開し、実際の登録、保存、応答、課金の動作を確認します。

Q: Bolt.newの開発前に必要な初期設定は？

残りトークンを確認できる設定とエディター機能を有効にし、NetlifyとSupabaseを接続します。Netlifyは公開先、Supabaseは認証とデータ保存に使用します。Figmaのデザインを再現したい場合はFigmaも連携し、必ず守らせたい出力規則や社内資料がある場合はKnowledgeへ登録します。

Q: Bolt.newへアプリの要件を伝える方法は？

作りたい機能、対象コンテンツ、画面構成、後から追加する認証や課金まで、文章でまとめて入力します。例では、Gemini APIを使ったブログ、SNS、広告、メール向けの生成機能、AIチャット、データ保存、左側のサイドバーを指定しています。要件が粗い場合はEnhance Promptで指示を詳細化できます。

Q: Bolt.newで画面を日本語化する方法は？

生成後の入力欄で、日本語対応と日本語向けフォントへの変更を指示します。英語が残った場合は、テンプレート、設定、コンテンツなど、修正対象のページや機能を具体的に指定して再度依頼します。変更範囲が広いと時間がかかるため、対象を分割して小さく修正する方法も示されています。

Q: Supabase認証をBolt.newに実装する方法は？

Bolt.newからSupabaseプロジェクトを接続または作成し、ユーザー認証と必要なデータベース設計をまとめて指示します。新規登録処理ではSupabaseのサインアップ機能を利用し、認証ユーザーに対応する情報をプロフィールテーブルへ保存します。登録後はSupabase側で認証ユーザーとプロフィール行が作成されたか確認します。

Q: なぜAI機能より先に認証とデータベースを作るのですか？

生成コンテンツやAIチャット履歴を、利用者ごとのデータとして保存する必要があるためです。先にユーザー登録とログインを実装し、各データを所有者へ関連付けられるテーブルを用意すれば、ページを再読み込みしても情報を残せます。その後にGemini APIやチャット機能を接続するのが説明された一般的な順序です。

Q: 生成されたログイン画面やAI応答はそのまま使えますか？

初回生成直後の機能を、そのまま本番用とは判断できません。動画内では、ログイン情報が一時的にローカルストレージへ保存されている可能性や、Gemini APIを未設定の状態で返るチャット回答がAIの回答ではない可能性が指摘されています。SupabaseやGemini APIとの接続を確認し、実データで動作検証する必要があります。

Q: Bolt.newで修正に時間やトークンがかかる場合の対処法は？

修正するページやコンポーネントを限定し、変更範囲を小さくして依頼します。話者によれば、有料機能の差分更新を使える場合は変更箇所だけを書き換えられるため、コード全体を再生成する場合より時間とトークンを抑えやすくなります。エラーが発生した場合は自動修正を試し、必要に応じて高度な推論機能を使います。

Summary & Key Takeaways

• 最初に設定画面で残りトークンの表示とエディター機能を有効にし、公開先のNetlifyとデータベースのSupabaseを連携する。必要ならFigmaも接続でき、Knowledgeには日本語出力など開発中に守らせたい規則や参照資料を登録できる。無料枠には利用量やSupabaseのプロジェクト数などの制限があるため、着手前に利用状況を確認する。

• 生成AI SaaSの要件として、Gemini APIによるブログ、SNS、広告、メール向けのコンテンツ生成、AIチャット、データ保存、サイドバー型画面を自然言語で指示する。曖昧な依頼はEnhance Promptで詳細化できる。初回生成後は画面を確認し、日本語化やフォント、テンプレート、設定画面など、対象を具体的に指定して段階的に修正する。

• 見た目が完成しても、仮のログインやダミー応答は本番機能ではない。まずSupabaseでユーザー認証とプロフィールテーブルを用意し、ユーザー固有の生成コンテンツやチャット履歴を保存できる構造へ進める。その後にGemini API、AIチャット、Stripe課金を実装し、エラー時は自動修正を試しながらフロントエンドとバックエンドを接続して公開する。