eslint-plugin-smarthr 6.19.0 → 6.20.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.20.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.19.0...eslint-plugin-smarthr-v6.20.0) (2026-06-16)
+
+
+### Features
+
+* **best-practice-for-no-unnecessary-variable:** export { xxx as yyy } パターンで適切なメッセージを表示 ([#1375](https://github.com/kufu/tamatebako/issues/1375)) ([52d90fa](https://github.com/kufu/tamatebako/commit/52d90fa6eb682c956d71a12269d2cc2c4173d3dd))
+* 依存配列に不安定な参照を含めることを禁止するルールを追加 ([#1376](https://github.com/kufu/tamatebako/issues/1376)) ([af7c18e](https://github.com/kufu/tamatebako/commit/af7c18e74ce38391078a0bd14bf815529e852f8a))
+
+
+### Bug Fixes
+
+* best-practice-for-rest-parametersでin演算子も内部属性アクセスとして検知 ([#1372](https://github.com/kufu/tamatebako/issues/1372)) ([086b414](https://github.com/kufu/tamatebako/commit/086b414ef731ebd27aee935f2d31aa5d303dd9fd))
+* lazy-variable/no-unnecessary-variableでjsxタグ名を正しく扱う ([#1382](https://github.com/kufu/tamatebako/issues/1382)) ([391fe7e](https://github.com/kufu/tamatebako/commit/391fe7ea655e030ded3d2a3d45ae511c2da75dd1))
+
 ## [6.19.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.18.0...eslint-plugin-smarthr-v6.19.0) (2026-06-10)
 
 

package/README.md

@@ -40,6 +40,7 @@
 - [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
 - [best-practice-for-text-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component)
 - [best-practice-for-unnesessary-early-return](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unnesessary-early-return)
+- [best-practice-for-unstable-dependencies](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unstable-dependencies)
 - [component-name](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name)
 - [design-system-guideline-bulk-action-row-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button)
 - [design-system-guideline-prohibit-dialog-button-icon](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-dialog-button-icon)

package/package.json

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

package/rules/best-practice-for-lazy-variable/index.js

@@ -84,7 +84,8 @@ function getVariableUsages(sourceCode, varName, declarationNode) {
     if (!node || typeof node !== 'object') return
 
     switch (node.type) {
-      case 'Identifier': {
+      case 'Identifier':
+      case 'JSXIdentifier': {
         // 変数名が一致し、変数参照である場合のみ収集（宣言自体は除外）
         if (node.name === varName && node !== declarationNode.id && isVariableReference(node)) {
           usages.push(node)

package/rules/best-practice-for-no-unnecessary-variable/index.js

@@ -50,9 +50,7 @@ function shouldSkipVariableExceptComplexity(node) {
     // UPPER_SNAKE_CASE形式の定数は除外（慣習的な定数命名）
     UPPER_SNAKE_CASE_PATTERN.test(node.id.name) ||
     // 関数式、TaggedTemplateExpressionは除外
-    EXCLUDED_INIT_TYPES.includes(node.init.type) ||
-    // React Hooks（useXxxで始まる関数）で初期化される変数は対象外
-    (node.init.type === 'CallExpression' && node.init.callee.type === 'Identifier' && node.init.callee.name.startsWith('use'))
+    EXCLUDED_INIT_TYPES.includes(node.init.type)
   ) {
     return true
   }
@@ -69,6 +67,16 @@ function shouldSkipVariableExceptComplexity(node) {
   return false
 }
 
+/**
+ * React Hooksで初期化されているかを判定
+ */
+function isReactHookCall(node) {
+  return node.init &&
+         node.init.type === 'CallExpression' &&
+         node.init.callee.type === 'Identifier' &&
+         node.init.callee.name.startsWith('use')
+}
+
 /**
  * 型注釈のテキストを取得
  * @param {object} sourceCode - SourceCode
@@ -165,7 +173,7 @@ function getVariableUsagesInScope(sourceCode, varName, declarationNode) {
    * 変数の使用箇所として収集すべきIdentifierかチェック
    */
   function isTargetIdentifier(node) {
-    return node.type === 'Identifier' &&
+    return (node.type === 'Identifier' || node.type === 'JSXIdentifier') &&
            node.name === varName &&
            node !== declarationNode.id &&
            !isInsideInit(node)
@@ -195,7 +203,11 @@ function getVariableUsagesInScope(sourceCode, varName, declarationNode) {
 
     // 変数名が一致するIdentifierを収集（宣言自体と初期化式内は除外）
     if (isTargetIdentifier(node)) {
-      usages.push(node)
+      // 同じノードオブジェクトを重複してカウントしないようにする
+      // (export { foo } の場合、localとexportedが同じノードを指すため)
+      if (!usages.includes(node)) {
+        usages.push(node)
+      }
       return
     }
 
@@ -371,6 +383,24 @@ function isAtStartOfExpressionStatement(usageNode) {
   return false
 }
 
+/**
+ * 使用箇所がexport { xxx as yyy }のExportSpecifierの中にあるかチェック
+ */
+function isInExportSpecifier(usageNode) {
+  let current = usageNode.parent
+  while (current) {
+    if (current.type === 'ExportSpecifier') {
+      return true
+    }
+    // ExportNamedDeclarationまで到達したら終了
+    if (current.type === 'ExportNamedDeclaration') {
+      return false
+    }
+    current = current.parent
+  }
+  return false
+}
+
 /**
  * 複雑さをチェックしてインライン化可能かを判定
  */
@@ -413,6 +443,19 @@ function analyzeVariable(sourceCode, node, options = {}) {
   }
 
   const usage = usages[0]
+
+  // JSXIdentifierとして使用されている場合は対象外（JSXタグ名はインライン化できない）
+  if (usage.type === 'JSXIdentifier') {
+    return null
+  }
+
+  const isExportSpec = isInExportSpecifier(usage)
+
+  // React Hooks呼び出しは対象外（ただしexport { xxx as yyy }パターンは対象）
+  if (!isExportSpec && isReactHookCall(node)) {
+    return null
+  }
+
   const typeAnnotation = getTypeAnnotationText(sourceCode, node)
 
   // 複雑さチェック
@@ -425,6 +468,7 @@ function analyzeVariable(sourceCode, node, options = {}) {
     varName,
     usage,
     typeAnnotation,
+    isExportSpecifier: isExportSpec,
   }
 }
 
@@ -438,6 +482,7 @@ module.exports = {
     schema: SCHEMA,
     messages: {
       inlineVariable: '変数"{{name}}"は一度しか使用されていません。直接使用してください。',
+      exportDirectly: '変数"{{name}}"は一度しか使用されていません。export const {{exportedName}} = ... の形式で直接エクスポートしてください。',
     },
   },
   create(context) {
@@ -450,12 +495,35 @@ module.exports = {
         const analysis = analyzeVariable(sourceCode, node, options)
 
         if (analysis) {
-          context.report({
-            node: analysis.node,
-            messageId: 'inlineVariable',
-            data: { name: analysis.varName },
-            fix: fix ? createInlineFixer(sourceCode, analysis.node, analysis.usage, analysis.typeAnnotation) : null,
-          })
+          // export { xxx as yyy } パターンの場合は異なるメッセージを使用
+          if (analysis.isExportSpecifier) {
+            // ExportSpecifierからエクスポート名を取得
+            let exportedName = analysis.varName
+            let current = analysis.usage.parent
+            while (current && current.type !== 'ExportSpecifier') {
+              current = current.parent
+            }
+            if (current && current.type === 'ExportSpecifier' && current.exported) {
+              exportedName = current.exported.name
+            }
+
+            context.report({
+              node: analysis.node,
+              messageId: 'exportDirectly',
+              data: {
+                name: analysis.varName,
+                exportedName,
+              },
+              fix: fix ? createInlineFixer(sourceCode, analysis.node, analysis.usage, analysis.typeAnnotation) : null,
+            })
+          } else {
+            context.report({
+              node: analysis.node,
+              messageId: 'inlineVariable',
+              data: { name: analysis.varName },
+              fix: fix ? createInlineFixer(sourceCode, analysis.node, analysis.usage, analysis.typeAnnotation) : null,
+            })
+          }
         }
       },
     }

package/rules/best-practice-for-rest-parameters/index.js

@@ -2,6 +2,15 @@ const SCHEMA = []
 
 const REST_REGEX = /(^r|R)est$/
 const MEMBER_EXPRESSION_REST_REGEX = /^(r|[a-zA-Z0-9_]+R)est\./
+
+const UNFORMAT_NAME__REST_ELEMENT_SELECTOR = `RestElement:not([argument.name=${REST_REGEX}])`
+const CONFUSING_NAME_VARIABLE_SELECTOR_1 = `:not(:matches(RestElement,JSXSpreadAttribute,JSXSpreadAttribute > TSAsExpression,SpreadElement,SpreadElement > TSAsExpression,MemberExpression,BinaryExpression,VariableDeclarator,ArrayExpression,CallExpression,ObjectPattern > Property,ObjectExpression > Property,ReturnStatement,ArrowFunctionExpression)) > Identifier[name=${REST_REGEX}]`
+const CONFUSING_NAME_VARIABLE_SELECTOR_2 = `:matches(VariableDeclarator[id.name=${REST_REGEX}],ObjectPattern > Property[value.name=${REST_REGEX}],ObjectExpression > Property[key.name=${REST_REGEX}])`
+const ARROW_FUNCTION_PARAMS_SELECTOR = `ArrowFunctionExpression > Identifier[name=${REST_REGEX}]`
+const USE_REST_VIORATION_SELECTOR_MEMBER_EXPRESSION = `MemberExpression[object.name=${REST_REGEX}]`
+const USE_REST_VIORATION_SELECTOR_IN_OPERATOR = `BinaryExpression[operator="in"][right.name=${REST_REGEX}]`
+const USE_REST_VIORATION_OBJECT_PATTERN = `VariableDeclarator[id.type='ObjectPattern'][init.name=${REST_REGEX}]`
+
 const DETAIL_LINK = `
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-rest-parameters`
 
@@ -21,46 +30,47 @@ module.exports = {
  - 残余引数(rest parameters)と混同する可能性があるため別の名称に修正してください`,
       })
     }
+    const actionUseRestVioration = (node) => {
+      context.report({
+        node,
+        message: `残余引数内の属性を参照しないでください${DETAIL_LINK}`,
+      })
+    }
     const actionMemberExpressionName = (node) => {
       if (node.parent.type === 'MemberExpression') {
         return actionMemberExpressionName(node.parent)
       }
 
       if (MEMBER_EXPRESSION_REST_REGEX.test(context.sourceCode.getText(node))){
-        context.report({
-          node,
-          message: `残余引数内の属性を参照しないでください${DETAIL_LINK}`,
-        })
+        actionUseRestVioration(node)
       }
     }
 
     return {
-      [`ObjectPattern[properties.length=1]>RestElement`]: (node) => {
+      'ObjectPattern[properties.length=1]>RestElement': (node) => {
         context.report({
           node,
           message: `意味のない残余引数のため、単一の引数に変更してください${DETAIL_LINK}`,
         })
       },
-      [`RestElement:not([argument.name=${REST_REGEX}])`]: (node) => {
+      [UNFORMAT_NAME__REST_ELEMENT_SELECTOR]: (node) => {
         context.report({
           node,
           message: `残余引数には ${REST_REGEX} とマッチする名称を指定してください${DETAIL_LINK}`,
         })
       },
-      [`:not(:matches(RestElement,JSXSpreadAttribute,JSXSpreadAttribute > TSAsExpression,SpreadElement,SpreadElement > TSAsExpression,MemberExpression,VariableDeclarator,ArrayExpression,CallExpression,ObjectPattern > Property,ObjectExpression > Property,ReturnStatement,ArrowFunctionExpression)) > Identifier[name=${REST_REGEX}]`]: actionNotRest,
-      [`:matches(VariableDeclarator[id.name=${REST_REGEX}],ObjectPattern > Property[value.name=${REST_REGEX}],ObjectExpression > Property[key.name=${REST_REGEX}])`]: actionNotRest,
-      [`MemberExpression[object.name=${REST_REGEX}]`]: actionMemberExpressionName,
-      [`ArrowFunctionExpression > Identifier[name=${REST_REGEX}]`]: (node) => {
+      [CONFUSING_NAME_VARIABLE_SELECTOR_1]: actionNotRest,
+      [CONFUSING_NAME_VARIABLE_SELECTOR_2]: actionNotRest,
+      [ARROW_FUNCTION_PARAMS_SELECTOR]: (node) => {
         if (node !== node.parent.body) {
           actionNotRest(node)
         }
       },
-      [`VariableDeclarator[id.type='ObjectPattern'][init.name=${REST_REGEX}]`]: (node) => {
-        context.report({
-          node,
-          message: `残余引数内の属性を参照しないでください${DETAIL_LINK}`,
-        })
+      [USE_REST_VIORATION_SELECTOR_MEMBER_EXPRESSION]: actionMemberExpressionName,
+      [USE_REST_VIORATION_SELECTOR_IN_OPERATOR]: (node) => {
+        actionUseRestVioration(node.right)
       },
+      [USE_REST_VIORATION_OBJECT_PATTERN]: actionUseRestVioration,
     }
   },
 }

package/rules/best-practice-for-unstable-dependencies/README.md

@@ -0,0 +1,287 @@
+# best-practice-for-unstable-dependencies
+
+React Hooksの依存配列に不安定な参照（オブジェクト、配列、関数、ReactNodeなど）を含めることを禁止します。
+
+これらの値は参照が頻繁に変わるため、依存配列に含めると不要な再実行や無限ループの原因となります。
+
+**デフォルトでは `children` のみを検出します。**他の変数名を検出したい場合は、オプションで追加してください。
+
+## 不安定な参照の種類（オプションで追加可能）
+
+- **ReactNode**: `children`（デフォルト）、`icon`、`prefix`、`suffix`など
+- **オブジェクト**: `object`、`config`、`options`、`settings`など
+- **配列**: `items`、`list`、`data`、`records`など
+- **関数**: `callback`、`handler`、`onClick`、`onChange`、`onSubmit`など
+
+## ❌ NG
+
+### children（デフォルトで検出）
+
+```javascript
+useEffect(() => {
+  console.log(children)
+}, [children])
+```
+
+```javascript
+const memoized = useMemo(() => {
+  return children.length
+}, [children])
+```
+
+### オプション追加時の例
+
+以下は `additionalUnstableNames` オプションで変数名を追加した場合の検出例です。
+
+**オブジェクト:**
+
+```javascript
+// additionalUnstableNames: ["object"] を設定した場合
+useEffect(() => {
+  console.log(object.key)
+}, [object])
+```
+
+**配列:**
+
+```javascript
+// additionalUnstableNames: ["items"] を設定した場合
+const memoized = useMemo(() => {
+  return items.map(i => i.value)
+}, [items])
+```
+
+**関数:**
+
+```javascript
+// additionalUnstableNames: ["callback"] を設定した場合
+useEffect(() => {
+  callback()
+}, [callback])
+```
+
+## ✅ OK
+
+### 方法1: refを使用する（最も推奨）
+
+依存配列で再実行する必要がない変数は、refに保存して依存配列から除外します。
+
+**children（DOM要素のrefを使う場合）:**
+
+```javascript
+const childrenRef = useRef()
+
+useEffect(() => {
+  console.log(childrenRef.current)
+}, [/* childrenを含めない */])
+
+...
+
+return (
+  <Any ref={childrenRef}>{children}</Any>
+)
+```
+
+refは任意の値を保持でき、更新してもコンポーネントの再レンダリングをトリガーしません。
+
+```javascript
+const valueRef = useRef()
+valueRef.current = value  // レンダリングごとに最新の値に更新
+
+useEffect(() => {
+  // valueRef.currentを使用
+  console.log(valueRef.current)
+}, [/* valueを含めない */])
+```
+
+### 方法2: MutationObserverを使用する
+
+`children` の変更を検知する必要がある場合は、DOM要素にrefを設定してMutationObserverで監視します。
+
+```javascript
+const containerRef = useRef()
+
+useEffect(() => {
+  const observer = new MutationObserver(() => {
+    // children内のDOM要素が追加/削除されたときの処理
+    console.log('子要素が変更されました')
+  })
+
+  if (containerRef.current) {
+    // containerRef内の子要素の変更を監視
+    observer.observe(containerRef.current, {
+      childList: true,      // 直接の子要素の追加/削除を監視
+      subtree: true,        // 子孫要素の変更も監視（必要に応じて）
+    })
+  }
+
+  return () => observer.disconnect()
+}, [])  // childrenは依存配列に含めない
+
+...
+
+return (
+  <div ref={containerRef}>
+    {children}
+  </div>
+)
+```
+
+### 方法3: プリミティブ値のみを依存配列に含める
+
+オブジェクトや配列の場合は、必要なプリミティブ値のみを依存配列に含めます。
+
+```javascript
+// ❌ 配列全体を依存配列に含める
+useEffect(() => {
+  console.log(items.length)
+}, [items])
+
+// ✅ 必要な値のみを依存配列に含める
+useEffect(() => {
+  console.log(items.length)
+}, [items.length])
+```
+
+**スプレッド構文を使っている場合:**
+
+スプレッド構文（`...config`など）で展開している箇所は、実際に必要な値のみをベタ書きできないか検証してください。
+
+```javascript
+// ❌ オブジェクト全体を展開
+useEffect(() => {
+  const newConfig = { ...config, newProp: value }
+  doSomething(newConfig)
+}, [config, value])
+
+// ✅ 必要な値のみをベタ書き
+useEffect(() => {
+  const newConfig = {
+    apiUrl: config.apiUrl,
+    timeout: config.timeout,
+    newProp: value
+  }
+  doSomething(newConfig)
+}, [config.apiUrl, config.timeout, value])
+```
+
+**ヒント:** 多くの場合、スプレッド構文で展開しているオブジェクトは、実際には一部のプロパティしか使っていないことがあります。使用箇所を確認して、必要な値のみを明示的に指定することで、依存配列を最小限に抑えられます。配列の場合も、実際に必要なのは`length`や特定のインデックスの値だけかもしれません。
+
+### 方法4: useCallbackやuseMemoでメモ化する
+
+不安定な参照を安定化させるために、useCallbackやuseMemoでラップします。
+
+**関数の場合（useCallback）:**
+
+```javascript
+// ❌ 関数を直接依存配列に含める
+useEffect(() => {
+  callback()
+}, [callback])
+
+// ✅ useCallbackでメモ化
+const memoizedCallback = useCallback(callback, [/* callbackの依存関係 */])
+
+useEffect(() => {
+  memoizedCallback()
+}, [memoizedCallback])
+```
+
+**オブジェクトの場合（useMemo）:**
+
+```javascript
+// ❌ オブジェクトを直接依存配列に含める
+useEffect(() => {
+  console.log(config.apiUrl)
+}, [config])
+
+// ✅ useMemoでメモ化
+const memoizedConfig = useMemo(() => config, [/* configの依存関係 */])
+
+useEffect(() => {
+  console.log(memoizedConfig.apiUrl)
+}, [memoizedConfig])
+```
+
+**注意:** メモ化は依存関係が明確な場合に有効です。依存関係が不明確な場合は、方法1のrefを使用することを推奨します。
+
+## オプション
+
+### additionalUnstableNames
+
+デフォルトでは `children` のみをチェックしますが、他の変数名を追加できます。
+
+```javascript
+{
+  "smarthr/best-practice-for-unstable-dependencies": ["error", {
+    "additionalUnstableNames": ["icon", "prefix", "object", "items", "callback"]
+  }]
+}
+```
+
+### additionalTargetHooks
+
+デフォルトでは `useEffect`, `useLayoutEffect`, `useCallback`, `useMemo` をチェックしますが、カスタムフックを追加できます。
+
+```javascript
+{
+  "smarthr/best-practice-for-unstable-dependencies": ["error", {
+    "additionalTargetHooks": ["useCustomHook", "useMyEffect"]
+  }]
+}
+```
+
+## 検出対象のHooks（デフォルト）
+
+- `useEffect`
+- `useCallback`
+- `useMemo`
+- `useLayoutEffect`
+
+## 使用例
+
+### 不安定な参照の追加
+
+プロジェクトでよく使われる不安定な参照を追加することで、チーム全体で一貫したコードを書くことができます。
+
+```javascript
+{
+  "smarthr/best-practice-for-unstable-dependencies": ["error", {
+    "additionalUnstableNames": [
+      // ReactNode
+      "icon",
+      "prefix",
+      "suffix",
+      // オブジェクト
+      "object",
+      "config",
+      "options",
+      "settings",
+      // 配列
+      "items",
+      "list",
+      "data",
+      "records",
+      // 関数
+      "callback",
+      "handler",
+      "onClick",
+      "onChange",
+      "onSubmit"
+    ]
+  }]
+}
+```
+
+### カスタムフックの追加
+
+プロジェクト固有のカスタムフックも検出対象に追加できます。
+
+```javascript
+{
+  "smarthr/best-practice-for-unstable-dependencies": ["error", {
+    "additionalUnstableNames": ["icon", "items"],
+    "additionalTargetHooks": ["useCustomEffect", "useMyMemo"]
+  }]
+}
+```

package/rules/best-practice-for-unstable-dependencies/index.js

@@ -0,0 +1,116 @@
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      additionalUnstableNames: {
+        type: 'array',
+        items: { type: 'string' },
+        default: [],
+      },
+      additionalTargetHooks: {
+        type: 'array',
+        items: { type: 'string' },
+        default: [],
+      },
+    },
+    additionalProperties: false,
+  },
+]
+
+const DOLLAR_SIGN_REGEX = /\$/g
+const DEFAULT_UNSTABLE_NAMES = ['children']
+const DEFAULT_TARGET_HOOKS = ['useEffect', 'useLayoutEffect', 'useCallback', 'useMemo']
+
+const DETAIL_LINK = `
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unstable-dependencies`
+
+/**
+ * 名前の配列から正規表現を生成する（$をエスケープして処理）
+ * @param {string[]} names - 名前の配列
+ * @returns {RegExp} 生成された正規表現
+ */
+function buildRegex(names) {
+  const pattern = names.reduce((acc, name, i) =>
+    acc + (i > 0 ? '|' : '') + name.replace(DOLLAR_SIGN_REGEX, '\\$'), '')
+  return new RegExp(`^(${pattern})$`)
+}
+
+/**
+ * 依存配列内の識別子を取得する
+ * @param {object} dependenciesArray - 依存配列のArrayExpressionノード
+ * @returns {Array<{node: object, name: string}>} 識別子の配列
+ */
+function getDependencyIdentifiers(dependenciesArray) {
+  const identifiers = []
+
+  if (dependenciesArray.type === 'ArrayExpression') {
+    for (const element of dependenciesArray.elements) {
+      if (element?.type === 'Identifier') {
+        // [children]
+        identifiers.push({
+          node: element,
+          name: element.name,
+        })
+      }
+    }
+  }
+
+  return identifiers
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+    messages: {
+      unstableDependency: '依存配列に不安定な参照と予想される"{{name}}"が含まれています。オブジェクトやReactNodeなどの参照は頻繁に変わるため、不要な再実行や無限ループの原因となります。{{detailLink}}',
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const unstableNames = [...DEFAULT_UNSTABLE_NAMES, ...(options.additionalUnstableNames || [])]
+    const targetHooks = [...DEFAULT_TARGET_HOOKS, ...(options.additionalTargetHooks || [])]
+
+    const unstableNamesRegex = buildRegex(unstableNames)
+    const targetHooksRegex = buildRegex(targetHooks)
+
+    return {
+      CallExpression(node) {
+        // 対象のHooksかチェック
+        if (
+          node.callee.type !== 'Identifier' ||
+          !targetHooksRegex.test(node.callee.name)
+        ) {
+          return
+        }
+
+        // 第2引数（依存配列）を取得
+        const dependenciesArray = node.arguments[1]
+        if (!dependenciesArray) {
+          return
+        }
+
+        // 依存配列内の識別子を取得
+        const identifiers = getDependencyIdentifiers(dependenciesArray)
+
+        // 不安定な参照と予想される名前が含まれているかチェック
+        for (const identifier of identifiers) {
+          if (unstableNamesRegex.test(identifier.name)) {
+            context.report({
+              node: identifier.node,
+              messageId: 'unstableDependency',
+              data: {
+                name: identifier.name,
+                detailLink: DETAIL_LINK,
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-lazy-variable.js

@@ -6,6 +6,9 @@ const ruleTester = new RuleTester({
     parserOptions: {
       ecmaVersion: 2020,
       sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
     },
   },
 })
@@ -405,6 +408,26 @@ ruleTester.run('best-practice-for-lazy-variable', rule, {
         }
       `,
     },
+    // JSX: 複数回使用されている（useSectionWrapperの引数とJSXタグ名）
+    {
+      code: `
+        const Component = as || 'div'
+        const Wrapper = useSectionWrapper(Component)
+        const body = <Component {...rest} ref={ref} className={actualClassName} />
+      `,
+    },
+    // JSX: if文の中でJSXタグとして使用、その前にも使用（2回使用）
+    {
+      code: `
+        function test() {
+          const Component = as || 'div'
+          const Wrapper = useSectionWrapper(Component)
+          if (condition) {
+            return <Component {...rest} ref={ref} />
+          }
+        }
+      `,
+    },
   ],
   invalid: [
     // ネストした早期return
@@ -465,6 +488,34 @@ ruleTester.run('best-practice-for-lazy-variable', rule, {
         },
       ],
     },
+    // JSX: if文の中でのみJSXタグとして使用（1回のみなので移動対象）
+    {
+      code: `
+        function test() {
+          const Component = as || 'div'
+          someCode()
+          if (condition) {
+            return <Component {...rest} ref={ref} />
+          }
+        }
+      `,
+      output: `
+        function test() {
+          someCode()
+          if (condition) {
+            const Component = as || 'div'
+            return <Component {...rest} ref={ref} />
+          }
+        }
+      `,
+      options: [{ fix: true }],
+      errors: [
+        {
+          messageId: 'moveToLazy',
+          data: { name: 'Component' },
+        },
+      ],
+    },
     // else内で使用
     {
       code: `

package/test/best-practice-for-no-unnecessary-variable.js

@@ -106,6 +106,13 @@ ruleTester.run('best-practice-for-no-unnecessary-variable', rule, {
         }
       `,
     },
+    // React Hooks除外（一度しか使用されていない場合でも、export { xxx as yyy } パターンでなければ除外）
+    {
+      code: `
+        const data = useFormContext()
+        console.log(data)
+      `,
+    },
     // await式除外
     {
       code: `
@@ -299,6 +306,24 @@ ruleTester.run('best-practice-for-no-unnecessary-variable', rule, {
       `,
       options: [{ maxComplexity: 3 }],
     },
+    // JSXIdentifier: JSXタグ名として使用されている場合はインライン化できない
+    {
+      code: `
+        function MyComponent({ as, rest }) {
+          const Component = as || 'div'
+          return <Component {...rest} />
+        }
+      `,
+    },
+    // JSXIdentifier: 複雑さが低くてもJSXタグ名はインライン化できない
+    {
+      code: `
+        function MyComponent() {
+          const Tag = 'div'
+          return <Tag>content</Tag>
+        }
+      `,
+    },
   ],
   invalid: [
     // 基本パターン
@@ -1106,5 +1131,57 @@ ruleTester.run('best-practice-for-no-unnecessary-variable', rule, {
         },
       ],
     },
+    // export { xxx as yyy } パターン（単純な値の場合はエラーになる）
+    {
+      code: `
+        const _foo = 123
+        export { _foo as foo }
+      `,
+      errors: [
+        {
+          messageId: 'exportDirectly',
+          data: { name: '_foo', exportedName: 'foo' },
+        },
+      ],
+    },
+    // export { xxx as yyy } パターン（関数値の参照の場合はエラーになる）
+    {
+      code: `
+        const _useFormContext = useFormContext
+        export { _useFormContext as useFormContext }
+      `,
+      errors: [
+        {
+          messageId: 'exportDirectly',
+          data: { name: '_useFormContext', exportedName: 'useFormContext' },
+        },
+      ],
+    },
+    // export { xxx as yyy } パターン（React Hooks呼び出しの場合でも除外されずエラーになる）
+    {
+      code: `
+        const _useFormContext = useFormContext()
+        export { _useFormContext as useFormContext }
+      `,
+      errors: [
+        {
+          messageId: 'exportDirectly',
+          data: { name: '_useFormContext', exportedName: 'useFormContext' },
+        },
+      ],
+    },
+    // export { xxx } パターン（asなし）
+    {
+      code: `
+        const useFormContext = hoge
+        export { useFormContext }
+      `,
+      errors: [
+        {
+          messageId: 'exportDirectly',
+          data: { name: 'useFormContext', exportedName: 'useFormContext' },
+        },
+      ],
+    },
   ],
 })

package/test/best-practice-for-rest-parameters.js

@@ -39,6 +39,8 @@ ruleTester.run('best-practice-for-rest-parameters', rule, {
       }
     ` },
     { code: `const removeIdAttr = ({ id: _id, ...rest }) => rest` },
+    // in演算子のleftにrestがあるケースは検知しない（rightのみ検知）
+    { code: `const hoge = (...rest) => { if (rest in obj) return null }` },
   ],
   invalid: [
     { code: `const hoge = ({ ...rest }) => {}`, errors: [ { message: `意味のない残余引数のため、単一の引数に変更してください${DETAIL_LINK}` } ] },
@@ -54,6 +56,17 @@ ruleTester.run('best-practice-for-rest-parameters', rule, {
     { code: `const hoge = rest.hoge`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
     { code: `const hoge = anyRest.hoge.fuga`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
     { code: `const { any } = rest`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
+    // in演算子の右辺も内部属性へのアクセスなのでエラー
+    { code: `const hoge = (...rest) => { if ('userMap' in rest) return null }`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
+    { code: `const hoge = ({ id, ...rest }) => 'key' in rest`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
+    // in演算子とプロパティアクセスの両方でエラー（2つ）
+    { code: `const hoge = (...rest) => { if ('userMap' in rest) return rest.userMap }`, errors: [ { message: ERROR_REST_CHILD_REF }, { message: ERROR_REST_CHILD_REF } ] },
+    // 極端なケース: rest in rest（rightのrestのみエラー）
+    { code: `const hoge = (...rest) => { if (rest in rest) return null }`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
+    // hogeRest in rest（rightのrestにエラー）
+    { code: `const hoge = (...rest) => { if (hogeRest in rest) return null }`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
+    // rest in hogeRest（rightのhogeRestにエラー）
+    { code: `const hoge = ({ id, ...rest }) => { if (rest in hogeRest) return null }`, errors: [ { message: ERROR_REST_CHILD_REF } ] },
   ]
 })
 

package/test/best-practice-for-unstable-dependencies.js

@@ -0,0 +1,284 @@
+const rule = require('../rules/best-practice-for-unstable-dependencies')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const DETAIL_LINK = `
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unstable-dependencies`
+
+ruleTester.run('best-practice-for-unstable-dependencies', rule, {
+  valid: [
+    // 依存配列なし
+    {
+      code: `
+        useEffect(() => {
+          console.log('mounted')
+        })
+      `,
+    },
+    // 空の依存配列
+    {
+      code: `
+        useEffect(() => {
+          console.log('mounted')
+        }, [])
+      `,
+    },
+    // childrenを含まない依存配列
+    {
+      code: `
+        useEffect(() => {
+          console.log(value)
+        }, [value])
+      `,
+    },
+    // useMemo
+    {
+      code: `
+        const memoized = useMemo(() => {
+          return value * 2
+        }, [value])
+      `,
+    },
+    // useCallback
+    {
+      code: `
+        const handleClick = useCallback(() => {
+          console.log('clicked')
+        }, [])
+      `,
+    },
+    // useLayoutEffect
+    {
+      code: `
+        useLayoutEffect(() => {
+          console.log('layout')
+        }, [value])
+      `,
+    },
+    // iconを追加で指定、childrenは含まれていない
+    {
+      code: `
+        useEffect(() => {
+          console.log(value)
+        }, [value])
+      `,
+      options: [{ additionalUnstableNames: ['icon'] }],
+    },
+    // カスタムフックを追加で指定、childrenは含まれていない
+    {
+      code: `
+        useCustom(() => {
+          console.log(value)
+        }, [value])
+      `,
+      options: [{ additionalTargetHooks: ['useCustom'] }],
+    },
+  ],
+  invalid: [
+    // useEffect with children
+    {
+      code: `
+        useEffect(() => {
+          console.log(children)
+        }, [children])
+      `,
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // useCallback with children
+    {
+      code: `
+        const handleClick = useCallback(() => {
+          console.log(children)
+        }, [children])
+      `,
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // useMemo with children
+    {
+      code: `
+        const value = useMemo(() => {
+          return children.length
+        }, [children])
+      `,
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // useLayoutEffect with children
+    {
+      code: `
+        useLayoutEffect(() => {
+          console.log(children)
+        }, [children])
+      `,
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // 複数の依存関係の中にchildrenがある
+    {
+      code: `
+        useEffect(() => {
+          console.log(value, children)
+        }, [value, children])
+      `,
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // カスタム設定でiconを指定
+    {
+      code: `
+        useEffect(() => {
+          console.log(icon)
+        }, [icon])
+      `,
+      options: [{ additionalUnstableNames: ['icon'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'icon', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // カスタム設定で複数指定
+    {
+      code: `
+        useEffect(() => {
+          console.log(icon, prefix)
+        }, [icon, prefix])
+      `,
+      options: [{ additionalUnstableNames: ['icon', 'prefix'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'icon', detailLink: DETAIL_LINK },
+        },
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'prefix', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // オブジェクト（object）を検出
+    {
+      code: `
+        useEffect(() => {
+          console.log(object.key)
+        }, [object])
+      `,
+      options: [{ additionalUnstableNames: ['object'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'object', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // 配列（items）を検出
+    {
+      code: `
+        const memoized = useMemo(() => {
+          return items.map(i => i.value)
+        }, [items])
+      `,
+      options: [{ additionalUnstableNames: ['items'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'items', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // 関数（callback）を検出
+    {
+      code: `
+        useEffect(() => {
+          callback()
+        }, [callback])
+      `,
+      options: [{ additionalUnstableNames: ['callback'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'callback', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // カスタムフック（useCustom）でchildrenを検出
+    {
+      code: `
+        useCustom(() => {
+          console.log(children)
+        }, [children])
+      `,
+      options: [{ additionalTargetHooks: ['useCustom'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // 複数のカスタムフックを指定
+    {
+      code: `
+        useCustom1(() => {
+          console.log(children)
+        }, [children])
+      `,
+      options: [{ additionalTargetHooks: ['useCustom1', 'useCustom2'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'children', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+    // カスタムフックと追加の不安定な名前を併用
+    {
+      code: `
+        useCustom(() => {
+          console.log(icon)
+        }, [icon])
+      `,
+      options: [{ additionalTargetHooks: ['useCustom'], additionalUnstableNames: ['icon'] }],
+      errors: [
+        {
+          messageId: 'unstableDependency',
+          data: { name: 'icon', detailLink: DETAIL_LINK },
+        },
+      ],
+    },
+  ],
+})