Gatsbyは、Reactベースの静的サイトジェネレーターです。Gatsby.jsやGatsbyJSと呼ばれることもあり、表示が早くリッチなコンテンツを作るためのフレームワークとして、人気を集めています。プラグインやテーマファイルなど、周辺のリソース充実も積極的に行っており、単純なサイトのベースというよりは、本格的なアプリケーションまで視野にいれた展開を図っています。
Gatsbyは、2015年にKyle Mathewsによって開発されました。当初、Gatsbyは、React.jsをベースとしたウェブサイトを作成するためのフレームワークとして開発されました。2017年にバージョン1.0がリリースされ、正式に静的サイトジェネレーターとしての機能を持つようになりました。その後、Gatsbyは、GraphQLを利用したデータの取得と管理の機能を追加するなど、機能が拡張されていきます。
ContentfulやWordpressといったデータ保管場所から内容を読み込むことに長けており、さらにGatsbyCloudも登場して、ホスティングまでサポートされるようになってきました。GatsbyCloud以外でも、デプロイできるサービスはたくさんあるのも安心材料です。2023年2月にはNetlifyによるGatsby買収も発表され、今後、Netlifyへの統合が加速していくことも予想されます。
Functionsとして提供されているサービスを利用することで、様々な外部サービスとの連携が可能になります。また、動的な機能を付与することことも可能ですので、お問い合わせフォームを実装する、ということも可能になります。その場合は外部のメールAPIや、SMTPサーバーを利用することになるため、そうしたものが準備できる方向け、にはなってしまいます。
Gatsby公式サイトは以下をご参照ください。
» Gatsby公式サイト
手軽にフォームを実現したい場合、外部フォームサービスを利用するのが便利です。フォームをコーディングするだけで、他の環境を整えることに気を遣う必要はありません。
Gatsbyで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Gatsbyサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
あとはGatsbyのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Gatsbyを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なGatsbyライフを送ってください！
