【初心者向け】React コンポーネントの 'displayName': 何のために使う？ 設定方法とメリットを徹底解説

React コンポーネントの 'displayName' とは？

• デバッグ: エラーメッセージや警告メッセージにコンポーネントの名前を表示します。コンポーネントに名前が設定されていない場合、単に "Component" と表示され、問題の特定が難しくなります。
• React DevTools: React DevTools では、コンポーネントツリーをナビゲートしたり、コンポーネントの状態やプロパティを調べたりする際に、'displayName' が使用されます。
• スタイルガイド: 一部のスタイルガイドでは、'displayName' を使用してコンポーネントの一貫性を保つことを推奨しています。

'displayName' の設定方法

'displayName' は、コンポーネント定義の際に設定できます。以下に、例を示します。

// 関数コンポーネント
function MyComponent() {
  return <div>My Component</div>;
}

// クラスコンポーネント
class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

// 'displayName' を明示的に設定
MyComponent.displayName = 'MyCustomComponent';

ESLint による 'displayName' のチェック

'eslint-plugin-react' という ESLint プラグインには、'react/display-name' というルールがあります。このルールは、コンポーネントに 'displayName' が設定されていることをチェックします。このルールは、React の推奨事項に従い、コードの可読性とデバッグ性を向上させるために役立ちます。

'displayName' を使用する利点

'displayName' を使用することで、以下の利点があります。

• デバッグの容易化: エラーメッセージや警告メッセージにコンポーネントの名前が表示されるため、問題の特定が容易になります。
• React DevTools の使いやすさ: React DevTools でコンポーネントを操作する際に、'displayName' が役立ちます。
• コードの一貫性: スタイルガイドに従って 'displayName' を設定することで、コードの一貫性を保つことができます。

'displayName' は、React コンポーネントに名前を付けるためのプロパティです。このプロパティは、デバッグ、React DevTools の操作、コードの一貫性などに役立ちます。ESLint の 'react/display-name' ルールを使用して、すべてのコンポーネントに 'displayName' が設定されていることを確認することをお勧めします。

function MyComponent() {
  return <div>My Component</div>;
}

// 'displayName' を明示的に設定
MyComponent.displayName = 'MyCustomComponent';

class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

// 'displayName' をコンポーネント内で設定
MyComponent.displayName = 'MyCustomComponent';

例 3: ESLint ルールによる 'displayName' の自動設定

// .eslintrc.json ファイル
{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react/display-name": ["error", { "ignoreFuncNames": true }]
  }
}

// コンポーネント定義
function MyComponent() {
  return <div>My Component</div>;
}

// この場合、'MyComponent' という名前が自動的に 'displayName' に設定されます。

この例では、以下の点に注意してください。

• 関数コンポーネントとクラスコンポーネントの両方で、'displayName' を設定する方法を示しています。
• ESLint ルールを使用して、コンポーネント名から自動的に 'displayName' を設定する方法を示しています。
• 'ignoreFuncNames' オプションを使用すると、コンポーネント名が関数名と同じ場合でも、'displayName' を自動的に設定することができます。

高階コンポーネント (HOC) を使用して、コンポーネントに 'displayName' を追加することができます。以下に、例を示します。

const withDisplayName = (WrappedComponent, displayName) => {
  const ComponentWithDisplayName = (props) => <WrappedComponent {...props} />;
  ComponentWithDisplayName.displayName = displayName;
  return ComponentWithDisplayName;
};

const MyComponent = () => <div>My Component</div>;

// HOC を使用して 'displayName' を設定
const MyComponentWithDisplayName = withDisplayName(MyComponent, 'MyCustomComponent');

React.memo を使用する

import React from 'react';

const MyComponent = () => <div>My Component</div>;

// React.memo を使用して 'displayName' を設定
const MyComponentWithDisplayName = React.memo(MyComponent, 'MyCustomComponent');

createElement を使用する

import React from 'react';

const MyComponent = () => <div>My Component</div>;

// createElement を使用して 'displayName' を設定
const MyComponentWithDisplayName = React.createElement(
  MyComponent,
  { displayName: 'MyCustomComponent' },
);

注意事項

これらの方法は、主に高度なユースケースで使用されます。ほとんどの場合、前述の基本的な方法で 'displayName' を設定することが十分です。