結論
データテーブルのUIをAIに一発で作らせたいなら、列の定義・ソートの仕様・ページングの仕様・出力形式の4つを最初のプロンプトに書き込んでください。「データテーブルを作って」だけだと、列が想像で埋められ、ソートの向きやページ送りの挙動が毎回変わり、結局は追加の指示で直すことになります。逆に、この4つを具体的に渡すと、一回のやり取りでほぼ完成したコードが返ってきます。
この記事では、実際に「雑な指示」と「整えた指示」の両方をAIに投げて、生成結果がどう変わったかを率直に載せます。整えた指示のほうで返ってきたコードは、この記事の下のほうにそのまま動くデモとして置いています。一発で出た点と、一箇所だけ手直しした点も正直に書きます。
データテーブルは「列・ソート・ページング・出力形式」を書き切れば一発で出る。曖昧なまま投げて後から直すより、最初に決め切るほうが速い。
雑な指示だと何が起きるか
まず、粒度の粗いプロンプトを試しました。多くの人が最初に打つであろう一文です。
短くて楽ですが、AIは足りない情報を全部こちらの代わりに決めます。その結果が次のズレになって返ってきました。
列は「Name / Email / Age」のような英語の適当な3列。実際に使いたい業務データとは無関係でした。
ソートは全列に付いたものの、数値列も文字列として比較され、金額が桁の並びで狂う実装でした。
ページングは「前へ／次へ」だけで、ページ番号ボタンや「何件中何件目」の表示はなし。件数も10件固定でした。
どれも「間違い」ではありません。指示していないのだから、AIが埋めた仮定に過ぎません。問題は、この仮定が自分の要件とほぼ一致しないので、結局「列はこれで」「数値は数値としてソートして」「ページ番号を出して」と追加でやり取りが増えることです。往復が3回4回と続くと、最初から書いておいたほうが速かった、という結論になります。
整えた指示：実プロンプト全文
そこで、AIに仮定させる余地を減らしたプロンプトを書きました。これがそのまま使える全文です。ポイントは、列を表で渡すこと、ソートで数値と文字列を区別すること、ページングの数字まで指定すること、そして出力形式（1ファイル・バニラJS）をはっきり書くことです。
次の仕様でデータテーブルのUIを作ってください。 【出力形式】 - HTML/CSS/JavaScript を 1つの HTML ファイルにまとめる - フレームワークやライブラリは使わない（バニラJSのみ、CDN読み込みも不可） - コードはコピペでそのまま動く完成形にする 【表示する列】 | キー | 見出し | 型 | ソート | 表示 | |-----------|---------|--------|-------|-----------------| | id | ID | 数値 | あり | 右寄せ | | name | 取引先名 | 文字列 | あり | 左寄せ | | amount | 金額 | 数値 | あり | 右寄せ・3桁区切り・先頭に「¥」 | | status | ステータス | 文字列 | あり | active/pending/closed をバッジ表示 | | updatedAt | 更新日 | 日付 | あり | YYYY-MM-DD | 【ソートの仕様】 - ヘッダーのクリックで、その列を昇順→降順→昇順…と切り替える - 数値列（id・amount）は数値として、日付列（updatedAt）は日付として比較する - 文字列列は localeCompare で比較する - 現在ソート中の列と向き（▲▼）をヘッダーに表示する 【ページングの仕様】 - 1ページ 5件表示 - ページ番号ボタンと「前へ／次へ」を出す - 「全 N 件中 x〜y 件目」を表示する - ソートしてもページングは連動し、ソート後の並びで1ページ目に戻す 【サンプルデータ】 - 取引先の一覧を 12 件、JavaScript の配列でダミー生成する - status は active / pending / closed が混ざるようにする コードだけでなく、各処理が何をしているかのコメントも日本語で入れてください。
雑な指示との一番の違いは、列を表（テーブル）で渡しているところです。Excelやスプレッドシートで仕様をまとめる文化に馴染んだ人ほど書きやすく、AIも「キー・見出し・型・表示」の対応を取り違えにくくなります。型を明記しておくと、数値ソートの取り違えのような定番のズレをそもそも起こさせずに済みます。
生成結果：動くデモ
上のプロンプトで返ってきたコードを、そのままこのページに埋め込んだものが下です。ヘッダーをクリックするとソートの向きが切り替わり、下のページ番号で送れます。金額は右寄せの3桁区切り、ステータスはバッジで表示されています。
| ID▲▼ | 取引先名▲▼ | 金額▲▼ | ステータス▲▼ | 更新日▲▼ |
|---|
ステータスのラベルだけ、日本語表示（取引中／保留／終了）に一箇所だけ手を入れました。それ以外のソート・ページング・金額整形・矢印表示は、上のプロンプト一発で返ってきたものをそのまま使っています。
一発で出た点と、直した点
一次情報として、実際にどこまで一発で出て、どこを直したかを正直に書きます。
一発で出た：ソートの型分岐とページング連動
型を列の表で明記していたおかげで、数値・日付・文字列でソートの比較方法を分ける処理は最初から正しく出ました。ソート後にページを1ページ目へ戻し、ページ送りがソート結果に連動する挙動も、仕様に書いたとおりに実装されていました。ここは雑な指示だと必ず崩れる部分です。
直した：ステータスの表示ラベル
status は仕様どおり active / pending / closed のバッジで出たものの、バッジの中身が英語のままでした。業務アプリでは日本語表示にしたかったので、ラベルだけ日本語へ差し替えました。これは仕様に「日本語ラベルで」と書き漏らした自分側の不足で、プロンプトに一行足せば防げた部分です。
つまり、直しが発生した箇所は「AIが間違えた」のではなく「こちらが書き忘れた」ものでした。プロンプトの精度を上げるほど手直しは減ります。
データテーブルのプロンプトで効く4つの指定
今回の比較で効果がはっきり出た指定を、そのまま他のテーブルにも流用できる形でまとめます。
列を表で渡す（キー・見出し・型・表示）
列の定義は箇条書きより表で渡すほうが取り違えが減ります。とくに「型」を書くと、数値を文字列としてソートするような定番のバグを最初から防げます。金額の3桁区切りや日付フォーマットのような表示ルールも、この表の「表示」欄に書いておくと反映されます。
ソートとページングの挙動を数字で書く
「ソートできる」ではなく「昇順→降順で切り替え・現在の向きを矢印で表示」、「ページングする」ではなく「1ページ5件・番号ボタンと前後ボタン・件数表示・ソート時は1ページ目に戻す」まで書きます。挙動を数字と具体語で固定するほど、生成結果のブレがなくなります。
出力形式を先頭で言い切る
「1つのHTMLファイル・バニラJS・ライブラリ不可・コピペで動く完成形」のように、出力の形をプロンプトの先頭で指定します。これを書かないと、Reactのコンポーネントで返ってきたり、説明文が長くてコードが分割されたりします。コピペで即動かしたいなら、この一節が効きます。
この記事のプロンプトは、そのままステータス列を別のカテゴリに変えたり、列を1つ増やしたりして流用できます。AI用プロンプトはこのサイトの各テーブル事例ページにも用意しているので、作りたいテーブルに近い事例のプロンプトを土台にすると、仕様を書く手間がさらに減ります。
まとめ
データテーブルUIをAIに一発で作らせる鍵は、列の定義・ソートの仕様・ページングの仕様・出力形式の4つを最初に書き切ることでした。雑な指示だと、この4つをAIが勝手に埋めてしまい、その仮定を後から直すやり取りで結局時間がかかります。列を表で渡し、型と挙動を数字で固定した整えた指示では、一回のやり取りでほぼ完成したコードが返り、手直しは書き漏らした表示ラベル一箇所だけで済みました。
同じ考え方は、状態の多いフォームUIをAIに作らせる場合にもそのまま応用できます。まずはこの記事のプロンプトをコピーして、列とサンプルデータを自分の要件に差し替えるところから試してみてください。実際に動く土台は、下の関連事例のコードとプロンプトからも取れます。生成結果がスマホで崩れる・状態が足りないなど「惜しい」出力になったときは、修正プロンプトで直す記事に直し方のパターンをまとめています。