個人サイトをリフォームしました

個人サイト（このサイト）をリフォームしました。フレームワークとしては Docusaurus を使っています。

本稿では、リフォームのモチベや、Docusaurus 使ってみてどう？みたいな話を書いています。

モチベーション

概ね以下です:

• 度重なる放置の結果、古くなりすぎてバージョンアップが大変。
• 第三者のテンプレートを使っているが、その構造がよくわからんのでサイトの拡張が簡単ではない。

最近 Docusaurus 面白そうだな〜と感じていたので、その使用機会とする目的もあります。

Docusaurus どうなん？

ブログサイトに求められる機能は大体揃っている印象です。記事のバージョン管理機能があるので、ライブラリやツールのドキュメントとしてもかなり有用そうです。

以降は、個人的な良いところ・良くなさそうなところをまとめてみます。

良いところ

• MD, MDX, JSX, TSX でページが書ける。
  • 当然欲しい。
• 全て React コンポーネントとして書ける。
  • Docusaurus に依存する部分は今のところ以下が確認されていますが、他は純粋な React コンポーネントとして書けます。
    • Docusaurus Client API の使用
    • @theme/Layout の Layout コンポーネントによる各ページのラップ
      • ラップしないとナビゲーションバーやフッターが表示されない。
• 過去の破壊的なバージョンアップに困っている人が多くはなかった。
  • このブログで利用しているフレームワーク（Docusaurus）を v2 から v3 へアップデートしてみました。 | ぺらページ
  • Docusaurus v3 対応（v2 からの移行）
    • これはやや困ってそうですが、原因は 3rd-party ライブラリの開発停止だったり、やってることがややハッキーだからかなと思っています。
• Pages という機能が存在する。
  • ブログ以外の単一のページが欲しい場合にめちゃくちゃ便利です。このサイトだとプロフィールページやプロダクト紹介ページで使用しています。
• ヘッダーとフッターのコンテンツを設定ファイルで設定できる。
  • React コンポーネントを編集しなくていいので楽。

良くなさそうなところ

• Docusaurus のコア部分が担っている仕事と、公式プリセット（@docusaurus/preset-classic）が担っている仕事の切り分けが難しい。
  • ちなみにブログ機能や Pages は公式プリセットの仕事。
  • 公式プリセットは結構レールを引いているので、この 2 つを明確に切り分けられていない状態だと仕事では使いづらいなという印象を持っています。何かしらの特別なことをやりたいのにできない可能性が出てくるので。
• ビルドが長い。
  • webpack 使ってるから仕方ない気もしますが、なんとかしてほしい。
• ブラウザ上に表示されるエラーメッセージは、エラー箇所が併記されてないのでエラー箇所の特定が大変。
• サイトを配信する URL を設定ファイルに書く必要がある。
  • サイトはどこで配信されてもいいはずだから URL に依存しないでほしい。
• Infima という、Tailwind CSS っぽい CSS フレームワークを利用している。
  • 開発元は Meta だけど、production ready じゃないのが心配になる。

まとめ

心配な部分もある Docusaurus ですが、レールに乗っていれば適度な拡張性のもと色々できるので今のところ気に入っています。一緒に頑張っていこうな、Docusaurus。

今後も本ブログをよろしくお願いします。