AngularJS入門（１）〜AngularJSで送信フォームの作成でviewの活用

JavaScript
2017.11.04

AngularJSはGoogleが開発に携わるJavaScriptのフレームワークです。AngularJSには様々なバージョンがあり、現在（2017/11月）ではバージョン5がリリースされています。
尚、「AngularJS」は1系の呼び名で、2系以上のバージョンは「Angular」となっています。
バージョンアップのスピードが早い中で今更AngularJSと躊躇していたらダメです。まずは取り組むことが大事だと思います。
ただしバージョン２以上の「Angular」ではTypeScriptの知識が必要となり、初学者にはハードルが高くなります。まずは1系の「AngularJS」を学習してからステップアップする方が学習しやすいと思います。

尚、1系の「AngularJS」を本で学習する際は AngularJS　アプリケーションプログラミング が良いでしょう。
2系の「Angular」を解説する Angularアプリケーションプログラミングも同じ著者から出版されていますので間違わないようにしてください。

スポンサーリンク

AngularJSのViewでできること

AngularJSはMVC(Model-View-Controller)パターンを採用しているところがまずポイントになります。

MVCとはアプリ作成の際に「Model」、「View」、「Controller」と役割分担を明確に分けた設計モデルです。これによりプログラマーとデザイナーの仕事分担も明確になり並行して作業を行うこともできます。そのため開発もやりやすくなるメリットがあります。

今回は一番簡単なViewを操作して送信フォームのチェックを作成します。
Viewには基本的にスクリプトは書かずにAngularJSが理解できるAngular式やディレクティブと呼ばれるタグや属性の形式のものをHTMLに記述するだけのものです。そのためスクリプトの苦手なWebデザイナーにも敷居が低いものです。

AngularJSの導入

AngularJS導入の５つのポイント

  1. AngularJSのインポート
  2. AngularJSの有効化
  3. ディレクティブの作成
  4. 双方向データバインディング
  5. Angular式で出力

AngularJSを使った最も簡単なサンプルはAngularJSのページにあります。
このサンプルでAngularJSの導入のポイントを説明します。

The Basicsのサンプル

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

AngularJSのインポート

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

まず、head内のscriptタグで、AngularJSを読み込みます。このサンプルではCDNを使っていますが、ダウンロードしたものを読み込む事もできます。
AngularJSの最終バージョンが1.6.xになりますのでこれを読み込みます。
AngularJSのページからダウンロードすることができます。
バージョンは1系の中でお好みのものを選択できます。

また、CDNのアドレスはダウンロードの際に表示されるBOXに記述されています。

AngularJSの有効化

<html ng-app>

AngularJSの有効化は、属性として「ng-app」をhtmlタグの中に入れるだけです。
「ng-app」はAngularJSの命令で、「ディレクティブ」の１種です。「ディレクティブ」という言葉はAngularJSでよく使われますが、AngularJS独自の属性です。
Viewを操作するにはこのディレクティブを適切に使用することになります。
ディレクティブの中でも「ng-app」は最も基本的なもので、AngularJSを有効にしてくれます。
通常、このディレクティブはhtmlタグかbodyタグに使用します。

ディレクティブの活用

<input type="text" ng-model="yourName" placeholder="Enter a name here">

ディレクティブには様々な種類があり、その活用方法も多くあります。
今回のサンプルでは、input要素に「ng-model=”yourName”」というディレクティブが付けられています。
「ng-model」は入力ボックスにバインディングするための式を表します。つまりこれはinput要素に入力された値をAngularJSで受け取り、何らか活用することがでる仕組みです。
「ng-model=”値”」として、その値を使い分けることで複数のinput要素の値をそれぞれ特定して活用することができます。

双方向データバインディング

バインディングという言葉が出て来ましたが、これはデータバインディングのことで、JavaScriptとHTMLを紐付けするものです。
AngularJSのそれは双方向データバインディングというもので、ディレクティブ「ng-model=”yourName”」を記述することで、その要素に入力された値が書き出しのAngular式{{ }}と紐付けされることになり、入力値がリアルタイムに出力として表示されることになるのです。

データバインディングの機能を使うと入力した値をリアルタイムに表示することができる。
その方法はng-modelに指定した値とAngular式{{…}}の値を同じにするだけ！！

Angular式で出力

<h1>Hello {{yourName}}!</h1>

ディレクティブで指定した要素の値を双方向データバインディングを使って表示するには表示の方法が必要になります。AngularJSでHTMLに値を表示する方法は「Angular式」を使用します。「Angular式」は２重の波括弧{{ }}でディレクティブで指定した値を囲むだけです。
今回のサンプルでは {{yourName}} とすることでinput要素に入力された内容をリアルタイムに表示しています。

ちなみに、Angular式を使って計算をさせることもできます。HTML文のbodyタグ内のどこかに{{1+1}}の記述をすると答えの２が表示されます。
Angular式は簡単な出力コードを埋め込む仕組みなのです。

少し仕組みの説明を含めて書きましたが、まずはコードを記述して見てその便利さに感激してみることです。
何しろJavaScriptのコードはまだ１行も書いてないのです。AngularJSのViewは表示をするための仕組みですが、あらかじめ用意されたAngularJSの仕組みだけでも結構便利に使えるものなのです。

入力フォームの作成

AngularJSを使った簡単な入力フォームを作成してみます。
ここではAngularJSでできることを追っていきますのでUI,UXのことはあまり考慮していません。その辺は捨てる機能、追加する機能を検討してください。

