現状の当ブログの実装をまとめておく

ここ数日ぐらいかけてこのブログの実装を整理したので、そのついでに現状の実装について簡単にまとめておきます。 あくまで現状認識の整理であり、選択した方法が最適なのかどうかについてはとりあえず保留しています。

ブログシステム

元々いくつかのブログシステムを変遷してきましたが（Jekyll, Zola など）、4年くらい前に Next.js に乗り替えたものをそのまま継続して使用することにしました。 移行した当初のことは正直何も覚えていませんが、 当該記事 を見る限りでは既存のブログシステムの使い方を覚えるよりは自分でカスタマイズ可能な方が好みだったから、というのが大きいようです。 また、わざわざ Next.js や Tailwind CSS などを選択することでこれらの技術に慣れておきたい、という思惑もあったのでしょう（その後放置しているので、その思惑は何の意味も成さなかった訳ですが）。 特に他のものに乗り換えるモチベーションも無かったので、（気が変わらないうちは）今後もこの実装をベースに改良し続けていくことにします。

記事の集計部分

記事側の Markdown ファイルも含めて一括で管理しているので、その集計部については極力シンプルな実装になるようにしています（というよりは、"Next.js ブログ" などと検索して出る典型的なサンプルコードに少しだけ手を加えただけ）。 ただし、記事の数がそれなりに多くなっていて時系列が見えにくいなと思ったので、投稿年ごとにグループ分け可能なように階層的なフォルダ構造でも扱えるように少し修正しました。 まぁ入力側のパスに含まれているフォルダ名を結果のパス上で無視しているだけですが。

Markdown の変換処理

各記事の Markdown ファイルは、front matter 部分を処理した上でテキストとして読み取り、それを remark/rehype によって解析・整形することによって表示しています。 remark の使い方については特筆すべきことも特に無いので省略しますが、元々 remark-stringify を用いて HTML を生成した後 __dangerousInnerHTML によって変換していた部分を hast から直接 React の仮想 DOM へと変換するように修正しています。 これによって、将来的には Markdown 内に React で定義されたコンポーネントを挿入するような機能を実装出来るようになると期待できますが（例えばブログ内の記事へのリンクは <a> ではなく <Link> を用いるなど）、現状そこまでの高度なことをする予定はないです。

特に強い動機はないですが、コードブロックのハイライトを highlight.js から shiki に変更しています。 shiki では remark/rehype 用のプラグインが公式で提供されていますが、今回はそれを用いず自前のコンポーネントによって対応しています。 これは、コードブロックにタイトルが指定されていた場合に生成される DOM を細かく調整できるようにしたいという理由からですが、単に公式プラグインの使い方を調べるのが面倒だからというのもあるので、いずれは折り合いをつけた方がよさそうです。

また、改修のついでに $\KaTeX$ による数式レンダリングや、簡単な callout を使用出来るようにしました。 この辺りの追加機能が本当に必要なのかどうかについては今後の執筆意欲次第ではありますが、せっかく追加したので有効活用したいとは思っています。 特に callout の実装は中途半端であり、まだまだ改良・機能追加の余地が残されているので今後積極的に活用しつつ実装していければなと考えています（特に数学関連の記事における定理や証明の環境があると嬉しい）。

Markdown のスタイルまわり

Next.js を用いたブログのサンプルをいくつか調べると、次のようにスタイルを適用させる方法が主流であるように感じました。

<article class="markdown">
    <h1>タイトル</h1>
    <p>本文本文えとせとら…</p>
    ...
</article>

.markdown {
    @apply flex ... ;
}

.markdown h1 {
    @apply text-2xl text-bold ... ;
}
.markdown p1 {
    @apply text-normal ... ;
}
...

しかし、今回はこのような別 CSS を用意せず、可能な限り Tailwind CSS のクラス指定だけで見た目を変更するような方針にしました。 当初 @tailwindcss/typography の prose を使用することを検討しましたが、細かくスタイルを指定しようとすると prose-h1:hogehoge ... という指定が長々と続くことになってしまい、あまり好みではありませんでした。 最終的な実装では、rehype-class-names を用いて変換後の DOM に Tailwind CSS のクラスが直接設定されるようにしました。 ただ、この方針が正しいのかどうかは正直微妙な感があるので、今後も実装の方針を見直していきたいと考えてはいます。

コメント機能

utterances から Giscus へと移行してみました。 GitHub が提供している機能を間借りしているという意味では大差ないのですが、Issue 欄に実装とは無関係なコメントが投稿されることが無くなるという意味では良いと思います。 まぁそもそもの話として、コメントを投稿してもらえるだけの価値がある記事を提供できているとは言い難いのだけど…

今後の展望

基本的に自分が管理できる範疇での実装にしたいと思っているので、ページネーションなどブログとしての定番の機能ですら実装する予定は現状ないです。 ただ、そういう言い訳で回避していては何も進まないので、余力があれば少しずつ実装の改良をしていきたいと思います。