Coding AIで思想の強いMock Draft Simulatorを作ってみた話①

雑記です。 最近、Codex (Open AI), Claude Code (Anthropic), Antigravity (Google)など、 各社でコーディング用AIで競っていて「プログラミング知識がなくてもコードを書いてアプリを作れる！」という話はよく聞く気がする。 「Pythonなら少しは触れる」レベルの自分はあまり興味がなかったが、気が変わったのは5日前 (2/19)。New Orleans Saints番記者の中ではおそらく有名な最もNick Underhill氏 (元々Athleticの記者で、独立してNO専門のneworleans.footballを設立)が、自作の**サラリーキャップ計算機（Saints限定）**を投稿していた。

僕はneworleans.footballは購読していてPodcastも毎週聞くのだが、結構驚いた。というのも、彼らのWebサイトはお世辞にも高度ではない（よくバグる）し、Webサイトスタッフを別で雇っていたりもするし、スタッフがメインで作業したものを自作 (I built…)と発表するタイプの人でもない。 最近コードを勉強したのかな、死ぬほど忙しいはずだけどな、と思っていたら、2日後には別のアプリとして**オフェンスのプレイデザイナー****(Saints限定)**が。

この時点で、流石に本人が徹夜でやってるとも思えず、 「AI codingってそのレベルですごいのか？プログラミング知識ほぼゼロでも、容量内でこんなアプリが作れるレベルなのか？」 という興味がで出てきた。ちょうど最近notebookLMというGoogle AIの機能が論文を読むのに便利で乗り換えたばかりだったので、Gemini AIの「Antigravity」というコーディングツールで遊んでみることに（おそらく、CodexでもClaude codeでもできる）。 結果…本当に誰でもできるなと感じたので、どのくらい簡単かを示すために以下に流れを書いてみたい。

1. Saints限定Mock Draft Simulatorを作ってみる (2/22)

何を作ろうかというところだけはAIに任せられないので、最近のNFLで何か自分のニーズがないか考えると、最近1巡8位でNOがJeremiyah Love (Notre Dome, RB)を指名するというモックが巷に溢れていることがストレスなことを思い出した。（なぜRB8位指名がダメかはこちらのポストを参照） よし、Jeremiyah Loveを指名できないモックドラフトシミュレーターを作ろう。 自分はpythonは多少触れるが、プログラミングの知識がなくても作れるかが大事な気がしたので、かなり適当に投げてみることに。以下がスクリプトそのまま。

Script 1-1. 大雑把な指示

【指示1】 2026 NFL draftのネタmock draft simulatorを作りたい。 ・選べるのはNew Orleans Saintsのみ。他のチームを選ぶとSaintsの魅力を語る画面（複数パターン）が出て進めなくなる ・Saintsの順番である全体8位でRunning Backを指名しようとすると、Running Backのポジションバリューが低いこと、Free Agentクラスが優秀なこと、全体8位指名のRBのサラリーはトップRBとほぼ同じであり、ルーキー契約によるサラリーのメリットが一切ないこと、などを語る長いメッセージで止められる という仕様をつけて欲しい。 さすがに雑すぎるか、と思っていたら数分後、 2026 NFL mock draft simulator（Saints専用）の実装計画を作成しました。指定された仕様（Saints以外のチーム選択時のブロックと、全体8位でのRB指名時の長文メッセージによるブロック）を盛り込んでいます。 HTML/CSS/JSを用いたプレミアムなWebアプリとして設計していますが、この構成で進めてもよろしいでしょうか？内容を確認し、問題なければ承認をお願いします。 HTML/CSS/JS、一度も書いたことないけど却って良いだろう、ということで実装計画はあまり読まずに「Proceed」を選択。 流石に時間かかるだろう、できても使い物にならないだろうと思って洗い物をしていたら、5分後くらいに音が。 【出力1】 2026 Saints Mock Draft Simulatorの構築が完了しました！ 指示通りの「Saints以外のチーム選択時のブロック（複数パターン）」と「全体8位でのRB指名時の長文メッセージ」を実装し、ダークテーマにSaintsのゴールドカラーを合わせたプレミアムなUIに仕上げています。 この時点でスクショを撮っといたらよかったのだが、大きなレイアウトは最終版と変わらず。1ページ目でSaints、Falcons、Cardinals?くらいから選択する形（Saints以外だと弾かれる）、2ページ目に行くとモックドラフトの画面（今年のプロスペクトのデータを取得できなかったようで、2025年のドラフト (Cam Ward, …)の選手を使って作っていた）。

