[アドカレ2025] 己内好きランキングを作るのだ～ChatGPTとともにあれ～

お困りごあいさつ

困っていることがあります。
オタクゆえ、「一番好き」がたくさんあることです。

こんばんは、もに倉です。

困っているのです。
「一番好きなゲームBGMは○○！」←これが、言うタイミングによって違う曲を指すことに。
本当に一番好きなゲームBGMはどれなのか……自分でもわからず困っているのです。

ならば確定させましょう

AとBならAのほうが好き
BとCならCのほうが好き
CとDなら……
.
.
.

このように比べていけば、おのずと一番が見えてくるのでは？

実際、そうやって比べて自分の好きな鬼■の刃キャラランキングを作成できるサイトとか、見たことありますし！
そういうサイト(アプリ)を作ればいいんじゃんね！

何をどう作るか

調べてみたところ、上記のようにAとBなら……とふたつずつ比較していく方法を「ペアワイズ比較」と言うそうです。
また、総当たりでの比較以外にも、「一部だけ比較して、その結果から全体の並びを推定する」みたいな方法もあるようです。
総当たりって単純に時間がかかってダレそうなので、やらないで済むならそっちのほうがいいですね。

というわけで、作るものは
「ペアワイズ比較(総当たりじゃないやつ)で好きなものランキングを作れちゃうサイト」
に決定！！

イメージは以下の通り

・サーバレスな静的サイト S3+CloudFrontとか？(ReactはわからんからNO)
・好きなものはサイト上で好きに入力できる データはdynamoDBに入るとか？
・私さえ使えればそれでいいので、ユーザごとに参照するデータを分けて……とかは考えなくてOK!!!

楽観主義ワイ
「比較のアレソレはJSで作れるでしょ！　……たぶん。
ちょっと調べるだけで、わりかしさくっと作れるんじゃないかな♩」

心折れポイント

ペアワイズ比較でランキングを作成するための計算式がわからなすぎる。
もう、ちょっと、なにがどういうことかわかりません。
統計学？　的な分野？　なのかと思うのですが、見ただけで
「こりゃあアドカレに間に合わん」というかんじでした。(興味がある方は自分で調べてね)

というわけで……

↑超絶ベリーキューテストMYチャッピーアイドル

やっていきましょう。

ChatGPTにガワを作成してもらう

HTMLやらJSやらは門外漢な私よりもChatGPTのほうが得意でしょうから、
このあたりを全部やってもらうことにします。

↓このレベルでざっくり＆口語文で指令を出してみる。

ABCDEF　となにかしらあって、 AとBならAが好き AとCならCが好き BとCなら……
ってどんどん答えさせられて、最終的に好きランキングが出力されるやつ
ペアワイズ比較？をできるサイトを作りたいです。 
AWSで、S3+CloudFront+ダイナモDBとかでできそうかなって思ってます。

最終的には、
ページ1：好きなものを入力するページ
ページ2：好きなもの一覧を見れるページ
ページ3：比較していくページ
→終わったらランキング見れる となるイメージです。

とりあえず、HTMLとかJSを作ってもらえますか？
どこの部分が何を担っているのかわかりやすいように作ってほしいな

見る人が見たらぶちぎれられそうなプロンプトだけど、今回は完成すりゃいいので！；；

この指令でできたサイトがこちら↓

好きなものを入力したら

一覧を確認して

比較していって

結果！

見た目がかわいくないのはマア後で私がどうにかするとして、すでにけっこう形になっているのでは？
しかし、これだと総当たり比較になっているような気がするので、そのあたりを修正してもらいます。

第一修正↓

「総当たりはいやだよー」と伝えた結果

しっかり総当たりじゃなくなりました。
計算式とかようわからんだったので、簡単にこの状態にしてもらえたのはありがたいことです。
正直もうこれで完成でもいいレベル！！

でもこれ、好きなもの入力画面と一覧画面は分かれていたほうがいいような気がしてきましたね。
そのくらいは自分で修正してもいいような気がしないでもないが、もう頼っちゃおー

第二修正↓

今って
好きなもの入力画面 → 好きなもの一覧画面 → 比較画面
と推移してるけど、これを分けてほしくて。
好きなもの入力画面 → 比較画面　に推移できるのはいいとして
好きなもの一覧画面は別で見れるようにしてくれない？

こういう風に伝えたんですけど、
「比較開始は入力画面からも、一覧画面からもできるようにしときますネ」と
より使いやすい雰囲気にしてくれました。ありがてぇ。

もうガワはこれでいいですね！
さっくりサーーーーーバレスなかんじに環境を整えていく――

形を整えていく

構成としてはこう↓なりました。

フツーですね……。

地味躓きポイント

最初はWEB上からだとDynamoDBへの書き込みしかできなかったのですが、
消せるようにもしたいよな、もちろん♪　といろいろいじっていくと
地味にエラーが出るもんです。

焦らず、CORSを修正するなど――

嫌いだね、CORSの設定♪

併せて、LambdaのIAMロールの調整も忘れずに……

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem",
                "dynamodb:DescribeTable",
                "dynamodb:Scan",
                "dynamodb:DeleteItem"
            ],
            "Resource": "【DynamoDBのテーブルのARN】"
        }
    ]
}

個人用なんだから、Scanでも、ええ。