[ESLint] react/jsx-boolean-value

概要

ReactでJSXを記述する際、Boolean型のPropsにtrue値を渡す方法は2つあります。

// 明示的にtrueを渡す
<Hello personal={true} />

// 値を省略してtrueを渡す
<Hello personal />

どちらも同じ動作をしますが、コードの一貫性のために1つのスタイルに統一することが望ましいです。JSXでは値を省略するとtrueとみなされるため、{true}を省略する方がより簡潔で可読性が高くなります。

このブログポストでは、ESLintのreact/jsx-boolean-valueルールを使ってBoolean Propsのスタイルを統一する方法について紹介します。

react/jsx-boolean-value: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md

このブログポストはESLintとeslint-plugin-reactがプロジェクトに設定されていることを前提として説明します。

ReactプロジェクトにESLintを設定する方法については、以下のリンクを参考にしてください。

jsx-boolean-value

jsx-boolean-valueルールは、JSXでBoolean属性の表記方式を一貫して維持するように強制するルールです。このルールは--fixオプションで自動修正が可能です。

以下はjsx-boolean-valueルールのデフォルト設定（"never"）での例です。

誤った例:

<Hello personal={true} />

正しい例:

<Hello personal />

{true}を省略するだけでコードがより簡潔になり、不要なコードを減らすことができます。

jsx-boolean-valueの設定

jsx-boolean-valueルールを設定するために、.eslintrc.js（またはESLint設定ファイル）を開き、次のように修正します。

module.exports = {
  ...
  rules: {
    ...
    'react/jsx-boolean-value': ['error', 'never'],
  },
};

オプション

jsx-boolean-valueルールは以下のオプションを提供します。

オプション	説明
`"never"`（デフォルト）	`{true}`値を明示的に記述するとエラーを表示します。
`"always"`	値を省略するとエラーを表示します。

"never"オプションを使用すると、追加でassumeUndefinedIsFalseオプションを設定できます。

'react/jsx-boolean-value': ['error', 'never', { assumeUndefinedIsFalse: true }]

このオプションをtrueに設定すると、Boolean Propsに{false}を渡す代わりにProps自体を省略するように強制します。

// assumeUndefinedIsFalse: trueの場合

// 誤った例
<Hello personal={false} />

// 正しい例
<Hello />

jsx-boolean-valueの検査

設定が完了したら、次のコマンドでESLintを実行して検査できます。

npx eslint .

{true}値が明示的に記述されている箇所があれば、次のようなエラーメッセージが表示されます。

error  Value must be omitted for `true` props  react/jsx-boolean-value

--fixオプションを使用すると自動修正できます。

npx eslint . --fix

自動修正を実行すると、{true}値が省略された形に修正されます。

// 修正前
<Hello personal={true} />

// 修正後
<Hello personal />

Boolean Propsの設計

jsx-boolean-valueルールを適用すると、Boolean Propsを{true}なしで簡潔に記述できます。このルールを最大限に活用するには、Boolean Propsを設計する際にもtrueの時にアクティブになる方向でネーミングすることが重要です。

例えば、コンポーネントの非活性化状態を制御するPropsを設計する場合を見てみましょう。

誤った設計

isActiveのようなPropsを使用すると、非活性化状態を表現するために{false}を明示的に渡す必要があります。

// isActiveを使用する場合
<Button isActive={false} />

このようにすると、falseを渡すために常に{false}を明示しなければならず、jsx-boolean-valueルールのメリットを活かすことができません。

正しい設計

disabledのようにtrueの時に望む動作がアクティブになる方向でPropsを設計すると、値を省略して簡潔に記述できます。

// disabledを使用する場合
<Button disabled />

このようにBoolean Propsを設計する際は、そのPropsがtrueの時に使用される頻度が高い方向でネーミングすると、jsx-boolean-valueルールと合わせてより簡潔なコードを書くことができます。

誤った設計	正しい設計
`<Modal isVisible={false} />`	`<Modal hidden />`
`<Input isActive={false} />`	`<Input disabled />`
`<Text isWrapped={false} />`	`<Text nowrap />`

完了

このブログポストでは、ESLintのreact/jsx-boolean-valueルールを使ってJSXでBoolean Propsを簡潔に記述する方法について紹介しました。また、Boolean Propsを設計する際にtrueの時にアクティブになる方向でネーミングすると、より簡潔なコードを書けることも紹介しました。