[OSS紹介#69] Biome：Web開発を加速する多機能ツールチェーンの魅力を解説

in

この記事について

この記事では、注目すべきオープンソースソフトウェア（OSS）「Biome」を紹介します。連載第69回となる今回は、Webプロジェクトの開発者にとって非常に有用なツールとしてのBiomeの役割に焦点を当てます。

Biomeは、JavaScript、TypeScript、JSX、JSON、CSS、GraphQLなどの多様な言語をサポートする、高性能なツールチェーンです。このツールは、コードの整形やリント、さらには開発者の生産性向上に寄与するために設計されています。特に、他のツールと比べても高い互換性を持ちつつ、インタラクティブに動作し、リアルタイムでコードの品質を向上させることができる点が特徴です。

この記事を通じて、Biomeの基本的な機能、利点、そしてその導入方法についてご紹介することで、開発者の皆さんのプロジェクトにおける開発体験をより良いものにする一助となれば幸いです。

リンク：https://github.com/biomejs/biome

本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。

1. Biomeでできること

Biomeは、高性能なWebプロジェクト用のツールチェーンであり、主に以下の機能を提供します。まず、JavaScript、TypeScript、JSX、JSON、CSS、GraphQLに対応したフォーマッターとリンターを搭載しており、特にフォーマッターはPrettierとの高い互換性（97%）を誇ります。さらに、300以上のルールを持つリンター機能により、詳細な診断情報を提供し、コードの品質向上をサポートします。

Biomeは、インタラクティブなエディタ内での使用を念頭に設計されており、コードを書く際にリアルタイムでフォーマットやリンティングを行うことができます。これにより、開発者はより効率的に作業を進めることが可能です。Biomeは現代のWeb開発における主要なプログラミング言語をサポートし、Node.jsに依存することなく動作します。

Biomeでは、CLIオプションや設定ファイルを使用して、動作のカスタマイズが可能です。特に、biome.jsonまたはbiome.jsoncという名前の構成ファイルを用いることで、プロジェクト毎に異なる設定を保持でき、チームメンバー間での一貫性を担保します。

1.1 ESLintとPrettierからの移行

Biomeは、ESLintおよびPrettierからの移行を簡単に行うための専用コマンドを提供しています。詳細を知らなくても、以下のコマンドを実行するだけで移行が可能です。

biome migrate eslint --write
biome migrate prettier --write

例えば、ESLintの設定をBiomeに移行する場合、biome migrate eslintというサブコマンドを使用して、既存のESLint設定をBIOMEに移すことができます。このコマンドは、レガシーおよびフラットな設定ファイルの両方を扱い、extendsフィールドや共有設定もロードします。

Prettierについては、biome migrate prettierコマンドを用いることで、Prettierの設定をBiomeに移行可能ですが、Biomeは異なるデフォルトのフォーマッティング設定を使用しています。

2. セットアップ手順

Biomeのセットアップは非常に簡単です。以下の手順に従ってください。

npmでインストール

npm install --save-dev --save-exact @biomejs/biome

BiomeはMITライセンスまたはApache 2.0ライセンスのもとで提供され、動作環境としてNode.jsは不要です。しかし、他のパッケージマネージャーも利用可能で、以下の方法でインストールできます。

pnpm:

pnpm add --save-dev --save-exact @biomejs/biome

bun:

bun add --dev --exact @biomejs/biome

yarn:

yarn add --dev --exact @biomejs/biome

deno: Denoとしても提供されています。

Biomeは、最低限の設定で動作しますが、プロジェクトのニーズに応じて設定を調整したい場合は、以下のコマンドを実行してbiome.json設定ファイルを生成できます。

npx @biomejs/biome init

Biomeはエディタに統合するためのLanguage Server Protocol（LSP）サポートを強化しており、優れたエラー回復機能を持っています。また、具体的な設定内容については、公式ドキュメントのBiomeの設定ガイドを参照すると良いでしょう。このガイドでは、biome.jsonの構成ファイルの構造や設定の解決方法が説明されています。

構成ファイルは通常、プロジェクトのルートフォルダに配置され、以下のような形式で、リンターやフォーマッターに関する設定を記述します。

{
  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
  "formatter": {
    "enabled": true
  },
  "linter": {
    "enabled": true
  }
}

3. 簡単な使い方

Biomeの使用方法は非常にシンプルです。以下のコマンドを実行することでさまざまな操作を行えます。

ファイルのフォーマット

npx @biomejs/biome format --write

ファイルのリンティングと安全な修正の適用

npx @biomejs/biome lint --write

フォーマット、リンティングなどを実行し、安全な修正を適用

npx @biomejs/biome check --write

CI環境で全ファイルをチェック

npx @biomejs/biome ci

ここで、CI環境の利用については、biome ciコマンドをCIパイプラインの一部として実行することで、チーム全体のコード品質と一貫性を保証することができます。

さらに、Biomeをインストールせずに試したい場合は、オンラインプレイグラウンドを利用することも可能です。

4. 結論

Biomeは、Webプロジェクトを効率的に管理するための強力なツールです。フォーマッターとリンターの機能を統合し、リアルタイムでのコード改善を促進します。また、簡単なセットアップと高い互換性を実現しており、開発者に優れたエクスペリエンスを提供します。ESLintやPrettierからの移行も容易で、プロジェクトにすぐに強力なツールを導入できます。今後の開発にぜひBiomeを活用してみてください。