コードを書かせたら、
どう違う？

実験①：グラフ作成コードを書いてもらった

Pythonで月別売上の折れ線グラフを作るコードを依頼しました。ライブラリや見た目の指定は一切なし。何を選んでどこまで仕上げてくるかが、AIによって大きく変わります。

from matplotlib import pyplot as plt

# 架空の売上データ（単位：千円）
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
sales = [120, 150, 170, 160, 210, 250]

plt.figure(figsize=(8, 5))
plt.plot(months, sales, marker='o')

plt.title("Sample Sales Trend (Fictional Data)")
plt.xlabel("Month")
plt.ylabel("Sales (in thousands)")
plt.grid(True)

plt.show()

import matplotlib.pyplot as plt

# 1. 架空データの作成（1月〜12月の月別売上）
months = [f"{i}月" for i in range(1, 13)]
sales = [120, 145, 180, 165, 210, 230, 280, 310, 290, 320, 350, 420]

# 2. グラフの設定
plt.figure(figsize=(10, 6))
plt.plot(months, sales, marker='o', linestyle='-', color='b', label='売上高')

# 3. 装飾（タイトル、ラベル、グリッド）
plt.title('2025年度 月別売上推移', fontsize=16)
plt.xlabel('月', fontsize=12)
plt.ylabel('売上（万円）', fontsize=12)
plt.grid(True, linestyle='--', alpha=0.7)
plt.legend()

# 4. グラフの表示
plt.show()

import matplotlib.pyplot as plt

months = [f"{i}月" for i in range(1, 13)]
sales = [98, 112, 134, 128, 156, 172, 188, 203, 195, 221, 244, 268]
x = range(len(months))

fig, ax = plt.subplots(figsize=(10, 5))
fig.patch.set_facecolor('#f8f8f6')
ax.set_facecolor('#f8f8f6')

ax.plot(x, sales, color='#5a4fcf', linewidth=2, marker='o',
        markersize=6, markerfacecolor='white', markeredgewidth=2)
ax.fill_between(x, sales, alpha=0.08, color='#5a4fcf')

ax.spines[['top', 'right', 'left']].set_visible(False)
ax.grid(axis='y', linestyle=':', color='#cccccc', linewidth=0.8)
ax.tick_params(colors='#555555', labelsize=10)
ax.set_xticks(x)
ax.set_xticklabels(months)

ax.set_title('2025年度 月別売上推移', fontsize=14, fontweight='bold',
             color='#222222', pad=16)
ax.set_xlabel('月', fontsize=11, color='#555555')
ax.set_ylabel('売上（万円）', fontsize=11, color='#555555')

plt.tight_layout()
plt.show()

▼ 掲載コードに合わせたグラフの表示イメージ

実験②：シューティングゲームを作ってもらった

次はHTMLとJavaScriptでシューティングゲームを作るよう依頼しました。仕様の指定は「シューティングゲーム」とだけ。構成・操作感・見た目はすべてAIに委ねています。以下から実際に遊べます。

この掲載例では、GPTのコードは小さく、Claudeのコードには状態管理が多く含まれます。用途に必要な処理があるかを読むことが大切で、この結果だけで次の生成でも同じ差が出るとは言えません。

公開コードを読む：確認手順と直し方

この節では、サイト上で公開している3つのゲームの実装を確認します。生成時の会話を再現する検証ではなく、読者が同じファイルで確認できるコードレビューです。デモにはタッチ操作用の追加コードも含まれるため、生成直後の出力そのものとは区別してください。

参照するファイル：GPTの掲載デモ／Geminiの掲載デモ／Claudeの掲載デモ。PCでは別タブで開き、ブラウザの「ページのソースを表示」からupdate・shoot・touchstartを探すと、表の根拠を確認できます。

1. 境界チェックは「判定」と「制限」を分けて読む

GPT版のupdateは左キーでplayer.xを6ずつ減らします。初期値180から31回更新すると−6になり、左端を越えます。Gemini版は移動前にplayer.y > 0を確認しますが、上限・下限へ値を固定する処理ではないため、端数がある場合は1回分だけ境界を越える可能性があります。Claude版は移動後の値をMath.maxとMath.minで制限しています。

GPT版を教材として修正するなら、左右移動の直後に次の1行を加えます。右端の上限は「キャンバスの幅−プレイヤーの幅」です。掲載デモは比較用の状態を保持しているため、この修正は適用していません。

player.x = Math.max(0, Math.min(canvas.width - player.width, player.x));

2. 画面にボタンがあっても、入力が処理につながっているか確認する

GPT版のタッチボタンはkeys[' ']をtrueにします。一方、shootを呼ぶのはキーボードのkeydownイベントだけです。状態を変えても発射イベントは発生しないため、タッチの●ボタンからは射撃できません。修正する場合は、タッチ開始時にshootを呼ぶか、ほかの版と同様にupdateでキー状態と発射間隔を処理する必要があります。

3. 10フレームは、どの端末でも同じ秒数ではない

Claude版のcooldownは1更新につき1減ります。毎秒60更新なら10フレームは約0.167秒、120更新なら約0.083秒です。3つとも移動量をフレームごとに加算しているので、画面の更新頻度で速度が変わります。時間を基準にするゲームでは、requestAnimationFrameの時刻から経過秒を求め、移動量と待ち時間に反映します。

自分で確かめる順番

1. PCでデモを別タブに開き、ゲーム画面をクリックしてから左右または上下キーを押す。
2. 端まで移動し、画面外への移動を防ぐ処理があるかソースと照合する。
3. スペースを短く押す場合と長押しする場合を比べ、発射イベントとキー状態の違いを確認する。
4. スマートフォンでは移動ボタンと射撃ボタンを別々に試す。表示されているだけで動作すると判断しない。
5. 端末・ブラウザ・確認日・操作・期待した動作・実際の結果を残す。モデル名だけで原因を決めない。

確認対象は2026年10月7日時点の掲載ソースです。ゲームの乱数、フレーム数、入力方式が異なるため、スコアや画面の華やかさだけをAIの性能指標にはできません。これらの確認項目は、別のAIで生成したコードを公開するときにも使えます。

掲載例を用途に合わせて読む

掲載したサンプルには、構成と処理の違いがあります。どれが最強ではなく、目的によって選ぶのが正解だと思っています。