ホロドリの攻略状況を管理する「Holodori Manager」を作った・ChatGPT Plus と Univer Sheets の話も

2025年7月頃から VTuber を見るようになり、現在はホロライブ中心にちょくちょく見てきた。先日、2026年7月23日にホロライブ発の音ゲー「hololive Dreams ホロライブ・ドリームス」がリリースされ、爆ハマリしている。

自分の音ゲースキルはゲームボーイでプレイしていた「ビートマニア GB ガッチャミックス2」で止まっており、スマホでの「親指勢」なこともあり、Lv28 以上の楽曲は一応のクリアにすら到達できない程度のレベルである。

開発元の関係もあり、似たような UI・システムの「ソシャゲー × 音ゲー」というのはいくつかあるようだが、自分はこの「ホロドリ」以外知らないので、比較対象とかもなく、純粋に楽しくプレイしている。

で、だ。このゲームは単純にプレイヤーの音ゲースキルさえ高ければ高得点が出せるワケではなく、使用するキャラを育成することで、同じプレイでもスコアが大きく変わるシステムになっている。

そして、キャラの育成には色々なアイテム、色々な要素が複雑に絡み合っていて、育成用アイテムも簡単には手に入らないので、「育成アイテムを集めるためにポーカーや釣りなどのミニゲームを繰り返しプレイする」というような、「コレは音ゲーなのか…？！」とすら思うような状況になっている。

そんなワケで、キャラクターごとの育成状況だったり、各ミニゲームでの獲得アイテムを最大化するための各種管理を行うためのウェブアプリを作った。その名も Holodori Manager。

安定の React Router SPA + Hono バックエンド + Cloudflare Workers + D1 データベース、という構成で実装している。UI は TailwindCSS + daisyUI というのも最近の自分の中ではおなじみ。ky、Zustand、Zod の利用、オレオレルールを含んだ ESLint でのフォーマットの他、このプロジェクトには Vitest を導入して一部機能のベンチマークテストも用意した。

作ったアプリは Cloudflare Workers 上にデプロイしてあるが、僕しかログイン利用できないようになっている。皆様がご利用したい場合は、この GitHub リポジトリを Fork してもらって、URL やアカウント ID などの情報をご自身の Cloudflare Workers 向けに調整して各自でデプロイしてください。ｗ

当初は、ゲーム内の「ホロワーク」という要素を効率化したくて、スプレッドシートで管理していたのを省力化するためにウェブアプリ化した。ゲームの話を詳しく書いても興味ない人には要らない情報だと思うのでコレ以上は書かないが、機能的にはかなり十分なモノが出来上がり、毎日自分で使っている。

ChatGPT Plus プランに加入した

このウェブアプリの開発を始めた2026年8月から ChatGPT Plus プランを契約し、初めて有料の AI を使い始めた。当初は「1ヶ月間無料」というオファーが出てきたので試しに使ってみようという感じだったのだが、10月現在も引き続き契約を継続している。Plus プランは月額3000円。

契約した2026年8月時点では GPT-5.6 Sol というのが利用できる最高性能のモデルで、それに続いて GPT-5.6 Terra、GPT-5.6 Luna という3段階があった。それが2026年10月現在では「ギリギリまだ使える旧モデル」になっており、現在は GPT-6.1 Sol、GPT-6 Astra、GPT-6 Sol、GPT-6 Luna へとアップデートされている。3ヶ月間で進化早すぎだろ…

ChatGPT のウェブページ上部に「Chat」と「Work」というのが登場しているのだが、「Chat」の方が消費する容量と、「Work」が消費する容量というのが別々になっているところが注意だ。「Work」を選択すると、Excel の分析とか GitHub リポジトリを読むとか、より複雑なタスクを命令できるようになるのだが、この「Work」というのは「Codex」と同じ容量を消費する。一方「Chat」を選べば、「Work と Codex」が消費する枠は減らないので、上手く使い分けると良い。

というワケで今回は、ゲームシステムの整理、アプリとしての DB 設計への反映など、最初に考えをまとめるところは ChatGPT ウェブ画面の「Chat」にて相談しながら作った。

そして実際のコーディングは、VSCode 拡張機能で Codex を利用して実装させた。Codex には「5時間ごとの利用上限」と「週間の利用上限」というモノがそれぞれあるので、活発に開発させている時はそれに引っかかり、リセット用のチケットを使う瞬間もあった。

Codex は「コンテキストウィンドウ (会話履歴) の自動圧縮」という機能があって、1つのチャットでやり取りしながら開発・修正を行わせていく中で、コンテキスト長が増えてきた時の整理をよしなにやってくれた。

イマイチ思ったとおりのコードを書いてくれないなーという部分がちょくちょくあったので、「Chat」の方で相談して、AGENTS.md および AI エージェント向けのルールドキュメントを書くことにした。というか ChatGPT に書かせた。「このディレクトリにはこういう命名規則でファイルを置け」とか「分かりにくい変数名を書くな」みたいな話って、ESLint のような機械的な Linter では拾い切れない、「個人の好み」に近い話なので、ルールドキュメントを書いて厳守させるのがだいぶ効果があった。今風に言うと「効いた」ってヤツですか。ｗ

