Skip to main content

In this article

ESLintとBiomeによるJavaScript静的解析

著者
Headshot of Liran Tal

Liran Tal

0 分で読めます

JavaScriptをしばらく使っている方なら、JavaScriptコードの静的解析ツールとしてESLintを聞いたことがあるでしょう。では、Biomeはご存じでしょうか？コードフォーマット分野でPrettierの対抗馬として台頭し、JavaScriptエコシステムで注目を集めています。Biomeはコードフォーマットに加えてコード品質のlint機能も備えており、ESLintの代替ツールとなり得ます。

まずは、JavaScript開発者にとってのツールや課題として、コードフォーマットと品質について簡単に説明します。ご想像のとおり、コード品質を維持し、適切なコードフォーマットの規約に従うことは、あらゆるソフトウェアプロジェクトの成功に役立ちます。特にチームで作業する場合は重要です。

コード品質は、実行時にコードがどのように動作するかに関わります。高品質なコードは効率的で、理解しやすく、バグがありません。一方、コードスタイルの一部であるコードフォーマットは、コードを視覚的に整理し、読みやすく理解しやすくするものです。

// Convention of preferred code formatting and quality
function add(a, b){
  return a + b;
}

// An example for what would be considered as
// poor code formatting, making it hard to read
// and error-prone
function add(c,d){return c+d;}

JavaScriptエコシステムには、開発者がコードフォーマットと品質を維持するのに役立つツールがいくつかあります。そうしたツールの中でも、ESLintとBiomeは、コードベースを効率化したい開発者に人気の選択肢となっています。

BiomeとESLintの概要

ESLintはオープンソースのJavaScript lintツールで、開発者が高品質なJavaScriptコードを作成できるよう支援します。問題のあるパターンや、特定のスタイルガイドラインに従っていないコードを見つけることができます。高いカスタマイズ性を備え、さまざまなコーディング標準を適用するよう設定できます。

ESLintは非常に人気があり、プラグインにも対応しているため、独自のルールを追加してコーディング標準を適用できます。たとえば、各ステートメントの末尾にセミコロンを付けたり、文字列にダブルクォートではなくシングルクォートを使ったりするルールを設定できます。

JavaScriptプロジェクトを見ていると、次のような.eslintrc.jsファイルを目にすることがあるでしょう。

// .eslintrc.js
module.exports = {
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

一方、BiomeはJavaScriptエコシステムに登場した比較的新しいツールで、コードフォーマットとコード品質のlintに重点を置いています。Prettierをご存じの方や、すでに使っている方もいるでしょう。そこで登場するのがBiomeです。Rustで書かれており、より高速に動作するよう設計されています。Biomeは基本的に独自の方針を持つツールですが、少数の設定オプションを用意しています。以下はbiome.jsonファイルの例です。

{
  "javascript": {
    "formatter": {
      "indentWidth": 2,
      "lineWidth": 100,
      "trailingComma": "none",
      "semicolons": "always",
    }
  }
}

現在、BiomeはJavaScript、TypeScript、JSX、JSONファイルに対応しています。

PrettierからBiomeへの移行と、コード品質に注力するESLint

これまで、多くのJavaScript開発者はコードフォーマットにPrettierを利用してきました。しかし、Biomeの登場によって変化が起きています。Biomeが目指すのは何よりも高速性とパフォーマンスです。Rustで書かれており、2,000個のファイルにわたる17万行以上のコードをフォーマットする場合、Pettierより最大35倍高速です。大規模なコードベースを扱う開発プロセスでは、速度が大きな違いを生むことがあります。

Biomeのコードフォーマットおよびコード品質ツールのパフォーマンス

だからといって、ESLintが廃止されるわけではありません。むしろ、ESLintはコード品質を維持するための強力なツールであり続けています。Biomeがコードの見た目に重点を置くのに対して、ESLintはコードの動作に重点を置きます。この2つのツールは互いを補完し、Biomeがコードフォーマットを担い、ESLintがコードのベストプラクティスへの準拠と一般的なエラーの防止を担います。

BiomeもESLintも、JavaScript開発者のツールキットに役立つツールです。どちらもコード品質とフォーマットの維持に重要な役割を果たし、より信頼性が高く保守しやすいコードベースにつながります。

JavaScriptプロジェクトでBiomeを使う

Biomeは静的コード解析を行うコマンドラインツールとして機能します。大きな利点の1つはカスタマイズ性で、開発者は独自のルールを定義することも、既定のルールセットを使うこともできます。この柔軟性により、あらゆるJavaScriptプロジェクトでコーディング標準とベストプラクティスを適用できます。

JavaScriptでBiomeを使う方法の例を紹介します。

# Install Biome as a development dependency
npm install --save-dev @biomejs/biome

インストール時には、使用するプラットフォームに必要なバイナリを取得するため、Biomeのインストールスクリプトを実行する必要があります。その後、次の手順に進みます。

# Initialize a new Biome configuration file
npx @biomejs/biome init

これにより、プロジェクトのルートにbiome.json設定ファイルが作成されます。このファイルをカスタマイズしてプロジェクトのルールや設定を定義できますが、既定の設定は次のとおりです。

{
	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

ご覧のとおり、既定の設定にはフォーマットルールが含まれていないため、プロジェクトのPrettier設定と互換性がない可能性があります。私の場合、.prettierrc.jsファイルは次のようになっています。

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  useTabs: false,
  bracketSpacing: false
}

Biomeを上記のPrettierのコードフォーマットルールにできるだけ近づけるには、次の内容をbiome.jsonファイルに追加します。

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "quoteStyle": "single",
    "trailingComma": "none",
    "semicolons": "asNeeded",
    "bracketSpacing": true,
    "arrowParentheses": "asNeeded"
  }
}

