IIJmioギガプランの「SIM数」と「データ量」の組合せ料金一覧表をAIで作る

はじめに

IIJmioギガプランで複数枚のSIMと複数種のデータ量を組合せると料金がいくらになるのか、SIM選択をしながら一覧表で見たいな、という願いを叶えるもの。を、AIを使って作れないのか？という実験です。

組合せ料金一覧表（成果物）

作れました。1行もコードを書いてません。
https://hydeokmt.github.io/IIJmio-Rate-Plan-Table/
https://github.com/hydeokmt/IIJmio-Rate-Plan-Table

料金一覧の内容については試験未実施ですので無保証でお願いします。
家族割などの割引計算には対応していません。

材料

Cursor（高度なAI機能を搭載したコードエディタ）

• "Free Plan"
• "Switch agent mode"は"Agent"
• "Switch AI model"は"Auto"

GitHub Pages（静的ウェブサイトのホスティングサービス）

• GitHubリポジトリ"Public"

Cursorで対話的に作り込んでいく

CursorのChatタブに作って欲しい内容をドシドシお願いしていく。
とはいえ、筆者は”JavaScriptが動く動的HTMLの書き方”みたいな事すら知らずに作り始めたので、ひたすら噛み砕いて進めている。遠回りにみえるが筆者のように知見の無い人には必要なステップだと思う。言語や環境やシステム構成などに知見のある人であれば、もっとスマートに作れる（と思う）。

以降、「私がCursorのチャットでお願いした内容」をコードブロックで記載し、続けて「Cursorからの返事」を折りたたみで記載（折りたたまないと凄く長い）し、それを繰り返します。

1.SIMの種類をプルダウン選択できるwebサイトの雛形を作る

とりあえずHTMLの雛形とかプルダウン選択とかが出せるのか試してみる

HTMLの雛形を作ってください

HTMLの雛形を作成いたします。基本的なHTML5の構造を含むファイルを作成しますね。

HTMLの雛形を作成しました！index.htmlファイルに以下の要素を含む基本的なHTML5テンプレートを作成しました：
含まれている要素：
HTML5 DOCTYPE宣言
日本語対応（lang="ja"）
UTF-8文字エンコーディング
レスポンシブデザイン対応のビューポート設定
メタディスクリプション
基本的なCSSスタイル（内蔵）
シンプルで見やすいレイアウト
この雛形はすぐにブラウザで開いて確認でき、プロジェクトの基盤として使用できます。必要に応じて、CSSを外部ファイルに分離したり、JavaScriptを追加したりしてカスタマイズしてください。

CSSスタイルを外だしにしてください。

CSSスタイルを外部ファイルに分離いたします。まず、CSSファイルを作成してから、HTMLファイルからスタイルを削除します。

完了しました！CSSスタイルを外部ファイルに分離しました。
変更内容：
1.styles.cssファイルを新規作成し、すべてのCSSスタイルを移動
2.HTMLファイルから<style>タグを削除
3.<link rel="stylesheet" href="styles.css">を追加して外部CSSファイルを読み込み
これで、HTMLとCSSが適切に分離され、より保守しやすい構造になりました。CSSファイルを編集することで、スタイルの変更が容易になります。

ウェブサイトの内容は以下の通りです
・プルダウン選択リストがある。リストの内容は、「音声-SIM、データ-eSIM、データ-SIM、データSMS-SIM」である。
・プルダウン選択で未選択状態じゃなくなると、もう一つ同じ選択リストが増える。
・プルダウン選択で未選択状態になると、そのプルダウンは消える。

ウェブサイトの内容に合わせて、動的なプルダウン選択リストを実装いたします。HTMLとCSSを更新し、JavaScriptも追加します。

完了しました！要求された機能を持つウェブサイトを作成しました。
実装した機能：
1.プルダウン選択リスト：
「音声-SIM」「データ-eSIM」「データ-SIM」「データSMS-SIM」の4つのオプション
初期状態では「選択してください」が表示
2.動的な追加機能：
プルダウンで何かを選択すると、同じ選択リストが新しく追加される
最後のドロップダウンが選択された時のみ新しいドロップダウンが追加される
3.動的な削除機能：
プルダウンを「選択してください」に戻すと、そのドロップダウンが消える
ただし、最後のドロップダウンは削除されない（最低1つは残る）
ファイル構成：
index.html - メインのHTML構造
styles.css - プルダウンのスタイリング
script.js - 動的な機能を制御するJavaScript
ブラウザでindex.htmlを開くと、要求された機能が動作することを確認できます。

