ESLintでTypeScriptのクラスのpublicやprivateを強制する方法
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クラスを継承したサブクラスからのみ呼びだせます。
class Dog { constructor(name: string) { // ... }
public bark() { // ... }
private eat() { // ... }
protected sleep() { // ... }}このように、アクセシビリティ修飾子を使用することで、クラスのメンバーに対するアクセスレベルを明確にできます。
こうすることで、外部からの呼びだしを意図していないメソッドやプロパティに対して、誤ってアクセスすることを防げます。さらに、privateなメソッドやプロパティがクラスの内部でのみ使用されることを保証できるため、コードを変更しやすくなります。
アクセシビリティ修飾子を省略した場合、TypeScriptはデフォルトでpublicとして扱います。しかし、アクセシビリティ修飾子が省略されている場合、単なる書き忘れなのか、publicとして意図されているのかが分かりにくくなります。
ESLintの@typescript-eslint/explicit-member-accessibilityルールを使用することで、このようなアクセシビリティ修飾子を明示的に記述することを強制できます。
インストール方法
まず、まだインストールしていない場合はESLintと@typescript-eslintプラグインをインストールします。
npm install --save-dev eslint @typescript-eslint/eslint-plugin設定方法
@typescript-eslintをインストールしたら、プラグインとルールを有効化します。
{ "plugins": [ "@typescript-eslint" ], "rules": { "@typescript-eslint/explicit-member-accessibility": "error" }}たいていの場合はこれで十分ですが、より詳細な設定も可能です。たとえば、次のようにすると、特定の拡張子をもつファイルに対してのみこのルールを有効にできます。これは、JavaScriptファイルとTypeScriptファイルが混在しているプロジェクトで便利です。
{ "rules": { // ルールをデフォルトで無効にする "@typescript-eslint/explicit-member-accessibility": "off" }, "overrides": [ { // TypeScriptファイルに対してのみ有効にする "files": ["*.ts", "*.mts", "*.cts", "*.tsx"], "rules": { "@typescript-eslint/explicit-member-accessibility": "error" } } ]}オプション
explicit-member-accessibilityルールは、他にもさまざまなオプションでカスタマイズが可能です。たとえば、次の設定では、デフォルトですべてのメンバーにアクセシビリティを明示することを要求し、一部のメンバータイプに対しては特定のアクセシビリティを禁止します。
{ "rules": { "@typescript-eslint/explicit-member-accessibility": [ "error", { "accessibility": "explicit", "overrides": { "accessors": "explicit", "constructors": "no-public", "methods": "explicit", "properties": "off", "parameterProperties": "explicit" } } ] }}この設定により、プロパティに対してはアクセシビリティの明示を求めず("properties": "off")、他のメンバー(アクセサーやメソッドなど)については明示を要求します。また、コンストラクターにpublicを使用することを禁止します("constructors": "no-public")。
コード例
以下は、explicit-member-accessibilityルールが有効な場合の正しいコードの例と、不適切なコードの例です。
正しいコード例(デフォルト設定):
class Animal { public constructor(public breed, name) { this.animalName = name; }
private animalName: string;
public get name(): string { return this.animalName; }
public set name(value: string) { this.animalName = value; }
public walk() { // method }}不適切なコード例:
class Animal { constructor(name) { this.animalName = name; }
animalName: string;
get name(): string { return this.animalName; }
set name(value: string) { this.animalName = value; }
walk() { // method }}この例では、すべてのクラスメンバーにアクセシビリティ修飾子が欠けています。修飾子を追加することで、クラスの使用方法やメンバーへのアクセスレベルが明確になります。
まとめ
@typescript-eslint/explicit-member-accessibilityルールを使用することで、TypeScriptのクラスメンバーに対するアクセシビリティ修飾子の明示を強制し、コードの可読性を高めることができます。
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。



![スマートフォンのホーム画面の[Social]フォルダーを表示した写真。フォルダー内にはFacebook、Instagram、Threads、X、LinkedIn、TikTok、YouTubeのアイコンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Ffacebook-instagram-threads-x-twitter-linkedin-tiktok-youtube-mobile-app-unsplash.jpg&w=3840&q=75)








![npmのパッケージの設定画面のスクリーンショット。[Trusted Publisher]セクションの[Select your publisher]に[GitHub Actions]と[GitLab CI/CD]の2つのボタンが表示されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fnpm-trusted-publishing-settings.png&w=3840&q=75)


