自我チェス

普段何気なく動かしてるチェスの駒 もし、その駒達が自我を持ったならどうなるのか...

技術スタック

モノレポ管理: pnpm + Turborepo 言語: TypeScript フロントエンド: React + Vite + TanStack React Query + React Three Fiber バックエンド: Cloudflare Workers + Hono バリデーション: Zod 状態管理: Zustand コード品質: oxlint + oxfmt

開発体験向上のためにこだわったところ

とにかく開発体験を良くするようにこだわってみました Full Stack TSで、pnpm workspaceを使ったmono repo構成にしてます。

1.oxlint、oxfmtを使ってlintやformatを高速化

ox系はRustで作られてるツールで、とにかく早いのが特徴

oxlintは、ESLintより50 - 100倍早い

2. Hono RPC使って楽にバックエンドとフロントエンドを繋げる

HonoでAPI定義すると

フロント側でいい感じにIDEで補完が効いてくれるため、開発がかなり楽になった。また、モノレポにしたこともあり、型定義共有できるおかげでスムーズに開発できた。

3. turbopackでビルドをCache

buildやlintでいい感じにキャッシュしてくれる。 特に、変更ない時はキャッシュから引っ張って来てくれるので早い

4.Rolldown-viteを使っている

RustのJSバンドラーであるRolldown-viteを使用。 これによって開発環境の立ち上げる速度が速い

5. GitHub ActionsでCI/CD

lintやformat、typechekやbuildをCIで実行。 また、mainやPR作成時にCloudflare Workersへ自動デプロイされる

PR作成時のコードでDeployされるので、マージ後どうなるのか想像が容易

6. タスクをいい感じに分割して、Issueを作ってくれるBot開発

今回、野良チームってことでタスク管理をいかに効率的にするかが大事だと考えました。 そこで、タスクをいい感じに分割して、Issueを作ってくれるDiscord Botを今回のために開発し、実際に運用してました。 ホスティングはEC2です。

タスクを投げると

リポジトリのコードを見つつ、いい感じの粒度でIssueを発行してくれます。また、GitHub Projectsに紐づくようになってるので、タスクの可視化もできる！！

このBot、実はripgrep、tree-sitterなどを使った自作のAI Agentが裏で動いてます。使ってるモデルは、Gemini 3.0 flashです。 コスパ良き

苦労したところ

Mapインスタンスが.mapメゾットを持っていなかった

Mapオブジェクトに.mapメゾットがなく、困った

Mapの中身見に行ったら、getがあったので、

気合いで乗り切った。

  const location = command?.from?.toUpperCase(); //A1
  console.log(location?.toUpperCase());

  const hogehoge: Position = vectors.get(location!)!;

どうやら.mapを追加するかどうか見たいな議論はあるらしい

ずっと存在しない駒を動かそうとしていた

初期配置の状態なのに、キングがA8にいる前提で動かそうとしていたため条件が一致せずに苦しんでいた

0.9だと思っていた座標が0.899999999だった

アニメーションの実装

音声でデバック

駒を動かすためには音声入力するしかないため、とにかく駒の名前と座標を言い続けた

レスポンスの構造化

https://www.wantedly.com/companies/wantedly/post_articles/995900
TSでの型を最大限生かすべく{ from, to, attack, reason } でレスポンスを返せるよう スキーマを定義し、Amazon Bedrock の Converse API + toolConfig（Tool use)を使い レスポンスを固定化させた

Ruby on Rails がすごく楽なのに気が付いた

orm ルーティング バリデーション MVC など標準搭載の機能が多く、ライブラリの技術構成やそのための勉強が必要で非常にくろうした。

MVC じゃなくて困った

rails の機能に紐づけて覚えようとしたが、MVCじゃないことに途中で気がついたため、単純なapi作成やDB作成にも最初はすごく苦戦した。
init.sqlを作成するさいにはじめてsqlite を使用したが、ほとんど型がなくTEXTを使っていたのに驚いた。

aws をアプリ側で持つ

bedrock呼び出しapi を内部で持たないことで、機能追加した最新のlambdaでフロント側の デバックができるようにして、スピーディーな開発を心掛けた。 全体の開発効率はあがったが、lambdaに反映させたいファイルを毎回buildして、zipしてアプリに投げる工程が少しきつかった。

おまけ

性格一覧

フロントエンドの座標

チェヌ

チェヌとは、小説『ノーゲーム・ノーライフ』の１巻、また同じくアニメの３話で登場するチェスという名のチェスの駒とその板を用いたリアルタイムストラテジーゲームである。作者が決めた正式名称ではなく、読者（視聴者）側によって付けられた愛称（または蔑称）である。 出典: https://dic.nicovideo.jp/a/%E3%83%81%E3%82%A7%E3%83%8C

アイデア出しの段階で、このチェヌを再現しようというところから開発が始まっていきました

これチェヌって言うんだ