0

あくまでバックエンドフレームワークとフロントエンドフレームワーク全般の事としてこのような理由でバリデーションをバックとフロントの両方で行いたいです

  • バックエンド:フロントエンドのチェックはクライアントが改ざんできるのでバックエンドでも確認したい
  • フロントエンド:バックエンドに送信してるとテンポが悪い。送信してもらってからバリデーションエラーが出るのはユーザー体験が悪い

案として入力イベントが起こる旅にajaxで、バックエンドのバリデーションロジックを呼び出すという案がでました。ただ一々サーバーとの通信が発生することになるせいで遅くなることがあり、ユーザー体験が損なわれることもありました。できればバリデーションロジックはフロントエンドフレームワークに組み込み、ユーザーの入力に対して即座にバリデーションチェックを行いたいです

ただそれぞれのフレームワークに個別にバリデーションロジックを書くと、お互いのロジックが開発時の手違いで矛盾してしまうことがあり効率的ではない面が大きかったです
そのためバックエンドとフロントエンドのバリデーションロジックをどうにかして共有できるような仕組みがないか知りたいです

そこで質問です
バックエンドとフロントエンドのフレームワークでバリデーションロジックを共有できるようなアーキテクチャやライブラリや何等かの形式はありますか?

よろしくお願いします。

2 件の回答 2

2

バックエンドとフロントエンドのフレームワークでバリデーションロジックを共有できるようなアーキテクチャやライブラリや何等かの形式はありますか?

質問者さんがどういうフレームワークを使っているか分かりませんが(ちゃんと質問に書きましょう)、フレームワーク組み込みの検証機能を探して使うことをお勧めします。

よくできたものであれば、プログラマが検証のためのコードを自力でゴリゴリ書かなくても、フレームワークと IDE 組み込みの機能がクライアント側・サーバー側での検証機能を自動的に実装してくれます。

例えば、ASP.NET MVC の場合ですと、Model の各プロパティに以下のように検証属性を付与し、

public class Contract
{
    [Display(Name = "ID (int)")]
    [Required(ErrorMessage = "{0} は必須")]
    [RegularExpression(@"^\d+$", ErrorMessage = "数字のみ")]
    public int ContractID { get; set; }
 
    [Display(Name = "契約日 (DateTime)")]
    [Required(ErrorMessage = "{0} は必須")]
    [RegularExpression(@"^\d{4}/\d{2}/\d{2}( \d{1,2}:\d{2}:\d{2})?$",
        ErrorMessage = "yyyy/MM/dd 形式")]
    public DateTime ContractDate { get; set; }
 
    [Display(Name = "価格 (decimal)")]
    [Required(ErrorMessage = "{0} は必須")]
    [RegularExpression(@"^\d{1,5}$", 
        ErrorMessage = "数字 1 ~ 5 文字")]
    public decimal Price { get; set; }
 
    [Display(Name = "価格2 (int)")]
    [Required(ErrorMessage = "{0} は必須")]
    [RegularExpression(@"^\d+$", ErrorMessage = "数字のみ")]
    [Range(100, 10000, 
        ErrorMessage = "{0}は{1}~{2}の間で入力してください。")]
    public int Price2 { get; set; }
}

Visual Studio の機能を利用して Controller と View を自動生成すれば、JavaScript によるクライアント側での検証機能と、C# によるサーバー側での検証機能の両方が自動的に実装されます。

プログラマは上記以外に検証のためのコードを書く必要はありません。

そして、ユーザー入力をサーバーに送信する際、まずクライアント側での検証が行われ、その検証結果が NG の場合は以下のようなエラーメッセージが自動的に表示され、ユーザー入力のサーバーへの送信は中止されます。クライアント側での検証 OK の時のみサーバーにデータが送信されます。

画像の説明をここに入力

クライアント側での検証結果が OK で (もしくはブラウザの JavaScript が無効にされているとかで)、サーバーにデータが送信されると、サーバー側でも C# よる検証が行われ、サーバー側での検証結果が NG の場合は返ってきた応答によって上の画像と同様にエラーメッセージが表示されます。

案として入力イベントが起こる旅にajaxで、バックエンドのバリデーションロジックを呼び出すという案がでました。

上の Model に付与した検証属性の例のような必須入力、正規表現、範囲の指定など JavaScript で検証可能なものはそういうことをすべきではありません。

サーバー側でしか検証できないケース、例えばデータベースに存在する名前との重複を確認するなどに限るべきです。下手な実装をすると、応答が返ってこないとフリーズしてしまいます。

ASP.NET MVC では、以下のようなフレームワークに備わっている機能がありますが、記事に書いてあるように、応答に時間がかかるとか返ってこないということがよく起こる環境では、RemoteAttribute は使わないでサーバー側だけでの検証にとどめておいた方が良いかもしれません。

RemoteAttribute による検証 (MVC5)
http://surferonwww.info/BlogEngine/post/2022/02/11/client-side-validation-using-remoteattribute.aspx

1

あるかもしれませんがそこまで便利なものではないと思います。

  • フロントとバックエンドでは求められるバリデーションが異なる
  • フロントとバックエンドの言語が同一でないとロジックが共用できない(共用できるのは桁数とかの単純な条件に限定される)

お互いのロジックが開発時の手違いで矛盾してしまう

バリデーションを共用できたとしても他のところで問題が出るので、こちらの根本をドキュメントとかテストとかの観点で解決したほうがよいように思います

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。