# 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

### インストール

```bash
# 依存関係のインストール
npm install

# 開発サーバー起動
npm start

# iOS実行
npm run ios

# Android実行
npm run android

# Web実行
npm run web
```

## 📝 開発ガイドライン

### 定数の使用

```typescript
// ❌ 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);
```

### ロギング

```typescript
// ❌ 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);  // 本番環境でも出力
```

### 型定義

```typescript
// ❌ Bad
type TrainData = any;

// ✅ Good
import type { TrainDataType } from '@/types';
const trainData: TrainDataType = {...};
```

### ストレージアクセス

```typescript
// ❌ 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](./REFACTORING.md)を参照。

- **定数化**: 50+ 箇所
- **型安全性**: 22ファイル、46+ 箇所のany型削減
- **ロギング**: 10ファイルでlogger導入
- **コード重複削減**: 87%（seUtils）
- **大型コンポーネント分割**: FixedTrainBox.tsx（356行抽出）

## 🚦 API エンドポイント

```typescript
// 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個
};
```

## 📱 ビルド

```bash
# APKビルド（Android）
eas build --platform android

# IPAビルド（iOS）
eas build --platform ios
```

## 🤝 貢献

プルリクエストを歓迎します。大きな変更を行う場合は、まずissueを開いて変更内容を議論してください。

## 📄 ライセンス

[ライセンス情報をここに記載]

## 👤 開発者

[開発者情報をここに記載]

## 🔗 関連リンク

- [JR四国公式サイト](https://www.jr-shikoku.co.jp/)
- [Expo Documentation](https://docs.expo.dev/)
- [React Native Documentation](https://reactnative.dev/)