<-- mermaid -->

Biome.jsでシンプルなフロントエンドへ

Blog Biome.js Webフロントエンド

こんにちは！経済情報プラットフォームSPPEDA の開発をしている山本です。

本稿ではBiome.jsをプロダクトに導入してみたので事例の紹介をしていきます。

はじめに

私が所属しているチームで新たにマイクロフロントエンドで機能開発をしていくにあたりWeb componentsを作る流れになりました。今回はそのWeb componentsに以前からちょっぴり興味のあったBiome.jsを導入してみました。

導入背景は、ツールのシンプルさに魅力を感じたからです。フロント開発をする上でESLintやPrettierなどのツールを導入しているプロジェクトは多いと思います。ただ設定ファイルが複数存在したり、ツールごとにプラグインのインストールが必要であったりと多少の複雑さを感じていたことが背景にあります。煩わしいツールの管理や設定から少しでも楽になるには、、というところで見つけたのがBiome.jsでした。

What Biome.js??

biomejs.dev

フォーマットやリンターを備えたオールインワンなツールチェーンです。

ツールごとの管理や設定はBiome.jsを扱うだけで済むということになります。Simple!!ですね

もちろん1つのツールに集約される分、Biome.jsの管理が複雑になるかも知れないという懸念はあります。今回導入してみた背景はNext.jsのような巨大なプロジェクトになるうる可能性は比較的低いWeb componentだったということも観点としてあります。

ただプロジェクトが巨大になってきてつらないぁと感じた場合、Biome.jsは複数設定ファイルの使用や設定の共有などもサポートしてくれています。

biomejs.dev

特徴

  • Prettierのようにフォーマットをし、時間の短縮にもなる
    • Prettierと比較すると97％も高速みたいですね。ほんまかいな。これによってCIの実行時間や開発時間の短縮になるのでありがたいですね
  • 問題を修正し、ベストプラクティスを学べる
    • ESLint, TypeScript ESLintなど190以上ものリントルールを持っているみたいですね！またLintの際により良いコードになるようサジェストも出してくれるんですね。

ハンズオン

実際にBiome.jsをインストールをしてTypeScriptファイルのフォーマット、リンターまでの一連の流れをやっていきます。

インストール

biomejs.dev

ライブラリはなんらかのパッケージマネージャーを使ってインストールするのが良いと思います。今回はpnpmにします。

pnpm add --save-dev --save-exact @biomejs/biomeでプロジェクトにBiome.jsライラブラリのインストールをし、 pnpm dlx @biomejs/biome init でbiome.jsonを作成します。 Biome.jsではこのbiome.json1つにフォーマットやリントなどの複数の設定を行います。初期のbiome.jsonはこんな感じですね。

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

linter.enabled: trueによりlinterを有効にするのでデフォルトだとリンターしか有効になってないみたいですね。。なんでだろう。

あとはIDEにも別途設定をする必要があります。私は今回VSCodeを使いますがInteliJなど他のIDEをお使いの方はこちらより設定をしてください〜〜

VSCodeでは拡張機能のインストールが必要なのでインストールしましょう。

marketplace.visualstudio.com

フォーマットの設定

まずはVSCodeのデフォルトフォーマッターをBiomeにする必要があるのでVSCodeの設定をいじります。2通りあってGUIでポチポチやるかsettings.jsonに設定するかです。GUIでポチポチしたいかたはこちらからどうぞ！今回はsettings.jsonに記載するやり方にします。結論これをペタっと追記するとOKです（詳細はこちら）

{
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit"
    },
  },
}

[typescript]の部分は適用したい言語にする必要があります。 なのでjavascriptも適用したい場合は [javascript] にする必要があるみたいですね。（僕はここをBiome.jsの設定に引っ張られて[javascript]にしてしまいフォーマットされず時間を溶かしました）

次にbiome.jsonに下記を追加してください

{
    "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
    "organizeImports": {
        "enabled": true
    },
 // ここだよ！
    "javascript": {
        "formatter": {
          "arrowParentheses":"always",
          "semicolons": "always",
          "trailingComma": "all",
          "quoteProperties": "asNeeded",
          "bracketSpacing": true,
          "bracketSameLine": false
        }
      },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    }
}

TypeScriptでも[javascript]と書くみたいなんですよね。実際にtest.tsファイルを

const test = [0, 0, -1,
    0, 
    "yamamoto"]

のようにしファイルを保存すると、、

const test = [0, 0, -1, 0, "yamamoto"];

バシッ！とフォーマットがかかりましたね

リンターの設定

今回は export defaultをエラーとして扱うように設定していきます。 biome.jsonをこのようにしてください

   "linter": {
        "enabled": true,
        "rules": {
            "recommended": true,
            "style": {
                "noDefaultExport": "error"
            }
        }
    }

この設定にするとちゃんとエラーとして扱ってくれていることがわかりますね。

noDefaultExportはerrorの他に、warn やoffにすることができるのでプロジェクトに応じて柔軟なリンターを設定することができます。

他にも複数の設定が可能なのでDocを参考にプロジェクトに適した設定をしてください〜〜

biomejs.dev

終わりに

サクッとハンズオンまでしてみました。他のBiome.jsの機能としてはアナライザーというImport分のソート・グルーピングを行う機能もあります。

実際に導入してみた所感としてはツールの一元化により設定や管理がシンプルになった恩恵はあるかなと思います。ただVSCodeだとまだまだデフォルトのフォーマッターはPrettierにしてる方も多いので設定が若干めんどくさいところはあるのかなと。なので今回はIDEに設定をしましたがCI環境で静的解析ができるようにしたり、pnpm run devコマンドなどの実行時にCLIで解析している状態にしないとなぁと思ってます。

以上です、ありがとうございました〜〜！

© Uzabase, Inc. All rights reserved.

Page top