AngularJSを使った送信フォームサンプル
htmlタグにng-appを入れます。

<html lang="ja" ng-app>

続いてAngularJSをCDNで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

formタグには以下の内容を記述します。
ng-submitはイベントに対し、Angular式の紐付けを有効にします。
そして、action属性がフォームに含まれていない場合のみ、 デフォルトのアクション(フォームがリクエストをサーバに送り、現在のページがリロードされる)をキャンセルします。今回のサンプルはaction属性がありますので指定先のページへ遷移します。

「novalidate」はHTML5の検証処理を無効化するものです。AngularJSを使っている場合は基本的にこれを入れておきます。

<form name="myForm" method="post" action="test.php" ng-submit="onsubmit()" novalidate>

名前入力欄の設定

inputタグの記述

次はinputタグの記述です。
まずng-modelの値を決めます。今回は”user.name”としています。
required はHTML5のrequired属性ですが、AngularJSでもこの属性は必須項目であることを認識することができます。
ng-minlength=”2″とng-maxlength=”10″は文字列の最小長と最大長を検証するためのものです。

<input type="text" name="name" id="name" value="" class="validate required" ng-model="user.name" required ng-minlength="2" ng-maxlength="10" placeholder="山田太郎">

入力内容の表示

入力内容のリアルタイム表示

<p class="result">入力内容：{{user.name}}</p>
ng-model=”user.name”としていますが、なぜng-model=”name”ではいけないのでしょうか？
実はng-model=”name”としても良いのです。その場合はAngular式も{{name}}とする必要があります。
ではなぜわざわざ”user.name”としたかというと、今回のサンプルはinput要素が複数存在しており、これらのデータを一つのグループとしてまとめておきたい時などに、独自のオブジェクトをng-modelに設定したプロパティの前につけることができるようになっているのです。このオブジェクトはどこかで宣言する必要もなく、いきなり登場させることができます。

名前入力のエラーチェック

<span ng-show="myForm.name.$error.required">この項目は必須です。</span>
<span ng-show="myForm.name.$error.minlength">名前（漢字）は2文字以上で入力してください。</span>
<span ng-show="myForm.name.$error.maxlength">名前（漢字）は10文字以内で入力してください。</span>

エラーの検証は$errorオブジェクトを使用します。
$errorオブジェクトは formのname属性.inputのname属性.$error.検証型　のような記述をします。
もしこの構文でエラーがあればtrue、エラーがなければfalseが返されます。
返されたbool値でng-showはtrueでspanの内容を表示したりfalseで表示しなかったりするわけです。

その他のエラー検証

検証型 内容
email メールアドレスの検証
max 最大値を検証
maxlength 文字列の最大長を検証
min 最小値を検証
minlength 文字列の最小長を検証
number 数値を検証
pattern 正規表現を検証
required 必須を検証
url URLの妥当性を検証
date 日付のフォーマットを検証
datetimelocal 日付と時刻のフォーマットを検証
time 時刻のフォーマットを検証
week 週のフォーマットを検証
month 月のフォーマットを検証

エラーがあったら送信できなくする

ng-disabled=”myForm.$invalid”はエラーがあった場合に送信ボタンを押せなくします。

<input type="submit" id="submit" ng-disabled="myForm.$invalid" value="送信">

次に比較としてこちらはjQueryを使ったサンプルです。jQueryのコードはあのドーナツ本のものを参考にしています。
かなりの量のコードが必要になることがわかります。一方AngularJSの方はまだ１行もJavaScriptコードを書いていません。
これがフレームワークの威力です。

jQueryを使ったサンプル
jQueryを使ったサンプルのjQueryコード

$(function(){
	$("form").submit(function(){

		$("p.error").remove();
		$("dl dd").removeClass("error");
		
		$("input[type='text'].validate,textarea.validate").each(function(){
			
			if($(this).hasClass("required")){
				if($(this).val()==""){
					$(this).parent().prepend("<p class='error'>必須項目です</p>");
				}
			}

			if($(this).hasClass("number")){
				if(isNaN($(this).val())){
					$(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>");
				}
			}
			
			if($(this).hasClass("mail")){
				if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
					$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
				}
			}
			
			if($(this).hasClass("mail_check")){
				if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
					$(this).parent().prepend("<p class='error'>メールアドレスと内容が異なります</p>");
				}
			}
			
		});
		
		$("input[type='radio'].validate.required").each(function(){

			if($("input[name="+$(this).attr("name")+"]:checked").length == 0){
				$(this).parent().prepend("<p class='error'>選択してください</p>");
			}
		});
		
		$(".checkboxRequired").each(function(){
			if($(":checked",this).length==0){
				$(this).prepend("<p class='error'>選択してください</p>");
			}
		});
		
		if($("p.error").length > 0){
			$('html,body').animate({
				scrollTop: $("p.error:first").offset().top-40
			}, 'slow');
			$("p.error").parent().addClass("error");
			return false;
		}
	});
});

AngularJSのデフォルト機能だけでもかなりのことができました。
けれども、例えばメールアドレスの確認などの機能は自分でscriptを設置する必要があります。
JavaScriptをviewに直接記述することはMVCの設計モデル思想に反しています。
今度は「Model」や「Controller」の登場になります。
次回はこれらにJavaScriptを記述する方法を勉強していきます。

AngularJS入門（２）〜AngularJSで送信フォームの作成でモジュールの活用

スポンサーリンク
タイトルとURLをコピーしました