javascript-function-style

JavaScript/TypeScript の関数スタイル

これは厳格なガイドラインです。 これらのルールに正確に従ってください。

JavaScript および TypeScript プロジェクトでの関数の書き方です。

---

関数宣言とアロー関数

次の場合は function キーワードを使用します：

• 通常の関数定義
• トップレベル関数
• ホイスティングが必要な名前付き関数

次の場合はアロー関数を使用します：

• 配列メソッド（.map()、.filter()、.reduce()）
• インラインコールバック
• React コンポーネントのプロパティ
• 字句的な this のバインディングが必要な場合

---

例

// ✅ Regular functions
function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

function UserProfile({ userId }: Props) {
  return <div>{userId}</div>;
}

// ✅ Arrow functions in appropriate contexts
const numbers = [1, 2, 3].map(n => n * 2);

const handleClick = () => {
  console.log('clicked');
};

<Button onClick={() => handleSubmit()} />

---

このパターンを採用する理由

• 一貫性：明確なルールにより、コードベースの予測可能性が高まります
• 可読性：関数宣言はより明示的です
• 柔軟性：アロー関数が役立つ場面（簡潔さ、字句スコープ）で使用できます

---

継続的な改善

開発者が、このスキルによって防止されるべき動作を修正した場合は、今後同じ修正を防ぐために、このスキルに加える具体的な修正案を提案してください。