ナンプレ解答アプリ

ナンプレを解くアプリです。問題の数字を入力して、解答ボタンをクリックすると答えが出てきます。フォーカスは、矢印キーのほか、Enterキーで次のセルに移動します。

生成AIをもちいた制作

なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。

1回目でほとんど完成までできました。GPTは動かず、コードはClaudeの吐いたものを採用しています。

ちなみに、書いたプロンプトは以下のような感じです。

1回目

あなたは、優秀なフロントエンドプログラマーです。
javascriptでナンプレを解答するアプリを作ってください。詳細仕様は以下によります。
・画面には、9×9のマスが表示されます。ただし、3×3のブロックが3×3で並んでいるように、小さい3×3のブロックを太枠で囲んでください。
・マスをクリックして、半角数字（1～9）を入力します。数字の色は黒とします。
・マスに半角数字（1～9）以外の文字等が入力されたときは、エラーメッセージ「半角数字（1～9）を入力してください」とダイアログで表示し、マスは空白としてください。
・マスに数字が入力されたあと、「解答！」ボタンをクリックすると、すべてのマスに解答の数字が入力されます。
・解答ボタンをクリックしたあと入力される解答の数字は、赤色としてください。
・その他必要な情報があれば教えて下さい。追加で提供します。

2回目

以下を追加・修正してください。差分だけでOKです。追加修正箇所は明示してください。
・「リセット」ボタンを追加してください。
・「リセット」ボタンをクリックすると、初期状態に戻ります。
・フォーカスを矢印キーで移動できるように修正してください。

3回目

以下を修正してください。差分だけでOKです。修正箇所は明示してください。
・ボタンは、横方向に並べてください。
・cellクラスは、sudoku-cellクラスに変更してください。
・CSSのbutton設定を、sudoku-buttonクラスを作って設定してください。

4回目

以下を追加してください。差分のみでOKです。追加箇所を明示してください。
・enterキーでフォーカスが次のセルに移るようにしてください。

2回目以降は、操作性を改善したものです。本体機能とは直接関係ありません。

「おそらくWEB上に作例がたくさんあるだろう」との読みから、ほぼ一発で完成形になりました。CSSの細々とした指示は、このページに移植するための準備です。

最終的には、HTMLとCSSを手修正しています。