実に1年半ぶりくらいにサイトのバージョンアップをしました。 Javascript含めサイトのプログラムには長い間触れてなかったので、もう一度全体を把握するためにも、v4のスターターに移植する形で行いました。 なんでも新しくなるってのはいいもんですね。

Gatsbyのバージョンアップに伴って、明らかに無駄なコードが色々見つかったので、全体的にパフォーマンスも上がっております。 またサーバーもNetlifyからFirebaseへと切り替えました。

ちなみに今回の方針はムダを廃し、とにかく軽く！です。 今日はこれらについてサラッと書いていきます。

v2からv4への変化で嬉しかったこと

v4での追加機能を見た限り、個人ブログレベルで恩恵のある機能は特になさそうな印象でした。

それでも嬉しかったことを挙げるとすれば”gatsby clean”後の画像生成プロセスが無くなったことです。 でも、おそらくこれはv3での追加機能ですね。 とはいえかなり助かったことは事実です。 v2では気軽にconfigを弄れなかったのと比べれば、かなりの変化です。

他にも、スターターには最初からnormalaize.cssっていうブラウザ間の動作を調整するためのものが用意されていて、随分便利になったなぁと思いましたね。

画像関連の変化

今回一番大きく変えた部分は画像周りです。 結果として使う画像が減ったため、パフォーマンスに与える影響も大きかったです。 実際ビルド時に一番時間を食ってしまうのが画像ですからね。

アイキャッチにデフォルト画像を用意した

これまでアイキャッチ画像は1記事に必ず1つ用意しないと動かないようにしていました。 しかしアイキャッチ画像を探すという行為は想像以上に大変でして、この仕様にしてしまったせいで、好きだった記事を書く行為も次第に苦痛に感じるようになってしまい、更新頻度は激落ちしました。 なので今回その仕様を変えることとしました。

今現在の仕様では画像を特別指定しない限りは、タグに関連した画像が自動的に表示されるようになっています。 画像のクオリティについては若干問題を感じるものの、書くことに集中できる環境になったので、長期的に見ればトータルプラスになると想像してます。

記事トップから画像を削除

この変更を受けて、必ずしも全ての記事に固有の画像がある訳ではない状況になったため、記事レイアウトでは画像を使用しないようにしてみました。 文字とCSSによるレイアウトです。

画像特有の迫力はなくなってしまったけれど、意外とスッキリとした見た目になったので、これはこれで有りかなと。

関連記事作成のコーディングがクソだった

前回、見様見真似でつくった関連記事作成プログラムがあったんですが、これが酷い出来でした… かなりの部分を手直ししてます。

カエレバ等の記事とは直接関係のない余計な情報が反映されないようにしたり、createPages時に必要以上にgraphqlからデータを引っ張っていた部分を削除したりなどなど。 まぁ当たり前の話ではあるんですけど、とにかく必要最低限の記述になるようにしました。

おかげさまで、ムダに時間がかかっていたビルド時間は大幅減。 ほんの数秒で終わってくれます。 gatsby-node.jsでの処理は成果物には直接的には影響しないけれども、ビルド時間には大きく関係してくるんで要注意だなと実感しました。

ライブラリの使用をやめた

スマホのモーダルウィンドウ

スマホには目次画面をモーダルウィンドウで見れるようにしています。 そのために以前まではreact-modalを使っていたんですが、今回は使っていません。 以前と違いjsの経験値が貯まって自信がついたのか、普通にjsとcssで作ることができました。 しかも動きも前のよりずっと良い。 ただただ嬉しい。

lodashを使うのをやめた

たったの2〜3の関数のためにlodashをインストールしていたので、ちょっと考え直しました。 ネットを探すと代替コードが見つかるんで、それを変わりに使うようにして、ムダなインストールを避けるようにしました。 特段動作に影響はなかったので、これは間違いなく正解。

NetlifyをやめてFirebaseへ

Netlifyが遅いという話があったので、ついでにFirebaseへ移動してみました。 元々netlify-cliで自前ビルドをやっていたんで、使用感は全く変わらず。

Firebaseの無料枠で気になるのは通信量の方ですが、今のしょぼいアクセス数なら何ら問題ないはずだし、もし仮に無料枠を超えてしまっても、それはそれで面倒だから払っちゃえばいいかな〜という安易な考えで決断しました。

タグをカテゴリ風に転用

まだ満足はしていないんですが、とりあえず作ってみました。 元々使っていたタグに少し手を加え、擬似的にカテゴリっぽく見えるようにしています。 でも中身はタグそのものですから、カテゴリが異なっていても同じキーワードは使えないという制約があります。

まぁタグにしてもカテゴリにしても重要なことは、記事がどこに分類されるか迷わないように事前設計することですね。 曖昧さは敵。

記事ランキングのコンポーネントを用意した

記事ランキングなんて誰が見るん？と思っていた僕です。 が、最近自分でも割と見ていることに気づいてしまったので、作ってみました。

時間について

当ブログは今までずーっとオカシナ時刻を表記していたみたいです。 というのもGatsbyは時間をW3C形式で出力する際、locale設定をしても全く意味がないらしく、常に間違った時刻データがアウトプットされる仕様になってるみたいで…。

クローラー向けのW3C形式を必要とする箇所には、自分で加工したデータを使うしかないっぽいです。

まとめ

今回、画像関連を除けばあまり変化がないものの、中身をかなりガッシリとしたものにすることができました。 結果として、lighthouseの結果もかなり満足できる数値になりました。 これまでWordPress時代のほうがパフォーマンスが良かったみたいな所があったんで、ようやく本領発揮させることができてホッとしてます。

この画像に書いてあるように、lighthouseってプライベートモードでやらないとダメらしいですよ。 今日はじめて知りました。