「ブラウザで動く」と「Webで動く」：言葉の違いは結果に出るか

何を確かめるか：一行だけを変える

問いは次の一つに絞ります。

依頼文の中の「ブラウザ」と「Web」の一語（または一行）だけを入れ替えたとき、生成されるコードの構成や性質に、偶然のばらつきを超える差が出るか。

この問いを成り立たせるには、ほかの条件をすべて固定する必要があります。共通部分は次の文にします。

30秒間でボタンをクリックした回数を競うゲームを作ってください。スコアを表示し、もう一度遊べるようにしてください。

この後ろに、グループごとに次の一行を付けます。

• グループB（ブラウザ）：「ブラウザで動くようにしてください。」
• グループW（Web）：「Webで動くようにしてください。」

さらに、差のとらえ方を安定させる対照として、同じ「ブラウザで動くようにしてください。」を使うグループB2を用意します。BとB2は条件がまったく同じなので、この2つの間に見えた違いは、純粋な「生成のゆらぎ」です。BとWの違いがこのゆらぎと同じ程度なら、言葉の差は結果に出ていないと読めます。この対照を置くのが、この設計の要です。

準備するもの

• 同じAIサービス、同じモデル、同じ設定。実験の途中でモデルを切り替えないでください。
• 会話の履歴や記憶機能に影響されないよう、毎回「新しい会話」を始められる環境。
• 記録用の表計算シートまたはメモ。
• 生成されたコードを保存するフォルダ。ファイル名は「B-01」「W-01」「B2-01」のように、グループと通し番号で付けます。
• 下の簡易チェッカー（後述）を開くためのブラウザ。

回数の目安は、各グループ最低10回です。5回でも作業はできますが、「4回対1回」のような差は偶然でも十分起こるため、判断が難しくなります。時間に余裕がなければ、まず各5回で傾向を見て、気になる項目だけ追加で回してもかまいません。

手順：割り当てと生成

1. グループB、W、B2の各10回、合計30回分の枠を作ります。
2. 30枠の実施順は混ぜます。「Bを10回続けてからWを10回」と進めると、時間帯や環境の変化がグループの差に紛れ込みます。くじや乱数で順番を決めてください。
3. 毎回、新しい会話を開き、共通部分とグループごとの一行だけを貼って送ります。追加の質問や修正依頼は送りません。
4. 返ってきた内容は、手を加えずにそのまま保存します。複数のファイルが提案された場合は、すべて保存してください。
5. AIが「どのファイルをどう置くか」「何をインストールするか」といった手順を添えてきた場合は、その文章も別に保存します。これも結果の一部です。

ここで大切なのは、一行以外の違いを混ぜないことです。句読点や改行の有無も、毎回同じにしてください。

記録の取り方

1回の生成につき1行、次の項目を記録します。主観が入る項目は避け、数えられるものを中心にします。

• ファイル数、記録のしかた：提案されたファイルの数（HTML・JS・CSS・その他）
• 単独で動くか、記録のしかた：保存したHTMLをブラウザで開き、30秒のゲームとして遊べれば○、動かなければ×
• 外部の読み込み、記録のしかた：外部URLのスクリプトやCSS、フォントなどの有無
• サーバー用コード、記録のしかた：サーバーを前提にしたコード（例：Node.js系の記述）の有無
• 追加の道具、記録のしかた：インストールやビルドの手順が添えられたか
• 保存機能、記録のしかた：localStorageなどの使用の有無
• コードの長さ、記録のしかた：行数
• 要件の充足、記録のしかた：「30秒」「スコア表示」「もう一度遊べる」の3つが揃っているか

行数や外部の読み込みなど、機械的に調べられる項目は、次の簡易チェッカーに任せると手間が減ります。HTMLファイルとして保存して開き、生成したHTMLを選択してください（複数選択もできます）。

