Web制作Netlify
弊社で使っているNetlifyお問合せの実装方法をコード付きで解説
弊社のコーポレートサイトは、現代のウェブ開発に適したアーキテクチャであるJamstackを採用しています。Jamstackの利点を最大限に活用するために、ホスティングサービスとしてNetlifyを選択しました。Netlifyの特徴の一つは、お問い合わせフォームの実装が容易であることです。特に、弊社のコーポレートサイトではNext.jsフレームワークを使用しており、以下のライブラリを組み合わせてお問い合わせフォームを実装しています。これらのライブラリを利用することで、シンプルかつ効率的にお問い合わせフォームを実装することが可能です。react-hook-formは、Reactアプリケーション向けの軽量で効果的なフォームバリデーションライブラリです。フックを使用して状態を管理するため、クラスコンポーネントを使わずにフォーム状態を管理できます。また、再レンダリングの最適化により、パフォーマンスが向上します。axiosは、PromiseベースのHTTPクライアントで、ブラウザとNode.jsの両方で動作します。シンプルなAPIと高い柔軟性を提供し、RESTful APIとのやり取りが簡単になります。また、インターセプター機能やリクエスト/レスポンスの変換など、機能が豊富です。以下は、Next.js、react-hook-form、axiosを使用してお問合せフォームを実装する例です。下記のようにformタグに を付与するとNetlify サイトの管理パネルで送信のを開始できます。 は、HTTPリクエストのヘッダーにコンテンツタイプを指定しています。このコードは、リクエストの本文（ペイロード）が フォーマットでエンコードされていることを伝える役割があります。 は、フォームデータをエンコードする際に一般的に使用されるコンテンツタイプです。このフォーマットでは、キーと値がURLエンコードされ、 で区切られます。例えば、以下のような形式になります。下記についてはNetlify側でformを受け取るために必要な設定です。こんな感じでNetlifyを使えば簡単にお問い合わせを実装することができます。弊社のコーポレートや今まで制作させていただいたお客様のホームページでも同じような実装をしています。
2023.04.13
