名古屋市のフロントエンドエンジニアがWEB制作に関する技術メモを書いています

メニュー

ホーム > JavaScript > ゼロから学ぶ、AngularJS入門(1)

ゼロから学ぶ、AngularJS入門(1)

最終更新日:

公開日:2014年11月28日

JavaScript

こんにちは、くーへいです。

AngularJSについて学ぶ機会がありましたので、ゼロから少しずつ学んだことをフィードバックしていきたいと考えています。
というわけで、今日はAngularJSの特徴などを中心にお話ししたいと思います。

AngularJSとは?

AngularJSは、Googleが開発し、オープンソース化されたJavaScriptのフレームワークです。
ライブラリでも、テンプレートでもなく、フレームワークとして分類されています。

要は、複雑なJavaScriptのコードを簡単なコードで実行できるようできると考えれば問題ありません。

細かいことはさておき、何ができるかを見て行きましょう。

AngularJSで出来ること

基本的な例

AngularJSのもっとも基本的な機能は以下の通りです。
「Hello」のあとに、リアルタイムで入力された文字が反映されていくのがわかるでしょうか?



Hello {{yourName}}!

上記の機能は、以下のコードだけで実装できます。 すごく簡単だと思いませんか??

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app>
<p><label>Name:</label><input ng-model="yourName" type="text" /></p>
<p>Hello {{yourName}}!</p>
</div>

※半角の{}が表示できないため、全角で記入していますが、使用する際は半角である必要があります。

詳細は今後の記事に任せるとして、簡単にどういう風に実装しているかを見て行きましょう。

まず、1行目でAngularJSの本体を読み込んでいます。これが無くては始まりません。
2行目の「ng-app」は、”この要素はAngularJSのアプリケーションですよ”と指定しています。
3行目はテキストボックスを設置し、「ng-model」でAngularJSのモデルであることを宣言しています。(モデルについてよくわからない場合は、下のAngularJSの特徴を読んでみて下さい)
4行目は段落ですが、「{{yourName}}」の部分に「ng-model」で指定したモデルのデータをリアルタイムで表示しています。(AngularJSではテンプレートと呼びます)

いかがでしょうか、直感的でわかりやすいですよね。

フォームのバリデーション

たとえば、以下のようなバリデーションも簡単に実装できます。


入力した内容:{{userName}}

必須6文字以上です12文字までですOK


上記のバリデーションは、以下のコードで実行できます。

<div ng-app="ex2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div><form name="userInfo"><input name="userName" required="required" ng-model="userName" ng-minlength="6" ng-maxlength="12" type="text" />

入力した内容:{{userName}}

<span ng-show="userInfo.userName.$error.required">必須</span>
<span ng-show="userInfo.userName.$error.minlength">6文字以上です</span>
<span ng-show="userInfo.userName.$error.maxlength">12文字までです</span>
<span ng-show="userInfo.userName.$valid">OK</span>
</form>
</div>
</div>

※半角の{}が表示できないため、全角で記入していますが、使用する際は半角である必要があります。

「ng-app="ex2"」は最初の例と同じようにAngularJSのアプリであることを指定しているのですが、この記事では2つのアプリを指定するためにアプリ名を「ex2」と指定しました。(このアプリ単体で動かす場合は必要のない指定です。また、「ng-app="ex2"」としただけで1ページに複数のアプリが動くわけではありません。この記事での説明は割愛します。)
input要素におけるrequired属性はAngularJS専用の属性ではありませんが、AngularJSでも使用できます。
ng-model属性は前項の例と同様で、モデルであることを宣言しています。
ng-minlengthは最低でも必要な文字数です。
ng-maxlengthは最大の文字数です。
7~10行目は、それぞれ条件を満たしたときにのみ、文字が表示される仕組みです。
フォームで、条件を満たさないと送信ボタンを押せないようにしておくと、ユーザービリティの高いバリデーションが実装できます。

AngularJSの特徴

AngularJSは以下のような特徴を持ちます。

-----以下引用-----
引用元:http://postd.cc/how-is-angular-js-different-from-jquery/

  1. 双方向データバインディング
  2. MVWパターン(MVCの派生パターン)
  3. テンプレートとしてのHTML
  4. カスタムディレクティブ(再利用可能なコンポーネントと独自のマークアップ)
  5. REST志向
  6. ディープリンク(動的ページにリンクを設定)
  7. フォームバリデーション
  8. サーバとの連携
  9. ローカライゼーション
  10. 依存性注入(DI)
  11. 充実したテスト環境(ユニットテスト、e2eテスト)

-----以上引用-----

よくわからない言葉がたくさん出てきますね。
ひとつずつ見て行きましょう。

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

もっと日本語にすると、双方向データ結合。
次項のMVWパターンでは、「モデル」と「ビュー」の間でデータをやり取りすることを指します。
「モデル」がデータ、「ビュー」が表示されている画面ととらえるとわかりやすいでしょう。

モデル(データ)とビュー(表示されている画面)は常に同期されていて、相互に情報をやり取りしています。

言葉にしてみると素晴らしさが伝わりにくいですね。

従来のHTMLでは、ファイルにデータを持たせ、それをもとに画面に描画します。
基本的には画面への描画はページを読み込んだときのみ。閲覧者が画面上でクリックしたり入力したりした場合でも、その行動をとった閲覧者の画面は変化しますが、他の閲覧者には影響しません。
フォーム等に入力してデータを送信したいときも、ページの再読み込みが発生しているはずです。

