ホームブログプログラミングが分からない人でも簡単なWebアプリケーションを作れちゃう！？JavaScriptフレームワーク『AngularJS』

ブログ

BLOG

プログラミングが分からない人でも簡単なWebアプリケーションを作れちゃう！？JavaScriptフレームワーク『AngularJS』

2013.3.15更新日：2021.3.11
- ニュース
- Tweet

「プログラミングは分からないけど、
簡単なWebアプリケーションを作れるようになりたい。」

「HTML・CSSは分かるけど、
JavaScriptが苦手だから何とかしたい。」

「自分の作ったサイトに、
ちょっとしたプログラミング要素を入れたい。」

そんなニーズにお応えしてくれるのが、
今回紹介させていただく「AngularJS」（アンギュラージェイエス）です。

AngularJSって？

簡単に言えば
「HTMLのタグを拡張させるJavaScriptフレームワーク」ですが・・・、
よく分かりませんよね。

そこで今回はサンプルとして
Todoアプリを作って慣れてみましょう。

自信がないという方も大丈夫！

とにかく書くコード量が少ないです。
順に手を動かしてみましょう！

まずはサンプルの完成形を見てください。

ToDoアプリ完成形

シンプルですが、
れっきとしたWebアプリケーションです！

これを今から一緒に作ってみましょう。

なお、HTML・CSSがある程度
ご存知の方を前提に説明させて頂きますが、
これらの知識がない方もマネして書いて頂いたら
完成しますので、ぜひチャレンジしてくださいね。

必要なもの

テキストエディター（メモ帳でも何でもOK）
ブラウザ

以上です。なので、最初から揃っていると思います。

手順１．まずは見た目（レイアウト）だけ作ってみよう

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div>
<h2>Todo 3件</h2>
<div>
[ <a href="">完了済を消去</a> ]
<ul>
<li><input type="checkbox">シャンプー購入</li>
<li><input type="checkbox">腹筋100回</li>
<li><input type="checkbox">ヤマダさんと会食</li>
</ul>
<form>
<input type="text" size="30" placeholder="Todoを入れてください。">
<input type="submit" value="Todo追加">
</form>
</div>
</div>
</body>
</html>
[/html]

上記コードで、
とりあえず見た目は完成します。

しかしご存知のとおり、
これではTodoの追加もできないし、削除もできないし、
完了済にもできない・・・。

さぁ、ここから少しずつ手を加えて
Todoアプリにしていきましょう。

>>ここまでの結果

手順２．AngularJSを使うための準備（AngularJSの読み込み、ng-appの宣言）

[html]
<!DOCTYPE html>
<html lang="ja" ng-app> ※2
<head>
<script src=" ※1
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
</head>
<body>
<div>
<h2>Todo 3件</h2>
<div>
[ <a href="">完了済を消去</a> ]
<ul>
<li><input type="checkbox">シャンプー購入</li>
<li><input type="checkbox">腹筋100回</li>
<li><input type="checkbox">ヤマダさんと会食</li>
</ul>
<form>
<input type="text" size="30" placeholder="Todoを入れてください。">
<input type="submit" value="Todo追加">
</form>
</div>
</div>
</body>
</html>
[/html]

さて、AngularJSを使うためには当然
AngularJSを読み込む必要があります。※1

また、冒頭でも説明したとおり、
AngularJSは「HTMLのタグを拡張」します。

属性「ng-app」をhtmlタグに追加してください。※2

このようにして、皆さんが慣れ親しんだ
HTMLの機能を拡張させていくのです。

「ng-app」は「アンギュラーのアプリケーションだよ」という宣言です。

なお、ngはAngularJSのngだそうです。

これでAngularJSを使う準備はバッチリです。
>>ここまでの結果

手順３．コントローラーを使ってTodoを動的に

ここからが本番です。

[html]
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="TodoController"> ※3
<h2>Todo {{todos.length}}件</h2>　※6
<div>
[ <a href="" ng-click="clear()">完了済を消去</a> ]
<ul>
<li><input type="checkbox">シャンプー購入</li>
<li><input type="checkbox">腹筋100回</li>
<li><input type="checkbox">ヤマダさんと会食</li>
</ul>
<form>
<input type="text" size="30" placeholder="Todoを入れてください。">
<input type="submit" value="Todo追加">
</form>
</div>
</div>
<script>
//Todoコントローラー
function TodoController($scope) { ※4
$scope.todos = [ ※5
{text:’シャンプー購入’, done:true},
{text:’腹筋100回’, done:false},
{text:’ヤマダさんと会食’, done:false}
];
}
</script>
</body>
</html>
[/html]

まず動的にしたい部分に対して
「ng-controller」を宣言します。※3

これを宣言することで、
対応するコントローラーにて細かい調整を
JavaScriptで行うことができます。

コントローラーでどういうことをするか、
についてはJavaScriptで書いていきます。 ※4

よく分からなくても、
とりあえず上記コードのように
書いていただければ大丈夫です。

先ほどまでHTMLで静的にToDoを３つ並べていました。

