はじめに

こんにちは！ｉｉｍｏｎでエンジニアをしているひがです！

先日TSKaigi 2026で登壇をしてきました！
https://2026.tskaigi.org/talks/7
今年のTSKaigiも勉強になる公演がたくさんあり、とても楽しかったです。

色々な公演を聴いている中で、「結構TypeScriptのLinterに関する話題も多いな〜」と思い、「そういえばあまりLinterについて調べたことがなかったな〜」と思ったので、今回記事にしてみました！基礎的な内容も多いかと思いますが、お付き合いいただけると嬉しいです！

Linterについて

そもそもLinterは静的解析ツールとも呼ばれ、様々なプログラミング言語におけるLinterが存在します。TypeScriptにもやはり色々な種類のLinterがあり、ソースコードの内容を読み取って事前に定義したルールに対して違反がないかをチェックしてくれます。Lintの種類によってチェックできる内容も変わってきますが、大体は「コードの見た目や書き方の統一」「論理的な誤りの防止」「可読性の向上」「TypeScript特有の型チェック」など多様なルールを設定することができ、特にチーム開発など複数人で開発を進めていく際のコード規約として重宝されることも多いかと思います。

そんなLinterですが、実際に解析する際はどんな感じで動いているのだろう？と思う方もいるかと思いましたので（少なくとも筆者はそう思ったので）、ここからはその原理の部分について簡単にみていこうと思います。今回はTypeScriptでよく使われているESLintを例にみていきます。

ESLintで見てみるLinterの基礎

ESLintはJavaScriptやTypeScript（やECMAScript）のLinterで、ほかのLinterと比べてダウンロード数が圧倒的に多いためよくデファクトスタンダードと呼ばれていたりします。2026年6月現時点で200を超えるルールがあり、それらを組み合わせることでより柔軟かつ手軽にチームやプロジェクトのコード規約を作ることができます。
ルールの例（一部抜粋）↓

constructor-super: コンストラクタ内でsuper()の呼び出しを強制する
no-await-in-loop: ループ内でのawaitを禁止する
valid-typeof: typeofを有効な文字列で比較することを強制する
guard-for-in: for-inループ内でif分岐を要求する
max-depth: ブロックのネストの深さを指定する

...便利なルールや面白そうなルールとかも含めて色々な種類がありますね！！！

また、推奨ルール（recommended）で手軽に一定水準のコード規約をまとめて設定したり、カスタムルールとして独自のルールを構築してプラグインとして外部に公開したりすることが可能だったりと、幅広く様々な機能が提供されていることも多くのユーザーを獲得している要因の一つかもしれません。今回の記事では詳細な利用方法などは割愛しますが、気になる方は是非公式のドキュメントを覗いて遊んでみてください。
https://eslint.org/docs/latest/

そんなESLintですが、ソースコードを解析する際はAST（抽象構文木）を使用してソースコードを走査し、設定したルールに対して違反がないかを評価します。なんとなくコンパイラの動きと似ているところもあり、それぞれの目的は異なりますが構文をチェックするにあたってASTを利用するあたりなどは共通点がありそうですね！
ちなみにtsc（TypeScriptのコンパイラ）のフローはざっくりと

Scannerによるソースコードの字句解析（トークン化）
ParserでトークンからASTの構築
BinderでASTの各ノードに対するシンボルの紐付け、スコープの解決
CheckerでASTとBinerからの情報をもとに型チェックを実施
EmitterでJavaScriptへトランスパイル

みたいな流れになっています。詳細など気になる方は下記の参考サイトとかをみてみると理解を深められて良いかもしれません。
https://typescript-jp.gitbook.io/deep-dive/overview

少し話が脱線してしまいましたが、ここから実際にESLintがルールに基づいて警告を出す様子を確認していこうと思います。
今回はASTの内容も見てみたいので、ビューアーとしてAST Explorerを使います。
https://astexplorer.net/

AST Explorerへアクセスすると色々設定できる項目がありますので、まずは言語選択でJavaScriptを選択します。その隣のParserでは@typescript-eslint/parserを選択し、Transformの欄ではESLint v8を選択します。

ここまで設定できればあとはルールを指定してコードを記述すると、指定したルールに違反するコードを警告する様子をみることができます。

一例として、下記のようなカスタムルールを指定します。

