ChatGPTでタイピングゲームを作る―指示力と修正力

はじめに

近年、論理的思考法を身に付けられるといった期待からプログラミングを学びたい、学ばせたい人が増えているようです。 一方、AIの著しい発展によりプログラミングも大きく変わっています。特に、アイデアをすぐ形にできることから、初心者にとって非常に有用です。

下の画像は、レトロゲームエンジンPyxelを使ったタイピングゲームですが、実はこのゲームはほとんどChatGPTとの対話によって開発しました。 （クリックで遊べます！）

こちらが👉ChatGPT とのやりとり全文、そして完成したプログラムがこちらの👉ソースコードです。

本記事では実例を用いて、 ChatGPT をどのように使い、プログラマーはどこで工夫が必要であったのかをご紹介します。 生成 AI とプログラミングをどのように学べばよいか、皆さんの STEM 教育や IT 活用にヒントとなれば幸いです。

ChatGPTを活用したプログラミング支援の魅力

詳細に進む前に、 ChatGPT を使ってプログラミングをすることで得られるメリットをまとめてみましょう。

• コードのドラフトを即座に生成 → アイデアをすぐ形にできる
• プログラムの拡張が簡単 → フィードバックをもとに改良できる
• エラーの修正や最適化をアドバイス → 問題解決のサポートが受けられる

一方、 ChatGPT の知識は非常に広く深いものですが、生成される結果が必ずしも正しいとは限りません。
そのため、プログラマー自身が結果を判断して進める必要があります。

また、プログラマーが与える質問が的確で論理的なほど、 ChatGPT も良い結果を返します。
つまり、ChatGPT から良い結果を引き出す質問ができる人＝論理的思考能力を備えた人であるとも言えそうです。

これらの特徴を意識しつつ、実際にChatGPTと対話しながらタイピング練習アプリを作成しました。

1. タイピング練習アプリの基本構造（コードのドラフト生成）

まず、PythonとPyxelを使ったタイピング練習アプリの基本コードを作成しました。
プロンプトは次の通りです。最初はとても簡単で十分です。

PythonとPyxelで、タイピング練習アプリを作りたいです。コードをドラフトしてください。

これだけで最初のコードが生成されました。次のような機能をすでに備えていました。

• Pyxelを使った軽量なタイピングゲーム
• ランダムな単語が表示され、正しく入力するとスコア加算
• 制限時間（10秒）を設け、ゲーム性を追加
• エンターキーで入力確定、バックスペース対応

リソースを読み込むコードも生成されていましたが、これは今回は用いないので手動で削除しました。

2. キーボード入力の視覚化

キーボードをはじめて触るようなユーザーをターゲットにしたいので、キーボードのレイアウトを画面上に描画してもらうようにしました。

単語で使われる文字と次にタイプする文字のキーのキーボード上の場所を、グラフィカルに表示してください。

次のような機能が追加されました。

• 現在の単語に含まれる文字を黄色でハイライト
• 次に入力するべき文字を赤色で強調
• QWERTYキーボードのレイアウトを描画

指示していないのに、単語に含まれる文字を黄色で、次に入力するべき文字を赤色で強調するという工夫を入れてくれました。すごい。

キーボードの絵が出るのはいいですね。細かい詰めとしてキーの位置・間隔を調整したり、日本語キーボードはエンターキーをL字にしたりと、自分で手を加えました。

3. 効果音とBGMの追加

タイピングをゲームとして楽しむために、効果音とBGMの追加を指示しました。ここは何度かやり取りを行いました。

効果音をつけてください。

BGMを入れてください。

残り10秒でBGMのテンポをアップしてください。

すみません、全体の時間を30秒とし、残り10秒でbgmのテンポが上がるようにしてください

機能が追加されていき、最終的には次のようになりました。

• 正解時の効果音（高音） → 成功の達成感を演出
• 間違えた時の効果音（低音） → エラー感を伝える
• キータイプ音（軽快な音） → タイピングのリズムを強調
• BGMを導入し、残り10秒でテンポアップ → 緊張感を高める

非常に簡素なものではありますが、効果音とBGMが生成されるのは驚きでした。
しかし、この生成されたコードは少し修正する必要がありました。

# 生成されたコード

pyxel.sound(10).set("g3c4e4g4 c4e4g4c5", "t", "5", "n", 20)
pyxel.sound(11).set("c2 c2 g2 g2 f2 f2 g2 g2", "b", "6", "n", 20)
pyxel.sound(12).set("c3e3g3 c3f3a3 d3g3b3 c3e3g3", "p", "7", "n", 20)

pyxel.music(BGM_NORMAL).set([10, 11, 12], loop=True)
pyxel.music(BGM_FAST).set([20, 21, 22], loop=True)

