TypeScript で Web 開発をする際の候補メモ

更新ログ

• 2025/01/04 Git Hooks ツールの Lefthook を追記
• 2025/01/05 フロントエンドの状態管理に XState を追記
  • 各リンクテキストを対象名がわかりやすい形式に変更

概要

以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？

最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。

気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてませんのでご了承ください。また、他におすすめのものがありましたらコメント等で教えて頂けますと助かります。

プロジェクトの初期化

基本的には利用するライブラリやフレームワークの create-xxxx を使って初期化してカスタマイズする。その方が必要な設定も揃っているし最新の設定を知るきっかけにもなる。

Fast, disk space efficient package manager | pnpm
パッケージマネージャーは pnpm を使う。 高速なのと monorepo 時の構造も良い。

node のバージョン管理は以前は Volta を使っていたが pnpm が experimental のまま止まっていて上手く管理できないのでやめた。他言語のバージョン管理に使っていた mise にし、pnpm は corepack で有効化している。

フロントエンド

基本的には React を主軸とする。
実質的に今のフロントエンドのスタンダードで情報やエコシステムが充実している。

Svelte
Qwik
Astro
個人的関心も含めてこの辺りの動向は追っておく。

フレームワーク

Remix
React Router
フレームワークは Remix (React Router v7) を第一候補としている。
全体的にシンプルで理解しやすく、SPA/SSR/SSG の使い分けも行いやすい。

GitHub - yusukebe/hono-remix-adapter
サーバー処理も基本的に Remix 上で行うが API の提供が必要になったら Hono のアダプターを使って構築する。将来的に負荷分散が必要になったら分離できるようにしておく。

Next.js
幅広い最適化や魅力的な機能も多いが学習コストも高い。周辺のエコシステムも含めて自分たちに必要かやチーム開発の場合は特にその学習コストを払えるかを検討する。
React の最新の動向を追うという意味でも情報のキャッチアップはしておく。

TanStack Router
基本的に SPA でも Remix の SPA モードで始めると思うけど、もし Vite からはじめてルーティングが欲しくなったら TanStack Router を使う。

状態管理

Jotai
Jotai を第一候補としている。

Zustand
Valtio
要件によっては候補としてこれらも考えておく。

XState
ステートマシン。複雑な状態遷移が必要になった時に導入を検討する。

TanStack Query
サーバーデータの状態管理が必要なら TanStack Query を使う。

UI コンポーネント

shadcn/ui
今の時点での第一候補は shadcn/ui としている。
コンポーネントコードがそのまま入手できてカスタマイズ性が高いのと学習の教材となるのも良い。

Mantine
スタイル付きで速度が求められるならコンポーネントやフックなどが豊富な Mantine を使う。Headless UI としても使えるというのも良い。

Radix Primitives
純粋な Headless UI が欲しい時の個人的第一候補。

Panda CSS
Ark UI
Chackra UI v3 と関連ライブラリとして注目度も高いのでこの辺りも情報は追っておく。

フォーム

Conform
Remix / Next.js (App Router) で使うならこれ。
フロントエンドとサーバーサイドのバリデーション時のエラーハンドリングを一貫した形式で行える。React Hook Form との差分が追いきれてないのでその点に注意。

React Hook Form
機能が豊富で扱いやすい安定のフォームライブラリ。
フロントエンドとサーバーサイドが分離されているなら最有力。

TanStack Form
センスの良いライブラリを排出している TanStack から Form も出ている。

カタログ

Storybook
エコシステムも含めて現状はこれしかない。
開発中の見た目や振る舞いの確認以上の付き合い方は模索中。

Ladle
現状一番有力な代替として動向は見ておく。

ビルド

基本的にはフレームワークのテンプレートに含まれているものを使う。

Vite
自分で一から組むならの最初の選択肢。採用しているフレームワークも多い。

Turbopack
Next.js に組み込まれている。
直接使う事は恐らくないけど動向は追っておく。

Rspack
既存の Webpack ベースのプロジェクトの代替手段として覚えておく。

その他

nuqs
クエリパラメータを型安全に扱える。

React Scan
パフォーマンスチューニングをする際の補助ツール

サーバーサイド

Hono
現状は自分の中ではこれしか選択肢がない。
作りが一貫してシンプルで理解しやすく拡張もしやすい。様々な環境で動くし、Web 標準で作られた様々なフレームワークやライブラリとの連携もしやすいと良い所が多い。

RPC

RPC - Hono
Hono の RPC モードを使う。

Zod OpenAPI - Hono
Hono OpenAPI - Hono
TypeScript 以外の言語向けクライアントや Swagger UI が欲しい時はこれらを使う。
Zod OpenAPI は実際に使用経験あり。Zod 以外のバリデーションライブラリに対応したHono OpenAPI が出たので今後はこちらの方がいいかも。

tRPC
昔は使ってました。今でも TypeScript で完結するのであれば有力な選択だと思いますが、他言語のクライアントや公開 API が必要な際に現状有力な手段がない。
GitHub - trpc/trpc-openapi
以前は trpc-openapi があったのですが長らくメンテされておらず、先程確認したところアーカイブされていました。こちらの Issue でフォークして開発している人達が名乗りを上げているので動向を追ってみるといいかも。

ORM

Prisma
使い慣れているし安定の選択肢。複数スキーマファイルの対応や TypedSQL など時々感じていた不満点も順次解消されている。ただちょっと複雑な事をやろうとした時に学習コストがかかってしまう。

