🎯 React専用ESLintプラグイン - GAデータ収集とテストに最適化されたコンポーネント追跡属性を自動付与
このESLintプラグインは、Reactコンポーネント内のインタラクション要素に自動的にdata-component-name
属性を付与します。
- 📊 GAデータ収集: ユーザーインタラクションの追跡
- 🧪 E2Eテスト: 要素の特定とテスト自動化
- 🔍 デバッグ: コンポーネントの識別とトラブルシューティング
- 🚀 自動修正対応 - ESLintの
--fix
で自動的に属性を追加 - 🎯 インタラクション要素に特化 - button, input, form等のGA収集に重要な要素
- 🔧 高度にカスタマイズ可能 - 属性名、対象要素、ファイルパターンを設定可能
- 🌊 ネスト構造対応 - 深い階層の要素も正しく処理
- 📁 ファイル名ベース -
directory_filename
形式で一意な値を生成
npm install --save-dev eslint-plugin-react-component-tracker
- Node.js: 18.0.0以上
- ESLint: 8.0.0以上(ESLint 8.x, 9.x両対応)
- React: JSX/TSXファイル対応
// eslint.config.js
import reactComponentTracker from 'eslint-plugin-react-component-tracker';
export default [
{
plugins: {
'react-component-tracker': reactComponentTracker,
},
rules: {
'react-component-tracker/add-component-data-attribute': 'error',
},
},
];
// .eslintrc.js
module.exports = {
plugins: ['react-component-tracker'],
rules: {
'react-component-tracker/add-component-data-attribute': 'error',
},
};
// components/auth/LoginForm.jsx
function LoginForm() {
return (
<form className="login-form">
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
}
// components/auth/LoginForm.jsx
function LoginForm() {
return (
<form className="login-form" data-component-name="auth_LoginForm">
<input type="email" placeholder="Email" data-component-name="auth_LoginForm" />
<input type="password" placeholder="Password" data-component-name="auth_LoginForm" />
<button type="submit" data-component-name="auth_LoginForm">Login</button>
</form>
);
}
{
"react-component-tracker/add-component-data-attribute": [
"error",
{
"attributeName": "data-component-name",
"elements": ["button", "input", "select", "textarea", "a", "form"],
"includeAllElements": false,
"filePattern": "\\.(jsx|tsx)$"
}
]
}
オプション | 型 | デフォルト | 説明 |
---|---|---|---|
attributeName |
string | "data-component-name" |
付与する属性名 |
elements |
string[] | ["button", "input", "select", "textarea", "a", "form"] |
対象要素のリスト |
includeAllElements |
boolean | false |
全てのJSX要素を対象にする |
filePattern |
string | "\\.(jsx|tsx)$" |
対象ファイルの正規表現パターン |
{
"react-component-tracker/add-component-data-attribute": [
"error",
{
"attributeName": "data-ga-component",
"elements": ["button", "input", "select", "textarea", "a", "form"]
}
]
}
{
"react-component-tracker/add-component-data-attribute": [
"error",
{
"attributeName": "data-testid",
"elements": ["button", "input", "select", "textarea", "a"]
}
]
}
{
"react-component-tracker/add-component-data-attribute": [
"error",
{
"includeAllElements": true, // Button, Input等のカスタムコンポーネントも対象
"elements": ["Button", "Input", "Select", "Form"]
}
]
}
// pages/checkout/PaymentForm.jsx
<form data-component-name="checkout_PaymentForm">
<fieldset>
<legend>Payment Information</legend>
<div className="form-group">
<input type="text" placeholder="Card Number" data-component-name="checkout_PaymentForm" />
<input type="text" placeholder="CVV" data-component-name="checkout_PaymentForm" />
</div>
<div className="form-actions">
<button type="reset" data-component-name="checkout_PaymentForm">Reset</button>
<button type="submit" data-component-name="checkout_PaymentForm">Pay Now</button>
</div>
</fieldset>
</form>
ファイルパス | 生成される値 |
---|---|
components/ui/Button.jsx |
"ui_Button" |
pages/auth/login.jsx |
"auth_login" |
components/forms/ContactForm.tsx |
"forms_ContactForm" |
src/components/nav/index.jsx |
"nav_nav" |
GAデータ収集に最適化された要素のみを対象:
-
button
- クリックイベント追跡 -
input
- フォーム入力追跡 -
select
- 選択イベント追跡 -
textarea
- テキスト入力追跡 -
a
- リンククリック追跡 -
form
- フォーム送信追跡
コンテナ要素はデフォルトで対象外(GAデータ収集に不要なため):
-
div
,span
,section
,article
,header
,footer
など
# リポジトリのクローン
git clone https://github.com/hiromi-2000/eslint-plugin-react-component-tracker.git
cd eslint-plugin-react-component-tracker
# 依存関係のインストール
npm install
# テストの実行
npm test
# テストUI(ブラウザ)
npm run test:ui
# ウォッチモード
npm run test:watch
# Lintの実行
npm run lint
# ビルド
npm run build
MIT License - 詳細は LICENSE ファイルを参照してください。
Issue、Pull Request、フィードバックを歓迎します!
🎯 GAデータ収集とE2Eテストの効率化に貢献するESLintプラグインです!