ChatGPTとコードの書けないクソ雑魚エンジニアがFGOのスキル構成を見てサーヴァントを当てるサイトを作った

クソ雑魚エンジニア脱却を目指し、頑張ってこんなサイトを作りましたという記事です。
自分がへこんだ時に、やり遂げた報告を見たら頑張れるかなと思って書いています。

FGO_fanmade_quiz_top

最初にお伝えしておくと「ChatGPTってすごい！」という記事ではありますが、「ChatGPTで最強のものを作ったぜ！」「有識者が語るChatGPTのすごさ！」のような華々しい話ではないです。
むしろ、「ChatGPTのおかげで、雑魚の僕でもちょっと自信が持てるようになった」といった、本当にささやかな話です。

Fate/Grand Order(FGO)という、絶賛配信中のスマホゲームがあります。今回はそれに関するクイズをするサイトになります。
FGOを知らん方がいると思うので、ちょっと説明します。
このゲームはすでに400人近いキャラがいて、各々が3つのスキルを持っています。スキルの内容自体は多種多様な組み合わせがあり、千差万別です。が、それを表示する際のスキルのアイコンは、さすがにある程度統一されています。そのため、攻撃系なら「攻撃力アップ」のアイコン、防御系なら「防御力アップ」のアイコン…といった具合に、ある程度記号化されています(とはいえそれでも100種近くあるのですが…)。
そのため、スキル1、2、3の組み合わせで、400人いるキャラのほぼすべての中から、キャラの特定が"一応"できてしまいます。それゆえに、何とかクイズ足りうるというものです。

なお、この形式のクイズ自体はだいぶ以前から、色々な方が作られていました。特に有名な攻略サイトで、クオリティ自体は私のものより格段に優れたものがあります。

【FGO】スキルアイコン画像検定｜10問中7問で合格 - ゲームウィズ

これが結構面白いのです。
なおこのサイトは、大勢いるキャラの中でも分かりやすいキャラに絞って、問題を出題しています。全員をランダムに出題すると、相当やり込みが必要なため、全く以て正しい形式だと思います。
ただ自分としては、「もう少し難しいものを」「もっとたくさん、なんならわんこそば形式で無限にやりたい」と思ってしまいました。
だから作りました。今回制作に至った動機の一つであり、私の創作ではよくある動機です。

当然、難易度はかなり高いと思います。ただでさえ人数が多いのに、そもそもプレイを通して400人全員を使うこともありませんし、何なら所持すらしていないキャラも相当数いるでしょう。私の場合、4割近くを所持していません。
なので正答率はよくて6割、赤点は1割とかなのでは？と思っています。とんだクソ試験ですね。結局、世に出す分には先に紹介した攻略サイトのものがちょうどいいのです。

またクイズとして以外に、サイトとしてのレベルも最低ラインぎりぎりだと思います。そちらに関しては、私のエンジニアとしての雑魚っぷりが如何なく発揮されたからです。
言い訳するとしたら、もともと私はバックエンドエンジニア、すなわちホームページは仕事に一切関係ないと言い切れるまであるエンジニアだということ。ですが、それにしたってもっとやりようがあったと思います。
使わなかったコードがコメントアウトしたまま放置されてるし…
多分キレイにまとめられるコードもあるし…
ページの縮尺が変わることを考慮していない部分があるし…(スマホだとちっちゃすぎて見えない)
恐らく仕事でやってるエンジニアから見たら、噴飯もののコードだと思います。業務を卒なく遂行している新卒ならば、一か月で身につくものなんじゃないでしょうか。とても現職の人には見せられません。

ですが、もともとエンジニアとして致命的に苦手だった「全体の流れを俯瞰すること」が少しできるようになった気がしています。「まずmainメソッドに行き引数を伴って別メソッドで処理をし、mainにreturnし、また別メソッドの処理を実行して…」といった流れが、そもそも追えていなかったのです。地図で例えると、「そもそも今自分が東京のどこにいるかも分からない。それなのにいくつかある知人の家に決まった順で行かなくてはならない。東京に存在することは知っているが、位置関係が分からないし、電車がどう繋がっているかも分からない。おまけになんの手土産を持っていけば追い返されずに済むのかも分からない」といった具合でした。これが今は、根気よく調べれば見えてくる程度にはなりました。
…例えが分かりにくいのは、もともと例え話が下手な上に、多分まだ理解しきれてないからでしょうね。

この他にも、何にもないまっさらなところから、一からコードを書いて、実装にこぎつけたということ自体、無駄なことではなかったと思います。思いたいです。
やりぬくことがまず大事とか、成功体験の積み重ねが大事、とは聞きますからね。これはCGの創作趣味でも感じたことなので確かなのではと思っています。

…すいません、いま嘘を一つつきました。
一からコードを書いてと言ったのですが、タイトルの通り、実はChatGPTに色んな機能のひな形を作ってもらっていますからね。

なお、サイトを作るにあたってChatGPTを使ってみる、という動機は後からできたものです(サイトの制作はChatGPT-4が話題になる前からやっていました)。結論から言うと、大助かりでした。個人的な感想ですが、やはり0からモノを作るより、すでにあるひな形を修正することの方がひらめきやすかったです。
ChatGPTに上手く要件を伝えられず、作りたいものとは少しずれた解決法が返ってきた時でも、「あれ？でもこれをこう変えれば…」「これをさっきブログに書かれていたあの方法と組み合わせれば…」と考えることができたからこそ、私のようなものでもサイト完成までこぎつけることができました。
AI、本当に使いようですね。
本当に、本当にありがとう。

今後ですが、せっかくなのでもう少し手直しを続けようと思っています。
リファクタリングという名の作業ですね。そういった運用保守はむしろ今の私の仕事に近いことですので、やった方がいいと思いますし。
具体的には、あくまで"やれたら"の域を出ませんが、「ランダム出題だが同じ問題は全員出るまで出さない」「問題数をカウントする」「データをhtmlから読み込むのではなくサーバーとのやりとりにする(初期Ver.はなんとhtmlにあるtblを読み取ってるんですよ)」「スマホでも見やすくする」あたりをやりたいです。というかスマホ表示はマストでしょ。
もちろんFGOのキャラだってこれからも増えていくと思いますから、順次データの更新はしたいです。強化クエストだって、どんどん実装して、どんどんアイコン変えてくれたって構わないんだぜ？玉藻さんの第二スキル、よろしくお願いします。

というわけで、ChatGPTとお供の私の戦いはまだまだこれからです。
頑張って、ChatGPT！(おいおい)

では、私はCG制作の方に移ります(おいおいおい)。