・プルダウン選択リストの内容を、「音声SIM、音声eSIM、データeSIM、データ、SMS」に変更してください。
・Webサイトのタイトル、タブ表示の内容は「IIJmio SIM/データ量組合せ早見表」にしてください。
・プルダウン選択リストはSIMの選択であることが分かるようにしてください。

要求された変更を実装いたします。プルダウンの内容、タイトル、そしてSIM選択であることが分かるように修正します。

完了しました！要求された変更をすべて実装しました。
変更内容：
1.プルダウン選択リストの内容を変更：
「音声SIM」「音声eSIM」「データeSIM」「データ」「SMS」の5つのオプションに変更
2.Webサイトのタイトルとタブ表示を変更：
タイトル：「IIJmio SIM/データ量組合せ早見表」
メタディスクリプションも同様に更新
3.SIM選択であることが分かるように修正：
ページタイトル：「IIJmio SIM/データ量組合せ早見表」
説明文：「必要なSIMを選択してください。」
プルダウンのデフォルト表示：「SIMを選択してください」
これで、IIJmioのSIM選択に特化した早見表として機能するようになりました。ブラウザで確認すると、タブにも「IIJmio SIM/データ量組合せ早見表」と表示されます。

2.選択したSIM種類とギガ数と料金の組合せ一覧表を追加する

プルダウン選択してプルダウンリストが増減するところの動きが見れたので、本題の組合せ一覧表を作ってもらう

・SIM選択のプルダウンを全てクリアするボタンを追加してください。
・Webサイトのタイトル、タブ表示の内容は「IIJmio SIM/データ量の組合せ早見表」にしてください。
・全てのSIM選択のプルダウンリストの内容の組合せをリストアップしてリスト表示してください。

要求された機能を実装いたします。クリアボタンの追加、タイトルの修正、そして組合せのリスト表示を追加します。

完了しました！要求された機能をすべて実装しました。
実装した機能：
1.クリアボタンの追加：
「全てクリア」ボタンを追加
クリックすると全てのプルダウンが未選択状態になり、余分なプルダウンが削除される
赤色のボタンで視覚的に分かりやすく表示
2.タイトルの修正：
Webサイトのタイトル：「IIJmio SIM/データ量の組合せ早見表」
タブ表示も同様に更新
3.組合せリストの表示：
「選択された組合せ」セクションを追加
選択されたSIMがリアルタイムでリスト表示される
番号付きで見やすく表示
選択がない場合は「選択されたSIMがありません。」と表示
動作の流れ：
SIMを選択すると、その選択が下部のリストに表示される
新しいプルダウンが追加されると、リストも自動更新される
プルダウンを未選択に戻すと、リストからも削除される
「全てクリア」ボタンで一括リセット可能
これで、IIJmioのSIM選択と組合せ確認が効率的に行える早見表が完成しました。

各SIM選択の内容には以下のデータ量と料金があります。
・音声SIM（2ギガ850円、5ギガ950円、10ギガ1,400円、15ギガ1,800円、25ギガ2,000円、35ギガ2,400円、45ギガ3,300円、55ギガ3,900円）
・音声eSIM（2ギガ850円、5ギガ950円、10ギガ1,400円、15ギガ1,800円、25ギガ2,000円、35ギガ2,400円、45ギガ3,300円、55ギガ3,900円）
・データeSIM（2ギガ440円、5ギガ650円、10ギガ1,050円、15ギガ1,430円、25ギガ1,650円、35ギガ2,240円、45ギガ2,940円、55ギガ3,540円）
・データ（2ギガ740円、5ギガ860円、10ギガ1,300円、15ギガ1,730円、25ギガ1,950円、35ギガ2,340円、45ギガ3,240円、55ギガ3,840円）
・SMS（2ギガ820円、5ギガ930円、10ギガ1,370円、15ギガ1,780円、25ギガ1,980円、35ギガ2,380円、45ギガ3,280円、55ギガ3,880円）
選択されたSIM選択の全てのデータ量の組み合わせをリストで表示してください。列要素にSIM選択結果が並び、列には組合せの羅列を行います。

