学習と試作の環境を準備する

料理を始める前に、まな板や包丁、調味料を揃えておきますよね。同じように、AIを使ってアプリやツールを作る前に、必要な道具を手元に揃えておきましょう。

このレッスンでは、あなたがこれからの学習や試作で使う「3つのツール」を準備します。すべて無料で、ブラウザだけで完了します。15分もかかりません。

あなたが使うツールは3つだけです。

💡 これらはすべて無料のアカウントで使えます。有料プランに入る必要はありません。

AIアシスタントは、あなたの「やりたいこと」を「具体的な手順やコード」に変換してくれる相棒です。友だちに相談するように、日本語で話しかけるだけで使えます。

手順

1. Claude または ChatGPT にアクセスする
2. 「Sign up」または「新規登録」をクリックする
3. Googleアカウントまたはメールアドレスで登録する
4. ログインして、チャット画面が表示されることを確認する

動作確認：AIに話しかけてみる

アカウントができたら、さっそく1つ質問してみましょう。次の文をそのままコピーして貼り付けてください。

あなたはプログラミング初心者の先生です。
「ToDoリスト」のWebアプリを作りたいのですが、
最初に何をすればいいか、3ステップで教えてください。

AIが3つのステップを日本語で返してくれたら成功です。

✅ 良い例：AIに上のプロンプト（＝AIへの指示文）を送り、具体的な手順が返ってくる

❌ 悪い例：「コード書いて」とだけ送る → AIも何を作ればいいか分からず、あいまいな回答になります

💡 コツ: AIへの指示は「誰として振る舞ってほしいか」「何を作りたいか」「どんな形式で答えてほしいか」の3点を含めると、的確な回答が返ってきます。

ブラウザエディタは、AIが生成したコードをすぐに試せる「実験台」です。自分のパソコンに何もインストール（＝ソフトを組み込むこと）する必要がありません。

手順

1. StackBlitz にアクセスする
2. 右上の「Sign in」→ Googleアカウントでログインする（新規登録も同じ画面からできます）
3. ログイン後、ダッシュボード（＝管理画面）が表示される
4. 「New Project」をクリックし、「Next.js」を選ぶ
5. ブラウザの中にコード編集画面が開き、右側にプレビュー（＝実行結果の表示）が出ることを確認する

動作確認：AIの回答をエディタに貼ってみる

先ほどAIに聞いたToDoリストの手順の中に、「このコードを貼り付けて」のような指示があれば、StackBlitzのエディタに貼り付けてみましょう。右側のプレビューに変化が出れば、AIとエディタの連携が体験できます。

まだコードの意味が分からなくても大丈夫です。「AIが書いたコードを、ここに貼れば動く」ということだけ覚えておいてください。

✅ 良い例：StackBlitzでNext.jsプロジェクトを作り、プレビューに画面が表示される

❌ 悪い例：自分のパソコンに難しいソフトをインストールしようとする（トラブルの元です）

デプロイ（＝作ったものをインターネットに公開すること）するための場所を用意しておきます。今は登録だけで十分です。実際の公開は、後のレッスンで行います。

手順

1. Vercel にアクセスする
2. 「Sign Up」をクリックし、GitHubアカウントまたはメールアドレスで登録する
   • GitHub（＝世界中の開発者がコードを共有するサイト）のアカウントを持っていなければ、メールアドレスで大丈夫です
3. ダッシュボード（＝管理画面）が表示されることを確認する

✅ 良い例：Vercelにログインして空のダッシュボードが見える状態

❌ 悪い例：自分でサーバー（＝インターネット上の自分専用コンピューター）を借りようとする（このレッスンでは不要です）

3つのツールが使える状態になっているか、1つずつ確認しましょう。

3つとも確認できたら、あなたの「作業環境」は完成です！次のレッスンから、この環境を使って実際にものづくりを始めていきます。

💡 困ったらAIに聞く: 環境構築で分からないことがあったら、AIアシスタントに「StackBlitzでNext.jsプロジェクトを作ろうとしたら○○というエラーが出ました。どうすればいいですか？」のように聞いてみましょう。AIはトラブル解決も得意です。