Project Setup - piroshi-tanaka/PomofocusGuardApp GitHub Wiki

プロジェクト初期設定手順

注意: 実際のセットアップ時に遭遇した問題と解決策については、React Native セットアップトラブルシューティングを参照してください。

1. React Native プロジェクトの作成

# React Native CLIを使用してTypeScriptテンプレートでプロジェクトを作成
npx react-native init PomofocusGuardApp --template react-native-template-typescript

実際の経験: 特定のバージョンを指定した場合にエラーが発生することがあります。詳細はトラブルシューティングガイドを参照してください。

2. 依存関係のインストール

主要ライブラリ

# ナビゲーション
npm install @react-navigation/native @react-navigation/stack
npm install react-native-gesture-handler react-native-safe-area-context react-native-screens

# 状態管理
npm install recoil

# ストレージ
npm install @react-native-async-storage/async-storage

# 特殊機能
npm install react-native-background-timer
npm install react-native-sensors
npm install react-native-reanimated

開発用ライブラリ

# TypeScript関連
npm install --save-dev typescript @types/react @types/react-native

# ESLint/Prettier
npm install --save-dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

# テスト関連
npm install --save-dev jest @testing-library/jest-native @testing-library/react-hooks @testing-library/react-native

# Babel
npm install --save-dev babel-plugin-module-resolver

重要: 依存関係のインストール後は、iOS の場合はcd ios && pod installを実行してください。詳細はトラブルシューティングガイドを参照してください。

3. babel.config.js の設定

babel.config.js を以下のように変更します：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@': './src',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

変更理由

  • module-resolver: パスエイリアス（@/components/Buttonのような短い参照）を可能にし、深いディレクトリ構造でのインポートを簡略化
  • react-native-reanimated/plugin: 高性能アニメーションのサポート

4. ディレクトリ構造の作成

# コアディレクトリ
mkdir -p src/{core,features,shared,services,di}

# 機能モジュール
mkdir -p src/features/{timer,restrictions,posture}
mkdir -p src/features/timer/{domain,data,hooks,components,screens}
mkdir -p src/features/restrictions/{domain,data,hooks,components,native}
mkdir -p src/features/posture/{domain,data,hooks,components,sensors}

# 共有コンポーネント
mkdir -p src/shared/{components,hooks,utils,constants,theme}

# サービス
mkdir -p src/services/{navigation,storage,notification}

# テスト
mkdir -p __tests__/{core,features,services}

5. Git の初期化とリモートリポジトリの設定

git init
git add .
git commit -m "Initial commit: Project setup and architecture design"
git remote add origin https://github.com/horihorikeitaa/PomofocusGuardApp.git
git push -u origin main
⚠️ **GitHub.com Fallback** ⚠️