Script 1-2. 2026 NFL draftのプロスペクトデータを与える

ということで、以下の指示を出す。データはNFL mock draft databaseからお借りした。この時は貼り付けたが、プロンプトが長くなるので、txtファイルか何かにしてフォルダに入れといて参照するのが良さそう。 【指示2】 すごくいい。 ・最初のページは32チームをアルファベット順に並べて選ぶようにしたい ・次のページは2025年のドラフトになってしまってるので、以下のコンセンサスビッグボードでデータを作って（上位選手は予想のチーム名が入ってしまってるけど無視して。 1 Fernando Mendoza QB indiana 2 … (以下718人分のデータ) また数分後。 【出力2】 いただいたデータを元に改修を行いました！ ・最初のチーム選択画面に、全32チームをアルファベット順で表示するようにデータを更新しました。 ・次のドラフトピック画面において、2025年のコンセンサスビッグボードで提供いただいた総勢700名超の膨大なデータをリスト化し表示するようにしました（ポジションがRBの選手を選んだ場合のSaints専用の長文ブロックメッセージは引き続き有効です）。 新しく data.js というファイルを生成してそこにデータを格納し、script.js と連携するようにしています。 再度~~を開いて（キャッシュが残っている場合はスーパーリロードなどをして）ご確認ください！他に調整したい部分などはありますか？

Script 1-3. 他のチーム(CPU)が指名する機能をつける

この時点で気づく。こいつはやばい。 ただ、プロスペクトが700人分一度に表示されて「8位でどれを選びますか？」的な画面が出る設定だったので、次の指示。mock draft simulatorなので、他のチームの選択も見る必要がある。よって指名順の情報を与える必要があるため、TankathonのFull orderのページへ。これも丸々コピペ。 【指示3】 非常にいい感じ！ ・Saints以外のチームが指名していく様子を見られるようにしたい ・ポジションなどでフィルタして見られるようにしたい、 ・1巡だけでなく他の順位も指名できるようにしたい（最初にオプションで何巡までやるか選べる形） ・以下に今年のドラフトの順番を貼ります（一部他2チーム書いてあって混乱するかもしれないけど、これはトレードされたピックでトレード元を書いてるだけなので、例えば13 LA Rams ATL ならATLの方は無視してRamsの指名として扱ってOK） 1st Round 1 Las Vegas 2 … (以下、257GBまで保有チームを書く) 大きな変更なので、一度planを立ててくる（これはplanning modeとfast modeというのがあり、今回は常にplanning modeにしていたため、大きな変更の際はコードを書く前に一度断ってくる) ドラフトの多順目対応（全257指名）、他チームの自動指名シミュレーション機能、ラウンド数選択、そしてポジションフィルター機能の実装計画を作成しました。

