このブログをGatsby JS に変えて半年が経ち、さらにAnnouncing Gatsby 2.0.0 🎉🎉🎉から 3 ヶ月、重い腰を上げてこのブログも最新の GatsbyJS v2 系にアップグレードしました。

見た目の変化はほぼないですが、PC で記事ページを開いたときのコンテンツ読み直しっぽい挙動がなくなっていたり、記事を書いている途中の自動リロードの安定感が増したように思えます。

アップグレードの手順

公式のドキュメントとして v1 から v2 へのアップグレード手順 Migrating from v1 to v2 が用意されています、が、サッと眺めて見ると気づく通り、変更点は少なくありません。けっこう大変そうです。ということでアップグレードはすぐに諦めて作り直しました。

一般的に Gatsby JS でブログを作る時はgatsbyjs/gatsby-starter-blogというテンプレートから作るようで、このブログもそのようにしています。このテンプレートが v2 に対応しているので、基本的に今までに書いた Markdown の記事が詰まったディレクトリを移動させるだけで、とりあえずは動きます。

あとは同じ Style をあてたり、JSX の構造を書き直したり。このブログはタグ機能を作ったりしていたので、それを v2 の書き方で書き直すだけです。ほかにもデフォルトには入ってないサイトマップ用のプラグインを入れたり、RSS もちょっとカスタマイズをしていたので、その部分入れたり、独自で作っていたコンポーネント内で GraphQL を使うためには StaticQuery を使うようになったので、そのあたりをやります。あとは、Markdown 内の画像をファイルから展開する gatsby-remark-images が今までとは違う挙動をしたりしていたので、その対策をしたりしました。

そうですね、アップグレードだけで 1/3 日くらい使いました、ほんと気軽には人におすすめできないブログエンジンだと思います。コストかけてでも超速いウェブサイトを構築したい時人はどうぞ。

gatsby-remark-images で手を加えた部分ですが、これは何が問題だったかというと、Markdown で書かれた記事の中に HTML で a タグが埋め込まれていると、画像関係の HTML 構造が変わってしまうという問題でした。

たとえば、

華麗なるギャツビー [Blu-ray]

『ロミオ+ジュリエット』『ムーラン・ルージュ』のバズ・ラーマン監督作品 彼の名はギャツビー 男の憧れ、女の理想 その人生は――【嘘「ミステリー」】

このような要素は Markdown で表現できないので HTML で書いています。すると、このような HTML が入っていると ![ALT](filename) で表されるような画像がオリジナルファイルへのリンクにならなくなったりしました。これがなぜかというと、<a という存在が記事内に含まれていると、Markdown でなく HTML モードでパースされるからのようです。

const findParentLinks = ({ children }) =>
  children.some(
    node =>
      (node.type === `html` && !!node.value.match(/<a /)) ||
      node.type === `link`
  )

コード的にはこんな感じになっていました。そして、対策としては、なんと記事内の a タグを大文字にして <A ...></A> とすることによってやっつけています。よく見ると正規表現での a タグ検知で大文字小文字判断していませんね。ちゃんと直して PR 送れればいいのですが、それはまた体力が残ってる時に、箇所的にはこのへんgatsby-remark-images/src/index.js#L40なので、誰か上手い感じにやっといていただけると助かります。つかれた

追記

<A></A> を入れないといけない問題に関しては、そういったリンクを React の Custom Component に押し込むという方法で解決しました。 https://using-remark.gatsbyjs.org/custom-components/ Markdown に無いパーツはコンポーネントとして切り出すのが正しそう。