ReactプロジェクトでpropTypes関連の厳格すぎる警告を解消する設定

Reactプロジェクトで、propTypes に関連する警告が「厳しすぎる」と感じたことはないでしょうか。
実際にエラーではないのに警告として表示される場合や、不要なルールが適用されていることで開発の妨げになることがあります。
この記事では「propTypes に関連する厳密すぎるチェック」を緩和する方法を記載します。

---

よくある例

propTypes に関連してよく表示される警告

• 'onClick' is missing in props validation
• PropTypes is not defined

これらの警告は、propTypes を使用しない場合や、チェックが厳しすぎる場合に不必要と感じること多い

---

1. propTypes の警告を無効化する

propTypes を使用しない場合（TypeScript で型チェックを行う場合など）、ESLint で propTypes に関連する警告やエラーを無効化できる。

手順

1. プロジェクトに ESLint の設定ファイルを確認する

   • ファイル名：.eslintrc.json または eslint.config.js
   • 存在しない場合は新規作成

2. 設定ファイルに以下を追加

.eslintrc.json の例

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "react/prop-types": "off" // propTypes の警告を無効化
  }
}

eslint.config.js の例

module.exports = {
  extends: ["eslint:recommended", "plugin:react/recommended"],
  plugins: ["react"],
  rules: {
    "react/prop-types": "off" // propTypes の警告を無効化
  },
};

---

2. 必要なパッケージをインストール

ESLint の React プラグインがインストールされていない場合、以下のコマンドでインストール

npm install eslint eslint-plugin-react --save-dev

これにより、React 用の ESLint ルールが適用可能に

---

3. 設定が適用されない場合の対応

設定後も警告が残る場合は、以下の手順を試してみる。

キャッシュのクリア

ESLint のキャッシュが原因で設定が反映されないことがある。以下を実行

npx eslint --clear-cache

その後、再度 ESLint を実行する：

npx eslint . --fix

---

4. propTypes を使用する場合の設定例

propTypes を使用する場合、適切に設定することで警告を防ぐことができる。

例: propTypes を定義する

import PropTypes from 'prop-types';

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

Button.propTypes = {
  onClick: PropTypes.func.isRequired, // 必須の関数型
};

export default Button;

警告が発生するケース

以下のように propTypes を定義しない場合、警告が発生する：

'onClick' is missing in props validation

これを防ぐために、propTypes を適切に定義するか、上記のように警告を無効化する。

---

5. 厳密すぎるチェックが不要な場合の対処法

React 17+ の場合

React 17 以降ではJSX を使う際に import React from 'react'; が不要になったので、このため、以下のルールを無効化しておくと良いかもです

"react/react-in-jsx-scope": "off"

未使用変数の緩和

未使用の変数に関する警告が厳しい場合は、以下のようにルールを緩和

"no-unused-vars": "warn"

これにより、未使用の変数は警告として表示されるが、エラーとして扱われない。

---

6. まとめ

React プロジェクトで propTypes に関連する厳格すぎる警告を解消するには、

1. propTypes の警告を無効化する設定を追加する
2. ESLint の React プラグインをインストールする
3. 必要に応じてルールを緩和する

これらの手順で、開発を妨げる不要な警告を減らし、快適な環境を整えられます👏