<input type="file" id="f" multiple accept=".html">
<pre id="out"></pre>
<script>
const checks = [
  ["外部URL読み込み", /(src|href)\s*=\s*["']https?:\/\//i],
  ["import外部", /import[^;]*from\s*["']https?:/i],
  ["fetch/XHR", /\bfetch\s*\(|XMLHttpRequest/],
  ["サービスワーカー", /serviceWorker/],
  ["SharedArrayBuffer", /SharedArrayBuffer/],
  ["localStorage等", /localStorage|sessionStorage/],
  ["WebSocket", /WebSocket/],
  ["node系の記述", /require\s*\(|process\.env|express/]
];
document.getElementById("f").onchange = async (e) => {
  const lines = [];
  for (const file of e.target.files) {
    const t = await file.text();
    const hits = checks.filter(([, re]) => re.test(t)).map(([n]) => n);
    lines.push(file.name + " | " + t.split("\n").length + "行 | " + (hits.join(", ") || "該当なし"));
  }
  document.getElementById("out").textContent = lines.join("\n");
};
</script>

このチェッカーは文字列の検索をしているだけです。たとえば「fetch/XHR」に該当しても、同じフォルダの画像やデータを読む相対パスの用途かもしれません。該当した項目は、必ずコードを目で見て、外部との通信なのかを判断してください。逆に、複数ファイルに分かれている場合、HTMLだけを調べても他のファイルの内容は分かりません。

結果の読み方

集計は、グループごとに「各項目に該当した回数」を並べるところから始めます。読む順番が重要です。

最初にBとB2を比べます。 同じ条件のはずの2グループで、すでに差が出ているなら、それが「このAIのゆらぎの大きさ」です。たとえば外部の読み込みがBで3回、B2で5回なら、2回程度の差は偶然で起こると分かります。

次にBとWを比べ、その差がゆらぎを明らかに超えているかを見ます。 判断の目安は次のとおりです。

• BとWの差が、BとB2の差と同程度：この条件では、言葉の違いは結果に出ていないと読めます。
• WだけがB・B2より一貫して多い（または少ない）項目がある：言葉の違いが影響している可能性があります。ただし、10回ずつの実験では「可能性」にとどまります。回数を増やすか、別の題材（パズル、育成ゲームなど）で同じ設計を繰り返して、同じ向きの差が再び出るかを確認してください。
• 項目によって向きがばらばら：言葉の影響というより、題材や生成のゆらぎが大きいと考えるほうが自然です。

もう一つ見てほしいのが、AIが添えた説明文です。コードの形に差が出なくても、「ブラウザで開くだけです」と書くか、「ローカルサーバーを起動してください」と書くかなど、案内の性質が変わることがあります。数えにくい差ですが、初心者が最初につまずく場所に直結するので、気づいた違いはメモに残してください。

起こりやすい誤り

• 会話の持ち越し：以前の会話や記憶機能が残っていると、好みの構成を学習して結果に混ざります。新しい会話で、記憶機能が結果に影響しない設定かどうかも確認してください。
• 一行以外の違い：「ブラウザで動くようにしてください」と「Webで動くようにお願いします」のように、語尾まで変えると、何の差か分からなくなります。
• 回数が少ない：数回の結果で「差があった」と結論づけるのが、最も起こりやすい誤りです。対照のB2を省かないでください。
• 見るべき項目を後から変える：結果を見てから「この項目で差が出たから注目する」とすると、偶然を拾いやすくなります。記録項目は実施前に決めておきます。
• 「動く」の意味のすり替え：自分のパソコンで開けて動くことと、公開先の条件に合うことは別です。たとえばアソバースに投稿する場合は、HTMLかZIPで直下にindex.htmlを置くこと、素材は相対パスにすること、サーバー用コードやサービスワーカー、SharedArrayBufferを使うマルチスレッドは対象外であること、といった条件があります。生成物が条件に合うかは、実験の記録とは別に、投稿画面で表示を確認する段階で見極めてください。
• 評価の偏り：「動いた」の判定は、先にグループ名を隠してから行うのが理想です。ファイル名のグループ記号を、判定が終わるまで別の番号に置き換えておくと、期待による見落としを減らせます。

次の行動

まずは各グループ5回ずつ、合計15回を、共通部分の文章を固定して回してみてください。記録表の「単独で動くか」「外部の読み込み」「ファイル数」の3項目だけでも、BとB2の差、BとWの差を並べると、言葉の影響を考える材料が揃います。差が見えたら、対象のゲームの題材を変えて同じ設計を繰り返し、同じ向きになるかを確かめてみてください。