概要
作成したのは「ステータス調整ツール」と命名した Web アプリケーションです。
このアプリは、ブラウザ上でポケモンのステータスを調整するためのツールです。検索欄にポケモンの名前を入力すると、そのポケモンの種族値を取得し、レベル・努力値・個体値などを設定して実数値を算出できます。
現在のステータスと調整後のステータスの両方を比較でき、それらの努力値の差異から必要な育成アイテムを導き出して表示します。計算式は非公式の Wiki を参考にしています。
本アプリは非公式のツールであり、公式のサポートを受けているものではありません。使用に関しては自己責任でお願いいたします。
使用技術と選定理由
- React
- TypeScript
- Vite
- SPA の CSR で完結し、フレームワークを使用するほどの規模ではないため
- PokeAPI
- GraphQL
- 必要なデータのみ取得できるため
- urql
- GraphQL クライアントとして Apollo Client が有名だが、状態管理など不要な機能が多く、シンプルに利用できるため
- Cosmos(UIカタログライブラリ)
- Storybook より軽量
- React だけで利用でき、複雑な設定が不要
- Fixture（Storybook でいうところの stories）ファイルがシンプルに書ける
ディレクトリ設計
- Feature Based Pattern に基づき、
src/featuresディレクトリ内で各機能ごとにディレクトリを分ける - ページのトップは
src/pagesディレクトリに配置し、主にfeaturesから import したコンポーネントをレイアウト - 共通コンポーネントは
src/componentsに配置
Feature Based Patternを採用してみてどうだったか
featureディレクトリ内にロジックとコンポーネントをまとめられるため、管理しやすい
テスト設計
- 計算ロジックごとにテストを作成
- 機能単位でテストを記述
features/をまたぐ場合でも、機能を重視したテストを作成