Fri Jun 06 2025
ウェブサイトを作るとき、DevContainerの仮想環境で作るのは当然として、フレームワークで何を選ぶかをいつも迷ってしまいます。
迷ってしまうなら最初からテンプレート化しておけばいいじゃないかということでまとめてみます。
ウェブサイトのフレームワークとしてはこれ一択でしょう。PWAもできてサーバーサイドもクライアントサイドも柔軟にこなせます。
唯一できないのがウェブアセンブリを実行することなのですが、まあこのあたりは使うことも少ないですしまあいっかなという感じです。
bunx create-next-app@latest
プロジェクト自体は上のコマンドで作成できます。
Next.jsを必要としないほどの規模であればVite+Reactでもいいと思いますが、個人的にはindex.htmlがちょっと純粋Reactっぽくなくてあまり好きじゃないです。まあこれはViteを使う以上仕方のないことらしいです。
技術的負債がどうだとか言われますが、素のCSSを書くよりはマシです。
また、後述するUIフレームワークとも相性がいいです。
何もしていなければNext.jsインストール時にTailwindCSSも設定されます。
シンプルかつTailwindCSSとの親和性も高いUIフレームワークです。
いや、公式サイトによるとUIフレームワークではないらしいですが......
https://ui.shadcn.com/docs/installation/next
Next.jsとも相性がよく、コマンド一発でインストールできます。
他の選択肢としてはChakraUIなどもあると思うのですが、こちらはTailwindCSSと相性が良くないので採用を見送りました。また、何故かChakraUIと組み合わせるとmacOSで異常にファイル保存やTypeScriptの型解析が遅くなって使い物にならなくなってしまいました。
APIと連携したい場合、APIがRESTfulであるならば必ずいれるべきだと思います。
TypeScriptの型を利用した安全なJSONパースやリクエストとレスポンスのバリデーションが行えます。
もしユーザーに入力を促すようなフォームのコンポーネントがあり、それらのバリデーションなどをZodと組み合わせて行いたい場合、React-Hook-Formは強力なサポートツールになります。
入れて全く損はないです。
https://tanstack.com/query/latest
データ取得＋キャッシュ＋Suspense対応ができる便利なツールです。
Jotaiっぽいこともできるのですが、ドキュメントの充実具合からこちらを選ぶことが多いです。
また、以下のツール類もいれると便利です。
更にVSCodeのExtensionであるGitDocと組み合わせると一定時間経過またはコマンド入力で自動的にコミットしてくれます。
https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gitdoc
コミットメッセージも自動で書いてくれるのでめちゃくちゃ作業効率が上がりました。