Introduction

minista（ミニスタ）は、ReactのJSXとViteで100%静的なサイトを作るスタティックサイトジェネレーターです。

Table of Contents

• Concept
• Features
• History
  • v0
  • v1
  • v2
  • v3
  • v4

Concept

• すべてをJSXで書き、綺麗なHTMLを生成！
• 静的HTMLが必要なウェブ制作の現場にもJSXのコンポーネント管理を導入したい
• 独自構文を使わず、エディタサポートの優れたTypeScriptを活用したい

Features

• すべての機能をViteプラグインとして提供
• ビルド時に自動でViteの「SSRビルド+通常ビルド」を実行

History

2020年頃にフロントエンドの主流がNext.jsになりました。エディタの補完が優秀なReactのJSXで書けて快適です。ただ、SPAを主軸としているため綺麗なHTMLを納品するSaaS開発には不向きです。

最適化されたハッシュ付与・コード分割・preloadなど、SPA系フレームワークの静的書き出しは求めているものと違います。Nuxtが流行っている頃から気づいていました。

では、EJS・Pug・Nunjucksを引っ張り出しますか？いいえ、彼らにはとても助けられてきましたが、使い心地が異なるためNext.jsと並行して使い続けるのは辛いものがあります。

v0

minista Logo (v0 ~ v2)

そこで、理想の形を求めてフレームワークを試作。Reactの renderToStaticMarkup() とwebpackを組み合わせてパッケージ化したものが初期のministaです。

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

v1

仕様が単純で拡張しやすく多数の業務で活躍してくれました！ただ、webpackは起動時にすべてをバンドルしてメモリに乗せる設計なので、内容が膨らむほどパフォーマンスが悪化。プロジェクト終盤だと起動に10秒以上かかる場合もあり悩みました。

また、Next.jsの使い勝手を再現できていない部分も気になっていました。例えば、ページはHTML化する関数が省略不可、コンポーネントは自身のCSSをimportできず、fetchからのダイナミックルーティングやMarkdown統合など気の遠くなる話に思えました。

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

v2

そんなパフォーマンスと機能の問題をすべて解決したのがminista v2です！webpackには感謝しつつも一旦別れを告げViteとesbuildを組み込みゼロから開発。

開発サーバーは規模に関係なく0.6秒ほどで立ち上がり、本番ビルドの時間も半分近く短縮。設計を見直したことでNext.jsとの親和性も増し、よりストレスなく静的サイトを作れるようになりました。

• Viteとesbuildを組み込みReact製SSGを再構築- minista v2
• SSG + Partial Hydration (部分的なReact App) - minista v2.4
• SSGにclientサイド完結型の全文検索を実装した- minista v2.7

v3

minista Logo (v3)

それから1年後、minista v3をリリースしました！基本的な使い方は変わりませんが、本体の完成度を上げるためにソースコードはすべて書き直しています。

より厳密なコーディングが行えるよう、開発中もViteのSPAではなく本番に近い静的ページが表示されるようになりました。本番ビルドはesbuildをやめてViteに統一。

画像の最適化・アセットのダイナミックエントリー・納品ページの自動リストアップ・Zipでまとめる機能などが追加されています。

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

v4

3年後、Vite（Rolldownベース）と完全に統合するためのminista v4を公開。

**すべての機能をViteプラグイン化！**コンフィグも vite.config.ts で動作します。

機能面の大きな変化は、既存のPartial Hydrationを廃止し、AstroのIslandを再現したこと。JSXの任意の部分を手軽にReact App化できるようになりました。