eslint-plugin-react-component-tracker

1.1.2 • Public • Published

eslint-plugin-react-component-tracker

🎯 React専用ESLintプラグイン - GAデータ収集とテストに最適化されたコンポーネント追跡属性を自動付与

npm version License: MIT

🎯 概要

この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 Flat Config(ESLint 9.x推奨)

// 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',
    },
  },
];

Legacy Config(ESLint 8.x対応)

// .eslintrc.js
module.exports = {
  plugins: ['react-component-tracker'],
  rules: {
    'react-component-tracker/add-component-data-attribute': 'error',
  },
};

🎨 動作例

Before

// 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>
  );
}

After(自動修正後)

// 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)$" 対象ファイルの正規表現パターン

🎯 GAデータ収集用設定

{
  "react-component-tracker/add-component-data-attribute": [
    "error",
    {
      "attributeName": "data-ga-component",
      "elements": ["button", "input", "select", "textarea", "a", "form"]
    }
  ]
}

🧪 E2Eテスト用設定

{
  "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プラグインです!

Package Sidebar

Install

npm i eslint-plugin-react-component-tracker

Weekly Downloads

22

Version

1.1.2

License

MIT

Unpacked Size

14.5 kB

Total Files

5

Last publish

Collaborators

  • hiromi-2000