これで、コードベースにBiomeのフォーマッターを実行できます。

npx @biomejs/biome format ./src

その結果、Biome独自の方針で定められ、設定変更できないフォーマットルールは、関数の間隔に関する1つだけになります。

./src/Utils.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:

     2  2 │
     3  3 │   module.exports = {
     4    │ - ··parseUrl:·function(urlToScan)·{
        4 │ + ··parseUrl:·function·(urlToScan)·{
     5  5 │       if (urlToScan === undefined) return urlToScan
     6  6 │
    ····· │
    12 12 │       return urlToScan
    13 13 │     },
    14    │ - ··trimUtmParams:·function(urlToTrim)·{
       14 │ + ··trimUtmParams:·function·(urlToTrim)·{

別の方法として、Prettierの設定を完全にやめて、Biomeのフォーマットルールを使うこともできます。

Biomeでフォーマットとlintを組み合わせる

Biomeにはコード品質ルールを適用するためのlint機能もあり、ESLintの代替ツールと見なすこともできます。lint機能は、既定のルールセットまたはbiome.json設定ファイルで定義したカスタムルールを適用するよう設定できます。

Biomeのlintを実行するには、biome checkコマンドを使って、biome.jsonで既定の推奨ルールセットに定義されたルールへの違反がないか確認します。

# Run Biome on your code
npx @biomejs/biome check ./src

Biomeを実行してみた私のコードリポジトリでは、次のような出力が得られました。

./src/Audit.js:30:7 lint/complexity/useOptionalChain  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Change to an optional chain.

    29 │     if (
  > 30 │       vulnerableAudit.details &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 31 │       vulnerableAudit.details.items &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 │       vulnerableAudit.details.items.length > 0
    33 │     ) {

  ℹ Unsafe fix: Change to an optional chain.

     28  28 │
     29  29 │       if (
     30     │ - ······vulnerableAudit.details·&&
     31     │ - ······vulnerableAudit.details.items·&&
         30 │ + ······vulnerableAudit.details?.items·&&
     32  31 │         vulnerableAudit.details.items.length > 0
     33  32 │       ) {

./src/RenderJson.js:27:7 lint/complexity/noForEach ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Prefer for...of instead of forEach.

    25 │       vulnerabilitiesResults.details.items.length > 0
    26 │     ) {
  > 27 │       vulnerabilitiesResults.details.items.forEach(vulnItem => {
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 │         vulnerabilitiesCount += vulnItem.vulnCount
  > 29 │         const vulnInfo = this.formatVulnerability(vulnItem)
  > 30 │         vulnerabilities.push(vulnInfo)
  > 31 │       })
       │       ^^
    32 │     }
    33 │

  ℹ forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 15.
Checked 4 file(s) in 3ms
Found 35 error(s)
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

実際、すでに設定しているESLintやPrettierのルールとはかなり違いがあります。Biomeのlintと独自のフォーマットルールを使うのか、ルールとオプションを使って既存の設定をできる限り適用するのかは、自分で判断する必要があります。

biome ciコマンドとbiome explainコマンド

biome ciコマンドは、継続的インテグレーション（CI）環境で便利です。実行すると、biome.json設定ファイルで定義されたルールへの違反がないかコードをチェックします。違反が見つかった場合はゼロ以外のステータスコードで終了し、失敗を示します。

biome ciコマンドの使用例を紹介します。

# Check your code using biome ci
npx @biomejs/biome ci ./src

一方、biome explainコマンドは、特定のルールについて詳しい情報を得るために使います。そのルールが重要な理由や、違反がコード品質に与える影響を説明します。ルールの動作を示すコードスニペットも出力されます。

たとえば、「useArrowFunction」ルールを理解するには、次のコマンドを実行します。

# Understand a specific rule
npx @biomejs/biome explain useArrowFunction

これにより、ルールを詳しく説明するMarkdownドキュメントがコンソールに出力されます。

# useArrowFunction

Fix is Safe.

This rule is recommended.

# Description
Use arrow functions over function expressions.

An arrow function expression is a compact alternative to a regular function expression,
with an important distinction:

this is not bound to the arrow function. It inherits this from its parent scope.

This rule proposes turning all function expressions that are not generators (function) and don't use this into arrow functions.

## Examples

### Invalid

const z = function() {
return 0;
}

const delegatedFetch = async function(url) {
return await fetch(url);
}

const f = function() {
return this.prop;
}

Named function expressions are ignored:

const z = function z() {
return 0;
}

Function expressions that declare the type of `this` are  also ignored:

const z = function(this: A): number {
return 0;
}

VS CodeでBiomeを使う

Visual Studio Code（VS Code）ユーザー向けに、Biomeは専用の拡張機能を提供しています。Biomeのすべての機能をIDEで直接利用できます。この拡張機能では、リアルタイムのlint、自動フォーマットなど、さまざまな機能を利用できます。

VS CodeでBiomeを使うには、次の手順に従います。

  1. VS Code MarketplaceからBiome拡張機能をインストールします。

  2. コマンドパレット（［表示］またはCtrl/⌘+⇧+P）を開き、［フォーマットして保存］を選択します。次に［既定のフォーマッターを構成］を選び、Biomeを選択します。

BiomeとNode.jsプロジェクト

Node.jsプロジェクトのコードベースに関する最近の大きな動きの1つが、Yagiz Nizipliによる、Biomeを既定のコードフォーマッターとして追加することを目指すオープンプルリクエストです。

BiomeをNode.jsプロジェクトのコードベースに統合することは、コードフォーマットの一貫性を確保するうえで大きな一歩です。Node.jsのように大規模なコードベースでは、コードフォーマットとコード品質lintの実行時パフォーマンスが重要です。コントリビューターにすばやくフィードバックを返せるようになります。

まとめ

これはESLintとPrettierが使われなくなるということでしょうか？いいえ、そんなことはありません。ESLintは今もコード品質を維持するための強力なツールです。カスタムルールを簡単に追加でき、多くのエコシステムプロジェクトで幅広く使われています。コードフォーマットでは、Prettierも引き続き人気の選択肢です。一方、BiomeはPrettierより高速な代替ツールであり、ESLintに取って代わる可能性のあるコード品質lintとして、確かな存在感を示しています。

セキュアなコーディングプラクティスを実践しましょう

安全で高品質なコードを書くために役立つSnyk Learnのリソースをぜひご活用ください。

コードフォーマットやlintに静的コード解析を活用している方には、SnykのVS Code拡張機能がおすすめです。コードのセキュリティ脆弱性やオープンソースの脆弱性について、リアルタイムでフィードバックを得られます。セキュアなコーディングプラクティスへの理解と習熟度をさらに高めるには、Snykに登録してください。開発者を第一に考えたセキュリティプラットフォームとして、安全で高品質なコードを書くための豊富なリソースを提供しています。

開発しながらコードを安全に

Snykはコードの品質とセキュリティ上の問題をスキャンし、IDE上で修正方法を提案します。

GitHubで無料で始めるGoogleで無料で始める