Drizzle ORM
軽量で Prisma に似た形式と SQL に近い形式の 2 パターンで書けるのが良い。TypedSQL はやはりひと手間かかるのとこちらの方が比較的学習コストは低い。

ログ

pino
軽量で扱いやすいロガー。
開発と本番での出力形式の切り替えやカスタマイズ方法などをいくつかの有名ライブラリと比較したところ一番良かった。(詳細なメモは消失)

ビルド

esbuild
基本的に tsc は使わずに esbuild をシンプルに使う。
moduleResolution に node16 や nodenext ではなく bundler を使いたいのが理由。

tsup
esbuild の最適化が必要になったりと設定が複雑になり始めたら検討する。

認証

Identity Platform | Google Cloud
Firebase Authentication
慣れてるのもあり Google Cloud を使う事が多いので基本的に Identity Platform (Firebase Authentication) を使う。

Clerk
IDaaS の中では各種フロントエンドのフレームワークに特化した SDK を提供したりと Clerk が良さそう。

Auth.js
Next.js を使うなら Auth.js(NextAuth) は検討する。experimental でなくなれば他フレームワークでも検討してよさそう。

GitHub - sergiodxa/remix-auth
Remix 使うなら検討してみる。

Lucia
セッションの管理方式がデータベースしか選べないが特定のフレームワークに依存しないライブラリとしては最有力となる。

バリデーション

Valibot
現在の第一候補は Valibot。
Zod とほぼ同等の API を提供しており、定義の仕方もこちらの方が好み。
まだ同等の規模で扱った事ないが Zod であった型解析の問題が解決していると嬉しい。

Zod
機能は十分で対応ライブラリが非常に多いと利点は多いが規模が大きくなると型解析にかかる時間が問題になってくる。別パッケージに切り出して別ビルドにすると解決するが、ビルド構造が複雑になってしまう。
使用したいライブラリが未対応だった場合は検討する。

テスト

Vitest
テストフレームワークは Vitest を使う。
早いのと Vitest UI が便利。Jest の ESM 対応が experimental のまま進まないのもある。
テスト環境は happy-dom で使い始めて問題が出れば jsdom に移行する。

Testing Library
コンポーネントテストの定番ツール。

Playwright
E2E テストツール。

Mock Service Worker
API のモック。

Faker
他言語でもよくあるテスト用のデータ生成ツール。

GitHub - kolodny/safetest
Safetest も気になるところ。

Linter / Formatter

Biome
Linter と Formatter はどちらも Biome で行う。
プロジェクトが大きくなるにつれて速さは開発効率に大きく影響しますし、対応したルールも順次追加されており十分に感じている。
Biome にないルール、特にライブラリやフレームワークなどが提供している eslint のプラグインが必要な時は併用を視野へ。

The JavaScript Oxidation Compiler
Oxc もまだ Linter だけだが徐々に充実しているので動向は見ておく。

Git Hooks

Lefthook
同じ目的のツールとしては husky + lint-staged が有名ですが、設定が分散するのと処理わけなどをしようとすると面倒になるので、YAML 1 ファイルで完結して属人性もあまり出ないこちらが今の一押し。

monorepo

Turborepo
基本的に turborepo と pnpm workspaces を組み合わせて使う。
依存関係を考慮したタスクの実行やキャッシュの機能が簡単な設定で使えるようになり、全体的に学習コストも低いので monorepo にするならとりあえず入れておく。

Nx
規模によっては Nx を検討する。
monorepo フレームワークのようなツールでアップデートが辛いという噂も気になる。

Syncpack
monorepo 内で同一パッケージを利用している際のバージョンずれを検知するツール。

NPKILL
リポジトリの node_modules を探索して削除してくれるツール。
monorepo でなんかおかしくて一括でごそっとやりたい時に便利。

関数型

基本的にはガッツリ入れ込むのではなくエッセンスを取り入れるぐらいが好み。

GitHub - supermacro/neverthrow
関数型の Result や Either 風のエラーハンドリングを行えるライブラリ。

GitHub - gvergnaud/ts-pattern
パターンマッチングライブラリ。

Effect
チームが関数型言語に明るいなど学習コストが問題にならないなら Effect もあり。

その他

dotenvx
暗号化に対応した dotenv。

GitHub - motdotla/dotenv
GitHub - entropitor/dotenv-cli
dotenv。

GitHub - mysticatea/npm-run-all
npm scripts の直列や並列実行の補助ツール。

Knip
未使用なファイル, export, dependencies を検知するツール。

GitHub - plopjs/plop
コードジェネレーター。
turborepo を採用しているなら @turbo/gen を使う。

GitHub - raineorshine/npm-check-updates
npm のアップデート補助ツール。
Dependabot や Renovate だと遅れてきたりと手動でパッとやりたい時に使う。

GitHub - isaacs/rimraf
環境に依存しない rm -rf をノードで行うツール。

TypeScript Execute (tsx)
TypeScript を直接実行できるツール。
Node.js が TypeScript に対応したので LTS にも来て速さに問題がないなら必要なくなるかも知れない。

google/zx
JavaScript / TypeScript でシェルスクリプトの代替スクリプトを書けるツール。
TypeScript で書いた時は tsx や Node.js の TypeScript 実行モードが必要になる。