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系のジェネレーターを探していてパフォーマンス面で不満をもっていた人や、すでに手になじんでいるツールを使って開発したい人にとって、有力な選択肢になるのではないでしょうか。
Astro公式サイトは以下をご参照ください。
» Astro公式サイト
Astroも高度な使い方はいくらでもできるため、フォーム機能を自前で実装することも可能です。ただ、単純なブログや、ホームページとして運用するのであれば外部のフォームサービスを利用するのが間違いなくお手軽でしょう。
Astro x SSGform
Astroにフォームを追加する方法
Astroで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Astroサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Astro側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはAstroのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Astroを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なAstroライフを送ってください！
