前回の投稿から半年近く経ってしまいましたが、この度、ブログのリニューアルを行いました。
今回の記事では、「どこがどのように変わったのか？」についてまとめたいと思います！
まずはNext.js 。リニューアル前は12系でしたので、とりあえず15系に。また、ルーティングシステムもPage RouterからApp Routerに変更しました。その理由はシンプルにApp Router形式での実装を試してみたかったからです。
Reactは18→19系に。Nodeは20→22系にバージョンアップしました。本サイトはCodebuildでビルドした資材をS3に置き、CloudFront(OAC)で配信しているのですが、執筆時点でNode 22系はAWS CodeBuildで使用可能なランタイムになっていました(公式ドキュメント)。
その他にも細々したライブラリも、既存ライブラリへ影響のない範囲でアップデートしました。
サイト訪問者のUI/UX体験には殆ど関与しないことではありますが、脆弱性を減らすためにも大事な作業です。
リニューアル前はPrism.jsでソースコードのシンタックスハイライトを行っていましたが、リニューアルにあたってShikiというライブラリに変更しました。Prismはここ数年アップデートがされていないことと、Shikiでは標準的なシンタックスハイライトを当てられるだけでなく、簡単にソースコードにCSSを当てることができる機能(後述)があり、魅了されました。
ブログ記事はmicroCMSを用いて入稿していますが、CSSを当てたいソースコードの場所にコメントを残すと、
package main
import "fmt"
func main() {
fmt.Println("I am 27 years old.")
fmt.Println("I am 28 years old.")
}コメントに対応したCSSを当てることができ、このようにDiffとして見えるようなソースコードも書けちゃいます。
他にもいろいろあるので、ぜひ見てみてください(公式サイト)。
新たに記事検索機能を設けました。ヘッダー右の虫眼鏡アイコンから記事を探すことができます。
リニューアル前から、「カテゴリ」「タグ」「アーカイブ」と、ある程度サイト訪問者が見たい記事に到達しやすいような工夫はしていましたが、記事検索機能によって、より柔軟にページ回遊ができるようになったと思います。
コンテンツの表示速度を改善したり、ファイルサイズを軽くしたいときに有効とされているwebpを導入したいと考えていました。ただし、microCMSから入稿する前段階で、手作業で拡張子変換をしたり、ファイルサイズを減らしたりすることに労力を割きたくないです。
何かいい方法はないかと調べていたら、imageminとやらを見つけました。「microCMSからダウンロードしてきた画像をimageminでwebpに変換してS3に格納する」といった処理のtypescriptの実行ファイルをCodeBuild上で動かすようにbuildSpec.ymlで定義したことで、画像の扱い方に特段気を遣わずに記事の執筆ができるようになりました。
自分もHAPPY。サイト訪問者もページが以前よりも高速に表示されてHAPPY。いい感じです。
PageSpeed Insightsのスコアはこのような結果に
ざっとリニューアルの内容を紹介させていただきました。その他にもページのレイアウトや各要素のサイズの修正であったり、ページ上部に戻すボタンを設置したりなどの細かな対応もしました。
今後も多くの方にもっと見てもらえるように、更なるアップデートもしていきたいと考えています。よろしくお願いします！
（記事も今年はもっと書けるように頑張ります...笑）
1996年生まれ。中部大学大学院にてコンピュータビジョン関連の深層学習の研究に注力したのち、2021年4月に株式会社medibaに入社。 KDDIグループ企業各社のDeveloperが集い、エンジニアが楽しめるイベントを提供するコミュニティ「KGDC」のイベント運営も行っています。
記事に関する質問は、フッター掲載の各種SNSにてお問い合わせください。