• sound() という書き方は古いもので、現在は sounds[] という書き方をすべきです。
• "b" という指示はありません。 t,s,p,n のいずれかでなければなりません。"p" に書き換えました。

# 修正したコード

pyxel.sounds[10].set("g3c4e4g4 c4e4g4c4", "t", "2", "n", 20)
pyxel.sounds[11].set("c2 c2 g2 g2 f2 f2 g2 g2", "p", "2", "n", 20)
pyxel.sounds[12].set("c3e3g3 c3f3a3 d3g3b3 c3e3g3", "p", "2", "n", 20)

pyxel.musics[BGM_NORMAL].set([10, 11, 12])
pyxel.musics[BGM_FAST].set([20, 21, 22])

このように、生成された結果の誤りを見つける知識とスキルは必要です。 ChatGPTの結果をそのまま鵜呑みにせず、はじめのうちはいちいち正しいかどうか確認してみることで、自然とそのスキルはついていきそうです。

4. Pyxelプログラミング向けのタイピング問題

タイピング練習を単なる文字入力に留めず、Pyxelのプログラミング中に登場するタイピングを練習できるようにしました。

プログラミングでは、記号の入力も多用します。そこで、まずは、こんな指示をしました。

いいですね。Pythonで使う文字の練習をしたいので、記号もサポートしてください。シフトキーを押すと、キーボードのグラフィックが変わるようにしてください。

これで、記号のサポートだけでなく、Python向けの問題も追加してくれました。気が利く！

ただし、記号の位置が独自の配列だったので、一般的な日本語配列に修正を指示しました。

記号の位置は、日本語キーボードの配列に合わせてください

数字キーも入れてください。

このように、何度かやり取りが必要でした。

さて、この時点では、記号の入力がただ記号を入力するという問題で面白くなかったので、以下のような指示をしました。わがままですね。

SYMBOLSについては、記号をそのまま入力するのはリアリティがありません。プログラミング中に登場するような自然な形で記号も組み込まれた問題設定をお願いします。

すると次のような問題が生成されました。

"print('Hello, world!')",
    "def add(a, b): return a + b",
    "for i in range(10):",
    "if x == 42:",
    "x = (a + b) * c",
    "result = func(a, b=c, *args, **kwargs)",
    "from math import sqrt, pi",
    "try: raise ValueError('error') except ValueError as e:",
    "class MyClass:",
    ...

すごいです！しかし、初心者向けを想定しているのでこんなに長い文字列を打ち込むのは厳しいでしょう。

新しい指示をします。考え方は正しいということを伝えることで、変えるところと残すところを AI がうまく考えることができます。

いいですね、その方向性です。しかし、初心者向けなので、もっと初歩的な文法に関する課題でお願いします。

結果が下記です。

# 変数の代入
    "x = 10",
    "name = 'Alice'",

    # 四則演算
    "a + b",
    "x - y",

    # 条件分岐（if文）
    "if x > 0:",
    "if name == 'Alice':",

    # ループ（for, while）
    "for i in range(5):",
...

とてもいいですね！ この後も問題の調整はやり取りを行いました。

5. 日本語配列・英語配列の対応

ところで、生成されたのは日本語（JIS）配列のキーボードだったのですが、私は英語（US）キーボードを使っているためテストがうまくできませんでした。
それならばと、両方の配列を選択できるようにしました。

タイトル画面をつけて、日本語配列キーボードか、英語配列キーボードかを選べるようにしてください。

下記の機能が追加されました。

• タイトル画面でJIS/USを選択可能

素晴らしいです。
ただし、ゲーム画面はキーボード表示のことを忘れて先祖返りしてしまいました。

しかしながら、私が求めたい要素はここまでですべて出そろったので、後は手動でバージョン２，３，４，５の必要な部分を繋ぎ合わせました。 また、キーボードの表示をより美しくするために、大きさと間隔を微調整したり、日本語配列の場合はエンターキーをL字にしたり、など手動で調整を行いました。

まとめ

ChatGPTを活用すれば非常に素早くプログラムが構築できると言われていますが、実際にどのように行っているかをご紹介しました。

下記の特長により、非常に素早くプログラムを作っていくことができます。

• コードのドラフトを即座に生成 → アイデアをすぐ形にできる
• プログラムの拡張が簡単 → フィードバックをもとに改良できる
• エラーの修正や最適化をアドバイス → 問題解決のサポートが受けられる

しかし、きちんと完成させるにはプログラミングのスキルも必要です。

• 必ずしも正しくはないので、自分で修正できるスキルが必要
• こだわり部分はChatGPTだけでは不足するので、自分で実装できるスキルが必要

今後、AIの適切な活用を覚えることは、プログラマーにとって必須スキルとなることは間違いありません。プログラミングスキルとAIスキル、両方を学んでいきましょう。

• 👉 ソースコード
• 👉 ChatGPT とのやりとり全文

これにて御免！