本サイトをNuxt.jsからGatsby.jsへ移行しました!

  • ReactJS
  • GatsbyJS
  • 趣味

本サイトをNuxt.jsからGatsby.jsへ移行しました👏

デザイン・レイアウトは個人的に気に入っているので、以前とそこまで変わっていませんが、機能は変更・追加しました。

だいたい2週間半で移行と機能追加、スタイル調整(前のものとほとんど変わらず)等ができました。空いた時間を見つけて少しずつ進めた感じです。最初は大変ですが、できあがってくるとテンションあがりますね。

簡単ですが、移行について記事にしようと思います。

理由

気分によるところもありますが、真面目に挙げると以下の通りです。

  • 前のサイトから機能変更をしたかったので、せっかくだし他のフレームワークに乗り換えようと思ったため。
  • 個人的にReact.jsをメインで使っていこうかと思っているため。
  • 特段、Nuxt.jsで静的サイトを開発する必要性も感じなくなったため。(静的サイトであればGatsby.jsの方が適していると思います)
  • 以前修正した箇所がNuxt.jsのアップデートで再発し、保守していくリスクが面倒になったため。
  • Gatsby.jsのGraphQLを使った開発の方が楽だし、今後の保守のことも考えると楽な方が絶対良いため。

追加した機能

  • ダークモードのテーマ切替
  • タグ別記事一覧(前は検索結果一覧で代替していました)

ダークモードのテーマ切替機能は前から付けたかったので、ようやくといった感じです。最近は他のWebサイトでもよく見かけますよね。

切替を考慮したCSSのコーディングやカラーパターンを考えるのが地味に大変でした。デザインは難しいですね。。。

移行して良かったこと

GraphQLで開発効率アップ

Gatsby.jsで標準提供されているGraphQLを用いた開発は効率が良いですね。👍

Gatsby.jsではファイルの読み込みや外部のデータを取得する際は、GraphQLを利用するのが基本です。Gatsby.jsで開発する際は必ず利用する機能です。

GraphQLは経験がほぼなかったので心配はありましたが、GraphiQLでクエリを設計できるので慣れるのは大変ではないと思います。クエリでレスポンスのデータモデルを設計できる点も良いです。(どうしても冗長になってしまう点がありますが...)

特に一覧ページ系の実装ではメリットを大いに感じました。

画像の最適化

Gatsby.jsではgatsby-plugin-image(旧名:gatsby-image)というナイスな機能が利用できます。これにより、画像の最適化が容易に実現できます。大まかに言うと以下の通りです。

  • 画像の圧縮
  • WebPフォーマットへの変換
  • デバイスの画面サイズや解像度に応じた適切なサイズの画像を用意
  • 専用のコンポーネント<GatsbyImage>を用いたレスポンシブイメージ対応と遅延読み込み対応

画像ファイルはそれなりにサイズもあるため、表示速度やネットワーク通信量にダイレクトに影響を与えます。なので、画像の取り扱いには注意する必要があります。

ただし、手作業でフォーマットの変更や圧縮、リサイズ等をするのは骨が折れます。こういった作業は機械的に行いたいですよね。。。

こういったときに便利なのが前述のgatsby-plugin-imageです。これにより、GraphQLでサイズやフォーマット、圧縮率等を事前に定義することで、定義に従って画像ファイルをビルド時に自動的に出力してくれます。便利すぎます。

注意点としては、出力する画像ファイルが多いほどビルドに時間を必要とします。例えば、Netlifyのようなビルド時間に制限があるような環境では留意しておきたいポイントです。

本サイトの場合は、一部の画像ファイルについては前述の機能で最適化をしています。(アイコンやロゴをSVGにしています)

記事に載っている画像ファイルはPrismicで管理・配信しています。画像ファイルをビルド時にローカルに保存してセルフホストしてもよかったのですが、Prismicの画像ファイルの管理・配信元が閲覧ブラウザ(クライアント側)がWebPフォーマットに対応していれば自動的にWebPフォーマットの画像をレスポンスするように制御できる仕様(※1, ※2)なので、記事で扱っている画像ファイルのセルフホストはやめました。

※1 参照: Image Optimization Service FAQ (Prismic Help Center)
※2 Prismicで管理している画像のURLにクエリパラメータで幅やフォーマット等を指定できます。

移行で大変だった点

とんでもなく大変だったという訳ではないですが、いくつか挙げておきます。

Gatsby.jsとgatsby-plugin-imageのAPIの把握

Gatsby.jsのAPIとgatsby-plugin-imageのAPIの把握するのに時間を要しました。分かってくればよいのですが、最初は大変だと思います。

紹介記事が多いので助かりました。

まだGatsby.js v2系の記事が多いので、v3系に読み替えつつ実装を進めた感じです。

シンタックスハイライトのライブラリを変更

シンタックスハイライトをPrism.jsからhighlight.jsへ変更したときに少し躓きました。

変えた理由はPrism.jsのテーマがイケてなかった点です(テーマ数も少ない)。。。shikiというライブラリも検討しましたが、一旦はhighlight.jsを選択しました。

使ってみたもののバンドルサイズが大きく膨れ上がってしまって困りました。対応方法はライブラリのREADMEに書かれていたので、それを参考にしつつ実装しました。

大まかに言えば、ハイライトする言語のみをインポートして、ライブラリに登録するという流れです。(他の技術記事でもとりあげられていますので検索してみてください)次のような感じです。

import hljs from 'highlight.js/lib/core';

import css from 'highlight.js/lib/languages/css';
import dockerfile from 'highlight.js/lib/languages/dockerfile';
import go from 'highlight.js/lib/languages/go';
import javascript from 'highlight.js/lib/languages/javascript';
import json from 'highlight.js/lib/languages/json';
import scss from 'highlight.js/lib/languages/scss';
import bash from 'highlight.js/lib/languages/bash';
import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';
import yaml from 'highlight.js/lib/languages/yaml';

hljs.registerLanguage('bash', bash);
hljs.registerLanguage('css', css);
hljs.registerLanguage('dockerfile', dockerfile);
hljs.registerLanguage('go', go);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('json', json);
hljs.registerLanguage('scss', scss);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('yaml', yaml);
hljs.registerLanguage('xml', xml);

export default hljs;

ブログ記事で扱う言語の数は多い場合は、インポートの記述が面倒ですね。

上記の内容のファイルを用意して、ハイライトする箇所でファイルをインポートして利用するイメージです。

これにより、バンドルサイズの削減が実現できました。

検索機能

検索機能を実現するときに、Algoriaといったサービスを使うのがよいらしいのですが、個人ブログなのでそこまで高機能なものは求めていない、かつ、お金は極力かけたくないという理由で自作することにしました。

少し前の記事ですが「GatsbyJSブログに検索を実装してみた」を参考にさせていただきました。こういうネタを記事にしていただき、ありがたいです。🙏

実装の流れはだいたい一緒で、ビルド時に検索用のインデックスデータをJSONファイルで書き出して、検索コンポーネントでファイルを読み込んで、入力キーワードで絞り込むといった流れです。

おわりに

無事移行ができてよかったです。改めて作っていたものをリリースできると嬉しいですね。

実生活の方で引っ越しをしていたため、忙しくそこまで時間は取れませんでしたが、少しずつ進めた甲斐がありました。

気が向いたときにでも機能追加したり、何かしらいじっていこうかと思います。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