AngularJSをはじめとした双方向データバインディングを実装したサイトでは、閲覧者がデータを変更させられます。

2.MVWパターン(MVCの派生パターン)

MVWは「Model View Whatever」の略です。
「Model View Controller」と同じ意味と考えて問題ありません。
(MVCにおけるControllerという考え方に対していろいろな議論があるそうで、なんでもいいんじゃないか?というAngularJS側からの投げかけの意味でWhateverとなっているようです)

通常、モデルがビューに変更を通知して画面に描画されるわけですが、MVW(MVC)ではさらにコントローラーが閲覧者からの入力を受け取り、モデルやビューに通知します。

3.テンプレートとしてのHTML

AngularJSでは、モデルから受け取ったデータをHTMLに表示する仕組みとして、テンプレートと呼ばれるものを実装しています。

二重中括弧「{{}}」の中にモデル名を書くことで、その場所にデータが表示される仕組みです。

4.カスタムディレクティブ(再利用可能なコンポーネントと独自のマークアップ)

ディレクティブとは、HTML内に属性値(ng-modelやng-clickなど)を記載することで、要素の動きに機能を追加することができるものです。

AngularJSではこのディレクティブを独自に追加することができます。

5.REST志向

RESTとは、「Representation State Transfer」の略です。
直訳すれば、「状態遷移の表現」となるでしょうか。
Wikipediaによると、以下のような特徴を持ちます。

-----以下引用-----

ステートレスなクライアント/サーバプロトコル

HTTPメッセージの一つ一つが、そのリクエスト (メッセージ) を理解するために必要な全ての情報を含む。そのため、クライアントもサーバも、メッセージ間におけるセッションの状態を記憶しておく必要がない。ただし実際には、多くのHTTPベースのアプリケーションはクッキーやその他の仕掛けを使ってセッションの状態を管理している (URLリライティングのような一部のセッション管理手法を使うシステムは、RESTful ではない) 。

すべての情報 (リソース) に適用できる「よく定義された操作」のセット

HTTP では操作 (メソッド) の小さなセットが定義されている。最も重要なのは "GET"、"POST"、"PUT"、"DELETE" である。これらはデータ永続化に要求される CRUD と比較されることがある。もっとも "POST" に関しては CRUD にはぴったり対応していない。

リソースを一意に識別する「汎用的な構文」

RESTful なシステムでは、すべてのリソースは URI (Uniform Resource Identifier) で表される一意的な (ユニークな) アドレスを持つ。

アプリケーションの情報と状態遷移の両方を扱うことができる「ハイパーメディアの使用」

RESTシステムでは、多くの場合、HTML文書またはXML文書を使う。こうした文書に情報およびその他のリソースへのリンクを含める。こうすることにより、あるRESTリソースから他のRESTリソースを参照したい場合は単にリンクを辿るだけでよい。レジストリなどの他の基盤的な機能を使う必要はない。

-----以上引用-----

いろいろ書いてありますが、WEBでいえばページ遷移したり検索したりするときにキッチリとした形式で状態を表現する考え方に相当すると理解しています。

あくまで考え方を表す言葉なので、そういった考えを前提として作られている、程度に覚えておけばいいと思います。

6.ディープリンク(動的ページにリンクを設定)

動的に生成されたページに対して、ディープリンク(いわゆる直リンク)を張ることができます。
これは、前項の「リソースを一意に識別する」というRESTの概念に従ったもので、ブラウザの戻るボタン等も使用できます。

7.フォームバリデーション

いわゆるお問い合わせフォームなどのフォーム部品に対し、バリデーション機能を付加できます。

バリデーションとは、半角英数字のみ入力すべきとことに全角数字を入れた場合、エラーを表示するなどの機能を指します。

8.サーバとの連携

AngularJS自体はJavaScriptで作られており、閲覧者のブラウザで実行されるフロントエンドの技術です。
しかしながら、AngularJSはサーバーとの連携機能も備わっています。

9.ローカライゼーション

要は、国や地域の違いに対応しています、という意味です。

10.依存性注入(DI)

あるクラスAのコードの中に、クラスBを呼び出すコードが含まれている場合、クラスAはクラスBに依存していると表現します。
クラスBが動かなくなるとクラスAが動かなくなりますので、文字通り依存していますよね。
こういう状態を依存性がある、と言うわけです。

対して、依存性注入とは、クラスAの中にはクラスBを呼び出すコードを書かずにクラスAの外に書くなどで、依存性を回避した状態を言います。

依存性を回避することを依存性注入なんていう表現にするからややこしいのだと思いますが、依存性を外から注入してあげる、という考えから来ていると思われます。

11.充実したテスト環境(ユニットテスト、e2eテスト)

この場合におけるテストとは、記述されたコードが正しく動作するかを見るためのものです。

大規模開発においては、あらかじめ実行すべきテストをコーディングしておき、すべてのケースで問題なく動作するかを確認する必要があります。
そのためのツールが用意されていますよ、という意味です。

まとめ

今回は、AngularJSの特徴と簡単なサンプルをご覧いただきましたが、いかがでしたか?
AngularJSの魅力が少しでも伝わりましたでしょうか?

技術としては、まだまだ駆け出しで発展途上ですが、いずれ色々なサイトで実装されていくはずです。
日本語の情報が不足していますが、それも徐々に解消されていくでしょう。
このブログと連載もその助けとなれば幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

Twitterにて更新情報などを配信しています

スポンサードリンク