- 読みやすさを優先する
- 初心者にも理解しやすいコードを心がける
- コンポーネントファイル:
PascalCase.tsx
- 例:
Button.tsx, UserProfile.tsx
- その他のファイル:
kebab-case.ts
- 例:
use-auth.ts, date-utils.ts
// 型定義
interface UserCardProps {
name: string;
role?: string;
onProfileClick: () => void;
};
// コンポーネント
export function UserCard ({ name, role, onProfileClick } : UserCardProps) => {
return (
<div onClick={onProfileClick}>
<h3>{name}</h3>
<p>{role}</p>
</div>
);
};
- 一つのコンポーネントは一つの責務を持つようにする
- 長すぎるコンポーネントは分割する（目安：200行以上）
- 関数の引数には原則
propsは用いず、分割代入を用いる
- 関数の引数には明示的に型定義する
- 原則としてtype aliasよりinterface を使用する
- 型名は PascalCase で記述する
- 意味のある型名をつける
-
any 型の使用はできるだけ避ける
export interface User {
id: string;
name: string;
email: string;
};
// 関連する型をまとめたファイルにする
export type UserCreateInput = Omit<User, 'id' | 'joinedAt'>;
export type UserUpdateInput = Partial<UserCreateInput>;
- try/catch で適切にエラーをキャッチする
- エラー発生時は、
console.error()を使ってエラー情報を出力する
try {
await fetchData();
} catch (error) {
console.error('データの取得に失敗しました', error);
setErrorMessage('データの読み込みに失敗しました。後でもう一度お試しください。');
}
- 機能単位でブランチを作成する
- ブランチ名は
feature/実装内容とする
- コミットメッセージやプルリクエストの内容などは日本語で書く
- 作成済みのissueでプルリクを作成する際には、projectの紐付けはしない
- プルリクエストのレビューを依頼したい時は、slackでReviewerメンションで依頼を出す
- Pull Request はレビューを受けてからマージする