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の主なリリース

• 5.7
  ファイルシステム内やフォントプロバイダーから容易にカスタムフォントを読み込むためのFonts APIが実験的機能として導入された他、Sessions APIやSVG Componentsが安定版としてリリースされました。
• 5.6
  astro:envがCloudflare上でリクエスト外でも使用できるようになり動作一貫性が増した他、実験的機能のSessions APIがCloudflare上でKVストレージを利用して便利に利用可能になったり、Prefetchへオプションが追加されたりするなど、多数の改善が行われました。
• 5.5
  マークダウン内のMermaidなどのダイアグラムコードが内部処理とうまく共存できるようにした他、実験的機能として、型安全なSession設定が追加などの機能追加、バグ修正が行われました。
• 5.4
  マークダウン内のリモート画像についても最適化処理が行われるようになった他、マークダウン中の画像をレスポンシブ対応にするためのプロパティやスタイル付与の実験的導入、開発やプレビュー環境用にリクエスト元の許可ホスト設定の追加など、多数の機能追加と改善、バグ修正が行われました。
• 5.3
  非同期処理の改善によりページレンダリングがより速くなった他、セッションストレージの自動セットアップ機能の追加、NetlifyやVercelへの展開時用の設定追加、HEADリクエストの取り扱いの改善、その他バグ修正が行われました。
• 5.2
  Tailwind 4のサポートが追加された他、Trailingスラッシュの取り扱いに一貫性をもたせるための設定値追加、TOMLフォーマッターのサポートなどの様々な機能追加に加えて、バグ修正が行われました。
• 5.1
  実験的機能として実体データはサーバーサイドに保持してセッションIDだけをクライアント側の保持するセッション機能が導入された他、ユーザーデータの保存先を指定できる機能や、リモート画像のキャッシュ機構などの追加、また、バグ修正などが行われました。
• 5.0
  Astro Content Layerによりコンテンツ取得と処理が柔軟になった他、Server islandsによりサーバー側で生成されるコンテンツと静的HTMLの共存とキャッシュ制御が行いやすくなり、また、astro:envにより環境変数が管理しやすくなるなど、多数の機能追加と改善が行われました。
• 4.15
  実験的機能だったAstro Actionsが安定版になった他、i18nルーティングへのfallbackオプションの追加、外部のlibSQLを指定できる機能の追加、client:idleへのタイムアウトオプションの追加などの機能強化や、バグ修正等が行われました。
• 4.14
  実験的機能としてContent Layer APIが導入されコンテンツ取得が容易になった他、同じく実験的機能としてのIntellisenseの導入を筆頭に、いくつかの新機能導入が行われました。
• 4.13
  実験的機能だったRequest Rewritingが安定版になった他、Content Collections JSONも安定版になると同時にデフォルト動作に設定、また、ログ出力の改善やバグ修正が行われました。
• 4.12
  コンテンツの種類ごとに最適化された配信をコントロールでき、パフォーマンス改善が狙えるServer Islandsが実験的機能として導入された他、ペジネーション機能の拡張、inferRemoteSize機能の追加、その他機能強化やバグ修正が行われました。
• 4.11
  500エラーページが強化され、より快適なデバッグ体験ができるようになった他、ページ内のコードブロックでShiki Transformersを利用した表示がされるようになるなど、機能強化やバグ修正が行われました。
• 4.10
  実験的機能として型セーフな環境変数astro:envが導入された他、HTTP関連のメソッドのリライトや、Astroの埋め込み機能の汎用化、Container APIへのメソッド追加やバグ修正などが行われました。
• 4.9
  実験的機能としてContainer APIが追加された他、React 19のサポートや、過去の実験的機能のオプション記述が簡潔に行えるようになったなど、複数の機能強化やバグ修正が行われました。
• 4.8
  型安全なバックエンド機能を管理しやすくなるAstro Actionsや、リダイレクト（リルーティング）処理を行えるRequest Rewritingが実験的機能として追加された他、パフォーマンス改善などが行われました。
• 4.7
  Toolbar APIが大きく改善された他、サーバー起動時にAstroの更新有無を自動チェックして表示する機能の追加、allowJs設定のデフォルト値の変更や、バグの修正等が行われました。
• 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を利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。