2022/05/07

Vite と React Location と Apollo Client でフロントのベース作成

作っているブログのバックエンド API がそろそろ単独でやることなくなったのでフロントエンドを作った。

フロントエンドは React。いつも同じだと飽きるので今回は今まで使ったことがない諸々を導入した。

Vite
- ビルドツール
- Create React App 的にベースのテンプレートも作ってくれる
- 私がプライベートで細々勉強している分には Create React App で困ったことはないのだが、規模が大きくなるとビルドに時間がかかったり、設定が隠蔽されているのが面倒だったりするらしい
React Location
- ルーター
- ページの表示前にデータの取得を行えるのが面白いと思ったが、個人的にはデータの取得はデータを使うコンポーネントの近くでやりたいし、React 18 もそういう方向に進んでいそうなので使うかどうかは微妙
- ドキュメントを読む限りでは URL search params を使うことに対する熱意を感じるので使えるところがあれば使いたい
Apollo Client
- GraphQL をフロントから叩く有名なライブラリ

あとは Tailwind CSS を入れ、いつもの通り Nginx をプロキシとしてかませてバックエンドと結合した。

今後の展望としてはバックエンドのテストコード作成、GraphQL のスキーマからフロントエンドの型作成、フロントエンドの実装＆テストコード作成、認証まわりなどをしていく。

おわり