理念

ministaは、JSXで書く快適さと、静的HTMLを自由に扱えることを大切にしています。制作に使う技術を、成果物を受け取る人や公開先の制約にしないことが基本の考え方です。

Table of Contents

ReactのJSXをテンプレートとして使う

Reactのコンポーネント、props、JavaScriptの式を使い、ページの構造を組み立てます。独自のテンプレート言語を増やさず、JSXやTypeScriptの知識、エディターの支援を利用できるようにします。

Reactのコードは標準ではブラウザへ配信しません。コンポーネントを再利用して制作・保守を効率化しながら、Reactの読み込みや実行を必要としないページを作れます。

静的HTMLを基本にする

アクセスのたびにサーバーでページを生成するのではなく、ビルド時にHTMLを生成します。公開先には静的ファイルを配置するだけでよく、ページ生成のためのサーバーやデータベースを運用する必要はありません。

ページは静的なHTML・CSS・画像で表示し、操作が必要な部分にだけJavaScriptやIslandを追加します。

読みやすいファイルを納品する

HTML・CSS・JavaScriptを読みやすく整形し、納品後も確認・編集しやすいファイルを出力できます。ファイル名や出力先も調整できるため、HTML納品や既存システムへの組み込みに向いています。

ブラウザでの表示だけでなく、成果物を受け取る人の扱いやすさも大切にします。

Viteの仕組みを活かす

開発サーバー、アセット変換、バンドルにはViteを利用します。ministaの機能もViteプラグインとして設定し、必要に応じて他のプラグインと組み合わせます。

開発サーバーの素早い起動や、ファイルを保存すると変更が反映される使い心地を、静的サイト制作でも活かします。

必要な機能を選ぶ

静的HTML出力に必須のpluginSsg()を基本に、画像最適化、Island、検索などは必要になったら追加します。すべてのプロジェクトに同じ構成を求めません。

静的HTMLを基礎に、用途に応じて機能を組み合わせる。この考え方がどのように形になってきたかは、歴史で紹介します。