はじめに
野球の試合中に投手の投球数や成績を簡単に記録できるウェブアプリケーションを作成しました。コーチや保護者、野球ファンの方々が簡単に使えるように設計しています。このアプリケーションはReactで構築し、Firebaseにデプロイしています。
デモ: https://baseball-pitch.web.app
GitHub: https://github.com/takurot/baseball-pitch-counter
機能
このアプリケーションには以下の機能があります：
- 投球カウント: ストライク、ボール、総投球数をカウント
- 試合統計: アウト、イニング、失点を記録
- パフォーマンス指標: ストライク率、アウト当たりの投球数、イニング当たりの失点を自動計算
-
専用カウンター:
- 三振（K）と四球（FB）を個別に記録
- アウトをカウントしつつ投球数に影響を与えない機能
-
試合管理:
- 操作ミスを修正するための「元に戻す」機能
- 新しい試合を始めるためのリセット機能
- 投手名と対戦相手の情報を保存
技術スタック
- フロントエンド: React、Material-UI
- デプロイ: Firebase Hosting
- 状態管理: React Hooks (useState)
開発の動機
野球の試合中、特に子供の試合では、投手の投球数を正確に記録することが重要です。投球数の制限があったり、投手の疲労を管理したりする必要があるためです。既存のアプリでは操作が複雑だったり、必要な統計情報が不足していたりしたため、シンプルで使いやすい専用アプリを作成することにしました。
実装のポイント
1. シンプルなUI設計
アプリの中心となるのは、S（ストライク）、B（ボール）、O（アウト）、K（三振）、FB（四球）の5つのボタンです。これらを一列に配置し、ワンタッチで操作できるようにしました。
<Grid container spacing={1} style={{ marginTop: '10px' }}>
<Grid item xs={2.4}>
<Button
variant="contained"
style={{
backgroundColor: 'yellow',
color: 'black',
borderRadius: '50%',
minWidth: '45px',
height: '45px',
padding: '0px'
}}
onClick={handleStrike}
>
S
</Button>
</Grid>
{/* 他のボタンも同様 */}
</Grid>
2. 状態管理
ReactのuseStateフックを使用して、アプリケーションの状態を管理しています。
const [pitches, setPitches] = useState(0);
const [strikes, setStrikes] = useState(0);
const [balls, setBalls] = useState(0);
const [outs, setOuts] = useState(0);
const [innings, setInnings] = useState(1);
const [runsAllowed, setRunsAllowed] = useState(0);
const [strikeouts, setStrikeouts] = useState(0);
const [walks, setWalks] = useState(0);
3. 操作履歴の管理
操作ミスを修正できるように、履歴を保存する機能を実装しました。
const [history, setHistory] = useState([]);
const saveHistory = () => {
setHistory([...history, {
pitches, strikes, balls, outs, innings, runsAllowed,
pitcherName, opponent, runsPerInning, pitched,
strikeouts, walks
}]);
};
const undoLastAction = () => {
if (history.length > 0) {
const lastState = history[history.length - 1];
setHistory(history.slice(0, -1));
// 各状態を前の状態に戻す
setPitches(lastState.pitches);
// その他の状態も同様に戻す
}
};
4. 統計情報の自動計算
投球パフォーマンスを評価するための統計情報を自動的に計算します。
const strikeRate = pitches > 0 ? ((strikes / pitches) * 100).toFixed(1) : 0;
const outRate = outs > 0 ? (pitches / outs).toFixed(1) : 0;
const runsPerInning = (innings > 0) ? (runsAllowed / innings).toFixed(2) : 0;
Firebaseへのデプロイ
アプリケーションはFirebase Hostingを使用してデプロイしています。デプロイ手順は以下の通りです：
-
Firebase CLIをインストール
npm install -g firebase-tools -
Firebaseにログイン
firebase login -
プロジェクトを初期化
firebase init -
アプリケーションをビルド
npm run build -
デプロイ
firebase deploy
今後の改善点
- データの永続化（ローカルストレージまたはFirestore）
- 複数の投手を記録する機能
- 試合データのエクスポート機能
- モバイルアプリ版の開発
まとめ
このプロジェクトでは、ReactとFirebaseを使用して、シンプルながらも実用的な野球投球カウンターアプリを作成しました。UIの設計にこだわり、使いやすさを重視しています。野球に関わる方々のお役に立てれば幸いです。
ぜひデモを試してみてください。また、GitHubでソースコードを確認することもできます。