eslint-plugin-smarthr 6.22.0 → 6.22.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.22.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.22.0...eslint-plugin-smarthr-v6.22.1) (2026-07-03)
+
+
+### Bug Fixes
+
+* best-practice-for-reduce-redundant-callsでJSX属性の差分数に基づいて検出するように改善 ([#1446](https://github.com/kufu/tamatebako/issues/1446)) ([b74f734](https://github.com/kufu/tamatebako/commit/b74f734dd1315f8bf6cd2ccab5f21f0571326c74))
+
 ## [6.22.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.21.2...eslint-plugin-smarthr-v6.22.0) (2026-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.22.0",
+  "version": "6.22.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/best-practice-for-reduce-redundant-calls/README.md

@@ -106,22 +106,40 @@ const result = isAdmin ? notify('admin') : isModerator ? notify('moderator') : n
 ### パターン4: JSX/TSX
 
 **子要素なし（セルフクロージングタグ）の場合:**
-同じコンポーネント名なら、属性が異なっても検出されます。
+同じコンポーネント名で、属性の差分が**1つだけ**の場合に検出されます。
 
 ```jsx
-// 子要素なし、属性が異なる（検出される）
+// 属性の差分が1つ（role のみ異なる）→ 検出される
 function Component() {
-  if (isAdmin) {
-    return <UserCard name="Admin" role="admin" />
+  if (isModerator) {
+    return <UserCard role="moderator" />
   } else {
-    return <UserCard name="User" role="user" />
+    return <UserCard role="user" />
+  }
+}
+
+// 属性の差分が1つ（role のみ異なる、他は同じ）→ 検出される
+function Component({ data }) {
+  if (isModerator) {
+    return <UserCard role="moderator" hoge={data} />
+  } else {
+    return <UserCard role="user" hoge={data} />
+  }
+}
+
+// boolean属性の差分が1つ → 検出される
+function Component() {
+  if (condition) {
+    return <Component hoge={true} fuga={false} />
+  } else {
+    return <Component hoge={true} fuga={false} piyo />
   }
 }
 
 // 三項演算子
-const element = isAdmin
-  ? <UserCard name="Admin" role="admin" />
-  : <UserCard name="User" role="user" />
+const element = isModerator
+  ? <UserCard role="moderator" hoge={data} />
+  : <UserCard role="user" hoge={data} />
 ```
 
 **子要素あり の場合:**
@@ -254,6 +272,28 @@ if (condition) {
 }
 ```
 
+### JSX: 子要素なし、属性の差分が2つ以上の場合
+
+```jsx
+// 属性の差分が2つ以上（name と role が異なる）→ 意図的に分けていると判断
+function Component() {
+  if (isAdmin) {
+    return <UserCard name="Admin" role="admin" />
+  } else {
+    return <UserCard name="User" role="user" />
+  }
+}
+
+// FormattedMessage（id と defaultMessage が異なる = 差分2つ）
+function Component({ searchKeyword }) {
+  return searchKeyword === '' ? (
+    <FormattedMessage id="userRoles/addDialog/noUser" defaultMessage="追加できるアカウントがありません" />
+  ) : (
+    <FormattedMessage id="userRoles/addDialog/noResult" defaultMessage="該当するアカウントがありません" />
+  )
+}
+```
+
 ### JSX: 子要素あり、属性が異なる場合
 
 ```jsx
@@ -451,10 +491,10 @@ return (
 
 - メソッドチェーンは完全一致で検出します。例えば、`api.post('/endpoint1').send(dataA)` と `api.post('/endpoint2').send(dataB)` は検出されません（エンドポイントが異なるため）。
 - **JSXの検出条件:**
-  - **子要素なし（self-closing）の場合:** 同じコンポーネント名なら、属性が異なっても検出します。
+  - **子要素なし（self-closing）の場合:** 同じコンポーネント名で、属性の差分が1つだけの場合に検出します。差分が2つ以上の場合は、意図的に分けていると判断して検出しません。
   - **子要素ありの場合:** 同じコンポーネント名、同じ属性（値を含む）で、子要素が異なる場合に検出します。
   - **React.FragmentとFragmentは除外されます。** これらは単なるグループ化のためのものなので、検出対象外です。
-- JSXのspread attributes（`{...props}`）も含めて全属性を比較します。spreadの変数名が異なる場合（`{...propsA}` vs `{...propsB}`）は検出されません。
+- JSXのspread attributes（`{...props}`）がある場合は、完全一致のみ検出します。spreadの変数名が異なる場合（`{...propsA}` vs `{...propsB}`）や、片方だけspreadがある場合は検出されません。
 - **if文/switch文のearly returnパターン:** すべてのブランチが`return`で終わっている場合のみ、次のステートメントも検出対象に含まれます。`break`を使う場合は含まれません。
 - **switch文のfall-through:** 空のcaseは次のcaseにfall-throughし、最初に見つかった処理を実行するものとして扱います。
 - **switch文のdefaultケース:** defaultケースは最後のcaseなので、breakがなくても許容されます。

package/rules/best-practice-for-reduce-redundant-calls/index.js

@@ -67,11 +67,45 @@ module.exports = {
       }
 
       const firstSelfClosing = jsxElements[0].openingElement.selfClosing
-      let firstOpeningTag = undefined
+      const firstAttrs = jsxElements[0].openingElement.attributes
+
+      // Spread attributesがある場合は厳密比較のみ
+      const hasSpread = firstAttrs.some((a) => a.type === 'JSXSpreadAttribute')
+      if (hasSpread) {
+        const firstOpeningTag = sourceCode.getText(jsxElements[0].openingElement)
+
+        for (let i = 1; i < jsxElements.length; i++) {
+          // Spreadがある場合は完全一致のみ許可、片方だけSpreadがある場合は除外
+          if (
+            jsxElements[i].openingElement.selfClosing !== firstSelfClosing ||
+            getJSXElementName(jsxElements[i]) !== firstComponentName ||
+            !jsxElements[i].openingElement.attributes.some((a) => a.type === 'JSXSpreadAttribute') ||
+            sourceCode.getText(jsxElements[i].openingElement) !== firstOpeningTag
+          ) {
+            return
+          }
+        }
+
+        context.report({
+          node,
+          messageId: 'consolidateJSXElement',
+          data: { componentName: firstComponentName },
+        })
+        return
+      }
+
+      // 最初の要素の属性Mapを作成（1回のみ）
+      const firstAttrMap = new Map()
+      for (const attr of firstAttrs) {
+        if (attr.type === 'JSXAttribute') {
+          const name = attr.name.name
+          const value = attr.value ? sourceCode.getText(attr.value) : 'true'
+          firstAttrMap.set(name, value)
+        }
+      }
 
-      // 1つのループで全チェック（早期終了可能）
+      // 各要素と比較
       for (let i = 1; i < jsxElements.length; i++) {
-        // selfClosingとコンポーネント名をチェック
         if (
           jsxElements[i].openingElement.selfClosing !== firstSelfClosing ||
           getJSXElementName(jsxElements[i]) !== firstComponentName
@@ -79,14 +113,40 @@ module.exports = {
           return
         }
 
-        // selfClosingでない場合は開始タグ全体を比較（属性含む）
-        if (!firstSelfClosing) {
-          if (firstOpeningTag === undefined) {
-            firstOpeningTag = sourceCode.getText(jsxElements[0].openingElement)
+        const currentAttrs = jsxElements[i].openingElement.attributes
+
+        // Spreadがある場合は除外
+        if (currentAttrs.some((a) => a.type === 'JSXSpreadAttribute')) {
+          return
+        }
+
+        // 差分カウント（2以上で早期リターン）
+        let diffCount = 0
+        const checkedKeys = new Set()
+
+        // 現在の要素の属性を走査
+        for (const attr of currentAttrs) {
+          if (attr.type === 'JSXAttribute') {
+            const name = attr.name.name
+            const value = attr.value ? sourceCode.getText(attr.value) : 'true'
+            checkedKeys.add(name)
+
+            if (!firstAttrMap.has(name) || firstAttrMap.get(name) !== value) {
+              diffCount++
+              if (diffCount >= 2) {
+                return // 差分2以上 → 意図的に分けている
+              }
+            }
           }
+        }
 
-          if (sourceCode.getText(jsxElements[i].openingElement) !== firstOpeningTag) {
-            return
+        // 最初の要素にしかない属性もカウント
+        for (const key of firstAttrMap.keys()) {
+          if (!checkedKeys.has(key)) {
+            diffCount++
+            if (diffCount >= 2) {
+              return
+            }
           }
         }
       }

package/test/best-practice-for-reduce-redundant-calls.js

@@ -94,6 +94,42 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         }
       `,
     },
+    // JSX: selfClosing、spread attributesの内容が異なる
+    {
+      code: `
+        function Component() {
+          if (condition) {
+            return <Component {...propsA} />
+          } else {
+            return <Component {...propsB} />
+          }
+        }
+      `,
+    },
+    // JSX: selfClosing、spreadがある/ない
+    {
+      code: `
+        function Component() {
+          if (condition) {
+            return <Component name="test" />
+          } else {
+            return <Component {...props} />
+          }
+        }
+      `,
+    },
+    // JSX: selfClosing、spread + 通常属性でspreadが異なる
+    {
+      code: `
+        function Component() {
+          if (condition) {
+            return <Component {...propsA} name="test" />
+          } else {
+            return <Component {...propsB} name="test" />
+          }
+        }
+      `,
+    },
     // JSX: React.Fragment（同じ属性、異なる子要素）
     {
       code: `
@@ -367,6 +403,62 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         const element = condition ? <ComponentA>{child}</ComponentA> : <ComponentB>{child}</ComponentB>
       `,
     },
+    // JSX: selfClosing、属性が異なる（意図的に分けている）
+    {
+      code: `
+        function Component() {
+          if (isAdmin) {
+            return <UserCard name="Admin" role="admin" />
+          } else {
+            return <UserCard name="User" role="user" />
+          }
+        }
+      `,
+    },
+    // JSX: 三項演算子、selfClosing、属性が異なる
+    {
+      code: `
+        const element = isAdmin ? <UserCard name="Admin" role="admin" /> : <UserCard name="User" role="user" />
+      `,
+    },
+    // JSX: switch、selfClosing、属性が異なる
+    {
+      code: `
+        function Component() {
+          switch (type) {
+            case 'admin':
+              return <UserCard name="Admin" role="admin" />
+            case 'user':
+              return <UserCard name="User" role="user" />
+            default:
+              return <UserCard name="Guest" role="guest" />
+          }
+        }
+      `,
+    },
+    // JSX: selfClosing、FormattedMessage（属性が異なる）
+    {
+      code: `
+        function Component({ searchKeyword }) {
+          return searchKeyword === '' ? (
+            <FormattedMessage id="userRoles/addDialog/noUser" defaultMessage="追加できるアカウントがありません" />
+          ) : (
+            <FormattedMessage id="userRoles/addDialog/noResult" defaultMessage="該当するアカウントがありません" />
+          )
+        }
+      `,
+    },
+    // JSX: early return、selfClosing、属性が異なる
+    {
+      code: `
+        function Component() {
+          if (isAdmin) {
+            return <UserCard name="Admin" role="admin" />
+          }
+          return <UserCard name="User" role="user" />
+        }
+      `,
+    },
   ],
   invalid: [
     // ========================================
@@ -474,23 +566,6 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         },
       ],
     },
-    // early return: JSX
-    {
-      code: `
-        function Component() {
-          if (isAdmin) {
-            return <UserCard name="Admin" role="admin" />
-          }
-          return <UserCard name="User" role="user" />
-        }
-      `,
-      errors: [
-        {
-          messageId: 'consolidateJSXElement',
-          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
-        },
-      ],
-    },
     // early return: メソッドチェーン
     {
       code: `
@@ -592,18 +667,6 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         },
       ],
     },
-    // ネストした三項演算子でJSX（子要素なし）
-    {
-      code: `
-        const element = isAdmin ? <UserCard role="admin" /> : isModerator ? <UserCard role="moderator" /> : <UserCard role="user" />
-      `,
-      errors: [
-        {
-          messageId: 'consolidateJSXElement',
-          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
-        },
-      ],
-    },
 
     // ========================================
     // switch文
@@ -941,24 +1004,6 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
     // ========================================
     // JSX
     // ========================================
-    // JSX: 子要素なし、属性が異なる
-    {
-      code: `
-        function Component() {
-          if (isAdmin) {
-            return <UserCard name="Admin" role="admin" />
-          } else {
-            return <UserCard name="User" role="user" />
-          }
-        }
-      `,
-      errors: [
-        {
-          messageId: 'consolidateJSXElement',
-          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
-        },
-      ],
-    },
     // 基本的なJSX（同じコンポーネント、同じ属性、異なる子要素）
     {
       code: `
@@ -1007,18 +1052,6 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         },
       ],
     },
-    // JSX: 三項演算子、子要素なし、属性が異なる
-    {
-      code: `
-        const element = isAdmin ? <UserCard name="Admin" role="admin" /> : <UserCard name="User" role="user" />
-      `,
-      errors: [
-        {
-          messageId: 'consolidateJSXElement',
-          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
-        },
-      ],
-    },
     // JSX: spread attributesが同じ
     {
       code: `
@@ -1096,20 +1129,59 @@ ruleTester.run('best-practice-for-reduce-redundant-calls', rule, {
         },
       ],
     },
-    // JSX: switch、子要素なし、属性が異なる
+    // JSX: ネストした三項演算子、selfClosing、属性の差分が1つ
+    {
+      code: `
+        const element = isAdmin ? <UserCard role="admin" /> : isModerator ? <UserCard role="moderator" /> : <UserCard role="user" />
+      `,
+      errors: [
+        {
+          messageId: 'consolidateJSXElement',
+          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // JSX: selfClosing、属性の差分が1つ、他の属性は同じ
+    {
+      code: `
+        function Component({ data }) {
+          if (isModerator) {
+            return <UserCard role="moderator" hoge={data} />
+          } else {
+            return <UserCard role="user" hoge={data} />
+          }
+        }
+      `,
+      errors: [
+        {
+          messageId: 'consolidateJSXElement',
+          data: { componentName: 'UserCard', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // JSX: selfClosing、boolean属性の差分が1つ
     {
       code: `
         function Component() {
-          switch (type) {
-            case 'admin':
-              return <UserCard name="Admin" role="admin" />
-            case 'user':
-              return <UserCard name="User" role="user" />
-            default:
-              return <UserCard name="Guest" role="guest" />
+          if (condition) {
+            return <Component hoge={true} fuga={false} />
+          } else {
+            return <Component hoge={true} fuga={false} piyo />
           }
         }
       `,
+      errors: [
+        {
+          messageId: 'consolidateJSXElement',
+          data: { componentName: 'Component', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // JSX: 三項演算子、属性の差分が1つ
+    {
+      code: `
+        const element = isModerator ? <UserCard role="moderator" hoge={data} /> : <UserCard role="user" hoge={data} />
+      `,
       errors: [
         {
           messageId: 'consolidateJSXElement',