Coding Standards - horihorikeitaa/PomofocusGuardApp GitHub Wiki

コーディング規約

1. 命名規則

コンポーネント

  • PascalCase（先頭大文字）: Button.tsx, UserProfile.tsx
  • 一つのファイルに一つのコンポーネント

フック

  • useプレフィックス + キャメルケース: useTimer(), usePostureDetection()

ファイル名

  • コンポーネント: PascalCase - Timer.tsx
  • ユーティリティ/サービス: キャメルケース - timerService.ts
  • テスト: .test.ts または .test.tsx の接尾辞

2. インポート順序

  1. 外部ライブラリ
  2. 内部モジュール（パスエイリアス順）
  3. 相対インポート
  4. スタイルインポート
// 推奨インポート順序
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { useRecoilState } from 'recoil';

import { TimerEntity } from '@/core/entities';
import { useNotification } from '@/shared/hooks';
import { Button } from '@/shared/components';

import { formatTime } from '../utils';
import styles from './Timer.styles';

3. コードフォーマット

  • インデント: 2スペース
  • 最大行長: 100文字
  • セミコロン: 必須
  • 引用符: シングルクォート
  • 括弧の間隔: スペースあり

4. コンポーネント設計

  • 小さく、集中したコンポーネント
  • 純粋なコンポーネントを優先
  • ビジネスロジックはカスタムフックに分離
  • propsの型定義を明示的に行う
interface ButtonProps {
  title: string;
  onPress: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ title, onPress, disabled = false }) => {
  return (
    <TouchableOpacity 
      onPress={onPress} 
      disabled={disabled}
      style={[styles.button, disabled && styles.buttonDisabled]}
    >
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

5. コメント

  • 複雑なロジックには説明コメントを追加
  • 公開APIには必ずJSDocコメントを付ける
  • 一時的なコードには // TODO: コメントを使用
  • 自明なことにはコメントを書かない

6. テスト規約

  • 各ユニットのテストファイルは同じディレクトリに配置
  • テスト記述はわかりやすく簡潔に
  • AAAパターン（Arrange-Act-Assert）に従う
  • モックは最小限に留める
⚠️ **GitHub.com Fallback** ⚠️