投稿日：2022年04月04日 テクノロジー

こんにちは、江宮です！

以前からウエブアプリのバリデーションについて、

「フロントとバックの両方で行うべき」

「バックエンドでしておけば事足りる」

など違う意見を耳にしていたので、本当のところはどっちなのかと疑問に感じていた時期もありました。

ということで、今回はフロントエンドとバックエンドでのそれぞれの目的についてまとめてみました。

バリデーション　=>　ロジックの実行やDB保存をする前の、不正なデータをはね返すバリア

フロントエンド側の目的　→　UXの向上

バリデーションというと、ひと昔前まではバックエンドのみで実装していたそうですが、現在はフロントエンドでも行うのが主流です。

それはなぜか、結論は「UXの向上」です。

バックエンドのみでの入力チェックだけだと、入力した値を元に瞬時に計算結果を出力させるような、連続したブラウザ側の処理（SPA）に対応しづらかったりします。

また全ての入力を終えた後に送信ボタンをクリックするので、リアルタイムでユーザーに通知することができず、入力項目が多くなるほど、ユーザーの負担が大きくなります。

バックエンド側処理の目的　→　不正データをはじく最後の砦

ユーザはブラウザの設定からJavaScriptの使用をOFFに設定することが可能です。

またブラウザ側での処理を実行せず、curlコマンドでデータをPOSTすることも可能です。

つまりフロントエンド側でどれだけ正確に入力チェックを実装していようとも、全てスキップすることが可能です。

ということで、最後の砦としてサーバ側でのチェックは必要不可欠です。

まとめ

バックエンド側でのバリデーションは必須ですが、フロントエンド側での必要性はUXの質を考慮すると判断しやすくなると思います。

例えば、競争相手が無数に存在する一般ユーザー相手のアプリだとUXの向上は大いに意識するべきです。

しかし企業向け受託開発の業務アプリなどでは、コスト優先でバックエンド側のみで対応することも多いかと思います。

参考サイト