主な変更点: 初期設定: チーム選択画面に「何巡までドラフトするか（1巡〜7巡）」を選択できるドロップダウンを追加します。 ドラフト画面: 画面左側（または上部）にポジションフィルターのボタン群を追加します。 画面右側に「ドラフトトラッカー（誰がどのチームに指名されたかの履歴）」を追加します。 シミュレーションエンジン: ユーザーの順番（Saints）が来るまでは、他チームが自動でその時点の最高ランク選手を指名して進んでいくようにします。もちろんSaintsの順番でRBを指名しようとすると長文でブロックする仕様は、全ラウンドにおいて継続させます。 提供いただいた新しいドラフト順データの解析と併せてこの構成で実装を進めてよろしいでしょうか？ 「他チームが自動でその時点の最高ランク選手を指名」は流石に単純すぎるだろと思ったが、どうせ後で直せるのでproceedを選択。数分後、 【出力3】 ドラフトの多順目および他チームの自動シミュレーション機能を実装完了しました！ 具体的なアップデート内容： ・ラウンド数選択機能: チーム選択画面に「何巡までドラフトするか」を選べるドロップダウンUIを追加しました（最大7巡、全257ピック）。 ・自動ドラフト・シミュレーション: 該当順のチームが自動でランキング最上位の選手をドラフトし続けます。Saintsの順番（例: 全体8位）に回ってくるとシミュレーションが一時停止し、ユーザーが指名できるようになります。 ・ドラフト・トラッカー（履歴画面）: ドラフト画面の左側にサイドバーを追加し、誰が・どのチームに・何巡何位で指名されたのかをリアルタイムに表示します（Saintsの指名はハイライトされます）。 ・ポジションフィルター: 選手のリスト上部に QB, RB, WR, EDGE などのフィルターボタンを追加し、大量のプロスペクトリストを瞬時に絞り込めるようにしました。 ・徹底したRB禁止ルール: 第1ラウンドだけでなく、何巡目であってもSaintsがRBを指名しようとした瞬間に「長文ブロックメッセージ」が立ち塞がるように徹底しています。 若干お節介で勝手なことをしてくる(僕はmace氏レベルではないので、2巡以降のRBは許せる)が、この時点で最終版のレイアウトがほぼ完成。毎回5分くらいで返してくるので、ここまで30分かかってないのに、割と形になったものができてしまった。

Script 1-4. レイアウト修正と追加の禁止機能

この時点での最大の問題は、718人のprospect全てが表示されて、圧縮されるので選手名が全く見えない点。 その修正に加えて、流石に1巡じゃなければRB取ってもいいよというのと、1巡目オンリーじゃなくなったので、今年のSaintsで2巡までにQBはないよなとか、4巡までにKとかPとかは処罰するべきだよなと思い追加の指示。 【指示4】 とてもいい！ 以下を修正して ・選択画面で各選手のカードが重なっていて名前が見えないから修正して ・全選手表示する必要はないし、ランク順に10人くらい表示してあとはボタン押したら開く形にするとか ・2巡以降はRBのエラーは不要 ・QBを2巡までで指名したら「2025年のTyler Shoughの活躍が以下に素晴らしかったか」が表示されて考え直させるメッセージ（複数パターン）を表示 ・PやKを4巡目までに指名したら「ポジションバリューを理解していない」というメッセージを表示して考え直させて 【出力4】 修正内容：カードの重なりと表示上限の修正： 選手名の重複やレイアウト崩れを防ぐため、CSSの余白を調整しテキストの折り返しを最適化しました。 すべての選手を一度に表示せず、最初はランキング上位10人のみを表示するように変更しました。リスト下部の「さらに表示する」ボタンを押すことで10人ずつ追加で読み込まれます。 ポジションごとの指名縛りルール追加： RBルール緩和： 2巡目以降はRBを指名してもエラーが出ず、通常通り指名できるように修正しました（1巡目のみブロックされます）。 QBドラフトのブロック（1～2巡目）： 1巡目および2巡目でQBを指名しようとすると、「2025年のTyler Shoughの神がかったパフォーマンスを忘れたのか？」といったTyler Shoughを絶賛するメッセージが複数パターンのうちランダムで1つ表示され、指名をブロックします。 スペシャリストのブロック（1～4巡目）： 4巡目以内でパンター（P）、キッカー（K）、ロングスナッパー（LS）を指名しようとすると、「ポジションバリューを完全に無視した愚行である」という強いメッセージを表示し、指名をブロックします。 ここで驚いて欲しいのが、このQBとかK, Pの指名のテキストって基本AI出力なこと。コーディングAIでありながら、Geminiが考えているのでNFLの知識もあり、自然な日本語も生成できる。最強すぎる。

Script1-5, 1-6. バグの修正＋細かい機能

