はじめに
Aprender 社（以下、当社）に入社後、 Web フロントエンド開発に携わる中で、今まで実務での使用経験がなかったライブラリに触れる機会が多くなりました。
個人的に実務で使用している技術スタックを整理していく中で、それぞれの選定理由や実際の使用感について知見が蓄積されたため、今回記事として共有します。
バックエンドやモバイル開発についてはまだ経験が浅いため、今回は Web フロントエンドに焦点を当てて紹介します！
おおまかなライブラリ構成
現時点（2025 年 7 月）で採用している開発スタックは以下の通りです（いずれも複数の受託開発案件ですでに使用中の構成）。
- 言語: TypeScript
- フレームワーク: Next.js / React
- リンター・フォーマッター: ESLint / Prettier
- スタイリング: Tailwind CSS
- UI ライブラリ: Radix UI
- データフェッチ: Tanstack Query
- フォーム入力・バリデーション: React Hook Form / Zod
- テスト: Jest / Testing Library
フロントエンド全般を担当することが多く、デザインからのマークアップ〜ロジック実装まで一括して担当しています。
ここからは、上記の構成をもう少し深堀りして紹介します。
フレームワーク
開発時期によって Pages Router と App Router のアプリが混在している状態ですが、新規のアプリについては基本 App Router で開発を進めています。
バージョンは 14 が多いです。
App Router については、私の場合だと案件参画前にこちらの本を共有いただいてたこともあり比較的スムーズにキャッチアップすることは出来ました。（とはいえ Next.js のバージョンもアップデートされているので、今後も何度か読み返すことになると思います。）
スタイリング
スタイリングは Tailwind CSS 一本で進めています。入社してからは一度も CSS ファイルを編集した記憶がありません...笑。
マークアップも含めてフロントエンドエンジニアがほぼ実装する体制のため、そうした環境にマッチしたライブラリだと実感しています。
VSCode の拡張機能が強力で、設定ファイルに登録したカラーコードがそのままテキスト補完に反映されたり、フォーマットが効いたりと大変助かっています。
なお、条件下のスタイル切り替えができるライブラリには色々な種類がありますが、当社では Tailwind Variants を選択しています。
Tailwind Variants の良さは以下の記事にまとめられているので、ぜひチェックしてみてください。
UI ライブラリ
Radix UI の Primitives（スタイルが当たっていないバージョン）を主に使用しています。
コンポーネントごとにパッケージが別れていることもあり、一括追加ではなく必要に応じて追加しています。
当社では、shared 系フォルダに Radix のコンポーネントを設置した後、デザインシステムなどに合わせてスタイリングした共通コンポーネントを設置することが多いです。スタイルが当たっていないため、カスタマイズ性が高く当社の開発手法に非常にマッチしています。
Radix UI にないコンポーネントに関しては、Mantine や HeroUI (旧名 NextUI)などを必要に応じて使用しています。
UI ライブラリについては、日々アップデートでの進化や新たなライブラリが出現しています。大きく流れが変化した場合でもカスタマイズしやすいライブラリを中心に選定していければなと思っています。
データフェッチ
データフェッチの書き方は色々ありますが、当社では主に Tanstack Query を使用しています。
実務で触るのは初めてだったため、この本をはじめに見ながら徐々に慣れていきました。特に以前在籍していた環境で触っていた Redux Toolkit との比較や「キャッシュの invalidate」のユースケースに沿った説明は大変参考になりました。
なお、queryFn に定義する fetch 関数は axios をベースに aspida を用いて HTTP クライアントが自動生成されるように組んでいます。
業務では openapi.yml ファイルの共有が多いため、openapi2aspida と組み合わせて OpenAPI の定義に合わせた型とパスで生成できています。
aspida については開発者の方が以下記事で詳しく紹介されているので、気になった方はチェックしてみてください。
フォーム入力
フォーム処理には React Hook Form、 入力内容のバリデーションに Zod を使用しています。
先日記事を投稿させていただきましたが、Zod v4 がつい最近リリースされました。業務で導入することになったら、またそのあたりの知見も共有できればと思います。
リンター・フォーマッター
メインは ESLint & Prettier を使用しています。
また、最近では自社サービス開発において、リンター・フォーマッターを同時に扱える Biome を導入しています。プラグインを色々設定しなくても、本体だけでベストプラクティスなルールのチェックをしてくれるので便利です。
テスティング
テストフレームワークには現在 Jest + Testing Library をメインで使用しています。
上述の Biome と同じく近年の流れもあり、自社サービス開発では Jest の代わりに Vitest を導入しています（Next.js アプリに Vitest 用の設定を入れて使用しています）。
まだテストコードの実装があまり出来てない段階ですが、これから手を入れていく段階でテックブログにも知見共有をしていければなと考えています。最近は Storybook との連携が強化されたこともあり、相互利用に力は入れていきたいところです。
その他ライブラリ
ユーティリティ系を中心に紹介します。
よく使う custom hooks を集めたライブラリです。同名のライブラリが存在しますが、streamich 氏のものを使用しています。
有名な Lodash / Ramda と似た立ち位置の TypeScript ライブラリです。バンドルサイズも非常に軽いです。
自力だと実装が難しいパターンマッチングを実現できる TypeScript ライブラリ。
URL の params や query などのパラメータの値を取り扱う hooks。
パラメータを細かく型定義できるため、URL から値をとってロジックを組むときに大分助かっています。
最後に Node.js のバージョン管理ツールも紹介します。
当社では Volta を使用するケースが多いです。
package.json の volta 機能が強力で、プロジェクトフォルダに移動するとコマンドを手動で打たなくても自動でバージョンを切り替えてくれるので非常に便利です。
最後に
最後まで読んでいただきありがとうございました！
今回の記事では、現在当社で使用している Web フロントエンド技術スタックについて整理しました。
技術（特に Web フロントエンド）の進歩は日進月歩のため、継続的にキャッチアップし、より良い開発体験を実現できる技術選定を心がけていきたいと思います。
今後も実務で得られた知見や新しい技術の導入事例について共有していきます。
Discussion