コードの可読性と保守性を向上させる！ESLintルール「func-name-matching」徹底解説

ESLintのルール「func-name-matching」について

ルールの概要

このルールは、以下の2つのオプションを設定できます。

• "never"：関数名が変数名またはプロパティ名と一致しない場合、エラーが発生します。
• "always"：関数名が変数名またはプロパティ名と一致している場合、警告が発生します。

デフォルトでは、"never"が設定されています。

ルールの例

以下のコード例は、"func-name-matching"ルールの設定と動作を示しています。

// "func-name-matching": "never"

// 違反例：関数名が変数名と一致していない
const add = function(a, b) {
  return a + b;
};

// 適合例：関数名が変数名と一致している
const addNumbers = function(a, b) {
  return a + b;
};

// "func-name-matching": "always"

// 違反例：関数名が変数名と一致していない
const add = function(a, b) {
  return a + b;
};

// 警告例：関数名が変数名と一致していない
const addNumbers = function(a, b) {
  return a + b;
};

ルールの利点

このルールを設定することで、以下の利点があります。

• コードの可読性と保守性が向上する。
• 関数名の命名規則を統一することで、コードレビューがしやすくなる。
• バグの発生を防ぐことができる。

ルールの注意点

このルールを設定する際には、以下の点に注意する必要があります。

• 既存のコードにこのルールを適用すると、多くの警告が発生する可能性があります。
• 関数名の命名規則は、プロジェクトによって異なる場合があります。

設定方法

このルールは、ESLintの配置文件（.eslintrc.jsなど）で設定できます。

module.exports = {
  "rules": {
    "func-name-matching": ["error", "always"]
  }
};

ESLintのルール「func-name-matching」は、関数名の命名規則に関するルールです。このルールを設定することで、コードの可読性と保守性を向上させることができます。

設定方法や注意点などを理解した上で、プロジェクトに合わせて設定するようにしましょう。

ESLint ルール「func-name-matching」のサンプルコード

オプション "never"

違反例：関数名が変数名と一致していない

// 変数名：`add`
const add = function(a, b) {
  return a + b;
};

// 変数名：`subtract`
const subtract = function(a, b) {
  return a - b;
};

適合例：関数名が変数名と一致している

// 変数名：`addNumbers`
const addNumbers = function(a, b) {
  return a + b;
};

// 変数名：`subtractNumbers`
const subtractNumbers = function(a, b) {
  return a - b;
};

オプション "always"

違反例：関数名が変数名と一致していない

// 変数名：`add`
const add = function(a, b) {
  return a + b;
};

// 変数名：`subtract`
const subtract = function(a, b) {
  return a - b;
};

警告例：関数名が変数名と一致していない

// 変数名：`addNumbers`
const add = function(a, b) {
  return a + b;
};

// 変数名：`subtractNumbers`
const subtract = function(a, b) {
  return a - b;
};

その他の例

メソッド名の命名

class Person {
  // メソッド名：`addNumbers`
  addNumbers(a, b) {
    return a + b;
  }

  // メソッド名：`subtractNumbers`
  subtractNumbers(a, b) {
    return a - b;
  }
}

関数式

// 関数式：`addNumbers`
const addNumbers = (a, b) => a + b;

// 関数式：`subtractNumbers`
const subtractNumbers = (a, b) => a - b;

アロー関数

// アロー関数：`addNumbers`
const addNumbers = (a, b) => {
  return a + b;
};

// アロー関数：`subtractNumbers`
const subtractNumbers = (a, b) => {
  return a - b;
};

ESLint ルール「func-name-matching」の代替方法

命名規則のガイドライン

プロジェクト内で独自に命名規則のガイドラインを策定し、チームメンバー間で共有することで、コードの統一性と可読性を向上させることができます。

例：

• 関数名は、動詞と名詞の組み合わせで命名する。
• 関数名の先頭は小文字にする。
• 複数単語の関数名は、キャメルケースで命名する。
• 省略形は使用しない。

コードレビュー時に、関数名の命名規則が守られているかを確認することで、命名規則の統一を維持することができます。

自動フォーマッター

Prettierなどの自動フォーマッターを使用することで、コードのフォーマットを統一することができ、関数名の命名規則も統一することができます。

その他のツール

ESLint の他に、以下のようなツールを使用して、関数名の命名規則をチェックすることができます。

ESLint ルール「func-name-matching」は、関数名の命名規則を統一するための便利なツールです。

しかし、プロジェクトの規模や状況によっては、他の方法の方が適切な場合もあります。

上記の代替方法を参考に、プロジェクトに合った方法を選択してください。