【指示5】 ・なぜか選択画面で選手の名前が表示されない ・ポジション分け一覧に、KとPがない ・選手名で検索できる機能をつけたい 【出力5】 チーム選択/選手の名前が表示されない問題の修正： ダークモード時のテキストカラーの設定（color: var(--color-text-primary);）がカードのタイトル部分から抜け落ちており、背景と同化して見えなくなっていたCSSの不具合を修正しました。これで全選手の名前がくっきりと表示されます。 KとPの追加： フィルターボタンのリストに「K（キッカー）」と「P（パンター）」を追加しました。ボタンを押すだけで該当選手のみを絞り込めます。 選手名の検索機能の追加： 画面右側に「Search player name...」というテキストボックスを追加しました。名前の一部（例えば「Arch」や「Manning」など）を入力すると、リアルタイムでそれに合致する選手だけがリストに表示されます。この検索は上記のポジションフィルターとも併用可能です。 Arch Manningはエントリーしてないはずなのになぜ例がArchなんだ…?というのだけ疑問だったが、あとは理由は不明なバグを直したりの細かい話。 この時点で、選手名が見えないバグが続いていた、とはいえ読めないプログラミング言語なのでコードを見に行くのは諦めて、動かしているスクショを貼って直してもらうことに。 【指示6】 私の見ているスクリーンショットを添付したよ。やはり選手名が見えない。 あと、1巡1位のレイダースが消えている 選手名が映らない 【出力6】 スクリーンショットありがとうございます！問題の原因が完全に判明し、修正が完了しました。 選手名が見えず、Load Moreで重なる問題： CSS Gridのレイアウト制約により、カードの高さが強制的に「50px以下」に押しつぶされてしまっていました。そのため、名前のテキストがカードの下に隠れてしまっていました（背景色と同化していたわけではありませんでした）。CSSに min-height: 125px; を追加したことで、カードが本来の高さを保つようになり、選手名がはっきりと表示され、「さらに表示する」を押してもカード同士が重なることはなくなりました。 全体1位（Las Vegas Raiders）が消えている問題： ご提供いただいたドラフト順データ（raw_order.txt）において、1位の箇所だけ空白のフォーマット行がイレギュラーに存在し、読み込みスクリプトがRaidersの名前を拾い損ねてスキップ（全体1位がJetsになってしまっていた状態）していました。Python側のパース（解析）処理を柔軟に修正し、最新のデータを上書きしました。これにより、全体1位 Las Vegas から正しくシミュレーションがスタートします。 こういう風に、どこを治したか、原因が何だったかを教えてくれるのもとても便利。また、スクショを読めるのは強い。AI自身でも(権限を与えれば)アプリを実際に起動してクリックしたりして動作を確認したりできるので、デバッグはかなり強い印象。

Script1-7. 各チームの指名ランダム性追加

この時点で、ほぼバグなく使えるアプリになったので、あとはこだわりの部分を追加していく。この時点で、ランクの一番上から順に指名していくという面白くない仕様だったので、各チームの指名にある程度リアリティを持たせることに。ポジションニーズは、NFL.comの記事を見つつ、ここもだろと自分で考えたポジションをプラス。 【指示7】 素晴らしい！不具合がほぼ解消されました。 あとは他チームの指名にある程度のランダム性を持たせたい。 以下のポジションニーズを反映させて。このポジションを絶対に指名するというわけではなく、ランクも考慮しつつ確率が上がるという程度にしたい。Best Player availableで考えるチームもあるので。

以下の各チームのポジションニーズを参考にして。 Pick 1 Las Vegas Raiders Biggest needs: QB, OL, WR, CB, Edge … CPU（他チーム）の指名ロジックに「チームニーズ（ポジション）」と「ランダム要素」を反映させました！ 実装内容:チームニーズデータの反映： 提供いただいたNFL.comの全32チームの「Biggest needs」をパースしてシミュレーターのデータに組み込みました。 AI ドラフト指名ロジックの改善：これまでの「単純にランキング1位を指名する（Best Player Available）」ロジックを廃止しました。 CPUは自身の指名順が来た際、まずはランキング上位15人の候補リストをチェックします。 リストの中に「自身のチームニーズ」と合致する選手がいて、かつその選手が全体トップ10以内にいる場合、80%の確率でその選手を優先指名します（ニーズ重視のピックアップ）。 ニーズに合う選手がいない、あるいは残りの20%の確率を引いた場合は、上位3人の中からランダムに一人を指名します。

