<p><a href="https://sv.pokesol.com" target="_blank" rel="nofollow noopener noreferrer">ダメージ計算ツールSV byポケソル</a> というポケットモンスター スカーレットバイオレット専用のダメージ計算Webアプリを ポケモン対戦の人気Youtuberの<a href="https://www.youtube.com/@pokesol" target="_blank" rel="nofollow noopener noreferrer">ポケモンソルジャー</a>さんがリリースし、自分と他２名のエンジニアで開発のお手伝いをさせていただきました。</p>
<p>ダメージ計算ツールとはポケモン対戦で、相手のポケモンを一撃で倒せるかを計算するためのツールです。<br>
自分と相手のポケモン、技、持ち物、特性などを選択してその結果何パーセントで倒せるのかを計算することができます。</p>
<h4 id="%E3%83%80%E3%83%A1%E3%83%BC%E3%82%B8%E8%A8%88%E7%AE%97%E3%83%84%E3%83%BC%E3%83%ABsv-by%E3%83%9D%E3%82%B1%E3%82%BD%E3%83%AB">
<a class="header-anchor-link" href="#%E3%83%80%E3%83%A1%E3%83%BC%E3%82%B8%E8%A8%88%E7%AE%97%E3%83%84%E3%83%BC%E3%83%ABsv-by%E3%83%9D%E3%82%B1%E3%82%BD%E3%83%AB" aria-hidden="true"></a> <a href="https://sv.pokesol.com" target="_blank" rel="nofollow noopener noreferrer">ダメージ計算ツールSV byポケソル</a>
</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e26bd938b7c0-20221215.png" alt="ポケモン対戦" loading="lazy" class="md-img"></p>
<p>このページではダメージ計算ツール（以降ダメ計）を支えている技術やサービスを紹介します。</p>
<h1 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> フロントエンド</h1>
<h2 id="next.js">
<a class="header-anchor-link" href="#next.js" aria-hidden="true"></a> Next.js</h2>
<p>フロントエンドには <a href="https://nextjs.org/" target="_blank" rel="nofollow noopener noreferrer">Next.js</a>を利用しています。</p>
<p>選定理由以下の通りです。</p>
<ul>
<li>ダメージ計算ツールはサービスの性質上すべてのユーザーに同じ体験を提供する機能がメイン。後述するデプロイ先の<a href="https://vercel.com/" target="_blank" rel="nofollow noopener noreferrer">Vercel</a>と組み合わせることでSSGの恩恵を最大限受けやすい</li>
<li>筆者が個人的にNext.jsになれている。世間一般的に使われている。早く実装できる</li>
</ul>
<h2 id="%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%81%AE%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%81%AF-redux(reduxtoolkit)">
<a class="header-anchor-link" href="#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%81%AE%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%81%AF-redux(reduxtoolkit)" aria-hidden="true"></a> グローバルの状態管理は Redux(ReduxToolkit)</h2>
<p>グローバル状態管理には<a href="https://redux.js.org/" target="_blank" rel="nofollow noopener noreferrer">Redux</a>(<a href="https://redux-toolkit.js.org/" target="_blank" rel="nofollow noopener noreferrer">Redux Toolkit</a>) を採用しました</p>
<p>選定理由は以下の通りです。</p>
<ul>
<li>技を選択したときや、能力のパラメータを動かしたときの状態管理がかなり複雑になることが予測された</li>
<li>状態の参照が複数箇所で発生するので<a href="https://github.com/reduxjs/reselect" target="_blank" rel="nofollow noopener noreferrer">reselect</a> を使いたかった</li>
<li>同じパーツを同一画面上にn件表示させ、それぞれで状態管理をする必要があり、ReduxToolkitの<a href="https://redux-toolkit.js.org/usage/usage-with-typescript#createentityadapter" target="_blank" rel="nofollow noopener noreferrer">createEntityAdapter</a>を有効に使えそうだった</li>
<li>筆者が個人的にReduxToolkitになれている</li>
</ul>
<p>最初<a href="https://github.com/facebookexperimental/Recoil" target="_blank" rel="nofollow noopener noreferrer">Recoil</a> で開発していたのですが、状態をどれくらい分割するか悩んだり、開発速度が思ったり出せなかったので諦めました。</p>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" aria-hidden="true"></a> その他のライブラリ</h2>
<ul>
<li>UIライブラリは<a href="https://mui.com/" target="_blank" rel="nofollow noopener noreferrer">MUI</a> を採用しました。いくつか候補を出してポケソルさんの好み＆自分の慣れでこちらにしました。</li>
<li>Test周りは、<a href="https://vitest.dev/" target="_blank" rel="nofollow noopener noreferrer">vitest</a>、<a href="https://testing-library.com/docs/react-testing-library/intro/" target="_blank" rel="nofollow noopener noreferrer">React Testing Library</a>を利用しています。</li>
<li>パッケージマネージャーは <a href="https://pnpm.io/" target="_blank" rel="nofollow noopener noreferrer">pnpm</a>。依存の依存を間違って参照しないようにできるなど使い勝手がよいので気に入っています</li>
</ul>
<h1 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> バックエンド</h1>
<h2 id="db%E3%81%8B%E3%82%89%E3%81%AE%E5%80%A4%E3%81%AE%E5%8F%96%E5%BE%97">
<a class="header-anchor-link" href="#db%E3%81%8B%E3%82%89%E3%81%AE%E5%80%A4%E3%81%AE%E5%8F%96%E5%BE%97" aria-hidden="true"></a> DBからの値の取得</h2>
<ul>
<li>
<a href="https://www.prisma.io/" target="_blank" rel="nofollow noopener noreferrer">prisma</a>。ORMとして利用しています</li>
</ul>
<h2 id="db%E3%81%A8%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#db%E3%81%A8%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> DBと認証機能</h2>
<ul>
<li>
<a href="https://supabase.com/" target="_blank" rel="nofollow noopener noreferrer">supabase</a>。 RDBと認証機能の提供をしてくれることからこちらを採用しています。アプリ内で利用するポケモン、技、特性など様々なデータを保持しています。</li>
</ul>
<h1 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AB%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AA%E3%81%A9">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AB%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AA%E3%81%A9" aria-hidden="true"></a> その他に利用しているサービスなど</h1>
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E7%92%B0%E5%A2%83" aria-hidden="true"></a> デプロイ環境</h2>
<p><a href="https://vercel.com" target="_blank" rel="nofollow noopener noreferrer">Vercel</a>。Next.jsとの相性の良さ、SSGを使うことでページの初期表示を高速化できるので採用しました。</p>
<h2 id="cicd">
<a class="header-anchor-link" href="#cicd" aria-hidden="true"></a> CICD</h2>
<p>GithubActionsを使って、静的解析、テスト、ビルドをしています<br>
デプロイはGihtubとVercelを連携することで特定ブランチにPRをマージするとデプロイできるようにしています。</p>
<h2 id="%E9%96%8B%E7%99%BA%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E7%AE%A1%E7%90%86">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E7%AE%A1%E7%90%86" aria-hidden="true"></a> 開発ドキュメント管理</h2>
<p><a href="https://www.dropbox.com/paper/start" target="_blank" rel="nofollow noopener noreferrer">Dropbox Paper</a> チームのADRや、ミーティング議事録などはここで管理しています</p>
<h2 id="%E3%82%BF%E3%82%B9%E3%82%AF%E7%AE%A1%E7%90%86">
<a class="header-anchor-link" href="#%E3%82%BF%E3%82%B9%E3%82%AF%E7%AE%A1%E7%90%86" aria-hidden="true"></a> タスク管理</h2>
<p>Github Projects を使って管理しています。<br>
週に一回定例でタスクの優先順位を見直したり、問い合わせを集計してタスクに追加などしています。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b62944c6ec43-20221215.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> コミュニケーションツール</h2>
<p><a href="https://discord.com/" target="_blank" rel="nofollow noopener noreferrer">Discord</a> ポケソルさんが普段つかっているのでそのまま利用しています。</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<ul>
<li>Next.js on Vercel + supabaseを利用することで、今回のような小規模のWebアプリは短期間＋少人数で開発ができたので、「科学の力って すげー！」という感想です</li>
<li>すべてのコードがTypeScriptで簡潔しているので普段フロントエンドエンジニアとして働いている自分としては楽ができました</li>
<li>もうちょっと具体的な技術的な取り組みとか、チームとしてどいう活動しているかなどは別の記事で紹介できたらなと思います</li>
</ul>
<h1 id="%E5%AE%A3%E4%BC%9D">
<a class="header-anchor-link" href="#%E5%AE%A3%E4%BC%9D" aria-hidden="true"></a> 宣伝</h1>
<p>筆者は<a href="https://twitter.com/nkgrnkgr" target="_blank" rel="nofollow noopener noreferrer">Nokogiri(@nkgrnkgr)</a> といいます。<br>
普段はサイボウズ株式会社で<a href="https://kintone.cybozu.co.jp/" target="_blank" rel="nofollow noopener noreferrer">kintone</a>というプロダクトのフロントエンドの開発をしています。特に最近はkintoneのフロントエンド刷新プロジェクトでレガシーコードの刷新に携わっています。サイボウズではフロントエンドエンジニアを募集しています。興味ある方は<a href="https://twitter.com/nkgrnkgr" target="_blank" rel="nofollow noopener noreferrer">Twtteir</a>でDMなどいただけるとうれしいです！</p>
<p><a href="https://blog.cybozu.io/entry/2022/02/04/171154" target="_blank" rel="nofollow noopener noreferrer">🔗: kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること</a></p>
<p><a href="https://cybozu.co.jp/recruit/entry/career/front-end-engineer-kintone.html" target="_blank" rel="nofollow noopener noreferrer">🔗: 採用ページ:フロントエンドエンジニア（kintoneアーキテクチャ刷新PJ）</a></p>


ポケモンSVのダメージ計算アプリを支える技術

グローバルの状態管理は Redux(ReduxToolkit)

その他に利用しているサービスなど

Discussion