AngularJSの基本

AngularJSは、これまでのJavaScriptライブラリとは異なる新しい使い方を提供する。その基本的な構造と機能について説明する。
Tags:

AngularJSとは?

AngularJSはJavaScriptライブラリである。そう言うと、多くの人は「ああ、そうなのか」とそのまま流してしまうだろう。そして、すぐに興味を失う人も多いかもしれない。

「JavaScriptライブラリ? とにかく何なのかよく分からないが、特に必要ない。jQueryがあるし、それで満足している」と考えるかもしれない。

多くの人がこれまで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」だった。jQueryのようなライブラリは、DOMを取得したり属性を操作したりすることをずっと簡単にできるため、導入することが多いだろう。

このようなライブラリは、プログラマーが自分で作るプログラムを書くうえで楽にしてくれるものだった。書きたい処理を自分で考え、それを作ることが楽になる。それがこれまでのライブラリだった。

ではAngularJSはどのようなものなのか。それはJavaScriptに「新しい方法」を提供し、「MVCアーキテクチャ」の概念を導入したものである。

MVCとは、アプリケーションの構造をModel、View、Controllerという構成で構築する概念である。Modelはデータを扱い、Viewは画面表示を扱い、Controllerは全体制御と処理の実装を担当する。サーバーサイド開発の分野では、この概念を基盤に設計されたフレームワークが多く利用されている。

MVCは広く使われている概念だが、クライアントサイド、つまりWebブラウザにはあまり当てはまってこなかった。JavaScriptコードは整理されていない一回限りの処理でいっぱいである。1つの関数でサーバーへアクセスし、ロジック処理を行い、DOMを操作する。MVCの分離など夢のようなもので、そのようなコーディングに埋もれてきた人も多いはずである。

AngularJSはデータ管理とロジック、そして表示関係をきれいに分離し、滑らかに接続する。データベースを使うCRUD、つまりCreate、Read、Update、Deleteというデータアクセスの基本操作を中心にしたアプリケーション作成で特に威力を発揮する。

AngularJSは次のサイトで公開されている。ただし、ここからライブラリをダウンロードする必要はない。そうしなくてもAngularJSは使用できるからである。

https://angularjs.org/

例を作ってみよう

ここではAngularJSを使って簡単な例を作ってみる。

ひとまずインストールや開発環境は必要ない。JavaScriptを編集できる適当なエディタを使う。作業用サーバーの準備も最初は不要である。HTMLファイルをそのままブラウザで開いても動作する。Ajax利用などでサーバーアクセスが必要になれば、そのとき考えればよい。

以下に簡単な例のコードを示す。テキストエディタを開き、作成して.html拡張子で適当な場所に保存する。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div>
    <p>input:<input type="text" ng-model="msg"></p>
    <p>you typed: {{msg}}.</p>
    </div>
</body>
</html>

そしてブラウザで開いてみる。

この例では入力フィールドが1つだけ用意されている。ここにテキストを入力すると、下のメッセージにリアルタイムで表示される。非常に簡単なものだが、AngularJSの動作は何となく分かるだろう。

AngularJSを使っていると言っているが、見て分かるようにJavaScriptコードらしいものはまったくない。実はAngularJSの大きな利点は「JavaScriptだけを拡張するものではない」という点である。AngularJSはHTML自体を拡張する。では、どうなっているのか詳しく見てみよう。

AngularJSのロード

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

AngularJSは一般的にGoogleからロードして使用する。上のように<script>タグを使うことでAngularJSを利用できる。

ajax.googleapis.comというサイトはGoogleが提供するCDNサイトである。CDNは「Code Delivery Network」の略で、広く使われているオープンソースJavaScriptコードを配布するサイトである。jQueryやPrototypeのような主要なオープンソースJavaScriptライブラリの多くはここで配布されている。指定されたライブラリのアドレスをsrcに指定するだけで、いつでもライブラリを使えるようになる。

モデルとマークアップ

先ほどの例で、テキストを入力するとリアルタイムで表示が更新されるのは、「モデル」と「マークアップ」の働きによるものである。では、例で使われているAngularJSの機能について説明する。

アプリケーションの指定

<html ng-app>

まず<html>タグにng-appが指定されている。これは「このタグの内部がAngularJSによって動的に接続される」という意味であり、appはアプリケーションを意味する。簡単に言えば、「このタグがAngularJSアプリケーションである」という意味である。