開発のペースでいうと、開発を始めて5日間で約2万5000行のコードを書かせ、ChatGPT Plus プランでも週間利用上限のほぼ 100% を使い切った。コレで当初想定していた機能はほぼ出来上がったので、満足である。

今年2月頃に AI エージェントの無料枠をちょこちょこいじってる限りではなかなか体験できなかった、確かな便利さを実感できた。GPT-5.6 Sol というのも大変賢いモデルだなぁと思った。同じモデルでも思考レベルを「軽」「中」「高」など選べて、現在は GPT-6.1 Sol の「軽」を使っているが、AGENTS.md の整備も相まって、かなり「思ったとおりのコード」を書いてくれるようになった。

AI に書かせることは増えたが、依然として全ての行を目視でチェックして手直しはしていて、自分はまだ「AI に書かせっぱなし・レビューまで任せて全自動」とはしていない。自分的にはどうしても「動けば良い」とは思えず、「自分が思う、キレイなコードであること」を維持したいと思っている。

AI サービスごとの性格の違い

ChatGPT Plus を契約したものの、「課金すべき対象は本当に OpenAI で良いのか？」「他の AI サービスの方が課金する効果が高かったりはしないだろうか？」と思って、実装中も他の AI サービスをしばらく併用していた。しかし、自分の中では以下のような感想になった。

この感想を、直接それぞれの AI にぶつけて「何でお前らってこうなん？」と聞いてみたりした。

そこで分かってきたのは、モデル単体の性能というよりも、各社が狙う「振る舞わせ方」の設計意図がだいぶ異なるということだった。つまり、学習データの比重がそのまま出ているというよりも、強化学習の中でどこを褒められて評価されてきたか、そして「企業が AI に与えたい役割」の違いが大きく影響していそう、ということだ。

各サービスのシステムプロンプトを想像するとしたら、以下のように指示されていそうなイメージだ。

自分の場合、システムを設計する段階から自分なりの考えや知見を持っていて、そのうえで AI に聞くことが多いので、「自分はこう考えたけど、コレで考慮不足はあるだろうか？もしくは、より良い方式が世にはあるのだろうか？」といったことに答えて欲しい。つまり、どっちかといえばいきなりコードを出力しないで欲しいのである。

そうなると、Claude と僕の相性は、かなり悪いのだ。いくら Fable 5.1・Opus 5.5・Sonnet 5.5・Haiku 5.5 など「賢いモデル」を提供していたとしても、そこに初期設定されている「ユーザにはとにかく何か作ってあげなさい」というシステムプロンプトを「そういうのやめてね」とはじく労力がかかるワケだ。

その点、ChatGPT・Codex に関しては、AGENTS.md で制御を入れる前から「それならこういうやり方が良いと思います、別のライブラリも比較しましたが今回の要件には合わないと思います。この方針で実装開始しますか？」といった調査と説明、確認をしっかりしてくれて、最初から自分好みに近かったのだ。実際に出力するコードの「クセ」が、イマイチ僕の好みと合わなかった、というところの調整だけで済んでいるので、AGENTS.md も肥大化せず、すんなり動いてくれている印象なのだ。

月3000円という ChatGPT Plus の金額は決して安くはないが、自分は今のところアマプラ以外のサブスクは一切契約していないので、コレはギリギリ契約を継続しても良いかな？と思える金額と便利さなのが良い。

Univer Sheets めっちゃ便利

Holodori Manager を作っていく中で、「ココは DB テーブルを作って CRUD 用のページと API を作るほどではないな…」と思う管理項目が出てきた。要は「Google スプレッドシート」が書ければ十分な場面が出てきたのだ。

しかし、せっかく Cloudflare Workers 上にウェブアプリを作ったのに、そこから毎回 Google スプレッドシートのページに移動するのも微妙だなーと思い、ウェブアプリ内に埋め込めるスプレッドシート風のライブラリはないだろうか？と考えた。

以前にも同様のことは調査したことがあり、Jexcel (Jspreadsheet) や Luckysheet といったライブラリの存在は知っていた。しかしこれらはどうも開発が停滞していたり、カスタマイズ性がイマイチだったりで、本格的に利用する場面は出てこなかった。

今回改めて調査してみると、Univer というオープンソースのフレームワークが見つかった。Office アプリをウェブアプリとして構築できるモノで、Sheets・Docs・Slides などがある。この中の Univer Sheets が、まさに「Excel・Google スプレッドシートを自作するためのフレームワーク」として最高のモノだった。