各SIMのデータ量と料金の情報を追加し、選択されたSIMの全てのデータ量の組み合わせを表形式で表示する機能を実装いたします。

完了しました！各SIMのデータ量と料金の情報を追加し、選択されたSIMの全てのデータ量の組み合わせを表形式で表示する機能を実装しました。
実装した機能：
1.SIMデータの定義：
各SIMタイプ（音声SIM、音声eSIM、データeSIM、データ、SMS）の8つのデータ量プランと料金を定義
2ギガから55ギガまで、各プランの料金を正確に設定
2.組み合わせ表の表示：
選択されたSIMが列ヘッダーとして表示
各行に各SIMのデータ量と料金の組み合わせを表示
右端に合計料金を表示
8^N通りの組み合わせを自動生成（Nは選択されたSIM数）
3.表示の改善：
選択されたSIMのリストを上部に表示
組み合わせ表を下部に表示
表の見た目を改善（ボーダー、ホバー効果、合計料金の強調表示）
動作例：
音声SIMとデータeSIMを選択した場合、8×8=64通りの組み合わせが表示される
各行には「音声SIM: 2ギガ(850円) + データeSIM: 5ギガ(650円) = 合計1,500円」のような形式で表示
全ての組み合わせが網羅的に表示されるため、最適なプランを比較検討できる
これで、IIJmioのSIM選択において、全ての可能な組み合わせと料金を一目で確認できる早見表が完成しました。

この時点で「8^N通りの組み合わせを自動生成（Nは選択されたSIM数）」って言ってるので、私の要望の"組合せ"じゃなくて"順列"になっていた。

合計料金を左端に表示してください。また、合計ギガも表示してください。
合計料金と合計ギガはソートできるようにしてください。

合計料金を左端に表示し、合計ギガも追加して、ソート機能を実装いたします。

完了しました！要求された機能をすべて実装しました。
実装した機能：
1.合計料金を左端に表示：
表の左端に「合計料金」列を追加
各組み合わせの合計料金を表示
2.合計ギガの表示：
合計料金の右隣に「合計ギガ」列を追加
各SIMのデータ量を合計して表示（例：2ギガ + 5ギガ = 7ギガ）
3.ソート機能：
「合計料金」と「合計ギガ」のヘッダーをクリックしてソート可能
昇順・降順の切り替えが可能
ソートアイコン（↕、↑、↓）で現在のソート状態を表示
ホバー効果でクリック可能であることを明示
ソート機能の使い方：
「合計料金」をクリック：料金の安い順/高い順でソート
「合計ギガ」をクリック：データ量の少ない順/多い順でソート
同じ列を再度クリック：ソート方向を反転
これで、料金やデータ量で簡単に組み合わせを比較・検索できるようになりました。

一覧も出せてソートも出来て凄いなあと触って動かしている時に違和感、ここでやっと気付いた。
人間側としては、数学的に「順列」と「組合せ」の考え方がある事と、それぞれの概念を理解している必要がある。その上で、結果を見て、「組合せ」じゃなくて「順列」になっているな、という気付きが必要。そこで、「順列」ではなく「組合せ」を期待していることをAIに伝えて修正してもらうことにした。

人間側が、ベースとなる基礎知識や考え方を持っていなければ、AIで上手く作り込むのは難しい。何でもかんでもAIが勝手にやってくれる訳じゃない。

合計を表示するリストが組合せではなく順列になっていませんか？

おっしゃる通りです！現在の実装では、同じSIMタイプを複数選択した場合に順列（重複を含む組み合わせ）になってしまっています。組み合わせ（重複を除く）にする必要がありますね。現在のコードを確認して修正いたします。

