【JavaScript】AngularJSを触ってみた【MVCフレームワーク】
こんにちわ。
以前のスーツが入らなくなり落ち込んでいる山尾です。
今日は話題のJavascriptのMVCフレームワークAngularJSを触ったので少し紹介します。
少し前にVue.jsを触ったことがあったのですがAngularJSも触ってみようと思い手を出したのですが・・
Vueよりいい！！
何がいいってドキュメントやサンプルが豊富！
これは僕みたいな未熟者が学習するにあたってデカいことですよ。
僕はずっとjQuery一辺倒で戦ってきたのですが、jQueryの惜しいとこめんどくさいとこを補ってくれるすげーやつです。
ちなみに僕はAngularJSの事をずっとアングラージェイエスって呼んでたんですがアンギュラージェイエスらしいです。
この業界だとこんなこと結構ありますよね？勘違いして覚えてしまう文字。英語難しい・・・
そんなAngularJSの機能の一部をご紹介します。
目次
はじめに
まずはAngularJSを使うためのファイルを用意しましょう。
AngularJSのファイルを読みこませてbodyにng-appと記述する。
ng-app記述した箇所より下からAngularを使えるようになります。
ちなみにngはAngularのngみたいです。（頭文字じゃなくなぜそこなのか）
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJs</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> </head> <body ng-app> </body> </html>
マークダウン
AngularJSの特徴である双方向データバインディングを使用したサンプルになります。
入力した文字がリアルタイムに書き換わるあれです。
HTML
<p><input type="text" ng-model="name" placeholder="文字を入力してください"></p>
<p>こんにちわ {{name}}さん</p>
たったこれだけの記述です。
ng-modelに対象となるモデルの名前(ここではname)を記述
{{name}}と記述すればかってに入力データをバインドしてくれます。
ちなみにjQueryだったらこれくらい書かないとだめです。
HTML
<p><input type="text" id="changeName"></p> <p>こんにちわ <span id="name"></span>さん</p>
JavaScript
$('#changeName').on('change', function() {
var newName = $('#changeName').val();
$('#name').text(newName);
});
クラス又はID書いてスクリプトも書いてめんどくさいですね。。
デモを見てわかる通りjQueryの方はリアルタイムじゃないですよね。
Anguarはリアルタイムに変更されています。
リアルタイムにフィルタリングする
次のサンプルはコントローラーを使います。
<div ng-controller="mainCntl"></div>
ng-controllerと記述するとその中でコントローラーが使用できます。
次はスクリプトを書いていきます。
var mainCntl = function($scope){
$scope.users = [
{"name":"山尾拓朗"},
{"name":"ユニオン太郎"},
{"name":"ユニオン花子"},
{"name":"ユニオン和人"},
{"name":"平田伸也"},
{"name":"平田信"},
]
}
$scopeはビューにモデルの変更を伝える機能を持ったオブジェクトで
$scopeの中身が変更されたらビューに変更されたことが自動で通知されます。
Angularのループ機能
ng-repeatと記述することによってループを実装することができます。
先ほど作ったusersを回すとこうなります。
<ul> <li ng-repeat="user in users"></li> </ul>
AngularJSにはさまざまなフィルターが用意されていますので少し紹介します。
件数制限
<ul> <li ng-repeat="user in users|limitTo:1"></li> </ul>
大文字
<p>{{ name | uppercase }}</p>
文字でフィルタリング
<p><input type="text" ng-model="query" placeholder="文字を入力してください"></p>
<ul>
<li ng-repeat="user in users|filter:query">
{{$index+1}} {{user.name}}
</li>
</ul>
input要素のng-model=”query”と記述しqueryでフィルターをかけると入力した値がリアルタイムにフィルタリング出来ます。
{{$index+1}}と記述するとリストのインデックス番号を取得出来ます。
フォームバリデーション
AngularJSを使えば簡単にバリデーション機能を実装することができます。
<form novalidate name="myForm">
<table>
<tr>
<th>お名前:</th>
<td>
<input type="text" name="name" ng-model="user.name" required>
<span class="ng" ng-show="myForm.name.$error.required">必須</span>
<span class="ok" ng-show="myForm.name.$valid">OK</span>
</td>
</tr>
</table>
</form>
novalidateでHTML5のバリデーションを切ります。
requiredで必須項目かどうかの判定を行います。
ng-showで属性を判定し表示・非表示を切り替えます。
$validは ng-minlength、ng-maxlength、required の全てがチェックOKであれば true になります。
電話番号チェック
<tr>
<th>電話番号</th>
<td>
<input type="textArea" name="number" ng-model="user.number" required ng-minlength="10" ng-maxlength="11" ng-pattern="/^\d+$/">
<span class="ng" ng-show="myForm.number.$error.pattern">半角数字のみで入力してください</span>
<span class="ng" ng-show="myForm.number.$error.minlength">電話番号の形式ではありません</span>
<span class="ng" ng-show="myForm.number.$error.maxlength">電話番号の形式ではありません</span>
<span class="ok" ng-show="myForm.number.$valid">OK</span>
</td>
</tr>
ng-pattern=”/^\d+$/”ここで簡単な正規表現チェックを行い、ng-minlengthとng-maxlengthで文字数のチェックを行っています。
メールアドレスチェック
<tr>
<th>メールアドレス:</th>
<td>
<input type="email" name="email" ng-model="user.email" required>
<span class="ng" ng-show="myForm.email.$error.required">必須</span>
<span class="ng" ng-show="myForm.email.$error.email">メールアドレスの形式で入力してください</span>
<span class="ok" ng-show="myForm.name.$valid">OK</span>
</td>
</tr>
$error.emailとするだけでメールアドレスの形式チェックが行われます。
送信ボタン
<p> <input type="submit" value="送信" ng-disabled="myForm.$invalid"> <span ng-show="myForm.$invalid" class="comment">未入力もしくは正しく入力できていない項目があります</span> <span ng-show="myForm.$valid" class="comment">チェックOK!</span> </p>
ng-disabled=”myForm.$invalid”と記述すると全てのチェックがOKになった場合のみクリック出来るようになります。
簡単にリッチなフォームが作れました。
最後に
AngluarJSを触った感想としてはすごく面白いフレームワークだと思いました。
日本語の記事やサンプルも多いですし今後も勉強していきたいですね。
今は、たくさんJSのフレームワークあるのでどれやっていいかわからないですよねー。
どれも似てる様で違うと思うので。。
でも僕みたいなjQueryしか触ってないような人も是非JSのフレームワークを触ってみましょう！
