.post.frontend

問い合わせフォームの再開

お問い合わせフォームの処理をフロントエンドに寄せる

問い合わせフォームの処理の送信するまでのところを全てフロントエンド側のJavaScriptをベースに処理できるものに変更しました。

今までのHTMLベースのボタン押下後の処理をJavaScriptで行うだけでなく、 フォームの描画からJavaScriptでコントロールする方式に変更しています。

フロントエンド側へ寄せるメリット

入力内容のバリデーションパターンなどをフロントで管理させる事で、 サーバーサイドの処理を送信のみに絞り、また質問内容などをフロント側で管理することで、 メンテナンスコストを下げる事ができます。

フロントエンド側へ寄せるデメリット

一番大きなデメリットはAMPへの対応が難しく、送信するデータを全てフロントエンド(ブラウザ)側で 準備する必要があるので改ざんされてしまう可能性は0にできないため、 改ざんを防ぐためのロジックや機能をサーバー側に準備させる必要があります。

実際に導入するにあたり、心がけていたところ

今回はサイトのリニューアルでMarionette/Backboneを本格的に導入して、 HTMLのページ生成などにgulpとejsという少し古いものを使い、 ロジカルなところをできるだけライブラリやプラグインではなく、 自分自身で書いて実装する様にしました。

reactやvueベースでとなるとバックエンドのAPI周りの開発コストが従来の比べれば減るものの、 フレームワーク自体の更新ペースが早く、それに付随してさまざまなものも変化が激しいため、 数ヶ月〜1年以上同じバージョンのものを使い続ける事がセキュリティ面など含めて現実的ではないので、 今回は少し古い技術を使って実装しています。

将来的にはAPI周りがnode.jsベースで実装できるサーバー環境が整えば、vueなどで換装したいと考えています。

by Kentaro KITAGAWA

≪.post index

Kentaro KITAGAWA

about / author

Kentaro KITAGAWA

北川 健太郎 | フロントエンドエンジニア / デザイナー。
紙面・Webのデザインやコーディング・オペレーションやPHP・JavaScriptをメインとしたプログラミングなどを経て、現在はWebサービスのフロントエンド開発をベースに開発・運用のディレクション、コンサルティングなど、Webサービスに関わる幅広い業務に従事しています。
具体的な業務内容・コンセプトについてはWhat We Doに掲載しています。

お問い合わせ・見積もり・質問について

Web制作・フロントエンド開発などの問い合わせ・見積もり・質問については問い合わせページ(問い合わせフォーム)にて受け付けております。

問い合わせフォーム