eslint-plugin-smarthr 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.
 
+## [1.4.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.3.0...eslint-plugin-smarthr-v1.4.0) (2025-03-06)
+
+
+### Features
+
+* best-practice-for-tailwind-prohibit-root-margin ([#523](https://github.com/kufu/tamatebako/issues/523)) ([b14700a](https://github.com/kufu/tamatebako/commit/b14700a17b1c5496e50c6c920f0281bf3ec1d7da))
+
+## [1.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.2.0...eslint-plugin-smarthr-v1.3.0) (2025-02-21)
+
+
+### Features
+
+* tailwind-variantsの使い方をチェックするルールを追加 ([#480](https://github.com/kufu/tamatebako/issues/480)) ([1501f05](https://github.com/kufu/tamatebako/commit/1501f05e84492e7671a4dc95ef08b15360a1c309))
+
+
+### Bug Fixes
+
+* [a11y-input-has-name-attribute]Inputにreact-hook-formのregisterが指定されている場合はエラーにならないようにする ([#490](https://github.com/kufu/tamatebako/issues/490)) ([2fc6abe](https://github.com/kufu/tamatebako/commit/2fc6abe9515a06dbf7e823da556e045402298a1b))
+
 ## [1.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.1.0...eslint-plugin-smarthr-v1.2.0) (2025-01-09)
 
 

package/README.md

@@ -21,6 +21,8 @@
 - [best-practice-for-date](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-date)
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog)
+- [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-tailwind-prohibit-root-margin](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=20.18.1"
+    "node": ">=20.18.3"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.14.0"
+    "typescript-eslint": "^8.19.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "71d56c769bf74139d828b181bec39fb148d9b5ca"
+  "gitHead": "49a1837e61d27cf7f1476d2026a63164542df55d"
 }

package/rules/a11y-input-has-name-attribute/index.js

@@ -1,27 +1,42 @@
-const { generateTagFormatter } = require('../../libs/format_styled_components');
+const fs = require('fs')
+
+const JSON5 = require('json5')
+
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const OPTION = (() => {
+  const file = `${process.cwd()}/package.json`
+
+  if (!fs.existsSync(file)) {
+    return {}
+  }
+
+  const json = JSON5.parse(fs.readFileSync(file))
+  const dependencies = [...Object.keys(json.dependencies || {}), ...Object.keys(json.devDependencies || {})]
+
+  return {
+    react_hook_form: dependencies.includes('react-hook-form'),
+  }
+})()
 
 const EXPECTED_NAMES = {
   '(i|I)nput$': 'Input$',
   '(t|T)extarea$': 'Textarea$',
   '(s|S)elect$': 'Select$',
-  'InputFile$': 'InputFile$',
-  'RadioButton$': 'RadioButton$',
-  'RadioButtonPanel$': 'RadioButtonPanel$',
+  InputFile$: 'InputFile$',
+  RadioButton$: 'RadioButton$',
+  RadioButtonPanel$: 'RadioButtonPanel$',
   'Check(b|B)ox$': 'CheckBox$',
   'Combo(b|B)ox$': 'ComboBox$',
   '(Date|Wareki)Picker$': '(Date|Wareki)Picker$',
-  'TimePicker$': 'TimePicker$',
-  'DropZone$': 'DropZone$',
+  TimePicker$: 'TimePicker$',
+  DropZone$: 'DropZone$',
 }
 const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
 const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
 const INPUT_TAG_REGEX = /(i|I)nput$/
 const RADIO_BUTTON_REGEX = /RadioButton(Panel)?$/
 
-const findNameAttr = (a) => a?.name?.name === 'name'
-const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
-const findRadioInput = (a) => a.name?.name === 'type' && a.value.value === 'radio'
-
 const MESSAGE_PART_FORMAT = `"${INPUT_NAME_REGEX.toString()}"にmatchするフォーマットで命名してください`
 const MESSAGE_UNDEFINED_NAME_PART = `
  - ブラウザの自動補完が有効化されるなどのメリットがあります
@@ -38,7 +53,7 @@ const SCHEMA = [
       checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
-  }
+  },
 ]
 
 /**
@@ -56,25 +71,49 @@ module.exports = {
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
+        const { name, attributes } = node
+        const nodeName = name.name || ''
 
         if (nodeName.match(TARGET_TAG_NAME_REGEX)) {
-          const nameAttr = node.attributes.find(findNameAttr)
+          let nameAttr = null
+          let hasSpreadAttr = false
+          let hasReactHookFormRegisterSpreadAttr = false
+          let hasRadioInput = false
+
+          attributes.forEach((a) => {
+            if (a.type === 'JSXSpreadAttribute') {
+              hasSpreadAttr = true
+
+              if (hasReactHookFormRegisterSpreadAttr === false && a.argument?.callee?.name === 'register') {
+                hasReactHookFormRegisterSpreadAttr = true
+              }
+            } else {
+              switch (a.name?.name) {
+                case 'name': {
+                  nameAttr = a
+                  break
+                }
+                case 'type': {
+                  if (a.value.value === 'radio') {
+                    hasRadioInput = true
+                  }
+                  break
+                }
+              }
+            }
+          })
 
           if (!nameAttr) {
             if (
-              node.attributes.length === 0 ||
-              checkType !== 'allow-spread-attributes' ||
-              !node.attributes.some(findSpreadAttr)
+              !(OPTION.react_hook_form && hasReactHookFormRegisterSpreadAttr) &&
+              (attributes.length === 0 || checkType !== 'allow-spread-attributes' || !hasSpreadAttr)
             ) {
-              const isRadio =
-                nodeName.match(RADIO_BUTTON_REGEX) ||
-                (nodeName.match(INPUT_TAG_REGEX) && node.attributes.some(findRadioInput));
+              const isRadio = nodeName.match(RADIO_BUTTON_REGEX) || (nodeName.match(INPUT_TAG_REGEX) && hasRadioInput)
 
               context.report({
                 node,
                 message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
-              });
+              })
             }
           } else {
             const nameValue = nameAttr.value?.value || ''
@@ -83,12 +122,12 @@ module.exports = {
               context.report({
                 node,
                 message: `${nodeName} のname属性の値(${nameValue})${MESSAGE_NAME_FORMAT_SUFFIX}`,
-              });
+              })
             }
           }
         }
       },
-    };
+    }
   },
-};
-module.exports.schema = SCHEMA;
+}
+module.exports.schema = SCHEMA

package/rules/best-practice-for-tailwind-prohibit-root-margin/README.md

@@ -0,0 +1,73 @@
+# best-practice-for-tailwind-prohibit-root-margin
+
+tailwindcss を使用したコンポーネントのルート要素に外側の余白（margin）を設定することを禁止します。
+
+## ルールの目的
+
+コンポーネントは、それ自体が外側に余白を持つべきではありません。外側の余白の制御は、コンポーネントを使用する側の責任とすべきです。
+
+これにより、以下のメリットがあります。
+
+- コンポーネントの再利用性が向上します
+- レイアウトの一貫性が保たれます
+- コンポーネント間の余白の調整が容易になります
+
+## 対象となるクラス名
+
+以下のパターンのクラス名が検出対象となります。
+
+- `shr-m-`
+- `shr-mt-`
+- `shr-mr-`
+- `shr-mb-`
+- `shr-ml-`
+
+クラス名のプレフィックス(`shr-`) の通り、SmartHR UI と合わせて使用されることを前提としています。
+
+## NG例
+
+```jsx
+const Button = () => {
+  return <button className="shr-m-4">Click me</button>
+}
+
+const Card = () => {
+  return (
+    <div className="shr-mt-4">
+      <p>Content</p>
+    </div>
+  )
+}
+```
+
+## OK例
+
+```jsx
+const Button = ({ className }) => {
+  return <button className={className}>Click me</button>
+}
+
+const Card = () => {
+  return (
+    <div>
+      <p>Content</p>
+    </div>
+  )
+}
+
+// 使用する側で余白を制御
+const Page = () => {
+  return (
+    <div>
+      <Button className="shr-m-4" />
+      <div className="shr-mt-4">
+        <Card />
+      </div>
+    </div>
+  )
+}
+```
+
+## オプション
+
+このルールにはオプションはありません。

package/rules/best-practice-for-tailwind-prohibit-root-margin/index.js

@@ -0,0 +1,103 @@
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils')
+
+const SCHEMA = []
+const MARGIN_CLASS_PATTERNS = /shr-m[trbl]?-/ // mt-, mr-, mb-, ml-, m-
+
+/**
+ * コンポーネントのルート要素を渡し、該当の余白クラスが存在すればそれを、なければNULLを返す
+ * @param {import('@typescript-eslint/utils').TSESTree.Node} node
+ * @returns {import('@typescript-eslint/utils').TSESTree.Literal | null}
+ */
+const findSpacingClassInRootElement = (node) => {
+  // JSX でなければ対象外
+  if (node.type !== AST_NODE_TYPES.JSXElement) return null
+
+  // className属性がなければ対象外
+  const classNameAttr = node.openingElement.attributes.find(
+    (attr) => attr.type === AST_NODE_TYPES.JSXAttribute && attr.name.name === 'className',
+  )
+  if (!classNameAttr) return null
+
+  // className属性の値がリテラルでなければ対象外
+  if (classNameAttr?.value?.type !== AST_NODE_TYPES.Literal || typeof classNameAttr.value.value !== 'string') return null
+
+  // className属性の値に余白クラスが含まれていればそれを返す
+  return MARGIN_CLASS_PATTERNS.test(classNameAttr.value.value) ? classNameAttr.value : null
+}
+
+/**
+ * ブロックステートメント内から、JSX要素を返す ReturnStatement を返す
+ * @param {import('@typescript-eslint/utils').TSESTree.BlockStatement} block
+ * @returns {import('@typescript-eslint/utils').TSESTree.ReturnStatement | null}
+ */
+const findJSXReturnStatement = (block) => {
+  for (const statement of block.body) {
+    if (statement.type === AST_NODE_TYPES.ReturnStatement && statement.argument?.type === AST_NODE_TYPES.JSXElement) {
+      return statement
+    }
+  }
+  return null
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+    messages: {
+      noRootSpacing:
+        'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
+    },
+  },
+  create(context) {
+    /**
+     * 関数本体をチェックし、ルート要素で余白クラスが設定されたJSXを返している場合、エラーを報告する
+     * @param {import('@typescript-eslint/utils').TSESTree.Node} body
+     */
+    const checkFunctionBody = (body) => {
+      // 関数がブロックを持たずに直接JSXを返すパターン
+      if (body.type === AST_NODE_TYPES.JSXElement) {
+        const spacingClass = findSpacingClassInRootElement(body)
+        if (spacingClass) {
+          context.report({
+            node: spacingClass,
+            messageId: 'noRootSpacing',
+          })
+        }
+        return
+      }
+
+      // 関数がブロック内で JSX を return するパターン
+      if (body.type === AST_NODE_TYPES.BlockStatement) {
+        const returnStatement = findJSXReturnStatement(body)
+        if (returnStatement?.argument) {
+          const spacingClass = findSpacingClassInRootElement(returnStatement.argument)
+          if (spacingClass) {
+            context.report({
+              node: spacingClass,
+              messageId: 'noRootSpacing',
+            })
+          }
+        }
+      }
+    }
+
+    return {
+      // アロー関数式のコンポーネントをチェック
+      ArrowFunctionExpression: (node) => {
+        if (node.parent?.type === AST_NODE_TYPES.VariableDeclarator) {
+          checkFunctionBody(node.body)
+        }
+      },
+
+      // function宣言のコンポーネントをチェック
+      FunctionDeclaration: (node) => {
+        checkFunctionBody(node.body)
+      },
+    }
+  },
+}
+
+module.exports.schema = SCHEMA

package/rules/best-practice-for-tailwind-variants/README.md

@@ -0,0 +1,53 @@
+# smarthr/best-practice-for-tailwind-variants
+
+- tailwind-variantsの記法をチェックするルールです
+- tailwind-variantsの使い方に一定のルールを課すことで、実装のブレを無くし、レビューコストなどを下げることが目的です
+- tv関数の実行結果を格納する変数の名称を一定のルールにすることで可読性を向上させます
+- また、上記関数を実行する際、一律useMemoを利用することを促します
+   - useMemo内にtailwind系の実行をまとめることで将来的にtailwind-variantsから乗り換える際の作業を楽にする、などmemo化以外の効果もあります
+- まとめると現状以下のチェックを行います
+  - tailwind-variants(tv) のimport時の名称をtvに固定しているか (asなどでの名称変更の禁止)
+  - tv の実行結果を格納する変数名を統一 (classNameGenerator、もしくはxxxClassNameGenerator)
+  - tvで生成した関数の実行をuseMemo hook でメモ化しているか
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-tailwind-variants': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+import { tv as hoge } from 'tailwind-variants'
+```
+```jsx
+import { tv } from 'tailwind-variants'
+
+const xxx = tv({
+  ...
+})
+
+...
+
+const yyyy = xxx()
+```
+
+## ✅ Correct
+
+```jsx
+import { tv } from 'tailwind-variants'
+
+const classNameGenerator = tv({
+  ...
+})
+
+...
+
+const yyyy = useMemo(() => classNameGenerator(), [])
+```

package/rules/best-practice-for-tailwind-variants/index.js

@@ -0,0 +1,78 @@
+const SCHEMA = []
+
+const TV_COMPONENTS_METHOD = 'tv'
+const TV_COMPONENTS = 'tailwind-variants'
+const TV_RESULT_CONST_NAME_REGEX = /(C|c)lassNameGenerator$/
+
+const findValidImportNameNode = (s) => s.type === 'ImportSpecifier' && s.local.name === TV_COMPONENTS_METHOD
+
+const checkImportTailwindVariants = (node, context) => {
+}
+const findNodeHasId = (node) => {
+  if (node.id) {
+    return node
+  }
+
+  if (node.parent) {
+    return findNodeHasId(node.parent)
+  }
+
+  return null
+}
+const findNodeUseMemo = (node) => {
+  if (node.type === 'CallExpression' && node.callee.name === 'useMemo') {
+    return node
+  }
+
+  if (node.parent) {
+    return findNodeUseMemo(node.parent)
+  }
+
+  return null
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ImportDeclaration: (node) => {
+        if (node.source.value === TV_COMPONENTS) {
+          if (!node.specifiers.some(findValidImportNameNode)) {
+            context.report({
+              node,
+              message: `${TV_COMPONENTS} をimportする際は、名称が"${TV_COMPONENTS_METHOD}" となるようにしてください。例: "import { ${TV_COMPONENTS_METHOD} } from '${TV_COMPONENTS}'"`,
+            });
+          }
+        }
+      },
+      CallExpression: (node) => {
+        if (node.callee.name === TV_COMPONENTS_METHOD) {
+          const idNode = findNodeHasId(node.parent)
+
+          if (idNode && !TV_RESULT_CONST_NAME_REGEX.test(idNode.id.name)) {
+            context.report({
+              node: idNode,
+              message: `${TV_COMPONENTS_METHOD}の実行結果を格納する変数名は "${idNode.id.name}" ではなく "${TV_RESULT_CONST_NAME_REGEX}"にmatchする名称に統一してください。`,
+            });
+          }
+        } else if (TV_RESULT_CONST_NAME_REGEX.test(node.callee.name)) {
+          const useMemoNode = findNodeUseMemo(node.parent)
+
+          if (!useMemoNode) {
+            context.report({
+              node,
+              message: `"${node.callee.name}" を実行する際、useMemoでラップし、メモ化してください`,
+            });
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-tailwind-prohibit-root-margin.js

@@ -0,0 +1,111 @@
+const rule = require('../rules/best-practice-for-tailwind-prohibit-root-margin')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const errorMessage =
+  'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。'
+
+ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
+  valid: [
+    // 余白のないコンポーネント
+    {
+      code: `
+        const Button = () => {
+          return <button className="shr-bg-blue-500">Click me</button>
+        }
+      `,
+    },
+    // コンポーネントのルート以外の要素での余白使用
+    {
+      code: `
+        const Card = () => {
+          return (
+            <div className="shr-bg-white">
+              <h2 className="shr-mt-4">Title</h2>
+              <p className="shr-mb-2 shr-pt-2">Content</p>
+            </div>
+          )
+        }
+      `,
+    },
+    // shr-min などの、shr-m から始まるほかのクラス
+    { code: `const Button = () => <button className="shr-min-w-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-min-h-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-max-w-100">Click me</button>` },
+    { code: `const Button = () => <button className="shr-max-h-100">Click me</button>` },
+    // padding は許可
+    { code: `const Button = () => <button className="shr-p-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pt-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pb-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pl-4">Click me</button>` },
+    { code: `const Button = () => <button className="shr-pr-4">Click me</button>` },
+    // リテラルでないクラス名
+    { code: `const Button = () => <button className={shr-mt-2}>Click me</button>` },
+    { code: `const Button = () => <button className={shr-pb-4}>Click me</button>` },
+  ],
+  invalid: [
+    // マージンクラスを持つコンポーネント
+    {
+      code: `const Button = () => { return <button className="shr-m-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => <button className="shr-mt-4">Click me</button>`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => { return <button className="shr-mb-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => <button className="shr-ml-4">Click me</button>`,
+      errors: [{ message: errorMessage }],
+    },
+    {
+      code: `const Button = () => { return <button className="shr-mr-4">Click me</button> }`,
+      errors: [{ message: errorMessage }],
+    },
+    // 複数の余白クラスを持つコンポーネント
+    {
+      code: `
+        const Card = () => {
+          return (
+            <div className="shr-mt-4 shr-mb-2 shr-ml-2 shr-mr-2">
+              <p>Content</p>
+            </div>
+          )
+        }
+      `,
+      errors: [{ message: errorMessage }],
+    },
+    // 他のクラスと組み合わせた余白
+    {
+      code: `
+        const Box = () => (
+            <div className="shr-bg-gray-100 shr-ml-2">
+              <p>Content</p>
+            </div>
+        )
+      `,
+      errors: [{ message: errorMessage }],
+    },
+    // function 宣言によるコンポーネント
+    {
+      code: `
+        function Button() {
+          return <button className="shr-m-4">Click me</button>
+        }
+      `,
+      errors: [{ message: errorMessage }],
+    },
+  ],
+})

package/test/best-practice-for-tailwind-variants.js

@@ -0,0 +1,28 @@
+const rule = require('../rules/best-practice-for-tailwind-variants')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('best-practice-for-button-element', rule, {
+  valid: [
+    { code: `import { tv } from 'tailwind-variants'` },
+    { code: `const classNameGenerator = tv()` },
+    { code: `const xxxClassNameGenerator = tv()` },
+    { code: `const hoge = useMemo(() => classNameGenerator(), [])` },
+    { code: `const xxx = useMemo(() => hogeClassNameGenerator(), [])` },
+  ],
+  invalid: [
+    { code: `import { tv as hoge } from 'tailwind-variants'`, errors: [ { message: `tailwind-variants をimportする際は、名称が"tv" となるようにしてください。例: "import { tv } from 'tailwind-variants'"` } ] },
+    { code: `const hoge = tv()`, errors: [ { message: `tvの実行結果を格納する変数名は "hoge" ではなく "/(C|c)lassNameGenerator$/"にmatchする名称に統一してください。` } ] },
+    { code: `const hoge = classNameGenerator()`, errors: [ { message: `"classNameGenerator" を実行する際、useMemoでラップし、メモ化してください` } ] },
+    { code: `const hoge = hogeClassNameGenerator()`, errors: [ { message: `"hogeClassNameGenerator" を実行する際、useMemoでラップし、メモ化してください` } ] },
+  ]
+})