はてなグループが終了してしまい、はてなに頼んでエクスポートしてもらった MovableType 形式の日記が記載されている .mt データは手元にあれど、手元のストレージの肥やしになっている方はいませんか、私はそうでした。

というわけで、せっかく10年以上書いていた日記がWeb上から消えてしまって悲しいので、もう一度再び公開できるように静的サイトジェネレータを作った。

• https://subtech-secondlife.netlify.com/ (サブテク日記再び・懐かしのデザイン…)
• https://github.com/hotchpotch/hatena-group-static-generator (ソースコード)

これを使えばみなさんはてなグループ日記をまたどこかに公開できるので、よかったら公開しよう!!1

GatsbyJS を使って作った感想

静的サイトジェネレータは一昔前は Octopress, 最近は Hugo をよく目にするけど、GatsbyJS のアーキテクチャに興味がったので練習がてら使ってみた。なお React.js のサイトも GatsbyJS で生成されている。

GatsbyJS はデータソースからすべての静的ファイルを生成するという、生成コストは高い富豪的アプローチなのだけど、一度生成されたファイルは静的ファイルなので当たり前だけど早い。に加え、フロントエンドができるだけ早くなるようにの工夫や、画面領域に表示されたリンク先の json のプリロードなんかも標準では行っているので、ページ遷移もとても早い。なおふつうに GatsbyJS のレールに乗って開発しているだけで、Lighthouse の Performance は高得点間違い無しの感じ。

エコシステムもうまい感じに育っていて、plugin 各種を突っ込むだけでいい感じになる。学習コストも、オフィシャルサイトとドキュメントが良く出来てるので、一日あれば大枠は十分把握できる(静的サイトジェネレータの学習にそれほど時間かけてられるか、という話もありそうだけど…)。UI 面は React なので、React を知ってれば特に難しくなく実装していける。

また、すべてのデータソースは GraphQL に集約し、基本はデータは GraphQL を通じて取得するというのが面白い。データソースがローカルファイルだろうが、RDBだろうが、リモートのWebAPIだろうが、全部 GraphQL に一度はデータを入れてそれを利用する。GraphQL のレイヤーが必ず入る(別に無理に使わなくてよいのだけど、そうすると Gatsby の標準的な使い方ではなくなってしまう)ので、普通に値を渡していくことに比べ、そのためにデータ加工、取得がめんどくさくもあるのだけど、斬新なアプローチだ。

そのため、例えば検索ライブラリのGatsbyJS プラグインを作ろうと思ったら、GraphQL のデータソースのマッピングをするだけでデータ取得はすんだりと、開発するためのエコシステム上でもデータソースが一元化されているメリットは大きい。

このサイトジェネレータでも、MovableType形式のデータを、起動時に一度全部 GraphQL に突っ込んでいる。

ただ残念ながら、GatsbyJS とそのエコシステムは TypeScript との相性が良くなく、TS化すると重くなったり、ほとんどのプラグインはTS対応してなかったりと、TSを使ったほうがGatsbyJSの生産性が上がるとは現時点では言い難い。GraphQL は型生成できるから TypeScript と相性が本来良いのに、簡単に使えないのが悲しみ。

他にもエコシステムにテストを書く文化(というか書きやすさかな)がないので、このまま TypeScript 化がしにくく、かつテストが書きにくいと、将来的には負債を抱えてしまいそうな気もしそうだなーとか思いつつも、とても良くできた静的サイトジェネレータフレームワークなので、触ってみると楽しいかもしれない。