Astroにフォームを追加/設置/設定する方法

What is Astro?
Astroとは

Astroは、2022年8月にバージョン1.0がリリースされた、比較的新しいJavascript系ジェネレーターです。ページの表示速度にこだわっており、デプロイ時に余計なJavascript部分を削ぎ落として軽量化を図るなどの工夫が行われています。実際に、最終的な出力サイズが激減するケースも多く、できる限り軽く、速くを追求するニーズにこたえるかたちで支持を拡大しています。

Astro.jsは、静的サイトジェネレーター（SSG）であり、ビルドシステムとフロントエンドフレームワークの両方の機能を提供しています。Astro.jsを使用すると、HTML、CSS、JavaScript、Markdownなどのコンテンツを組み合わせて、高速で効率的な静的サイトを作成することができます。コンテンツのプレビューやパフォーマンスの最適化などの機能も備えています。

外部のCMS連携やマークダウン対応など、昨今の静的サイトジェネレーターに求められる機能はカバーしており、ReactやVue、Tailwind CSSなどのような外部ツールやフロントエンドフレームワークと容易に連携できたり互換性があったりするため、既存のフレームワークの知識やスキルを活用しながら、高速かつ効率的な静的サイトを作成することができます。

デプロイ先も他の静的サイトジェネレーター同様、大手どころでの対応も非常に進んでいますし、Netlifyがオフィシャルホスティングパートナーとして掲載されるなど、その結びつきが強いことも伺いしれます。Javascript系のジェネレーターを探していてパフォーマンス面で不満をもっていた人や、すでに手になじんでいるツールを使って開発したい人にとって、有力な選択肢になるのではないでしょうか。

2023年9月にバージョン3.0がリリースされ様々な機能強化や最適化が行われました。精力的な開発は続いており、今後も静的サイトジェネレーターとしての地位を確実なものにしていきそうです。

Astro公式サイトは以下をご参照ください。
» Astro公式サイト

Astroの主なリリース

• 4.6
  i18n機能のルーティングを手動で設定できる機能が追加された他、CSRF対策を行えるようにする実験的機能の導入、クッキー処理の改善、バグの修正などが行われました。
• 4.5
  開発体験を大きく向上させるDev Audit UIがリリースされた他、複数CDNのprefixへの対応、View Transitionsの改善や、いくつかの実験的機能の導入、バグの修正が行われました。
• 4.4
  パフォーマンス監査の機能が強化され画像の遅延読み込みなども対象になった他、ストリーミングのパフォーマンス改善や、リモート画像のサイズを推測するinferSize属性が追加される等の改善が行われました。
• 4.3
  実験的機能としてサブドメインでのi18n判定の機能が追加された他、HTMLファイルの出力オプションとしてpreserveの追加、ComponentPropsの追加、画像参照の相対パス記法の簡略化などの改善が行われました。
• 4.2
  prefetch機能がSpeculation Rules APIに実験的に対応した他、ルーティングの優先順位設定を実験的に変更できる機能とフラグの導入、redirectToDefaultLocale設定の追加、アクセシビリティルールの改善、マークダウンでの画像最適化のカスタマイズ性向上などの機能改善などに加えて、バグ修正が行われました。
• 4.1
  ARIA関連のチェック追加やclient:visibleへのオプション追加、クッキーへのカスタムエンコーディング/デコーディングの追加などの改善や、バグ修正が行われました。
• 4.0
  ブラウザでの開発補助に役立つAstro Dev Toolbarが追加された他、多言語、国際化対応に役立つi18n Routingが安定版としてリリースされ、設定やルーティング自体の改善が行われました。また、大規模サイトのパフォーマンスを改善するIncremental Content Cachingが実験的導入された他、View Transition APIsの追加やロギングの改善など、多数の改良が行われました。
• 3.6
  View Transitionsにbefore presentation, after presentation before swapの3つのイベントが追加されるなどの改善が行われました。
• 3.5
  多言語サイトを作成するのに便利なi18n Routingの実験的導入や、Prefetchのコア機能化、View Transitionsのフォーム送信対応の他、様々な機能追加や改善が行われました。
• 3.4
  Page partialsの機能追加、画像最適化のパフォーマンス向上、Dev overlayの実験的導入などが行われました。
• 3.2
  data-astro-history属性が追加され、戻るボタン操作時の挙動をより柔軟にコントロールできるようになった他、navigate()で画面遷移を任意のタイミングで実行できるようになったなど、複数の機能強化や修正が行われました。
• 3.0
  レンダリング速度の30-75%の改善、画像最適化の強化、ViewTransitionsAPIの導入、サーバレス環境でのSSRの強化、出力されるHTMLの最適化等、多数の改善が行われました。
• 2.10.5
  experimental.optimizeHoistedScriptオプションの最適化が行われました。
• 2.10.4
  EndpointOutputに関する修正等が行われました。
• 2.10.3
  injectRouteの扱いが適正化されるように調整されました。
• 2.10.2
  404表示時のいCSSインポートの取り扱いへの修正等が行われました。
• 2.10.1
  ルーティングにスラッシュが複数含まれる場合の挙動の修正等が行われました。
• 2.10.0
  transition:persistによる表示制御機能の追加等が行われました。

Astro x SSGform
Astroにフォームを追加する方法

Astroも高度な使い方はいくらでもできるため、フォーム機能を自前で実装することも可能です。ただ、単純なブログや、ホームページとして運用するのであれば外部のフォームサービスを利用するのが間違いなくお手軽でしょう。

Astroで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。