Laravel + Vue, Nuxt 構成出身の私が、現時点で行ったライブラリ選定をまとめるぞ。
おすすめがあればコメント欄で教えてほしい...。
Database
Laravel なら全部入っているが、Next の場合開発者にお任せされている。
まず Validation は Zod がおすすめ。
型生成なども合わせて行うことが可能なので、jsonスキーマとの相性が最高。
DB周り、Model Migration Seeder は Drizzle ORM がおすすめ。
新興 ORM なのだが、すべてが TypeScript で構築可能で、とてもタイプフレンドリー。
しかも簡易DBビューワーが付いてくるので、至れり尽くせり。
書き味は、SQLが関数で表現されている感じのシンプルな実装。
Kysely に非常に近い。
json など一部の記述はまだ未対応なので、kyselyと組み合わせる変態なライブラリも用意されている。
有名なのは Prisma だけど、これは独自言語のスキーマな点がBAD...。
やはり、TypeScript で SQL を書けたほうが良いと思う。
フォーム系
フォームを作成するなら React Hook Form 一択な雰囲気がある。
デフォルト値の設定から、zod バリデーションの組み込み、ハンドラーまでを担当。
useFieldArray() というリストの追加、削除のラッパーまで用意されているので、使っていてとても楽しい。
React がレンダリングに特化しているので、Vue のように柔軟に値を持たせて、という思想で画面を作ると、コードがごちゃごちゃしてしまう。
汎用機能は外出しするのがよさそう。
UI 系
拡張性を考えると、TailwindCSS ベースのものが良いと思う。
ただ、React の UIライブラリではなく、Tailwind の class セットを提供しているものが多い。
UIライブラリの導入は、開発速度やデザインの統一感であると考えるので、自身でコピペしてコンポーネントを作成したりの手間が一段階増えるのはいかがなものか。
（デザインをフルスクラッチするなら、更にに要らないし...）
このあたりがおすすめ。
個人的には daisyUI がかわいくてとても好き。
アイコンは React Icon を使っておけばいい感がとても強い。
全部入りである...。
linter
Linter は ESLint で十分です。
Prettier は ESLint Stylistic を使って、ESLint に集約するとよい。
世の中には Biome というイケイケなやつがいるがあれは罠だ...。
HTML に対応してねぇ...。
未来に期待して、ESLint のエコシステムを利用するのが賢い。
Flat Config って言っても、設定ファイル JSON をマージするイメージなので、慣れたら簡単よ。
その他
チュートリアルにも出てくる clsx。
className に対して、Vue のように配列やオブジェクトを渡すことが可能。
これが無いと Tailwind の開発できなくない...？
レイアウトコードとデザインコードは分けたいマン。