今回はこのホームページを作る上で大変だったことを書いていきたいと思います。

初めての技術

まずは初めて触る技術を用いて開発することです。

開発では何かしら初めての技術を使うことがあると思いますが今回のホームページ制作でもいくつか初めての技術を扱いました。

以下はその例です。

• TypeScript
• Next.jsのAppRouter
• TailwindCSS
• microCMS
• ESLint
• Cloudflare

TypeScriptは元々JavaScriptを使用した経験があることから基本的な文法で困ることはほとんどなかったのですが、型についてはJavaScriptではほとんど意識をすることはなかったので最初はかなり手こずって大変でした。まだ、マスターしたわけではないので引き続きTypeScriptの勉強は続けていこうと思います。

Next.jsはPagesに関しては使ったことがあったのですが、AppRouterは安定版が最近出たばかりなので、初めて使用しました。最初はAppRouterではなくPagesを用いた開発を行おうと考えていましたがAppRouterについて学ぶうちにこれは将来的に流行るだろうなと感じて採用することにしました。

TailwindCSSはJSX記法のタグに簡単に記述をすることができ、独自の書き方などは多少覚える必要がありましたが公式ドキュメントを見ながら実現したいことの９割以上はできました。おそらく残りの１割も自分の能力が足りていないだけで実現しませんでしたが、ライブラリの導入や設定ファイルをいじることによって実現できるのではないかと考えています。（これは次のプロジェクトの課題）

microCMSはヘッドレスCMSで、ブログのタイトルや記事をmicroCMSの管理画面で管理し、発行されるAPIのデータを用いてエディタで編集することができます。つまり、この記事もmicroCMSの管理画面で書いています。

ESLintはコードの一貫性を保つことができます。今回は一人で開発していますが複数人で開発するとなったらより効果を発揮するのではないかと思います。今回の開発で特に役に立ったのはプラグインの存在でimport文の並び替えや不要なimportの削除などを自動で行ってくれます。これにより、開発時のストレスを減らすことができるのでESLintを使っている方はプラグインを導入することをお勧めします！

最後にCloudflareについてですが、独自ドメインの購入に利用しました。独自ドメインの購入自体は簡単に行うことができたのですが、ホスティングサービスVercelとの連携で自分は半日くらい詰まりました。また、DNSなどの設定も初めて行い、ネームサーバーの概念から学びました。自分が最も詰まったところとしては「お客様の SSL/TLS 暗号化モード」というところを「フル」の設定にしなければいけないところでVercelのドキュメントを見て「この操作が必要なんだ」ということを知り、解決しました。

やはりAppRouterが慣れるまで難しい！

AppRouterは従来のPagesと比べて優れている点がいくつかあります。特にReactサーバーコンポーネント（RSC）を用いてクライアントに送るjsの量を削減することができる点です。

しかし、これまでサーバーに関する知識が少なかった自分にとってAppRouterを理解することはかなり大変でした。

まず、コンポーネントがクライアントコンポーネントとサーバーコンポーネント（デフォルト）に分かれ、useStateなどのHooksはクライアントのみで利用でき、データの取得などは基本的にはサーバーコンポーネントで行うべきと知りました。

これについて自分はセキュリティ面やパフォーマンスの観点からサーバーで重い処理をした方が良いという意味で理解しています。

Pagesでは全てがクライアントコンポーネントであったため、全てのコンポーネントでHooksを取得でき、クライアントでフェッチをする際はswcなどのライブラリを利用していました。

しかし、AppRouterではクライアントとサーバーで分かれるため、フロントエンドエンジニアでもサーバーに関する知識が求められるようになるのではないかと個人的に予測しています。

以上、今回はサイト制作で個人的に大変だったことを紹介しました。

ここまで読んでいただきありがとうございます！