ESLintでTypeScriptのクラスのpublicやprivateを強制する方法

#HowTo #JavaScript #TypeScript #Web開発 #プログラミング

投稿日： 2024年03月16日 03:05

TypeScriptを使う開発において、コードのメンテナンス性と可読性を保つことは非常に重要です。とくに、大規模なプロジェクトやチームでの開発では、コードの一貫性を保つためのルールが求められます。

この記事では、ESLintと@typescript-eslintプラグインを使用して、TypeScriptのクラスメンバーに対するアクセシビリティ（public、protected、private）の明示を強制する方法について解説します。

`@typescript-eslint/explicit-member-accessibility`ルール

このルールを使うと、TypeScriptのクラスメンバーについて、アクセシビリティを明示的に宣言することを強制できます。これにより、クラスの外部からアクセスできるプロパティやメソッドが明確になり、コードの可読性が向上します。

通常のJavaScriptと違い、TypeScriptではアクセシビリティ修飾子（public、protected、private）を使用できます。

たとえば、次のようにクラスを定義すると、Dog.bark()メソッドはクラスの外部から呼びだせますが、Dog.eat()メソッドはクラスの外部から呼びだせません。また、Dog.sleep()メソッドは、Dogクラス自身と、Dogクラスを継承したサブクラスからのみ呼びだせます。

1
class Dog {
2
    constructor(name: string) {
3
        // ...
4
    }
5

6
    public bark() {
7
        // ...
8
    }
9

10
    private eat() {
11
        // ...
12
    }
13

14
    protected sleep() {
15
        // ...
16
    }
17
}

このように、アクセシビリティ修飾子を使用することで、クラスのメンバーに対するアクセスレベルを明確にできます。

こうすることで、外部からの呼びだしを意図していないメソッドやプロパティに対して、誤ってアクセスすることを防げます。さらに、privateなメソッドやプロパティがクラスの内部でのみ使用されることを保証できるため、コードを変更しやすくなります。

アクセシビリティ修飾子を省略した場合、TypeScriptはデフォルトでpublicとして扱います。しかし、アクセシビリティ修飾子が省略されている場合、単なる書き忘れなのか、publicとして意図されているのかが分かりにくくなります。

ESLintの@typescript-eslint/explicit-member-accessibilityルールを使用することで、このようなアクセシビリティ修飾子を明示的に記述することを強制できます。

インストール方法

まず、まだインストールしていない場合はESLintと@typescript-eslintプラグインをインストールします。

npm install --save-dev eslint @typescript-eslint/eslint-plugin

設定方法

@typescript-eslintをインストールしたら、プラグインとルールを有効化します。

1
{
2
    "plugins": [
3
        "@typescript-eslint"
4
    ],
5
    "rules": {
6
        "@typescript-eslint/explicit-member-accessibility": "error"
7
    }
8
}

たいていの場合はこれで十分ですが、より詳細な設定も可能です。たとえば、次のようにすると、特定の拡張子をもつファイルに対してのみこのルールを有効にできます。これは、JavaScriptファイルとTypeScriptファイルが混在しているプロジェクトで便利です。

1
{
2
    "rules": {
3
        // ルールをデフォルトで無効にする
4
        "@typescript-eslint/explicit-member-accessibility": "off"
5
    },
6
    "overrides": [
7
        {
8
            // TypeScriptファイルに対してのみ有効にする
9
            "files": ["*.ts", "*.mts", "*.cts", "*.tsx"],
10
            "rules": {
11
                "@typescript-eslint/explicit-member-accessibility": "error"
12
            }
13
        }
14
    ]
15
}

オプション

explicit-member-accessibilityルールは、他にもさまざまなオプションでカスタマイズが可能です。たとえば、次の設定では、デフォルトですべてのメンバーにアクセシビリティを明示することを要求し、一部のメンバータイプに対しては特定のアクセシビリティを禁止します。

1
{
2
    "rules": {
3
        "@typescript-eslint/explicit-member-accessibility": [
4
            "error",
5
            {
6
                "accessibility": "explicit",
7
                "overrides": {
8
                    "accessors": "explicit",
9
                    "constructors": "no-public",
10
                    "methods": "explicit",
11
                    "properties": "off",
12
                    "parameterProperties": "explicit"
13
                }
14
            }
15
        ]
16
    }
17
}

この設定により、プロパティに対してはアクセシビリティの明示を求めず（"properties": "off"）、他のメンバー（アクセサーやメソッドなど）については明示を要求します。また、コンストラクターにpublicを使用することを禁止します（"constructors": "no-public"）。

コード例

以下は、explicit-member-accessibilityルールが有効な場合の正しいコードの例と、不適切なコードの例です。

正しいコード例（デフォルト設定）:

1
class Animal {
2
    public constructor(public breed, name) {
3
        this.animalName = name;
4
    }
5

6
    private animalName: string;
7

8
    public get name(): string {
9
        return this.animalName;
10
    }
11

12
    public set name(value: string) {
13
        this.animalName = value;
14
    }
15

16
    public walk() {
17
        // method
18
    }
19
}

不適切なコード例:

1
class Animal {
2
    constructor(name) {
3
        this.animalName = name;
4
    }
5

6
    animalName: string;
7

8
    get name(): string {
9
        return this.animalName;
10
    }
11

12
    set name(value: string) {
13
        this.animalName = value;
14
    }
15

16
    walk() {
17
        // method
18
    }
19
}