水戸地図をリニューアルしました。今までのサイトが杜撰な管理によって半ば放置気味になっていました。そのうち作り直したいと思いつつ躊躇していたのですが、 Astro という新たなフレームワークを知ることで一気に改修することができました。

使っているフレームワークなど

新しい水戸地図は Astro で制作しました。スタイリングは Panda CSS で行なっています。Astro + Panda CSSの自作のパッケージ Astro Sarkara を制作し、それでレイアウトなどを構築しています。

Astro

Astroは静的Webサイトを構築するフレームワークです。Reactなどのフレームワークと異なり、クライアント側のJavaScriptを極力減らすことで高速なWebサイトを実現します。

サイトの構成をすべてTypeScriptで書くことができるので、Web開発者にとって非常に手に馴染むフレームワークだと感じました。

Panda CSS

Astroの特長はコンポーネントのスタイルをCSS以外の予備知識不要で書くことができる点だと思います。ですが自分はCSSが苦手なので、ブレークポイントやテーマの設定などサイト全体の統一感を出す工夫では何かライブラリに頼りたいと思いました。

できることならUIライブラリを使いたい。Astroで使える MUI(Material-UI) や Chakra UI のようなUIライブラリはないものかと思ったのですが、適当なものは見つからず。

そこで行き着いたのがPanda CSSでした。Panda CSSは前述のChakra UIの開発者が新たに制作しているCSS-in-JSフレームワークです。型安全を保ちながらスタイルを記述することができて、ビルド時にTailwindのようなクラス名を生成します。テーマの設定・拡張も容易であるため、まさに自分の要望と一致する内容でした。記法もChakra UIの The sx Prop とほぼ同じなので学習コストが少なく済んでいます。

まだv0系(2023年10月23日時点でv0.17)ですが、Astroにも対応しており、またChakra UIと同じ開発者という点も信頼が置けます。

Astro Sarkara (自作)

水戸地図のリニューアルにあたって、というわけではないのですが、AstroとPanda CSSの勉強がてらシンプルなコンポーネントライブラリを作ってみました。前述の通りCSSは苦手なので、複数のAstroプロジェクトでUIを使い回せるようにし、デザイン周りの苦しみから解放されたいという発想によるものです。

なおAstro SarkaraパッケージはNPMに公開しているので誰でも使うことができます。

リポジトリ構造

AstroプロジェクトリポジトリとMDXコンテンツリポジトリ(プライベート)の2つに分割して構成しています。

1. Astroプロジェクトリポジトリ
2. MDXコンテンツリポジトリ(プライベート)

コンテンツリポジトリをプライベートにすることで、コンテンツをGitで管理下に置きつつ、下書きなどの非公開コンテンツをGitHubで公開しないようにすることができます。

コンテンツリポジトリの更新(mainブランチにプッシュ)の際にrepository_dispatchを実行し、プロジェクトリポジトリのビルド&デプロイワークフローがトリガーされるようにしています。

ただしこの方法ではMDXコンテンツのシンタックスエラーはeslintレベルでしか感知できず、自作コンポーネントなどの型エラーには対応できません。この辺りは課題です。

以前の水戸地図からの移行作業

以前の水戸地図は Hugo で制作していました。 Jane というHugoテーマをカスタマイズして利用していました。完全に自責なのですがGitでのソース管理が杜撰で、更新は可能なものの極力触りたくないという有様になっていました。

MarkdownからMDXへ

以前の水戸地図はHugo製だったので、コンテンツはMarkdownで管理していました。AstroもMarkdownによるコンテンツ管理が可能ですが、後述するShortcodesの置き換えの必要があったことから、カスタムコンポーネントが利用できる MDX に変換しています。

Shortcodesをカスタムコンポーネントに

Hugoには Shortcodes というよく使うコンポーネントを簡略化して記述する方法があります。例えばMarkdownファイル内に以下のような記述をするとYouTubeの動画を埋め込むことができます。

{{< youtube TtIOy9WcxU0 >}}

Astroへの移行に伴い、Hugoのデフォルトに備え付けられているyoutube、twitter、Hugo modulesで導入した gallery といったShortcodesを自作のAstroコンポーネントに置き換える作業が必要でした。移行作業では以下のようなMDX内で使えるコンポーネントを作成したのですが、これに関しては別途記事にしていきたいです。

<YouTube src="TtIOy9WcxU0" />

デモページをObservableへ

以前の水戸地図に掲載していたデモページを Observable に移行しました。

以前の水戸地図では、デモページのHTML及びJavaScriptをHugoプロジェクトのstaticディレクトリに置くことでデモページを提供していました。同様にAstroでもpublicディレクトに置くことで実装可能ですが、あまり望ましい方法ではありません。

デモページ群の全消しも考えたのですが、これらはデモページ群はQiitaに投稿した記事にもURLを掲載しています。(数年前の記事のデモページに需要があるかどうかはともかく)消してしまうのは無責任かなと思い、Observableで再現することにしました。結果、D3など最近触ってないライブラリの簡単な復習になったためこれで良かったかなと思います。

今後

水戸地図のAstro化によってメンテナンス・更新しやすくなったため、今後は積極的に技術記事や過去に別箇所に掲載していた記事を更新していきたいと思います。また、過去の制作物のリニューアルも積極的におこなっていきたいです。