ここでは<html>タグに指定しているが、これはHTML全体をAngularJSの接続対象としているためである。<body>に接続すれば、その中だけが対象になる。あるいは後で説明するが、ng-appは名前を付けて複数設定できるため、<body>内の複数のタグに異なる名前のng-appを指定することもできる。

とにかく今は、「<html>や<body>にng-appを指定しておけばAngularJSを使えるようになる」と覚えておこう。

モデルの設定

<input type="text" ng-model="msg">

ページ本文に出てくる最初の要点はこの部分である。ng-modelが指定されている。これは「ディレクティブ」と呼ばれるものである。ディレクティブは、AngularJSによって新しく追加されたタグ属性だと考えればよい。

このng-modelディレクティブは「モデル」を設定する。モデルはWebページに表示されるデータを表すためのものである。たとえば、ここで指定されたng-model="msg"は、<input type="text">の値がmsgというモデルと関連付けられていることを表す。

マークアップの使用

このモデルの値はさまざまな場所で使用できる。ここでは次のような形で書かれている。

<p>you typed: {{msg}}.</p>

この{{OO}}という書き方は、AngularJSによって新しく用意されたマークアップである。このマークアップは、式や値をHTMLに入れるために利用する。ここでは{{msg}}となっており、msgの値がここに表示される。

このモデルとマークアップにより、モデルに設定されたフィールドの値が入力で変更されると、マークアップ表示がすぐに変わる。この2つの要素はAngularJSを使うときの最も基礎的なものなので、必ず覚えておこう。

初期化、計算、リアルタイム操作

ここではもう少し拡張して、少し使えるものを作ってみよう。

初期化と計算

以下は消費税を計算する例である。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="num = 100">
    <div>
    <p>price:<input type="text" ng-model="num"></p>
    <p style="font-weight:{{(num >= 10000) * 700}}">
        you typed: {{num * 1.08}}.</p>
    </div>
</body>
</html>

フィールドに金額を入力すると、税金8%を含めた金額が下に表示される。また、金額が1万円以上になると、金額表示が太字で表示される。

初期化処理

今回は新しいディレクティブが1つ追加されている。それは次のものである。

<body ng-init="num = 100">

このng-initディレクティブはモデルを初期化するためのものである。これを指定しておくと、モデル値が指定した値で初期化される。

式の使用

値を表示するマークアップ部分も少し変わっている。今回は次のような式で値を表示している。

you typed: {{num * 1.08}}.

このようにマークアップに式を設定できる。これにより計算結果が自動的に表示される。簡単である。

式を使ったマークアップは、よく見ると別の場所にもある。結果を表示している<p>タグ部分である。

<p style="font-weight:{{(num >= 10000) * 700}}">

num >= 10000は、numの値が10000以上ならtrue、未満ならfalseになる。これに700を掛けると、真偽値であるtrueまたはfalseは整数値の1または0にキャストされ、1 * 700または0 * 700になる。つまり「10000以上なら太字表示」になるのである。

単純な計算だけでも、このように面白いことが可能である。

位置とサイズをリアルタイムに操作する

では、モデルとマークアップの利用例として、表示されるDOMの位置やサイズをリアルタイムに操作する例を作ってみる。

例は次のとおりである。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
    #rect {
        background-color:red;
        position:absolute;
    }
    </style>
</head>
<body ng-init="x = 100;y = 100; w = 100;h = 100">
    <div>
    x:<input type="number" min="0" max="300" ng-model="x" size="5">
    y:<input type="number" min="0" max="300" ng-model="y" size="5">
    w:<input type="number" min="0" max="300" ng-model="w" size="5">
    h:<input type="number" min="0" max="300" ng-model="h" size="5">
    </div>
    <div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
    </div>
</body>
</html>

4つのフィールドの値を操作して変更すると、リアルタイムで赤い四角形の位置とサイズが変わる。

ここではまず<body>部分で値を初期化している。

<body ng-init="x = 100;y = 100; w = 100;h = 100">

複数の値を初期化するには、このようにセミコロンで区切って書ける。つまり、JavaScriptコードを書くだけである。

<input type="number">にng-modelを定義することは、すでに分かっているだろう。これにより、それぞれの入力値がx、y、w、hに保存される。そして、これらの値をもとに四角形の<div>表示が設定される。

<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">

{{}}によるマークアップは、このようにstyle属性の値にも入れることができる。マークアップはHTMLのどこでも使える。そして、その値を操作できる。

どうだろうか。まだJavaScriptコードはほとんど書いていないのに、変数の初期化だけで、いろいろ面白いことができそうではないだろうか。モデルとマークアップを使い、実際にHTMLのさまざまな値を操作してみよう。