JR四国 列車位置情報アプリ
JR四国の列車リアルタイム位置情報を表示するReact Nativeアプリケーション。
🚀 技術スタック
- フレームワーク: React Native (Expo SDK 52)
- 言語: TypeScript / JavaScript
- 状態管理: React Context API + カスタムフック
- ストレージ: AsyncStorage
- 地図表示: WebView + JavaScript Injection
- 日付処理: dayjs
- アニメーション: react-native-reanimated
📦 プロジェクト構造
jrshikoku/
├── components/ # Reactコンポーネント
│ ├── Apps/ # アプリケーション機能
│ │ └── FixedPositionBox/
│ │ └── hooks/ # カスタムフック
│ ├── atom/ # 基本UIコンポーネント
│ ├── Menu/ # メニュー関連
│ ├── Settings/ # 設定画面
│ └── TrainMenu/ # 列車メニュー
├── stateBox/ # グローバル状態管理
├── lib/ # ユーティリティライブラリ
│ └── eachTrainInfoCoreLib/ # 列車情報処理
├── constants/ # 定数定義
│ ├── intervals.ts # 時間間隔定数
│ ├── api.ts # APIエンドポイント
│ ├── storage.ts # StorageKeys
│ └── index.ts
├── types/ # TypeScript型定義
├── utils/ # ユーティリティ関数
│ ├── logger.ts # ロギング
│ └── seUtils.ts # SE判定処理
├── assets/ # 静的リソース
└── config/ # 設定ファイル
🛠️ セットアップ
必要環境
- Node.js 18以上
- npm または yarn
- Expo CLI
インストール
# 依存関係のインストール
npm install
# 開発サーバー起動
npm start
# iOS実行
npm run ios
# Android実行
npm run android
# Web実行
npm run web
📝 開発ガイドライン
定数の使用
// ❌ Bad
setTimeout(update, 60000);
fetch('https://example.com/api');
// ✅ Good
import { INTERVALS, API_ENDPOINTS } from '@/constants';
setTimeout(update, INTERVALS.DELAY_UPDATE);
fetch(API_ENDPOINTS.DIAGRAM_TODAY);
ロギング
// ❌ Bad
console.log('Debug info', data);
console.error('Error occurred', error);
// ✅ Good
import { logger } from '@/utils';
logger.debug('Debug info', data); // 開発環境のみ
logger.error('Error occurred', error); // 本番環境でも出力
型定義
// ❌ Bad
type TrainData = any;
// ✅ Good
import type { TrainDataType } from '@/types';
const trainData: TrainDataType = {...};
ストレージアクセス
// ❌ Bad
AsyncStorage.getItem('bus_and_train');
// ✅ Good
import { STORAGE_KEYS } from '@/constants';
AsyncStorage.getItem(STORAGE_KEYS.BUS_AND_TRAIN);
🎯 主要機能
列車位置追跡
- リアルタイム列車位置表示
- 遅延情報の表示
- 次駅・着駅の予測
駅情報
- 時刻表表示
- 駅詳細情報
- お気に入り駅登録
カスタマイズ
- アイコン設定
- レイアウト設定
- 通知設定
🔧 カスタムフック
FixedPositionBox用フック
useFixedTrainData: 列車データの取得と管理useStopStationList: 停車駅IDリストの生成useTrainCurrentPosition: 現在位置の計算useNextStationCalculator: 次駅と着駅の計算useTrainDataWithThrough: 通過駅を含む列車データ生成useDestinationStation: 行先駅データの管理
グローバル状態フック
useAllTrainDiagram: 全列車ダイヤデータuseBusAndTrainData: バス・列車データuseCurrentTrain: 現在選択中の列車useFavoriteStation: お気に入り駅useStationList: 全駅リストuseTrainMenu: 列車メニュー状態
📊 リファクタリング実績
詳細はREFACTORING.mdを参照。
- 定数化: 50+ 箇所
- 型安全性: 22ファイル、46+ 箇所のany型削減
- ロギング: 10ファイルでlogger導入
- コード重複削減: 87%（seUtils）
- 大型コンポーネント分割: FixedTrainBox.tsx（356行抽出）
🚦 API エンドポイント
// constants/api.ts
export const API_ENDPOINTS = {
TRAIN_DATA_API: 'https://api.haruk.in/dev/jrshikoku/trainList',
DIAGRAM_TODAY: 'https://api.haruk.in/dev/jrshikoku/diagram/today',
STATION_LIST: 'https://storage.haruk.in/s/station.json',
// ... 他8個
};
📱 ビルド
# APKビルド（Android）
eas build --platform android
# IPAビルド（iOS）
eas build --platform ios
🤝 貢献
プルリクエストを歓迎します。大きな変更を行う場合は、まずissueを開いて変更内容を議論してください。
📄 ライセンス
[ライセンス情報をここに記載]
👤 開発者
[開発者情報をここに記載]