こんにちは。
Next.jsの学習の一環として、Next.jsを用いた外部サービスのAPIを利用した技術ブログを作成しました。
今回の記事では、ブログアプリを作った上で気づいた点や学びになった点を言語化していければと思います。
作ったもの
個人記事としてQiitaの記事を、ブログ記事としてmicroCMSに登録したデータをそれぞれAPI経由で表示しています。
(下層ページも含めた機能詳細は下記で記載します。)
技術スタック
| カテゴリ | ツール名 |
|---|---|
| 使用言語 | React, TypeScript |
| フレームワーク | Next.js |
| フロントエンド | TailwindCSS, daisyUI |
| テスト | Jest, React Testing Library |
| デプロイ | vercel |
実装機能
◯トップページ
QiitaとmicroCMSの記事をそれぞれ4件ほど表示させる。
◯各一覧ページ
トップページでは4件のみ表示だったQiitaおよびmicroCMSの記事を全件表示させる。
それぞれトップページに戻るためのボタンも設置する。
◯ブログ記事詳細ページ
microCMS上で登録したブログのデータ(モデル)をNext.js上に反映させ、Next.js内に用意したビューに反映させる。
今回の制作で学べた内容
SSR(Server Component)とCSR(Client Component)の使い分け
実装初期はClient Componentを多用していましたが、どうしてもCSRでないといけない箇所以外はSSRで実装した方が良いというアドバイスを基にリファクタリングしたところ、実際にはClient Componentで大半のページは実装することができました。
また、コンポーネント単位でServer/Clientを使い分けられることがわかり、イベントハンドラが絡む箇所(ボタンなど)はコンポーネントで切り分けてClient Componentにすればいいこともわかりました。
vercelを使ったデプロイ
今回の開発ではfirebaseではなくvercelを活用してデプロイを実施しました。
Next.jsのデプロイツールとしてvercelが強いことを見たことがあり、かつ個人開発での経験として今まで使っていないツールを使ってみたくなったためです。
実際にvercelを使ってみた感想として
- GitHubと連携でき、各コミットごとの結果をvercel上で見れるのが便利
- デプロイされたアプリをすぐに閲覧・確認できる
- GitHub Actions等と操作感が近く、導入までのハードルも高くなかった
といった点を感じたため、次回以降のNext.jsの開発でもvercelを活用したいと思えました。
microCMSを通したMVCモデルの概念把握
microCMSはいわゆるヘッドレスCMS、つまり独自のフロント部分を持たないCMSです。一方でビューに当たるフロント部分はNext.js側で実装したことになります。
普段私はCMS構築も業務で取り扱っているのですが、MVCモデルについては「薄らと把握している」くらいの理解度でした。
今回microCMSというモデルとビューが分離されているCMSに触れることができたおかげで、MVCモデルの概念理解が深まり、普段の業務でCMSを取り扱う際にも繋がりそうです。
次回以降に活かしたい内容
「今やっている開発/実装の本質・目的は何か？」の見極め
今回のSSRとCSRの使い分けに関して、「そもそもNext.jsはReact上でSSRを実現するためのフレームワークではないのか？」という部分を思い出したことでServer ComponentとClient Componentの使い分けや意義の理解が進みました。
このようにツール上で実現したい本質を把握しているか否かは、そのツールの強みを十二分に生かすために必要不可欠な要素であることを改めて体感しました。
このことは日々の業務内の作業フローにおいても「何のためにやっているか」を頭に入れるといった形で活かせるように思えました。
とは言いつつ業務内では言われたことについていくので精一杯になっているのが現状です。今回の学びを活かして、作業の本質やツール(システム)の本質を頭に入れて行動したいです。
「ユーザー体験の向上」＝パフォーマンス/UI/デザインの総計だということ
Next.jsの開発を通して「初回読み込みの速度が上がることでユーザー体験を向上できる」という記述を目にしました。
確かにその通りでローディング時間の短さはユーザー体験の向上に直結する要素の1つに違いないと思います。
一方で、ユーザーに対する使いやすさや快適さを向上させるにはUIやデザインも必要不可欠であることを今回の開発で再認識しました。
遷移先のリンクの有無、各画面で要素間の距離が統一されているか、画面の視認性etc...
これらはデザイナーの領域である部分も多いとはいえ、こういった知見をエンジニア側で持っているかどうかで「ユーザー体験」は大きく左右されます。
上記の内容は業務中に上司から口酸っぱく言われていた内容であり、実際に手を動かしたり画面を見合わせることで身をもって理解できることを実感しました。
最後に
ここまで読んでくださりありがとうございます。
今回の開発を通してNext.jsの使い方以上に多くのことを学ぶことができました。今後の業務だったり個人開発の中で上記の学びを活用していきたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