はじめに (Introduction)
こんにちは！普段、趣味でゲームをプレイしている一人の開発者です。
最近、grow a garden
というゲームにハマっているのですが、ゲーム内で庭の作物を育てて収益を最大化するのが難しく、「どの作物を育て
れば一番効率が良いんだろう？」と常に考えていました。スプレッドシートで手動計算するのも面倒だったので、「そ
れなら自分でツールを作ってしまおう！」と思い立ち、Webアプリケーションとして開発してみることにしました。
この記事では、そのツールの紹介と、開発で使った技術や工夫した点について共有したいと思います。
作ったもの (What I Built)
ツール名: Grow A Garden Calculator
URL: https://www.growagardencalculatorapp.com/
このツールは、[ゲーム名] のプレイヤーがゲーム内の庭で最大の利益を得るための最適な作物を簡単に見つけられる
ように設計された、無料の収益計算シミュレーターです。
[ここにスクリーンショットを挿入]
(Insert a screenshot of your tool here)
主な機能は以下の通りです。
- 作物の選択
- ゲーム内の環境変異に応じた成長時間の計算
- 収益性（1分あたり、1時間あたりなど）の比較
使用した技術 (Tech Stack)
今回の個人開発では、モダンなフロントエンド開発環境を意識して、以下の技術スタックを選定しました。
- フレームワーク: Next.js (App Router)
- 言語: TypeScript
- UIライブラリ: shadcn/ui, Tailwind CSS
- 状態管理: React Context
- デプロイ: Vercel
Next.jsのApp Routerは学習コストが少しありましたが、開発体験が非常に良く、Vercelとの連携もスムーズなので、
個人開発のスピード感を上げるのに最適でした。
開発で工夫した点・難しかった点 (Key Development Points & Challenges)
- 複雑な計算ロジックの実装
このツールの心臓部である収益計算ロジックが最も挑戦的でした。ゲーム内には天候や季節、特殊なアイテムなど、作
物の成長に影響を与える多くの変数が存在します。
これらのデータを管理するために、calculatorData.ts
のようなファイルに作物の基本情報（価格、成長時間など）をオブジェクトの配列として定義しました。
`typescript:components/calculator/calculatorData.ts
// データ構造のサンプル (Sample data structure)
export const crops = [
{
name: 'Carrot',
baseGrowthTime: 60, // in minutes
sellPrice: 100,
// ... other properties
},
// ... more crops
];
1 ユーザーがUIから環境を選択すると、
これらの基本データに補正をかけて最終的な収益性を計算する関数を実装しました。TypeScriptのおかげで
、複雑なデータ構造でも型安全に扱うことができ、バグの少ない開発ができました。
2
2. 直感的なUI/UXの設計
ゲーマーがプレイの合間にサッと使えるように、UIはシンプルで直感的であることを目指しました。shadcn/ui
のコンポーネントは、デザインの自由度が高く、Headless UIの思想に基づいているため非常に使いやすかったです。
特に、作物を選択するための コンポーネントや、計算結果を表示する
コンポーネントは、ほぼカスタマイズなしで理想的なUIを実現できました。
- 状態管理
ユーザーが選択した作物、数量、環境設定などをアプリケーション全体で共有する必要がありました。小規模なアプリ
ケーションなのでReduxなどは大げさだと感じ、React標準の Context API を使って状態を管理することにしました。
これにより、Propsのバケツリレーを避けることができ、コードの見通しが良くなりました。
今後の展望 (Future Plans)
まだ実装したい機能はたくさんあります。
- ユーザーが計算履歴を保存できる機能
- より多くの作物やアイテムのデータ追加
- PWA対応によるオフライン利用
もしフィードバックや「こんな機能が欲しい！」という要望があれば、ぜひ教えてください。
おわりに (Conclusion)
自分の「欲しい」を形にするための個人開発は、技術的な学びが多く、非常に楽しい経験でした。もしあなたが
[ゲーム名] のプレイヤーであれば、ぜひ一度このツールを使ってみてください。きっとあなたのゲームプレイの助け
になるはずです。
また、開発者の方からの技術的なフィードバックも大歓迎です！
完成したツール: https://www.growagardencalculatorapp.com/
最後まで読んでいただき、ありがとうございました。