これにより、「常に同じ選手が同じ球団に指名される」ことがなくなり、ニーズに合わせた指名や予測不能なBPA（Best Player Available）指名が交じるリアルな状況が毎回生成されるようになりました。 こうやって、実装したアルゴリズムを説明してくれるのもありがたい（のちに全チーム版ではここを色々修正）。

Script1-8以降. 使用感や追加機能など、細かいところをこだわる

この時点で、一応出しても恥ずかしくないレベルのものはできたので、あとは使用感とかの向上を依頼。（ここからは指示のみ） 【指示8〜】 ・終了した後に指名した全選手一覧表が出る形にして ・終了した後に、最初の画面に戻るボタンをつけて ・開始する前に「Start 2026 NFL draft」とボタンを押してからスタートする形にして ・ドラフト中、次の自分の指名は何巡何位というのが上部に表示されているようにして。そして自分の番が来たら「You are on the clock!」という表示に変えて ・Pause Simulationの際に「resume simulation」「simulate pick」以外に「Trade up」のボタンを作る 。ただしトレードアップ機能を実装する必要はなく、「トレードアップは将来のドラフト指名権を消費します。再建中のチームにとってはリスクが高く、戦力の層を薄くする可能性があります。今回はトレードダウンまたはステイで、少しでも多くのタレントを指名する方針をおすすめします。」のようなエラーメッセージが出て戻るような指定にすればOK（複数作って） ・同様に、自分の番が来たときは「Trade down」のボタンを作って ・こちらもトレードダウン機能を実装する必要はなく「SaintsのGM、Mickey Loomisが過去に一度もトレードダウンをしていないのを知っていますか？このチームの哲学に反します。トレードダウンは却下されました。」という形のメッセージで戻して（複数作って） ・1巡でOTを指名しようとすると、2024年にTaliese Fuaga、2025年にKelvin Banks Jr.を指名したのにまたOT指名か、と文句をつけて指名させないようにして ・英語も良かったので、アプリに入る前に言語選択して日本語と英語選ぶようにしようか。日本語選んだ場合でも、message.jsのメッセージ系以外は全部英語でOKです。 ・Draft Lengthのデフォルトを1 roundにして ・San Francisco 49ersを選んだ時だけは、一定の理解を示しつつ、今回はSaints専用のmock draft simulatorを開発したため49ers対応できていないのを申し訳なく思っている旨を説明してください ・Ready for the Draft?You are about to start the 1-round 2026 NFL Draft as the General Manager of the New Orleans Saints. の部分は日本語対応をお願い という指示で完成。

まとめ

全部で15往復くらいして、おそらく2時間はかかっていない。とんでもない世界になった。 途中から、向こうがコードをいじっている間に、こちらはメッセージのファイルを開いて文言を修正したり、別ブラウザでGeminiに他につけたほうがいい機能のBrainstormingしたりできていたし、効率が良すぎる。 完成版： https://ames9.github.io/Ideological-Mockdraftsimulator2026/ 振り返ると、プログラミングスキルはほぼ必要なく(メッセージを書き換えたりはしたが、今でもJavascriptについては一切理解していない)

• 良質なNFLデータが得られるサイトを知っておいて、それを使うよう指示を出すこと（例: Tankathonのドラフトオーダー、mock draft databaseのコンセンサスビッグボード）
• ある程度のレベルで、自分だけでもNFLのことを考えられること（BPAとposition needsのバランスとか、適切な指示さえ出せばやってくれる）
• データの利用に関して、リテラシーを有すること（商用利用だとmock draft databaseのデータはアウト、また例えば面白くなるからと言って、選手の講評サイトとかからデータを持ってくるのもよくない） があればそれだけでアプリが作れる（これすら、もう少し進歩したらいらなくなるのか…?）。 2/22、これを公開してみたところ、いろんな人が触ってくれて反響が（Xでリンクのクリック数が500だったので、500回くらいこのサイトに行ったことになる。NOファン以外の人には申し訳ない）。

驚いたことに、「強制的にSaintsのGMにされること」に文句を言っている人が多かったので、味を占めて全チーム版にすることに。

後編に続きます。後編では、AIの凄まじさと共に、AIに圧倒的に足りないものを知ることに。