サイトをリニューアルしました！

この度サイトをリニューアルしました...と言っても、見た目についてはほぼ変わらず、今回は使用技術的な意味で大幅リニューアルというかリプレイスしました。

使用技術

今回採用したものは以下の通りです。

• Qwik
• Panda CSS
• microCMS
• Cloudflare Pages

上記のうちQwikとPanda CSSについてはまだ馴染みが薄い方もいると思うので、まずは簡単に特徴を説明したいと思います。

Qwikとは？

QwikはBuilder.io社が作成し、今年の5月にバージョン1.0がリリースされたばかりのWebフレームワークです。実際にサイトを作成する際は、ReactにとってのNext.jsのポジションにあたるQwik Cityというメタフレームワークを使用することになります。

Qwikの何がすごいの？

Qwikの売りのひとつにページの初期表示が高速という点が挙げられます。まず、従来のフレームワークではHydrationと呼ばれる「サーバーサイドでレンダリングされたHTMLに対してイベントリスナを登録してページをリアクティブにするまでの一連の処理」がパフォーマンスに関する問題のひとつになっています。そこでQwikでは「必要なときに必要なJSファイルを取ってくる」というアプローチでHydrationの問題を解決しています。つまり、画面の初期表示時にはサーバーからHTMLファイルのみを取得し、Hydrationに使用されるJSファイルはユーザーがボタンをクリックした時などに、その操作に必要なJSファイルのみ取得されます。これによって画面初期表示時にHydration用のJSファイルを取得する必要がなくなるため、初期表示の高速化に繋がるというわけです。

Panda CSSとは？

Panda CSSはゼロランタイムCSS in JSライブラリです。Panda CSSではビルド時にCSSを生成してくれるので、従来の実行時にスタイルをスタイルを生成&適用する方法と比較してパフォーマンスの向上が見込めます。

加えて、RSCとも互換性があり、サポートしているWebフレームワークにはQwikはもちろん、AstroやSolid.jsもあるのでトレンドに追従できている感もあって、さすが新鋭のCSSフレームワークだなという感じです。

なんでこれらの技術を採用したの？

私は自分のポートフォリオサイトを「新しい技術の実験場」だと思っているので、とにかく新しくて自分が気になるものを採用しました。特に先に挙げたQwikとPanda CSSはどちらもページの初期表示速度を改善しようとしている点が気に入りました。サイトの表示速度は離脱率に直結しますしね。あと、Qwikはロゴがカッコいいし、Panda CSSは公式サイトのパンダが可愛いです。まぁ、正直これはアドですね。

そして、CMSはHygraphからmicroCMSに乗り換えました。日本製のCMSなので公式から出されている活用例などの記事が日本語で分かりやすく、Qwik用の記事などトレンドに敏感な感じも好印象でした。

最後にCloudflare Pagesですが、これは特に理由はないです。これまで同様Vercelか新しくCloudflareを使ってみるか...という感じだったので、「ここまできたら全部新しいやつ使ってみるか！」と思ってCloudflareにしました。

最後に

サイトのリプレイスが完了した感想ですが、QwikについてはFormの扱いに少し苦戦しましたが、書いていて楽しかったです。Resumableに感動しました。Panda CSSについては開発者体験がかなり良かったです。TS製なので型が効きますし、VSCodeのコード補完もバッチリでした。

今後はリファクタリングしながらもう少し知識を深めていきたいと思います。

それでは、今回はここまでです。ではでは！