r7kamura​.comの再実装

ウェブサイトをまた作り直した。

Next.js

今回はNext.jsを利用して実装した。

つい最近、Googleドキュメントでブログを書く実験のために、Next.jsでブログサイトをつくったことがきっかけ。これをもう少し掘り下げてみたいので、その延長として自分のウェブサイトでも使ってみることにした。これを通して、複数のデータソースから成るウェブサイトを運用する場合の勘所を掴みたい。

Next.jsは本当に良いやつで、ファイルを置くだけで動くウェブサイトをつくれた時代の牧歌的な楽しさを、いつでも思い出させてくれる。とはいえ大喜びで使うと失敗することも多く、想定の範囲内の使い方ではめちゃくちゃに捗る一方で、その範囲外に出ると一気に大変になる部分があるので注意して使いたい。

素朴に実装すると重い

これまでクライアントサイドでは一切のJavaScriptを使っていなかったが、今回から使うようになった。

「処理が重くなって体験は悪くなるものの、やりたいことが実現しやすくなるので結果的に嬉しいだろう」という予想をして取り組んだが、概ねその通りになった。ページ遷移が速くなるかと思いきや、元から軽いHTMLをやり取りするだけだったので十分に速く、初回リクエストより後のページ遷移については変化がほぼ感じられない。逆に内部実装の都合で他に重い処理が増えたことで、結果的に体験は悪くなっている。

PageSpeed Insightsからの評価も悪く、これまで100点だったのが、初回描画までに掛かる時間が長く、取得しているリソースの数も多いということで、23点に落ち込んでいる。何も最適化せず、そして1000件を超える記事を素朴に一覧表示するとこうなるのだけど、この程度の規模なら何もせずともマシな結果になるだろうと期待していたので、残念に思っている。

この機会に変えたところ

この機会に、見た目で分かる部分にも幾らか変更を加えた。

ナビゲーションをヘッダーからフッターに移動させた。そこまで利用頻度が多くないだろうというのと、記事を読み終わった後に導線がある方がサイト回遊率が向上して良いという、基本的な原則にもっと素直になるべきではないかという理由から。

リンク集というページを、サイト案内というページに作り変えた。単にウェブサイトに関する情報を載せるだけでなく、隠しページ的というか、ここまで見に来てもらったのだから読んでいて少し面白みのある情報を提供しよう、という気持ちのページにしている。

CSSも少しだけ変えた。これまで白背景だけだったが、Google Docsに感化されてしまい、メインコンテンツとそれ意外とで背景色を分けることにした。特に理由は無いが、classを使わない縛りでCSSを書いている。セマンティクスの語彙で頓知を利かせているだけなので、真面目な場では真似しない方が良いけど、こういう興味本位での遊びから労せずして知識を獲得できていくこともよくあるので、好奇心や遊びは大事にしたい。

歴史

改めて、このウェブサイトの歴史を振り返る。

• 2013年 r7kamura.github.io をRubyで実装
• 2019年 r7kamura.com へドメインを変更
• 2019年 r7kamura.com へ各種サービスから移行
• 2021年 r7kamura.com をRustで再実装
• 2022年 r7kamura.com をJavaScriptで再実装

このウェブサイトは、単なる情報共有の場としてだけでなく、そのとき試したい技術の実験場としても使っている。実装言語こそRuby、Rust、JavaScriptと数回変わっただけだが、フレームワークの自作程度の小さな単位で見ると無数に作り直してきている。

つくったあと、乗り換えずに捨てるケースが実は多い。プログラミングを学び始めて右も左も分からなかった頃、先達の技術者から、新しいプログラミング言語や技術を学ぶときはblosxomを自作すると良いと助言してもらったことがある。それ以降、いろんな言語のHello Worldとして、ブログエンジンをつくっては捨ててきている。