こんにちは、トレタ VPoEの北川です。

今回は弊社でフロントエンドアプリケーションを新しく構築する際の開発環境として、何のライブラリを入れるかという開発環境初期セットを紹介しようと思います。

Web Framework / CSS Framework / Tesing Framework / Linter / Formatter、それぞれ定番で使うデファクトが大体ありましたが、近年では新しいライブラリも登場したので、2024年現在・最新版を、今回は直近で作られた実際のリポジトリを例にご紹介します。今回紹介するリポジトリのアプリケーションはtoB向けの管理画面のアプリケーションで、特質した部分も特にない一般的なWebアプリケーションです。

それでは早速、package.jsonの内容はを見ていきましょう。

"dependencies": {
    "next": "14.2.13",
    "react": "18.3.1",
    "react-dom": "18.3.1"
},
"devDependencies": {
    "@biomejs/biome": "1.9.2",
    "@types/node": "20.16.9",
    "@types/react": "18.3.9",
    "@types/react-dom": "18.3.0",
    "@vitejs/plugin-react": "4.3.1",
    "@vitest/coverage-v8": "2.1.1",
    "eslint": "9.11.1",
    "eslint-plugin-import-access": "2.2.2",
    "jsdom": "25.0.1",
    "knip": "5.30.5",
    "postcss": "8.4.47",
    "tailwindcss": "3.4.13",
    "typescript": "5.6.2",
    "typescript-eslint": "8.7.0",
    "vitest": "2.1.1"
},

Web Framework

以前に弊社で利用している技術スタックについて紹介しましたが、フロントエンドのフレームワークにはNext.js / Reactを利用しています。それぞれのバージョンは最新で、Next.jsはAppRouterの使用を前提としています。

nextjs.org

弊社内の既存のNext.jsを利用しているアプリケーションでも、PagesRouterからAppRouterへの移行は少しずつ進めており、AppRouter化の進め方の詳細は先日の弊社イベントで紹介された技術顧問の奥野さんのスライドにも細かく説明されているので、ぜひご参考にしてください。

speakerdeck.com

CSS Framework

CSSフレームワークについては、以前はEmotionを使うことが多かったのですが、Next.jsのAppRouter化に伴いEmotionではRSC（ReactServerComponent）に対応していないため、TailwindCSS を利用しています。

RSCに対応したCSSフレームワークの選定については、決定打があまりなかったため軽量さやシェア、あとは別で進めているデザインシステムとの親和性を考慮してTailwindCSSを選んでいます。

tailwindcss.com

Lint

LinterやFormatterについては以前はEslintやPrettierを主に使っていましたが、最近ではBiome に移行する流れがでてきました。

Biomeの良さは実行速度の速さです。実際にCIで実行しているEslintのリントに比べて実行時間は約1/3になりました。

BiomieはPrettierとほぼ互換があるのと、Lintルールも一通り対応しています。Eslintのプラグインは対応していないため、一部のプラグインを使うためにEslintも残して併用していますが、Eslint単独ですべてのルールをチェックするよりもCIの待ち時間が大幅に短くなるメリットがあります。

biomejs.dev

Test

テストツールも以前はJest を主に使っていましたが、現在ではVitest に移行しています。こちらもBiomeと同様に既存資産からの移行がしやすく、実行速度が格段に早くなっています。

vitest.dev

Utility

こちらは必須ではないですが便利ライブラリとしてよく使用しているのがKnip です。KnipはExportsなどを解析して使われていない不要なファイルを抽出して削除してくれるライブラリです。使われているかわからないようなファイルを見つけ出し安全に削除できるため、リファクタリングに重宝します。他のプロダクトではでデータベースの乗り換えなど大規模なリアーキテクトがあったので、その際の旧実装のデッドコードを全て除去するのにも活躍しました。

knip.dev

さいごに

いかがだったでしょうか。少し前まではPrettier などはどのリポジトリにも入れていましたが、それも新しいライブラリに置き換わりより快適な開発環境に移り変わっています。新規プロダクトを作る以外にも、既存のアプリケーションの見直しにぜひご活用ください。

技術顧問からのひとこと

今回の環境構築において、Prettierがレギュラーから外れたことには驚きがありました。Prettierは、その完成度の高さから、永続的に利用され続けるだろうと思われていたフォーマッタですが、時代の流れを感じます。このように、数年前には当たり前だったライブラリ構成も、年月とともにトレンドが移り変わることがよくあります。

弊社では、ただ流行を追うのではなく、安定性やCIでの処理時間なども考慮して環境構築を行っています。特に、Node.jsで実装されていた処理がRustやGoで開発されたライブラリに移行していく流れには、時代の変化を強く感じます。今後もJavaScript以外のエコシステムがさらに発展していくことに興趣が尽きません。