ModelとViewに分け、prototype拡張を利用したjavascriptバリデーション

ModelとViewに分け、prototype拡張を利用したjavascriptバリデーション

ModelとViewで処理を分けるという考え方

javascriptを使って、フォームのバリデーションを作るときに、1つずつのフォームにクラス名を当てて、それに対して1つずつjavascriptを書いていませんか?

わたしも今まで、ずっとその書き方をしていました。しかし、その書き方だと、拡張性が低く、メンテナンスがしにくいソースになってしまいます。

 

そこで、cakePHPやRuby on Railsなどで使われているMVCモデル(Model・View・Controller)を利用して、拡張性の高いリアルタイムフォームバリデーションを作成してみました!

 

デモ

こちらにあるデモサイトのフォームに文字を入力して下さい。リアルタイムで「必須項目」と「最大文字数」を評価して、エラーの場合は、エラー文言を表示するようになっています。

 

このデモは、

View側でフォームに入力される値を取得 → Modelでその値を受けとり、バリデーションをする。→ バリデーションの結果をModelから受け取り、画面に反映

というMVCモデルのMVの部分だけを使用して、実装されています。

 

こういったViewとModelで処理を分けて、javascriptを構築することで、非常にメンテナンスがしやすい綺麗なソースを書くことができます。

今回は、このバリデーションの作り方を簡単に解説いたします!!

 

 

HTMLはこんな感じ

今回作成するバリデーションのHTMLはこんな感じです。CSSもHTML内に記載しています。

 

 

Model側の処理

まずは、Model側のjavascriptを書きます。

 

大元となる関数を作成


「Model」という関数を作成してます。

this.valはフォームの中の値が入り、this.listにはバリデーションしたい項目をオブジェクトとして格納します。今回は、「必須項目(required)」と「最大文字数制限(maxlength)」を設定しています。

 

 

バリデーションの詳細を作成

 

先ほど作成したthis.listのバリデーションの詳細をprototype拡張で作成します。

maxlengthの方は引数としてnumberを指定できるようにして、設定した文字数と比較ができるようにします。ここに「8」の様な定数を指定してしまうと拡張性の低いソースになってしまうので注意しましょう!

 

ここで作成したメソッドは、すべて「ture, false」を返します。値をチェックするときに、毎回このメソッドを呼び出して、正か非かを判断する仕様です。

 

 

入力された値があっているかをチェック

 

再度、Modelをprototype拡張し、値が設定した条件と合致しているかどうかを判断する処理を記述します。

 

2行目で、「そもそも値は変更されているか?」を確認し、変更されている場合のみバリデーションの処理を行ないます。

 

this.listの項目の数だけ、forで処理を繰り返し、値がバリデーションの条件と一致しているかどうかを判断。合致している場合はなにもせず、エラーの時だけ「this.errors」という配列にArray.push()を使ってそのエラー項目を追加します。

 

 

以上で、Modelの記述は終了です!

 

 

View側の処理

次はView側の処理を記述していきます。Viewという文字の通り、Htmlの見える部分の処理を担当します。

 

大元となる関数を作成

 

Modelの時と同じように、大本となる関数を作成します。Viewという名前の関数を作成して、引数にセレクタを表す【el】を記述します。

 

elで渡されたセレクタを登録して、そのセレクタが持っている要素(requiredやdata-maxlength)をlistというobjectに格納していきます。

そのlistを先ほど作成したModelに渡す形で、Modelをインスタンス化(new Model(list);)しましょう。

※ここがMVの大事なところ!View側でHtmlの情報を取得し、Model側にデータ処理を任せる体制を整えます。

 

最後に、イベントを登録する【eventListener】を実行します。

 

 

Viewにイベントを登録する

 

on(“keyup”, function(){})を使って、inputの中の値が変更された時に、model側に値を渡せるようにしましょう。

 

そして、model側で入力された値にバリデーションをかけて、もしエラーがあった場合は、「this.model.errors」にエラー内容が格納されます。

 

 

最後にエラーがあった時の処理

 

最後に、もしエラーがあった時の処理を、prototype拡張を利用して記述します。

 

 

 

これでView側のjsも終了です!

最後に「new View($(“input”));」を記述して、Viewをインスタンス化することを忘れないで下さい!

 

 

 

まとめ

今回紹介したModelとViewに切り分けてjsを記述し、prototype拡張で機能を広げていく方法は、フロントエンジニアとして必須の技術です。

 

わたしも全然技術の足りないエンジニアですが、少しずつこういったちゃんとしたプログラミングの書き方を覚え、一流のエンジニアになれるように努力します!

もし、この書き方よりもこっちのほうがいいよ!とかあれば、是非教えて下さい!!!!

 

ソースはgithubで公開しておきますね。

 

今回紹介したModelとViewに切り分けてjsを書く方法は、「ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁」で詳しく解説されています。

この技術書を読んだ時、本当に「マジやばい!めっちゃわかりやすい!」と感動しました。今までなんとなくでjsを書いていた人は必読です!

 

※今回作成したリアルタイムバリデーションもこの本で解説してあります。今回作成したものは、本書で勉強した内容を元に、わたしの方でオリジナル作ったソースです。本書では、もっと高性能で拡張性の高いリアルタイムバリデーションが紹介されています!

オススメ本

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで

今回紹介した、ModelとViewで切り分けて、prototype拡張してjavascriptを構築していく過程を解説している本。この本を読んで、コピペやJqueryでなんとなくjavascriptを書いていたわたしが、初めて理解してjsを書けるようになりました。最後の章では、今流行のSPA(シングルページアプリケーション)の作り方も紹介されています!

AMAZON

今回の内容がわからない人は・・・

よくわかるJavaScriptの教科書 教科書シリーズ

今回の内容が理解できない人は、基本的なjavascriptを理解していない可能性が高いです。そんな人は焦らず、この技術書からはじめて下さい!わたしもこの技術書を何度も読み、javascriptの基本を覚えました。

AMAZON
  • PREV POST
  • NEXT POST

RECOMMEND POST

PROFILE

RARA
名前: RARA(らーら)
好き: コーヒー・パソコン・池袋
職業: プログラマ・webデザイナー・音楽事業・Youtuber・OPENREC
学歴: 一橋大学経済学部卒

すべての働く人の希望でありたい
エンジニアやwebライター、動画制作、ゲーム実況・音楽事業など様々な仕事をしています。
社会人になってから、じぶんが心から楽しいと思える仕事に没頭してきました。
じぶんがハッピーに働いている姿を紹介して、働く人たちの希望になりたい!
今時、一つの仕事しかしないなんてもったいない。たくさんの好きなことを仕事にしましょう!
お仕事の依頼はコチラから

twitter: https://twitter.com/rara_bass

youtube: ゲーム実況らーら

OPENREC: らーら

PICK UP

NEW POST

CATEGORY

AD

ARCHIVE