ブラウザだけで動かす

なぜ要るか

前の術でできたゲームを見てください。ファイルは1つだけです。

ls

AGENTS.md	README.md	credits.html	index.html
CLAUDE.md	about.html	docs

ls は、今いるフォルダにあるファイルの名前を並べて見せるコマンドです。ゲーム本体はこの中の index.html 1つだけです。

index.html をダブルクリックすれば遊べます。サーバーを立てていません。インストールもしていません。

サーバーとは、ファイルを人に配るために動かし続けておくプログラムのことです。それを用意しなくても、この1枚は開くだけで遊べます。

これは狙ってそうしています。理由は3つあります。

詰まる場所が少ない。 サーバーが必要な構成にすると、動かない原因が「コードなのか環境なのか」で分からなくなります
人に渡せる。 ファイルを送るだけで遊んでもらえます
公開が楽。 8章で公開するとき、ファイルを置くだけで済みます

最初の1本は、この形で通します。足りなくなってから重い構成に移ればいいです。

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

index.html が外部のファイルを読んでいたら、全部やめて1ファイルで完結する形に直して。ネットが繋がっていない状態でも、ダブルクリックだけで遊べることが条件。見た目は変えないで。

1ファイルで作るということ

普通の開発だと、こう分けます。

index.html   ← 画面の骨組み
style.css    ← 見た目
script.js    ← 動き

正しい作り方です。でも最初の1本では分けません。 全部 index.html の中に書きます。

1-5 の AGENTS.md にこう書いたのを覚えていますか。

- CSSは同じHTMLファイルの中に書く。別ファイルにしない。

これがそのために書いたルールです。分けない理由はこうです。

分けると	1ファイルだと
ファイル間の参照ミスで動かなくなる	参照が要らない
3ファイル開いて見比べる	1つ開けば全部見える
渡すときに全部揃える	1つ送れば動く

ファイルが1000行を超えたら分けます。それまでは1つで困りません。

見本ゲームの三つの的も、6章まで育てたあとも index.html 1枚のままです。画面・見た目・動きの全部がこの1枚に入っていて、絵と音と声とセーブを足してもまだ1000行に届いていません。 増えたのは assets/ に置いた画像と音のファイルだけです。

やってみる

本当にサーバーなしで動くか確かめる

ブラウザの上にある、住所が出ている細長い欄がアドレスバーです。ここを見てください。file:/// で始まっていれば、パソコンの中のファイルを直接開いている状態で、サーバーを通っていません。
```
file:///Users/あなたの名前/my-first-game/index.html
```
http://localhost で始まっていたら、サーバー経由です。その場合はファイルを直接ダブルクリックして開き直してください。
他の人のパソコンでも動くか考える

index.html の中で、外部のファイルを読んでいないか確認します。
```
grep -nE "src=|href=" index.html
```
grep は、ファイルの中から指定した文字を含む行だけを、行番号つきで抜き出すコマンドです。src= と href= はどちらも「外のファイルを読み込む」ときに使う書き方なので、この2つを探せば外部依存が一覧できます。

ここに https:// で始まるものが並んでいたら、ネットが無いと動きません。 最初の1本では、外部のものを読まないのが安全です。
1ファイルであることを確かめる
```
ls *.css *.js
```
見た目を書く .css と、動きを書く .js が別ファイルになっていないかを見ています。「そんなファイルは無い」という短いエラーが出るのが正解です。ファイル名が出てこなければ、見た目も動きも index.html の中に入っている、つまり1ファイルで完結しています。
外部依存が混ざっていたら、AIに剥がしてもらう

手順2で https:// が見つかったら、こう頼みます。
```
claude -p "index.html が外部のファイルを読んでいたら、全部やめて1ファイルで完結する形に直して。ネットが繋がっていない状態でも、ダブルクリックだけで遊べることが条件。見た目は変えないで。"
```
「ネットが繋がっていない状態でも」という条件が要点です。 「1ファイルにして」だけだと、CDNの読み込みは残ります。

CDNは、ネット上に置いてある部品を必要なときに読み込む仕組みです。手元のファイルは1つに見えても、開くたびに外へ取りに行くので、ネットが無いと崩れたり動かなくなったりします。
人に渡してみる

index.html を1つ、メールでもチャットでも送ってみてください。相手はダブルクリックするだけで遊べます。

これが「ファイルを開くだけで動く」状態です。

動かなくなる原因になりやすいもの

1ファイルでも、これを入れると外部依存が生まれます。最初は避けてください。

避けるもの	理由
外部のCSSやフォントの読み込み	ネットが無いと崩れる
画像を別ファイルにする	1つ送るだけでは足りなくなる
ライブラリのCDN読み込み	相手の環境で読めないことがある

絵を入れたくなったら4章で扱います。そのときは画像ファイルが増えますが、遊べる形を崩さない範囲で足します。

つまずきどころ

ファイルを開いても真っ白

コードにエラーがあります。3-5の切り分け方で原因を見つけられます。

ダブルクリックしたらエディタが開いた

そのファイルを開くアプリがエディタになっています。右クリックから「このアプリケーションで開く」でブラウザを選んでください。

サーバーが必要と言われた

AIが fetch などを使うコードを書いた場合、file:// では動かないことがあります。「サーバーなしで動くように直して」と頼めば直ります。

分けた方がきれいだと思う

正しい感覚です。ただし今ではありません。 1000行を超えたか、複数人で触るようになったときが分ける時期です。

Windows の場合

ls は PowerShell でも使えます。アドレスバーの表示は file:///C:/Users/... の形になります。

ファイルを開くのは start index.html です。

次の一歩

index.html を、自分のスマホに送って開いてみてください。

画面が崩れていたら、それは6章で直します。 いま知っておきたいのは「他の人の環境では見え方が違う」という事実だけです。

1ファイルで動く形が守れていれば、公開はあとから簡単にできます！

ここまでの三つの的

この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。

別の画面でこのゲームを開く