Contributing Guide

このプロジェクトへの貢献ガイドラインです。開発に参加する前に必ずお読みください。

📋 目次

• 開発の流れ
• ブランチ命名規則
• コミットメッセージ規則
• プルリクエストのガイドライン
• コーディング規約

---

🔄 開発の流れ

1. Issue の確認

• 新機能追加やバグ修正の前に、該当する Issue が存在するか確認
• 存在しない場合は新しく Issue を作成

2. ブランチの作成

• dev ブランチから新しいブランチを切る
• ブランチ命名規則に従って命名

3. 開発

• コーディング規約に従って実装
• 適切な粒度でコミット

4. プルリクエストの作成

• dv ブランチに向けて PR を作成
• PR テンプレートに従って説明を記載

5. レビュー

• レビュアーのフィードバックに対応
• 承認後にマージ

---

📌 ブランチ命名規則

基本構文

状況説明/編集者名/編集するもの

状況説明の種類

種類	説明	使用例
feature	新機能の追加	新しいページやコンポーネントを作成する
fix	バグの修正	エラーや不具合を修正する
update	既存機能の改善・更新	デザイン変更、リファクタリングなど

具体例

# 新機能の追加
feature/taro/login-page
feature/hanako/user-profile-api
feature/taro/weather-search-form

# バグ修正
fix/hanako/header-layout
fix/taro/form-validation
fix/hanako/api-error-handling

# 既存機能の更新
update/taro/button-style
update/hanako/readme-documentation
update/taro/auth-flow-refactor

ポイント

• 編集者名はローマ字で記載（例: taro, hanako）
• 編集するものは英語で簡潔に（小文字とハイフン - を使用）
• スペースは使わない
• 分かりやすく具体的な名前をつける
• 長すぎる名前は避ける（3〜5単語程度が理想）

ブランチの作成と切り替え

# devブランチから新しいブランチを作成
git checkout dev
git pull origin dev
git checkout -b feature/taro/weather-dashboard

# 既存のブランチに切り替え
git checkout feature/taro/weather-dashboard

---

💬 コミットメッセージ規則

基本構文

[状況説明]編集内容（日本語）

状況説明の種類

種類	説明	使用例
add	新規ファイルや機能の追加	新しいページ、コンポーネント、APIの追加
fix	バグ修正	エラーや不具合の修正
update	機能修正（バグではない）	デザイン変更、文言修正、リファクタリング
remove	ファイルや機能の削除	不要なファイルやコードの削除
other	その他

具体例

# 新規追加
[add]ログインページを追加
[add]ユーザー登録APIを実装
[add]天気情報取得サービスを作成
[add]LoadingSpinnerコンポーネントを追加

# バグ修正
[fix]ヘッダーのレイアウト崩れを修正
[fix]フォームバリデーションのエラーを修正
[fix]APIレスポンスのエラーハンドリングを改善
[fix]認証トークンの有効期限チェックを修正

# 更新・改善
[update]ボタンのデザインを変更
[update]README.mdを更新
[update]認証フローをリファクタリング
[update]型定義を厳密化

# 削除
[remove]不要なコンポーネントを削除
[remove]使用していないユーティリティ関数を削除
[remove]デバッグ用のconsole.logを削除

ポイント

• 編集内容は日本語で簡潔に記載
• 何をしたのか一目で分かるように書く
• 1つのコミットには1つの変更内容を含める（Atomic Commits）
• 「〜を修正」「〜を追加」のように動詞で終わる
• 詳細な説明が必要な場合は、コミットメッセージの本文に記載

コミットの作成

# ステージングエリアにファイルを追加
git add src/components/features/auth/login-form.tsx

# コミットを作成
git commit -m "[add]ログインフォームコンポーネントを追加"

# 詳細な説明を含める場合
git commit -m "[fix]フォームバリデーションのエラーを修正" -m "- メールアドレスの形式チェックを追加
- パスワードの最小文字数を8文字に変更
- エラーメッセージの表示位置を調整"

---

🔀 プルリクエストのガイドライン

PR の作成前チェックリスト

• コードがビルドエラーなく動作する
• ESLint/Prettier のエラーがない
• 型エラーがない（TypeScript）
• 不要な console.log や デバッグコードを削除した
• コミットメッセージが規則に従っている

PR のタイトル

ブランチ名と同様の形式で記載:

[状況説明]編集内容（日本語）

例:

[add]天気情報ダッシュボードページを追加
[fix]ログインフォームのバリデーションエラーを修正
[update]ユーザープロフィールページのデザインを改善

PR の説明テンプレート

## 概要
この PR の目的を簡潔に説明してください。

## 変更内容
- 変更した内容をリストアップ
- 追加した機能
- 修正したバグ

## 関連 Issue
#Issue番号

## スクリーンショット（UI変更がある場合）
変更前後のスクリーンショットを添付

## チェックリスト
- [ ] コードがビルドエラーなく動作する
- [ ] ESLint/Prettier のエラーがない
- [ ] 型エラーがない
- [ ] 不要なデバッグコードを削除した
- [ ] レビュー可能な粒度にコミットを分割した

## レビューのポイント
レビュアーに特に確認してほしい点があれば記載

---

📝 コーディング規約

ディレクトリ構成

プロジェクトは機能ベースのディレクトリ構成を採用しています。詳細は .github/copilot-instructions.md を参照してください。

命名規則

対象	規則	例
コンポーネントファイル	ケバブケース	user-profile.tsx, login-form.tsx
コンポーネント関数	PascalCase	UserProfile(), LoginForm()
カスタムフック	camelCase + use	useAuth(), useUserData()
型定義	PascalCase	User, AuthState
定数	UPPER_SNAKE_CASE	API_BASE_URL, MAX_RETRY_COUNT
通常の変数・関数	camelCase	userName, fetchData()

TypeScript

• 必須: 全ての関数、変数、props に型を明示的に定義
• 推奨: any の使用を避け、適切な型を定義
• 推奨: インターフェースよりも型エイリアス（type）を優先

// ❌ 悪い例
const user = data;

// ✅ 良い例
const user: User = data;

React コンポーネント

• Server Components をデフォルトとし、必要な場合のみ Client Components を使用
• Named Export を使用（export default は避ける）
• Props の型定義は明示的に

// ✅ 良い例
interface UserProfileProps {
  userId: string;
  onUpdate?: (user: User) => void;
}

export function UserProfile({ userId, onUpdate }: UserProfileProps) {
  // ...
}

インポート順序

1. React 関連
2. 外部ライブラリ
3. 内部モジュール（@/ エイリアス使用）
4. 相対パス
5. CSS/型定義

import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Button } from '@/components/shared/ui/button';
import { useAuth } from '@/hooks/features/auth/use-auth';
import type { User } from '@/types/user.types';

スタイリング

• Tailwind CSS を使用
• shadcn/ui のコンポーネントを活用
• カスタムスタイルが必要な場合は className で指定

// ✅ 良い例
<div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-md">
  <Button variant="outline" size="sm">キャンセル</Button>
  <Button>送信</Button>
</div>

📚 参考資料

• Next.js 14 App Router ドキュメント
• TypeScript ハンドブック
• Tailwind CSS ドキュメント
• React Query ドキュメント
• Zustand ドキュメント

---

❓ 質問・相談

開発中に不明点がある場合は:

1. まず .github/copilot-instructions.md を確認
2. このガイドラインを確認
3. チームメンバーに相談
4. Issue で質問を投稿

---

プロジェクトへの貢献、ありがとうございます！🎉