ひととおりの機能を簡単に実装するための「プリセットモード」と、機能単位で細かく調整しながら実装できる「プラグインモード」とが選べる。全部入りで動くモノがすぐ欲しいなら「プリセットモード」でちゃちゃっと実装できるし、遅延読み込みしたり「この機能は要らないから外して軽くしたいな…」と思ったりしたら「プラグインモード」で実装すればいい、という感じ。

React (React Router) で作っている SPA 内に Univer Sheets を埋め込むのも、公式ガイドがあるくらいなので簡単。スマホでの操作にも対応しており、日本語表示も標準で対応できる。

データ保存はどうするのかというと、Univer Sheets が提供する API の save() 関数を叩くことで、ワークブック全体を JSON 形式で出力してくれるので、それを好きなタイミングで取得し、Hono API に投げて D1 データベースに保存する、という感じだ。

ただ、複数シートを束ねたワークブック全体のデータは、JSON 文字列にすると 500KB から 1MB 程度には簡単に膨れ上がってしまう。Cloudflare Workers と Cloudflare D1 にはそれぞれ色々なタイミングで容量上限がある。

そのため、取り扱うデータの容量によっては、以下のように読み書きのやり方を調整する必要がある。

KV や R2 は、技術的には出来そう？というだけで未検証。今回の自分の用途では、D1 に1ワークブックをまるごと保存して 600KB 程度で済んでいるので、しばらくはこのまま運用するつもり。

…まぁ、ココまで話した内容全部、ChatGPT が調べてくれて、Codex が実装も全部済ませてくれたワケですけども。ｗ

「AI を使わないコーディング環境」にはさすがに戻れなくなってきた、という危機感

React も Hono も、まだ全然書ける。Cloudflare Workers の仕組みも理解できてる。SQL も書けるし D1・SQLite も扱えてる。独力で実装しなさいと言われれば、時間はかかるが、出来るとは思う。

ただ、今回 ChatGPT Plus に課金して、設計やライブラリ調査から実装まで、利用制限をほとんど気にすることなく頼り切りで実装できてしまったことで、「ココまで省力化できるとなると、もう人力でやってた頃には戻れないぞ…？」となりつつある。

前述のとおり、AI に書かせたとはいえ、プロジェクト全体で僕が読んでいないコードは1行もない。ほとんど全ての行に対して、変数名、コメント、インデントや改行の入れ方などの調整を入れたし、処理順なども把握している。テーブル定義、Zod のスキーマ、TypeScript の型定義にはかなり自分流のコダワリがある方だし、ディレクトリやクラス、関数単位の責務の分離にも一家言持っているメンドくさい「えんじにゃー」である。「AI を使わずに書いたコード」と比べても、「あぁ、コレお前が書いただろ」と言われそうなくらいには、僕の目・僕の手が入っている。

とはいえ、こうした「コダワリ」は本当に僕の趣味嗜好の話で、仕事でチーム開発する場面だったらオートフォーマッタに任せてしまうような内容だ。僕が内心「こういうスタイルのコードは好きじゃないんだけど…」と思っていても、チーム開発だったら我慢するようなポイントであり、つまりは僕のレビューなんかなくたって、ちゃんと動くモノはかなり早い段階で出来上がっていた。

僕がコーディングそのもので手を動かした時間は格段に少なくなった上に、僕のコダワリを差し引いたレビューにすれば、5日すらかからずに「納品」ができていた程度の精度だ。そう思うと、この成功体験はかなり「毒」だ。この規模を僕が AI なしで実装していたら、2～3週間かかっててもおかしくないし、もっと品質が悪くバグが多かったかもしれない。

「人間が目視でチェックすることは大事だ！AI なんかに頼っててはダメだ！」なんていう風にはそもそも思っていないけど、「AI サービスに課金していないと何も出来ないエンジニア」にはなりたくないなー、とは思っている。しかしコレだけ精度の高いコードが高速に出てくると、自分で考える必要性がどんどんなくなっていくから、今自分が持ってる知識やスキルすら、どんどん退化していってしまいそうな気がする。

仕事での活用法は別として、趣味プログラミングの中に限っては、AI の賢さに抗って「俺は AI に主体を奪われていないぞ、自分が何をやっているか理解しているぞ」と言い張るために、あえて「コードへの細かいコダワリ」を手放さないようにしようかな、と思っている。コダワリがあるから、AI が出してきたコードは全部読むし、自分が分かるようにコメントを入れて、将来の自分が改修できるように処理順を調整して、構造も整理する。そういうテイにしておかないと、マジで何も考えなくなって、衰えてしまう。一応はエンジニア業で収入を得ている人間だからこそ、ココで AI 全任せにしてしまってはマズイ、せめてレビューする力は維持しなくちゃ…と思っている。

一方で、「本職は音楽作家です・カメラマンです」みたいな人たちは、どんなコードが生成されているかなど知らないままでも良くて、必要なツールを作らせ、仕事を効率化・省力化するために AI 任せへと全振りしても全然良いよな～、とは思う。ホント便利な時代になったわ…。