ポケモンSVのダメージ計算アプリを支える技術
ダメージ計算ツールSV byポケソル というポケットモンスター スカーレットバイオレット専用のダメージ計算Webアプリを ポケモン対戦の人気Youtuberのポケモンソルジャーさんがリリースし、自分と他２名のエンジニアで開発のお手伝いをさせていただきました。
ダメージ計算ツールとはポケモン対戦で、相手のポケモンを一撃で倒せるかを計算するためのツールです。
自分と相手のポケモン、技、持ち物、特性などを選択してその結果何パーセントで倒せるのかを計算することができます。
ダメージ計算ツールSV byポケソル
このページではダメージ計算ツール（以降ダメ計）を支えている技術やサービスを紹介します。
フロントエンド
Next.js
フロントエンドには Next.jsを利用しています。
選定理由以下の通りです。
- ダメージ計算ツールはサービスの性質上すべてのユーザーに同じ体験を提供する機能がメイン。後述するデプロイ先のVercelと組み合わせることでSSGの恩恵を最大限受けやすい
- 筆者が個人的にNext.jsになれている。世間一般的に使われている。早く実装できる
グローバルの状態管理は Redux(ReduxToolkit)
グローバル状態管理にはRedux(Redux Toolkit) を採用しました
選定理由は以下の通りです。
- 技を選択したときや、能力のパラメータを動かしたときの状態管理がかなり複雑になることが予測された
- 状態の参照が複数箇所で発生するのでreselect を使いたかった
- 同じパーツを同一画面上にn件表示させ、それぞれで状態管理をする必要があり、ReduxToolkitのcreateEntityAdapterを有効に使えそうだった
- 筆者が個人的にReduxToolkitになれている
最初Recoil で開発していたのですが、状態をどれくらい分割するか悩んだり、開発速度が思ったり出せなかったので諦めました。
その他のライブラリ
- UIライブラリはMUI を採用しました。いくつか候補を出してポケソルさんの好み＆自分の慣れでこちらにしました。
- Test周りは、vitest、React Testing Libraryを利用しています。
- パッケージマネージャーは pnpm。依存の依存を間違って参照しないようにできるなど使い勝手がよいので気に入っています
バックエンド
DBからの値の取得
- prisma。ORMとして利用しています
DBと認証機能
- supabase。 RDBと認証機能の提供をしてくれることからこちらを採用しています。アプリ内で利用するポケモン、技、特性など様々なデータを保持しています。
その他に利用しているサービスなど
デプロイ環境
Vercel。Next.jsとの相性の良さ、SSGを使うことでページの初期表示を高速化できるので採用しました。
CICD
GithubActionsを使って、静的解析、テスト、ビルドをしています
デプロイはGihtubとVercelを連携することで特定ブランチにPRをマージするとデプロイできるようにしています。
開発ドキュメント管理
Dropbox Paper チームのADRや、ミーティング議事録などはここで管理しています
タスク管理
Github Projects を使って管理しています。
週に一回定例でタスクの優先順位を見直したり、問い合わせを集計してタスクに追加などしています。
コミュニケーションツール
Discord ポケソルさんが普段つかっているのでそのまま利用しています。
まとめ
- Next.js on Vercel + supabaseを利用することで、今回のような小規模のWebアプリは短期間＋少人数で開発ができたので、「科学の力って すげー！」という感想です
- すべてのコードがTypeScriptで簡潔しているので普段フロントエンドエンジニアとして働いている自分としては楽ができました
- もうちょっと具体的な技術的な取り組みとか、チームとしてどいう活動しているかなどは別の記事で紹介できたらなと思います
宣伝
筆者はNokogiri(@nkgrnkgr) といいます。
普段はサイボウズ株式会社でkintoneというプロダクトのフロントエンドの開発をしています。特に最近はkintoneのフロントエンド刷新プロジェクトでレガシーコードの刷新に携わっています。サイボウズではフロントエンドエンジニアを募集しています。興味ある方はTwtteirでDMなどいただけるとうれしいです！
Discussion