Welcome to AngularJS

AngularJSをはじめよう

ToDoアプリを作って理解するAngularJSの基礎〈Angularシリーズ vol.1〉

前提条件

  • HTML、JavaScriptの基本的な知識

執筆環境

  • OS X 10.10
  • AngualrJS 1.4.0

AngularJSとは

AngularJS(アンギュラージェイエス)は、Googleとコミュニティによって開発されているJavaScriptのOSSフレームワークです。 jQuery, Backbone.js, Knockoutを始め、最近ではReact.js界隈が賑わっており、近年、フロントエンドのフレームワークは日々めまぐるしいスピードで発展しています。

その中でも、AngularJSは、2012年6月にバージョン1.0.0がリリースされてから、2015年6月現在でバージョン1.4まで発展しており、人気のフレームワークとなっています。 さらに今冬には、Angular 2の正式リリースを控え、益々注目を浴びています。

本連載では、AngularJSの基礎を解説しながら、実際にアプリケーションを書いて、その利便性を感じてもらえればと思っています。

ToDoアプリを作る

まずは、AngularJSの魅力を知ってもらうため、簡単なToDoリストのWebアプリケーションを作ってみましょう。

ToDoアプリは、以下の機能をもったアプリと定義します。

  1. ToDoの一覧表示
  2. ToDoの新規作成
  3. 完了したToDoのチェック
  4. 完了したToDoのアーカイブ
  5. ToDoの検索

ToDoの一覧表示

まずは、ToDoを一覧表示してみましょう。

1
<html ng-app="ToDo">

属性ng-appToDoを指定します。 これは、AngularアプリケーションでToDoというモジュールを使用するという意味です。

1
2
3
4
5
6
<head>
    <meta lang="ja" charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <title>ToDo</title>
</head>

<head></head>内にAngularJSファイルを読み込みます。 また、ToDoアプリのロジックを記述するscript.jsも読み込みます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
angular.module('ToDo', [])
    .controller('TodoController', function () {
        this.todos = [
            'システム企画',
            '要件定義',
            '概要設計',
            '詳細設計',
            'プログラム設計',
            'プログラミング',
            'プログラムテスト',
            '結合テスト',
            '受入テスト',
            '運用テスト',
            'リリース'
        ];
    });

先ほどng-app属性に指定したToDoの名前でモジュールを定義します。 ToDoを扱うコントローラをTodoControllerと定義します。 ToDoは配列で定義し、this.todosに代入します。TodoController内のthisは、TodoController自身を示します。 これらの記述で、ToDoモジュールにTodoControllerを定義したことになります。

1
2
3
4
5
<div ng-controller="TodoController as vm">
    <ul ng-repeat="todo in vm.todos">
        <li>{{todo}}</li>
    </ul>
</div>

ToDoの表示部分です。 ng-controller属性にToDoモジュールに定義したTodoConrollerを指定します。 as vmという記述で、TodoControllerにvmという参照名を付加しています。

ng-repeat属性で配列を繰り返し表示することができます。上記のように記述するとTodoControllerに定義したToDo配列を繰り返し表示できます。繰り返し表示するtodoは中括弧({{ }})で囲います。

index.htmlをブラウザで表示してみましょう。

このように配列の内容が箇条書きで記述されます。

ToDoの新規作成

ToDoを新規作成する機能を実装してみます。

1
2
3
4
.controller('TodoController', function () {
    var self = this;
    self.todos = [];
});

TodoController自身を表すthisは変数selfに代入し、ToDoを格納する配列をself.todos=[]で初期化しておきます。

1
2
3
4
<form ng-submit="vm.create()">
    <input type="text" ng-model="vm.newTodo" placeholder="ToDo名を入力">
    <input type="submit" type="button" value="新規作成">
</form>

ToDoを新規作成するフォームを記述します。 ng-submit="vm.create()"に指定したメソッドが、フォームがサブミットされた際に実行されます。 また、ng-model="vm.newTodo"の記述によって、テキストフォームに入力された文字列がvm.newTodoに代入され、TodoController側で参照することができます。

1
2
3
4
self.create = function() {
    self.todos.push(self.newTodo);
    self.newTodo = '';
}

上記の通り、AngularJSでは配列をng-repeatで繰り返し表示できるため、つまり、ToDoの新規作成機能は、ng-repeatで繰り返し表示している配列に値を追加することと考えることができます。

createメソッドは、変数newTodoに格納されている値を、ToDoの配列todosに追加します。

