AirbnbスタイルガイドのReact規約

Airbnbスタイルガイドを使用したReact/JSXのコード規約

ReactやJSXは、コンポーネントベースの開発を促進し、再利用可能なUI要素を作成するために非常に有用なツールです。しかし、コードベースが大規模になり、チームで開発を行う際には一貫したコーディングスタイルが重要になります。これにより、コードの可読性が向上し、バグの発生を減少させることができます。ここでは、Airbnbが提唱するReact/JSXのスタイルガイドに基づいて、ベストプラクティスを紹介します。

1. JSXの書き方

JSXの書き方には一貫したスタイルを採用することで、コードの可読性が向上します。Airbnbスタイルガイドに従うことで、コードが整理され、他の開発者が理解しやすくなります。

1.1 コンポーネントの名前はPascalCaseで書く

コンポーネントは常にPascalCase（各単語の先頭を大文字にする形式）で命名します。これにより、JSXコード内のHTML要素とコンポーネントを明確に区別できます。

jsx
CopyEdit
// 良い例
const MyComponent = () => {
  return <div>こんにちは！div>;
};

// 悪い例（CamelCaseで書かない）
const myComponent = () => {
  return <div>こんにちは！div>;
};

1.2 JSXタグは必ず閉じる

JSX内では、すべてのタグを閉じることが重要です。特に空要素（ や
など）にはスラッシュを追加して閉じる必要があります。

jsx
CopyEdit
// 良い例
"image.jpg" alt="description" />;
<br />

// 悪い例（閉じタグを忘れない）

1.3 インデントとスペース

インデントはスペース2つ分を使用することが推奨されます。また、JSXのプロパティは1行に1つずつ書き、可読性を向上させるために必要に応じて改行を入れます。

jsx
CopyEdit
// 良い例
<MyComponent
  name="React"
  description="A JavaScript library for building user interfaces"
/>

// 悪い例（インデントやスペースが適切でない）
<MyComponent name="React" description="A JavaScript library for building user interfaces"/>

2. プロパティの取り扱い

コンポーネントに渡すプロパティ（props）の扱いにもいくつかのルールがあります。これらを守ることで、コードが整然とし、誤解を避けることができます。

2.1 プロパティ名はキャメルケース（camelCase）

Reactのプロパティ名は、HTMLの属性とは異なり、キャメルケース（最初の単語は小文字、以降の単語の先頭を大文字にする）で記述します。

jsx
CopyEdit
// 良い例
<MyComponent customProp={true} />

// 悪い例（ハイフンやスネークケースは使わない）
<MyComponent custom-prop={true} />

2.2 プロパティにはデフォルト値を設定する

Reactコンポーネントには、defaultProps を使ってデフォルトの値を設定することが推奨されます。これにより、コンポーネントが意図しない動作をするリスクを減らせます。

jsx
CopyEdit
const MyComponent = ({ name = 'ゲスト' }) => {
  return <div>こんにちは、{name}さん！div>;
};

// または

MyComponent.defaultProps = {
  name: 'ゲスト',
};

3. イベントハンドラーとコールバック関数

Reactでは、イベントハンドラーの命名や使い方にもルールがあります。

3.1 イベントハンドラーはhandleで始める

イベントハンドラーの関数名は、handleで始めることが一般的です。これにより、関数の目的が明確になります。

jsx
CopyEdit
// 良い例
const handleClick = () => {
  console.log('ボタンがクリックされました');
};

// 悪い例（関数名に意味がない）
const clickEvent = () => {
  console.log('ボタンがクリックされました');
};

3.2 イベントハンドラー内でのthisの使い方

クラスコンポーネントでイベントハンドラーを使用する場合、thisを正しくバインドする必要があります。一般的に、アロー関数を使ってthisを自動的にバインドする方法が推奨されています。

jsx
CopyEdit
// 良い例（アロー関数でthisをバインド）
class MyComponent extends React.Component {
  handleClick = () => {
    console.log('クリックされた！');
  };

  render() {
    return <button onClick={this.handleClick}>クリックbutton>;
  }
}

4. 状態管理とフック

Reactでは、状態管理とフックの使用に関しても一定のルールがあります。これを守ることで、効率的かつエラーの少ないコードを書くことができます。

4.1 useStateやuseEffectを使う場合は、必ず依存配列を意識する

useEffectを使う際には、依存配列（[]）を適切に設定し、無駄なレンダリングを防ぐようにします。

jsx
CopyEdit
// 良い例
useEffect(() => {
  console.log('コンポーネントがマウントされました');
}, []);  // 空の依存配列で、マウント時だけ実行される

// 悪い例（依存配列を設定しない）
useEffect(() => {
  console.log('コンポーネントがレンダリングされるたびに実行');
});

4.2 状態の変更はuseStateの関数を使用

useStateで状態を管理する際、状態を直接変更せずに、提供される関数を使って変更します。

jsx
CopyEdit
// 良い例
const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);

// 悪い例（状態を直接変更する）
count = count + 1;

5. 条件付きレンダリングとループ

条件付きレンダリングやリストの表示にも適切な書き方があります。

5.1 条件付きレンダリングは&&を使う

条件付きレンダリングには、if文ではなく、&&を使った簡潔な書き方を推奨します。

jsx
CopyEdit
// 良い例
{isLoggedIn && <WelcomeMessage />}

// 悪い例（if文を使う）
if (isLoggedIn) {
  return <WelcomeMessage />;
}

5.2 mapを使ってリストをレンダリング

リストをレンダリングする際には、mapメソッドを使ってアイテムを反復処理します。また、各アイテムには一意のkeyを付けることが必須です。

jsx
CopyEdit
// 良い例
const items = ['りんご', 'バナナ', 'みかん'];

const itemList = items.map((item, index) => (
  <li key={index}>{item}li>
));

// 悪い例（keyを付け忘れる）
const itemList = items.map(item => <li>{item}li>);

6. エラーハンドリングとバグの防止

Reactでは、エラーハンドリングも重要です。特にコンポーネントのレンダリング中にエラーが発生した場合、適切にキャッチして表示することが推奨されます。

6.1 ErrorBoundaryを使う

React 16以降、ErrorBoundaryコンポーネントを使用することで、エラーハンドリングが可能になります。

jsx
CopyEdit
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>何か問題が発生しましたh1>;
    }
    return this.props.children;
  }
}

まとめ

Airbnbのスタイルガイドを守ることで、Reactアプリケーションのコードはより一貫性があり、保守しやすくなります。上記のベストプラクティスを遵守することで、チーム内でのコーディングスタイルのばらつきを防ぎ、エラーの発生を最小限に抑えることができます。