Claude Code に最初の1ファイルを作らせる

なぜ要るか

コードを自分で全部書くのをやめます。やりたいことを日本語で伝えて、AIに書かせます。

ここを越えると、作れるものの量が変わります。「書き方が分からないから作れない」が「頼み方を考えれば作れる」に変わるからです。

最初の1ファイルを作らせるところまでやりましょう。

道具は1つではありません

この講座は Claude Code で進めます。ゲームは見た目が効くので、デザインの出来が良いこの道具を推奨します。頼んだだけで画面が整って出てくるのは、作り始めのモチベーションに直結します。

ただしゲームが作れるのはこの道具だけではありません。Codex でも同じように作れます。こちらはコストパフォーマンスに優れるので、量をこなす作業に強いです。僕は両方使っていて、見た目を作るところは Claude Code、長時間まわしたい作業は Codex に振っています。

どちらでも、この先の術はほぼ同じ手順で進められます。すでに Codex を持っている方は、そのまま Codex で読み替えて構いません。この記事の最後に読み替え方を置いておきます。

先に確認すること

Claude Code は有料プランが必要です。Claude Pro、Max、Team、Enterprise のいずれか、または Claude Console のアカウントで使えます。無料プランでは使えません。

ターミナルがどうしても苦手な方は、デスクトップアプリでも同じことができます。ここではターミナル版で進めます。

やってみる

インストールする

macOS・Linux・WSL の場合、ターミナルで次を実行します。
```
curl -fsSL https://claude.ai/install.sh | bash
```
Windows の PowerShell の場合はこちらです。
```
irm https://claude.ai/install.ps1 | iex
```
もし、&& のエラーが出たら PowerShell ではなく CMD にいます。プロンプトが PS C:\ なら PowerShell、C:\ だけなら CMD です。
入ったか確かめる
```
claude --version
```
次のようにバージョンと (Claude Code) が出れば成功です。
```
2.1.220 (Claude Code)
```
前の術で作ったリポジトリの中で起動する
```
cd my-first-game
claude
```
ここが大事です。フォルダの中に入ってから起動します。Claude Code は、起動した場所のファイルを見て動くからです。
ログインする

初回はブラウザが開くので、画面の案内どおりにログインします。一度済ませれば次からは聞かれません。

日本語で頼む

起動したら、そのまま日本語で打ち込みます。試しにこう頼んでみてください。

index.html を作って、開くと大きな文字で「はじめてのゲーム」と表示されるようにして。CSSは同じファイルに書いて。

許可を求められたら許可する

Claude Code は、ファイルを作る前にあなたへ確認します。内容を見て問題なければ許可してください。

もし、毎回聞かれるのが煩わしくなったら、Shift+Tab で許可の仕方を切り替えられます。ただし最初のうちは、何が起きているか見えるように、都度確認するままで進めるのがおすすめです。

返事を読む

作業が終わると、何をしたか報告が返ります。実際に返ってきたのがこれです。

index.html を作成しました。

内容:
- CSS は <style> タグで同じファイル内に記述
- flex で画面中央に配置、clamp() で画面幅に応じて文字サイズが変わる
- ダーク背景に白文字

できたファイルを開く
```
open index.html
```
Windows なら start index.html です。こう表示されれば成功です。
保存して送り返す

前の術で覚えた3行で、AIが書いたファイルを残しておきます。
```
git add .
git commit -m "はじめてのファイルをAIに作らせた"
git push
```

Windows の場合

Win + X から Windows PowerShell を開いて、上のインストールコマンドを実行します。管理者として実行する必要はありません。

もし 'irm' is not recognized と出たら、PowerShell ではなく CMD にいます。その場合はこちらを使ってください。

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

起動後の使い方は同じです。ファイルを開くところだけ open ではなく start を使います。

start index.html

もし 'claude' is not recognized と出たら、Windowsが場所を覚えていません。PowerShell で次を実行し、ウィンドウを閉じて開き直してください。

$currentPath = [Environment]::GetEnvironmentVariable('PATH', 'User')
[Environment]::SetEnvironmentVariable('PATH', "$currentPath;$env:USERPROFILE\.local\bin", 'User')

Git for Windows を入れておくと Claude Code が Git Bash を使えるようになります。入れていない場合は PowerShell で動きます。どちらでも進められます。

つまずきどころ

claude: command not found と出る

インストール直後はターミナルがまだ場所を覚えていません。ターミナルを閉じて開き直してから、もう一度 claude --version を試してください。Windows では 'claude' is not recognized と出るので、上の「Windows の場合」を見てください。

ログインで「使えません」と言われる

無料プランでは Claude Code は使えません。プランを確認してください。

思ったものと違うものが出てきた

作り直させれば済みます。「文字をもっと大きくして」「背景を白にして」と続けて頼んでください。1回で完璧を狙わず、直させる前提で頼むのがコツです。

英語で返ってくる

「日本語で答えて」と伝えれば切り替わります。

Codex で進める場合の読み替え

すでに Codex を使っている方は、こう置き換えれば同じことができます。

この記事	Codex なら
`claude` で起動	`codex` で起動
`claude --version`	`codex --version`
1行だけ頼む	`codex exec "頼みごと"`

頼み方も、許可を確認されるところも、直させながら進めるところも同じです。以降の術も読み替えて進められます。

使い分けの目安はこうです。見た目を作らせるなら Claude Code、同じような作業を数多くこなすなら Codex。両方持っていれば、僕のように場面で振り分けるのが一番お得です。

次の一歩

さっきの index.html に、追加の注文を1つ出してみてください。「文字を虹色にして」でも「クリックしたら色が変わるようにして」でも構いません。

頼んで、動かして、また頼む。この往復が開発です。もうあなたはAIに開発させています！