歴史

ministaは、ReactのJSXでページを作り、綺麗なHTMLを納品するためのツールとして2021年に開発が始まりました。

Next.jsで使い慣れたJSXやエディターの補完を、静的HTMLの制作でも使いたい。一方で、納品するファイルの名前や構成、読みやすさは調整したい。この両立を目指しています。

Table of Contents

• v0：JSXでHTMLを作る試作版
• v1：実務での利用と課題
• v2：Viteとesbuildを採用
• v3：開発中も静的HTMLを表示
• v4：機能をViteプラグインへ
• v5：基本構成とビルドを整理

v0：JSXでHTMLを作る試作版

minista Logo (v0 ~ v2)

ReactのrenderToStaticMarkup()とwebpackを組み合わせ、JSXから静的HTMLを書き出す仕組みをパッケージ化しました。これが初期のministaです。

ページや共通パーツをReactコンポーネントで管理し、成果物は通常のHTMLとして出力する処理を実現しています。

• React(JSX)で書けるコーディング用SSG - minista v0

v1：実務での利用と課題

単純で拡張しやすい構成を活かし、実際のWeb制作で利用するようになりました。一方で、v0〜v1はプロジェクトが大きくなるとwebpackの起動に時間がかかり、終盤には10秒以上待つこともありました。

ページをHTML化する関数を毎回書く必要があり、コンポーネントからCSSをimportすることもできませんでした。APIのデータからページを生成する機能やMarkdownへの対応も課題となり、設計を見直すことにしました。

• Reactで書けるSSG改善点と今後について- minista v1

v2：Viteとesbuildを採用

webpackをViteとesbuildへ置き換え、ゼロから作り直しました。開発サーバーにはVite、本番の静的HTML生成にはesbuildを使い、起動とビルドを高速化しました。

ページの書き方も整理し、getStaticData()によるデータ取得とルート生成、Markdown・MDXに対応しました。v2.4ではページの一部をReactで動かすPartial Hydration、v2.7ではブラウザだけで動作する全文検索を追加しました。

• Viteとesbuildを組み込みReact製SSGを再構築- minista v2

• SSG + Partial Hydration (部分的なReact App) - minista v2.4

• SSGにclientサイド完結型の全文検索を実装した- minista v2.7

v3：開発中も静的HTMLを表示

minista Logo (v3)

基本的な使い方を保ちながら、ソースコードをすべて書き直しました。開発中もSPAではなく静的HTMLを表示し、本番に近い状態で確認できるようにしました。本番ビルドもesbuildからViteへ統一しています。

画像最適化、アセットのエントリー指定、納品ページの一覧生成、ZIPアーカイブの生成など、HTML制作と納品を支える機能も追加しました。

• ReactのJSXで書けるSSGを1から作り直した- minista v3

v4：機能をViteプラグインへ

RolldownベースのViteと統合し、すべての機能をViteプラグインとして提供する構成へ変更しました。vite.config.tsに必要なプラグインを追加します。

従来のPartial HydrationをIslandへ置き換えました。JSXの任意の部分にclient:*を付けてReactで動かし、propsや読み込みのタイミングに対応しました。

• SSGをViteプラグイン化し3年振りにリリース - minista v4

v5：基本構成とビルドを整理

使い勝手はそのままに大幅なリファクタリングと仕様の追加を行いました。

Project Graphによるroute, page, assetの一元管理やライブラリの非同期ロードなどによってbuildを最大約67%高速化しました。v4.0.11とv5の比較では、ソースと設定が同じ6個のplaygroundでclean buildの所要時間を最大67.0%短縮しています。

Searchの辞書参照をMap化し、検索JSONのindex生成を最大約77倍に高速化しました。1,000ページ・10,000語彙の合成データでは、所要時間を約98.7%短縮しています。この計測はv5内の最適化前後の比較で、DOM解析やJSONのシリアライズは含みません。

Layoutにhtml, head, bodyの編集機能を追加、publicへのパスにbaseを反映、Islandにシリアライズ化される変数の受け渡しを実装、pluginSearchの複数検索出力に対応など、細かい仕様の改善も行いました。

また、このタイミングでドキュメントサイトを多言語化しており、英語圏のユーザーにもコンテンツを提供しやすくなりました。

※過去の記事にあるAPIや設定は、そのバージョンのものです。現行の手順ははじめるを参照してください。