これを一旦、JavaScriptの配列に入れましょう。※5

ここでは、「todo」の複数形「todos」という名前の配列に、
Todo３つを入れています。

配列というのはデータを
順に入れていく箱のようなものだと思ってください。

さて、$scopeというのがありますが、
これはこのコントローラーの及ぶ範囲（スコープ）を扱うためのものです。

例えば、$scope.todosに今回
todo3個の配列を入れました。※5

こうすれば、Todoコントローラーの範囲内（今回はdiv）で
この配列を扱うことができます。

※6を見てください。
ここで、{{todos.length}}と書いています。

「{{」と「}}」で囲むことによって、
先ほど宣言したtodosを扱うことができるようになりました。

JavaScriptでは、配列内の個数をlengthで取得できるので、
今はtodosにデータが3個入っているので
todos.lengthは3となります。

{{todos.length}} →　3

>>ここまでの結果

手順４．ng-repeatで繰り返し処理

[html]
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="TodoController">
<h2>Todo {{todos.length}}件</h2>
<div>
[ <a href="" ng-click="clear()">完了済を消去</a> ]
<ul>
<li ng-repeat="todo in todos"> ※7
<input type="checkbox" ng-model="todo.done">　※9
<span class="done-{{todo.done}}">{{todo.text}}</span>　※8
</li>
</ul>
<form>
<input type="text" size="30" placeholder="Todoを入れてください。">
<input type="submit" value="Todo追加">
</form>
</div>
</div>
<script>
//Todoコントローラー
function TodoController($scope) {
$scope.todos = [
{text:’シャンプー購入’, done:true},
{text:’腹筋100回’, done:false},
{text:’ヤマダさんと会食’, done:false}
];
}
</script>
<style>
.done-true {　※10
text-decoration: line-through;
color: #bbb;
}
</style>
</body>
</html>
[/html]

先ほどtodosという配列を作りました。
ここにはtodoが初期値として3つ入っていますね。

これを使って、
動的にリストを生成してみましょう。

※7のように、繰り返したいタグ（今回はli）に
「ng-repeat=”todo in todos”」という属性を足してください。

これは「todosという配列に入っているtodoの数だけ繰り返すよ」
という宣言になります。

書いたliは一つでも、
todos内の数だけliが増殖されるのです。

そして各todoの内容、
処理状況を※8で使用しています。

例）一つ目のToDo
内容：　{{todo.text}} → シャンプー購入
処理状況：　{{todo.done}} →　true（完了済）

ここで一工夫あるのですが、※9を見てください。

チェックボックスに「ng-model=”todo.done”」という
属性を追加しています。

これにより、チェックボックスのチェックの
有無（TRUE　or　FALSE）が、
todo.doneすなわちToDoの処理状況にリンクしています。

なお、※10にて処理状況が
完了済の場合のスタイルを設定しています。
（文字の上に横線・色薄く）

>>ここまでの結果

（最後）手順５．ToDo追加機能と、完了済ToDo削除機能を追加

$scope.todos = [
{text:’シャンプー購入’, done:true},
{text:’腹筋100回’, done:false},
{text:’ヤマダさんと会食’, done:false}
];

$scope.addTodo = function() {　　※12
if($scope.text){
$scope.todos.push({text:$scope.text, done:false});
$scope.text = ”;
}
};

$scope.clear = function() {　　※15
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};

}
</script>
<style>
.done-true {
text-decoration: line-through;
color: #bbb;
}
</style>
</body>
</html>
[/html]

最後に追加機能と削除機能を追加しましょう。

まず追加機能。

※11にて、「ng-submit=”addTodo()”」で
フォームがサブミットされた時の処理を書いています。

そのaddTodoの中身ですが、
※12を見てください。

ここでは、
「もしtextの中身がちゃんと入っているなら、
　todosに新たにtodo（内容はフォームのtext、処理状況は未処理）を追加し、
　フォームのtextを空っぽにする。」
ということをしています。

※13の「ng-model=”text”」によって、
フォームのテキスト入力欄を「text」として、
コントローラーのスコープと結びつけています。

次に削除機能。

※14のとおり、「完了済を消去」という
文字列リンクに対して「ng-click=”clear()”」と書いて、
削除機能と結びつけています。

そのclearの中身は※15。

ここでは、
「まず今のtodosの中身をoldTodosに移し替える。
　次にtodosを空の配列にする。
　そしてoldTodosの中身を1つずつ調べて、
　未処理のものだけ改めてtodosの中に入れていく。」
ということをしています。

これにて完成！

まとめ

AngularJS、本当に便利です。

今回の記事が、こういったシンプルな
Webアプリケーションを作ってみるきっかけになれば幸いです。

また、これを踏み台として
より本格的なプログラミングへと歩み出さされると、
これに勝る喜びはありません。

AngularJSはリリースされて間もないフレームワークですので、
まだ日本では使用例がほとんどないです。

グラッドキューブで開発中の
LPOツールでは一部使用しています。

あなたも一緒にAngularJSの先駆者になりましょう！

SNSでもお役立ち情報をお届けします！