Bolt.new 入門：最初のWebアプリを構築
# Bolt.new 入門ガイド：最初のWebアプリを構築する
Bolt.new との最初の出会いを覚えています。AI 駆動の開発環境が従来のワークフローを本当に置き換えられるのか、私は懐疑的でした。Bolt.new で3つの本番アプリを構築した今、これは誇大広告ではないと言えます。最初のWebアプリをゼロから作成する手順を、私が実際に使っている正確なステップと、あなたが同じ過ちを犯さないように私が犯したミスを交えて説明します。
## 前提条件
始める前に、以下を準備してください：
- **最新のWebブラウザ**（Chrome、Firefox、Edge — 私はChromeを使用）
- **GitHubアカウント**（無料プランで十分）
- **Bolt.newアカウント**（[bolt.new](https://bolt.new) でサインアップ）
- **Web開発の基本的な理解**（HTML、CSS、JavaScriptの基礎）
- **Node.jsのインストール**（オプションですが、ローカルテストに便利）
> **警告：** GitHub接続の手順をスキップしないでください。リポジトリを接続するのを忘れて3時間分の作業を失ったという苦い経験があります。プロジェクトを始める前に必ずGitHubアカウントを接続してください。
## ステップ1：Bolt.newアカウントを作成しGitHubに接続する
[bolt.new](https://bolt.new) にアクセスし、「サインアップ」をクリックします。私は素早くアクセスするためにGoogleアカウントを使用しましたが、メールでも問題ありません。
1. 右上の「サインアップ」をクリック
2. 認証方法を選択（Google/GitHub OAuthをお勧めします）
3. オンボーディングウィザードを完了 — 約2分かかります
4. 設定 → 統合 → GitHub に移動
5. 「GitHubに接続」をクリックし、アプリケーションを認可
6. 接続が「接続済み」と緑色のチェックマークで表示されることを確認
**プロのヒント：** 設定で「GitHubに自動保存」を有効にしてください。ブラウザがセッション中にクラッシュしたときに、これで救われました。
## ステップ2：新しいプロジェクトを開始する
それでは、最初のプロジェクトを作成しましょう。Bolt.newのコア機能を示すシンプルなタスク管理アプリを構築します。
1. ダッシュボードから「新規プロジェクト」をクリック
2. テンプレートオプションから「Webアプリケーション」を選択
3. プロジェクト名を入力：`TaskMaster-App`
4. フレームワークとして「React + Vite」を選択（高速でモダン）
5. 「プロジェクトを作成」をクリック
```bash
# Bolt.new が自動生成する構造：
taskmaster-app/
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── main.jsx
│ └── index.css
├── public/
│ └── vite.svg
├── package.json
├── vite.config.js
└── index.html
```
## ステップ3：最初のプロンプトを書く
ここがBolt.newの真骨頂です。コードを1行ずつ書く代わりに、あなたが望むものを説明します。以下は、タスク管理アプリのための私の正確なプロンプトです：
```
タスク管理アプリを作成してください：
- 「TaskMaster」というタイトルのヘッダー
- 新しいタスクを追加するための入力フィールド
- すべてのタスクをチェックボックス付きで表示するリスト
- 各タスクに編集ボタンと削除ボタン
- タスクを完了としてマーク可能（取り消し線テキスト）
- ローカルストレージによる永続化
- クリーンでモダンなUI、青色のカラースキーム
- モバイルとデスクトップに対応したレスポンシブデザイン
```
1. このプロンプトをチャットインターフェースに入力または貼り付け
2. Bolt.new がコードを生成するまで10〜15秒待つ
3. プレビューウィンドウで生成されたコードを確認
4. 問題なければ「承認」をクリック
> **警告：** 最初のプロンプトで不完全なコードが生成される可能性があります。これは正常です！UI要素と機能について具体的に指定すると、より良い結果が得られることがわかりました。ビジョンに合わない場合は、最初のバージョンを受け入れないでください。
## ステップ4：生成されたコードをカスタマイズする
Bolt.new が初期コードを生成した後、私はいつもいくつかの点をカスタマイズします。以下は私が変更した内容です：
```jsx
// 元の生成コード（簡略化）
function App() {
const [tasks, setTasks] = useState([]);
// ... 残りのコード
}
// 追加機能を含む私の修正版
function App() {
const [tasks, setTasks] = useState(() => {
const savedTasks = localStorage.getItem('tasks');
return savedTasks ? JSON.parse(savedTas