A Day in the Life

惜しまれながら終了した、はてなグループの日記を静的サイトとして生成するジェネレータを GatsbyJS で作った

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

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

これを使えばみなさんはてなグループ日記をまたどこかに公開できるので、よかったら公開しよう!!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 化がしにくく、かつテストが書きにくいと、将来的には負債を抱えてしまいそうな気もしそうだなーとか思いつつも、とても良くできた静的サイトジェネレータフレームワークなので、触ってみると楽しいかもしれない。

記事の一覧 >

関連するかもエントリー

このウェブサイトの実装 2020年版
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hosting を使って静的ファイルを配信してる。一部動的な実装に関しては、Cloud Functions for Firebase を使っている...
r7kamura さんや kzys さん に倣って、このウェブサイトの実装を紹介してみる。ホスティングGoogle Firebase Hos...
このウェブサイトの実装 2022年12月版
以前このウェブサイトの実装 2020年版を書いてからしばらくたって、そろそろまたサイトに手を入れようかなと思っている(思っているだけでやらないかもしれない)ので、現状を書いてみる。コア部分この部分は2020年版と殆ど変わっておらず、markdown で書いたファイルを Dropb...
以前このウェブサイトの実装 2020年版を書いてからしばらくたって、そろそろまたサイトに手を入れようかなと思っている(思っているだけでやらな...