それでは、ToDoの新規作成機能を試してみましょう。

注意

上記の記述だと、ToDoを追加する際に一度追加した文字列と同じ文字列を追加した際に、JavaScriptコンソールに下記のエラーがでます。

コンソールに表示されているURLにアクセスすると、エラー詳細と解決策が記述されているページへアクセスできます。

今回のエラーは、「Error: ngRepeat:dupes Duplicate Key in Repeater」とng-repeatで繰り返し表示する対象の値が重複しているというエラーでした。

これを解決するためには、下記のようにtrack by $indexを追加します。

1
2
3
<ul ng-repeat="todo in vm.todos track by $index">
    <li>{{todo}}</li>
</ul>

このようにエラーの解決策をブラウザ上で提示してくれ、サポートが充実しているのもAngularJSのいいところです。

完了したToDoのチェック

完了したToDoをチェックできる機能を追加してみましょう。

1
2
3
4
self.todos = [
    {title: 'システム企画', done: true},
    {title: '要件定義', done: false}
];

まずは、ToDoを格納する配列の構造を上記のように変更します。 ToDoのタイトルはtitle、完了したかどうかのフラグはdoneで表現します。

1
2
3
4
<li>
    <input type="checkbox" ng-model="todo.done">
    <span>{{todo.title}}</span>
</li>

先ほど変更したToDoを管理する配列の構造に合わせて、表示を変更します。

箇条書き部分にチェックボックスを追加します。チェックボックスの属性ng-modelにはtodo.doneを指定します。todo.donetrueの場合は、チェックボックスにチェックが入ります。 ToDoのテキストは{{todo.title}}に変更します。

ToDoのcreateメソッドを下記のように編集します。

1
self.todos.push({title: self.newTodo, done: false});

一度、変更を確認してみましょう。

意図したように表示されていることがわかります。

次に、チェックしたToDoにスタイルをつけてみましょう。

1
2
3
4
.done {
    text-decoration: line-through;
    color: grey;
}

テキストに取り消し線を付加し、文字色がグレーになるスタイルを定義します。

1
<span ng-class="{'done': todo.done }">{{todo.title}}</span>

上記のようにng-class属性を用いて記述します。 これは、todo.doneがtrueの場合にdoneというクラスが付加されます。 class='done'が付加された文字列は、上記のスタイルが適応されます。

ToDoの配列構造を変更したので、ng-repeatに記述していたtarck by $indexを削除しておきます。

1
<ul ng-repeat="todo in vm.todos">

完了したToDoのアーカイブ

完了したToDoをアーカイブできる機能を追加します。

1
2
3
4
5
6
7
8
9
self.archive = function () {
    var currentTodo = self.todos;
    self.todos = [];
    angular.forEach(currentTodo, function (todo) {
        if(!todo.done) {
            self.todos.push(todo);
        }
    });
};

archiveは、ToDoの中でdonefalseの対象を残す処理にしています。

1
<input type="button" ng-click="vm.archive()" value="完了したToDoをアーカイブ">

「完了したToDoをアーカイブ」ボタンをクリックすると、チェックが入ったToDoが一覧から削除されます。

ToDoの検索

最後は、ToDoの検索機能を追加します。

1
2
3
4
<form>
    <input type="text" ng-model="vm.keyword" placeholder="ToDoを検索">
</form>
<ul ng-repeat="todo in vm.todos | filter:vm.keyword">

検索機能はng-repeatにフィルタをかけることで実現します。 filter:vm.keywordに入力された文字列が含まれるtodoのみ一覧に表示されるようになります。

検索機能を試してみましょう。

まとめ

今回は、簡単なToDoアプリを例に、AngularJSの基本機能を使ってみました。

AngularJSは、DOMを直接操作することなく、表示の切り替えが簡単にできるので安心感があります。また、ng-repeatを用いることで、繰り返し記述が省略され、HTMLをDRYに記述することもできます。

AngularJSは、クライアントサイド実装をサポートするAPIを非常に多く提供しており、Webサイトで全てのAPIが解説されています。AngularJSが用意しているAPIが非常に多いので、一度に全部をキャッチアップするのは至難の技です。 ですので、実際に使いたい機能を少しずつ試すことをオススメします。

次回は、このToDoアプリを拡張してみます。

Tech Blog

(編集部)

株式会社リクルートライフスタイルのTech Blog編集部です。いま流行りのTechネタやちょっと使えるTipsなどをお届けしていきます。

NEXT