205 lines
5.2 KiB
Markdown
205 lines
5.2 KiB
Markdown
# 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/)
|