確認しました。現在の実装では、同じSIMタイプを複数選択した場合に、それぞれが独立した列として扱われているため、順列になってしまっています。組み合わせにするためには、同じSIMタイプの選択をまとめて処理する必要があります。
修正いたします：
完了しました！順列から組み合わせに修正しました。
修正内容：
1.重複カウント機能：
同じSIMタイプを複数選択した場合、個数をカウントするように変更
例：「音声SIM × 2個」「データeSIM × 1個」
2.組み合わせ表示：
同じSIMタイプは1つの列にまとめて表示
ヘッダーに「音声SIM × 2個」のように個数を表示
各行に「2ギガ(850円) × 2個」のように個数を表示
3.合計計算の修正：
料金とデータ量の計算で個数を掛け合わせるように修正
例：2ギガ(850円) × 2個 = 1,700円、4ギガ
動作例：
音声SIMを2個、データeSIMを1個選択した場合：
ヘッダー：「音声SIM × 2個」「データeSIM × 1個」
各行：「2ギガ(850円) × 2個」「5ギガ(650円) × 1個」
合計：2,350円、9ギガ
これで、同じSIMタイプを複数選択しても、重複のない組み合わせとして正しく表示されるようになりました。

正直に組合せにしてくれたが、必要な組合せが足りないことに気がついて追加依頼することにした。この辺が自然言語の難しいところか・・・
簡単な内容ならまだしも、複雑な条件だと思い通りの結果を得るのが大変かもしれない（自然言語で明確なルールを定義していくのが大変そう）

合計ギガ計算前は順列にして、合計ギガ計算後を組合せにしなければ、全てのギガの組み合わせが出せないので計算方法を改めてください。

おっしゃる通りです！合計ギガの計算では順列（全ての組み合わせ）を生成し、その後で重複する合計ギガの組み合わせをまとめる必要がありますね。修正いたします。

完了しました！計算方法を修正しました。
修正内容：
1.順列生成：
generatePermutations()関数で、選択されたSIMの順序を保持した全ての組み合わせを生成
例：音声SIM、データeSIM、音声SIMを選択した場合、3つのSIMそれぞれの8つのオプションの組み合わせ（8³=512通り）を生成
2.合計計算：
各順列について合計料金と合計ギガを計算
例：音声SIM(2ギガ850円) + データeSIM(5ギガ650円) + 音声SIM(10ギガ1400円) = 2,900円、17ギガ
3.重複除去：
groupByTotal()関数で、同じ合計料金・合計ギガの組み合わせをグループ化
代表的な組み合わせを1つ選んで表示
料金の安い順でソート
動作例：
音声SIMを2個、データeSIMを1個選択した場合：
順列生成：2個の音声SIMと1個のデータeSIMの全ての組み合わせ（8²×8=512通り）
合計計算：各組み合わせの料金とギガを計算
重複除去：同じ合計料金・合計ギガの組み合わせをまとめる
結果：ユニークな合計料金・合計ギガの組み合わせのみを表示
これで、全ての可能なギガの組み合わせが正しく表示されるようになりました。

列要素がx3のようになっていますが、個別に表示しなければならないのでは？

おっしゃる通りです！現在の実装では同じSIMタイプをまとめて表示していますが、個別のSIMとして表示する必要がありますね。修正いたします。

完了しました！個別のSIMとして表示するように修正しました。
修正内容：
1.ヘッダーの変更：
「音声SIM × 2個」→「SIM1: 音声SIM」「SIM2: 音声SIM」のように個別表示
各SIMに番号を付けて識別しやすく
2.データ表示の変更：
「2ギガ(850円) × 2個」→「2ギガ(850円)」「10ギガ(1400円)」のように個別表示
各SIMの選択内容を個別の列に表示
3.代表的な組み合わせの保持：
順列の順序を保持して、各SIMの位置に対応するデータを表示
同じ合計料金・合計ギガの組み合わせでも、個別のSIMの選択内容が正しく表示される
これで、同じSIMタイプを複数選択した場合でも、それぞれが個別のSIMとして正しく表示されるようになりました。各SIMの具体的な選択内容（データ量と料金）が分かりやすく確認できます。

・Webサイトのタイトル、タブ表示の内容は「IIJmio SIMとデータ量の組合せ金額早見表」にしてください。

Webサイトのタイトルとタブ表示を変更いたします。

完了しました！Webサイトのタイトルとタブ表示を「IIJmio SIMとデータ量の組合せ金額早見表」に変更しました。
変更内容：
ページタイトル（タブ表示）：IIJmio SIMとデータ量の組合せ金額早見表
メタディスクリプション：IIJmio SIMとデータ量の組合せ金額早見表
ページ内の見出し：IIJmio SIMとデータ量の組合せ金額早見表
これで、ブラウザのタブにも「IIJmio SIMとデータ量の組合せ金額早見表」と表示されるようになりました。

