Biomeへの切り替えがもたらす効果

こんにちは、いわむらです

先月のAWS Summitで、チームトポロジーに関するトークセッションを聞き、開発効率の向上がいかに重要かを再認識しました。そこで、リンターとフォーマッターをBiomeへ切り替えることを試してみることにしました。

Biomeについては公式から以下の文章を引用してみました：

Biomeは JavaScript、TypeScript、JSX そして JSON のための高速なformatter であり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。

特に、Huskyを利用してコミット時に自動的にチェックを行う設定をしている場合、Biomeに切り替えることでチェックのスピードが向上し、時間の短縮が期待できます。

この記事では、Biomeへの切り替えがどのように時間短縮に寄与するのか、具体的な導入手順と共に紹介します。Biomeの利点を最大限に活かし、開発効率を高める方法をぜひご覧ください。

導入手順

ここでは、BiomeをNext.jsプロジェクトに導入する具体的な手順を紹介します。現在使用しているeslintやprettierからBiomeへの移行手順も併せて解説します。

1. Biomeのインストール

まずは、Biomeをプロジェクトにインストールします。以下のコマンドを使用してインストールしてください。

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

他のパッケージマネージャーについての詳細は、公式ドキュメントをご覧ください。

2. Biomeの設定ファイル作成

次に、yarn biome initコマンドを実行して、Biomeの設定ファイルを作成します。

これによりプロジェクトのルートディレクトリにbiome.jsonファイルが生成されます。生成された設定ファイルに以下の設定を追加してみました。

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
  	"enabled": true
    "ignore": ["node_modules"]
  },
  "linter": {
    "enabled": true,
    "rules": {
      "all": true,
      "suspicious": {
        "noExplicitAny": "off"
      },
      "style": {
        "useNamingConvention": "off",
        "noDefaultExport": "off",
        "useFilenamingConvention": "off",
        "useImportType": "off"
      },
      "nursery": {
        "noUndeclaredDependencies": "off"
      },
      "complexity": {
        "useSimplifiedLogicExpression": "off",
        "noExcessiveCognitiveComplexity": "off"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "json": {
    "parser": {
      "allowComments": true
    },
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 100
    }
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always",
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 100,
      "quoteProperties": "asNeeded"
    }
  }
}

実際の効果

まず、Biomeの導入によって最も顕著に感じられたのは、コードフォーマットのスピード向上です。従来使用していたPrettierと比較して、Biomeは大幅に高速なフォーマットを実現しました。手元での検証では、同じコードベースをフォーマットする際にPrettierでは約4秒かかっていたのが、Biomeでは約0.2秒で完了しました。これにより、開発者がコードフォーマットに費やす時間が大幅に削減されました。

現在のプロジェクトのコードベースは、まだ半年ほどのもので比較的小さいため、時間短縮の効果は限定的かもしれません。しかし、プロジェクトが成長し、コードベースが大きくなるにつれて、Biomeの高速フォーマットの恩恵はさらに顕著になるでしょう。

まとめ

開発効率を高めるためのツール選定は重要だなと感じています。Biomeを導入してみてぜひその効果を実感してみてください。開発フローの最適化により、より多くの時間を実装やレビューに費やすことができるようになるでしょう