export default {
  create(context) {
    return {
      CallExpression(node) {
        const callee = node.callee;

        // console.log を特定する
        const isConsoleLog =
          callee.type === 'MemberExpression' &&
          callee.object.name === 'console' &&
          callee.property.name === 'log';

        if (!isConsoleLog) return;

        // 引数(arguments)をチェックする
        const firstArg = node.arguments[0];

        // 引数が存在し、かつ文字列リテラルであるか確認
        if (firstArg && firstArg.type === 'Literal' && typeof firstArg.value === 'string') {

          // 禁止したい特定の文字列（例: "uwaaaaaa"）
          if (firstArg.value.includes('uwaaaaaa')) {
            context.report({
              node,
              message: 'この文字列("uwaaaaaa")をconsole.logに出力することは禁止されています。'
            });
          }
        }
      }
    };
  }
};

ここでは特定のワード（uwaaaaaa）の出力を禁止するルールを設け、違反したらそのワードが禁止されている旨でエラーを出します。

ちゃんと期待通りに動いていることがわかりますね！

ちなみに上記のルール定義で出てくるCallExpressionやLiteralなどはESTreeという木構造に関する共通ルールで定められています。こちらも詳細が気になる方は下記から確認してみてください。（カスタムルールを作成するときなどはそれらのルールに従って作ることになると思います）
https://github.com/estree/estree

ESLintのカスタムルールに関するチュートリアルもありますので、そちらもご参考にどうぞ。
https://eslint.org/docs/latest/extend/custom-rules

最近では生成AIにコードを書かせることも多いかと思いますが、例えばClaude Codeでスキルやルールを設定しすぎるとノイズになったり管理が大変になったりすることもあるかと思いますので、Lintでプロジェクト固有のルールやドメイン知識に関するルールを敷けるとAIが解釈しやすく、より安全で柔軟なコーディングに繋げられるかもしれませんね！

以上、簡単にですがESLintの基本的な動きを確認しました。ほかにも様々な便利機能がありますのでぜひ確認してみてください。

TypeScriptのモダンなLinterたち

ここまではESLintについてみてきましたが、最近ではモダン（と呼ばれている？）LinterとしてBiomeのLintやOxlintなどをよく耳にすることが多くなってきました。どちらもRust製で、ソースの解析速度が非常に速いことが特徴となっています。ちなみにBiomeやOxlintにもPlaygroundがありますので、気になる方はそちらで遊んでみると良いかもです。
・Biome
https://biomejs.dev/playground/?tab=formatter&pane=Diagnostics

・Oxlint
https://playground.oxc.rs/

（どちらも色々と遊べそうですね！）

プロジェクトの状況などによってどのLinterを選定するか迷うこともあると思いますが、それぞれの特徴を理解した上で選定できると良さそうですね。選定基準について紹介されているサイトなどもありますので、そのような情報も参考にしつつ選べると良いかもしれません。

下記のサイトでは「標準的なReactアプリを新設するなら色々な機能が高速で動かせるBiome」「大規模なモノレポプロダクトならOxlintでカバーしつつESLintで特殊ルールを対応」など、選定する際の考え方なども書かれていて、参考になるな〜と感じました。
https://www.pkgpulse.com/guides/biome-vs-eslint-vs-oxlint-2026

ちなみに、OxlintはTSKaigiでも色々な公演で登場したりと、今後の活躍の期待値が大きいと感じました。特にType-Aware Linting（TypeScriptの型システムを利用したリンティング）を内蔵していることで、TypeScript 7.0から導入されるtsgolintとも共存することが可能となっているので、今後も発展していく可能性が高そうに思います。Type-Aware Lintingが気になった方は下記oxcのドキュメントでもご紹介されていたりしますので、ぜひ見てみてください。 https://oxc.rs/docs/guide/usage/linter/type-aware

また、次世代ツールチェーンとして開発が進められているvite-plusにもOxlintが採用されていたりしますので、やはり次世代のLinterとして期待値は高そうだな〜と思いました。
https://viteplus.dev/

まとめ

以上、TypeScript（JavaScript）のLinterについて簡単に見ていきました。今回の記事では紹介しきれなかったLinterの特性や現在に至るまで歩んできたJavaScriptとの成長、歴史的背景など奥深い内容もあったりしますので、そのあたりも合わせて理解を深めていければ良いなと感じています。あと、AIの活用により今後も爆発的にアップデートされていく（というかもう既に始まっている？）可能性もあるので、引き続きウォッチしつつその原理の部分についてはできるだけ理解して食らいついていきたいなと思うこの頃でした。