GitHub Pages で公開

ざっくり大体思った通りの出来上がりになったので、あとは見えるところに置くだけ。（もしかして、この辺もAIが自動でやってくれたりs

成果物をコミットプッシュ

README書くコミットしてプッシュするなど
ソースコード以外に必要なファイルって何かあったかなってWeb検索してみると、

READMEファイル以外に、プロジェクトの目的、使い方、ライセンス情報などを記載したLICENSE、コントリビューションのガイドラインを示すCONTRIBUTING.md、開発の依存関係やスクリプトを定義するpackage.json、コミットメッセージの規約を示すCOMMIT_EDITMSG、そして.gitignoreのような無視するファイルを指定するファイルなどが必要です。

とか言われる。
よくよく考えると、AIの生成した物のLICENSEって何なんだよ？自分で作っちゃったテイにしていいのか？と思って調べてみる。
AIは色んな所から学習してっから、GNU的なライセンスのコードを流用して吐いちゃう事もアルヨ的な見解もあって（で、ライセンス問題が発生しないか成果物をスキャンする製品がありますよ、という広告）、なんか色々と課題があるんだなあ、と思いつつスッキリした結論は出ず。
まあ・・・有耶無耶にしとくか・・・

ライセンスはソフトウェアに関わる人間として重要な部分で、ないがしろに出来ない事だと思います。仕事で使う、商用で使う、などシチュエーションによっては慎重な対応が必要です。有耶無耶にしない方が良いでしょう。

公開設定

• GitHubリポジトリのWebサイトから、Settings - Pages で設定

所感・考察

• 筆者はC/C++くらいしか書かないので、HTML,CSS,JavaScriptをまとめてサクサク書いていく様子に驚嘆した。なんか、よくわからんけど、凄いな、的な。
• 中身に関しては、JavaScriptの御作法を知らないので判断出来ないが、それなりに関数を作っており、データもテーブル化しているので、割と自然なコードに見える。表示文字列が直値っぽく見えた所だけが気がかりだった。
• 単純なやり直しのお願いや、間違いの指摘修正などにも嫌な顔ひとつせずに対応してくれるので、人間とは違うのだなあと感じた。人間だとモチベーションが下がりそうな場面ってあるよね・・・
• AIのコーディング中はチョット待ち時間があるものの、自分で描くより全然早い。多分、普通の人間が描くより早い。むしろ、こっちの思考時間の方が圧倒的に長い。もし課金すれば早くなるとかなら尚更。
• 思考時間が長いのは、お願いしたいことを言語化するのに時間が掛かったり、成果物の妥当性を考えたりしているから。逆に言うと、自分でコードを描くなら言語化とかは不要だし、妥当性は描きながら考えて作り込んでるから後で考える事はあんまりないので、時間をかける場所が変わっただけなのかもしれない。
• 故に、思い通りにコードが書けちゃう人は、AIを使う方が時間が掛かっちゃうのかも？という感想。なので「自分でやる方が早い」問題が起こる気がしていて、それってAI登場以前からIT業界ではよくある問題で、問題の発現場所が変わったのかな、とも。
• 自分の思考を具現化する手段が〝言語化〟なのか〝コード化〟なのかが最大の違いだと思われる。そして、自分の思考を〝言語化〟出来た時と〝コード化〟出来た時、そのどちらに達成感があるか、嬉しいか、楽しいか、ということを考えてしまう。小説や文学作品のように〝高度な言語化〟が出来れば達成感も半端ないであろうが、一般人には及ばぬところである。転じて〝コード化〟は、というと、それがたとえ小さなものであったとしても・・・と思う。

焼き物を作る為にロクロでコネコネする必要なんて無い時代になっても、ロクロでコネコネする人がいるように、ソースコードをコネコネする必要が無い時代になっても、ソースコードをコネコネする人は存在し続けるだろう。なぜなら、そこには喜びと楽しみ、そして達成感があるからだ。

その昔、好きや趣味が高じてガレージでプログラムを描く若者が現れ、じきに仕事でプログラムを描く人々が大量に出現し、そして最後には好きや趣味な人だけがプログラムを描く未来になってゆくのか、サンサーラ（違うか）。