

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

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

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

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

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

よろしくお願いします。


CC BY-SA 4.0
2023-11-19T01:36:47.567
96823
2023-11-19T05:31:18.493
45076
question
framework
バックエンドとフロントエンドのフレームワークで使用するバリデーションロジックを同期させるにはどうすればいいですか？


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

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

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

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


CC BY-SA 4.0
2023-11-19T04:31:47.133
96826
2023-11-19T04:31:47.133
5793
96823
answer


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

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

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

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

[code]

    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 = "価格２ (int)")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d+$", ErrorMessage = "数字のみ")]
        [Range(100, 10000, 
            ErrorMessage = "{0}は{1}～{2}の間で入力してください。")]
        public int Price2 { get; set; }
    }
    
[/code]

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

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/CMdjO.jpg)](https://i.stack.imgur.com/CMdjO.jpg)

クライアント側での検証結果が 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>


CC BY-SA 4.0
2023-11-19T05:31:18.493
96827
2023-11-19T05:31:18.493
51338
96823
answer