Masashi Ishikawa's portfolio

Gatsbyバージョンアップ(v2 to v5)

2023/04/06
Gatsby

なにこれ

ブログについて以下2点改修したので備忘録を残します。

  • Gatsbyをv2からv5に更新:しばらくブログを更新しない間にGatsbyの最新バージョンはv2からv5になっていたのでバージョンアップしました。
  • +αの機能を削除:いままではプロフィールページなど充実させて機能をモリモリにしていましたが、今後はメンテコストを下げて記事投稿に集中したいからです。

Gatsbyのバージョンアップ

忘れていたり古くなった私のGatsbyの知識をアップデートするため、 package.jsonのライブラリ更新ではなく、npm init gatsby blog -- -y -tsでアプリを新規作成して、必用な機能だけ移行する形を取りました。

ここではライブラリのバージョンアップだけではうまく行かない点について列挙します。

gatsby-image, gatsby-background-image

画像を扱うライブラリが大きく変わっていました。 いずれも公式サイトに従って書き換えました。

またgatsby-background-imageはGitHubのissueで記載があるようにGatsby V5の場合はビルドエラーが出ます。やむをえずnpm cinpm i実行時は--legacy-peer-depsを付与しています。

emotion

Emotion11でパッケージ名が変わっているのでインポート文を変えました。

- import { css } from '@emotion/core'
+ import { css } from '@emotion/react'

またtsxファイルでcss属性に対してエラーが出るようになったので、Emotionの公式サイトを参考にeslintrc.jsのruleに以下追加しました。

eslintrc.js
{
  "rules": {
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
}

削除した機能

改修過程で記事投稿に関係のないプロフィールのような付加価値的な機能と、ビルド時間が増大する機能については、移行しないことにしました。 当時はフロントエンドのスキル情報のためのプレイグラウンドとして色んな機能を実装していましたが、今は技術調査結果や読後レポートを公開する場として使いたいからです。

Qiita記事情報取得・表示

これまではQiita連携のプラグインを使っていましたが、以下理由から廃止しました。

  • Qiita記事とGatsby側記事の差分を埋めるため、nodeを加工して独自のIFを設ける必要があり、ブログの作りが複雑化してしまう
  • 1年以上の時間軸で考えるとプラグインはメンテコストがかかる
  • Qiita側でアクセストークンの発行が必要でメンテコストがかかる

GitHubリポジトリ情報取得・表示

当時気張って作ってみたものの、普段の記事作成作業の生産性を下げるので廃止しました。

  • GitHubでアクセストークンの発行が必要でメンテコストがかかる
  • ビルド時間が少し長くなる
  • ローカルで頻繁にビルドするとGitHubアクセス制限回数に到達しGitHub API呼び出しで401エラーになる

WordCloud表示(記事文章中の頻出単語可視化)、d3.jsのよる記事関連性の可視化

これらも当時気張って作ってみたものの廃止しました

  • 必要はライブラリが多い、1年立つと使い方を忘れてる
  • ビルド時間が大幅に増加してしまう
  • Gatsby v2→5更新時に画像処理系ライブラリ起因でエラー多発

ビルド処理:gatsby-parallel-runnerによる画像生成処理の並列化

上3つの廃止に伴いビルド時間も短縮されました。 当時ビルド時間短縮のために導入していた本機能も、Google Cloudとの連携といった煩わしさがあったので今回を機に廃止しました。

ビルド処理:画像縦横幅縮小・画質低減

以下理由から廃止しました。

  • WordCloudの部分でもそうでしたが画像処理系は処理が重く、ライブラリバージョンアップでエラーも付き物
  • サムネイル画像を最適なサイズ・画質で作る環境は別で整えたので画像加工処理自体が不要になった

ビルド処理:Circle CIでのビルドNetlifyへのデプロイ

GitHub Actionsに乗り換えました

Renovate

Renovate(リポジトリで利用しているライブラリのバージョンアップを自動でしてくれるツール)は廃止しました。放っておくとプルリクが溜まり続けるので、1人で長期間メンテするリポジトリの場合は手動が良いと感じました。

残している機能

プラグイン系

自作系

  • 目次作成


  • 関連記事表示

まとめ

だいぶスッキリして記事が書きやすくなりました。 1年以上の時間軸で自作ブログの運用を考えると、外部連携を減らしてリポジトリのソースコードだけで完結すること、環境変数などの構成管理対象外の情報を極力減らすことがポイントだと感じました🍅

  • このエントリーをはてなブックマークに追加

←前の記事

thumbnail

関連記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail

最近の記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
記事一覧