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

グラッドキューブ BLOG

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

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

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

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

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

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

 

AngularJSって?

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

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

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

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

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

 

ToDoアプリ完成形



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

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

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

 

必要なもの

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

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

手順1.まずは見た目(レイアウト)だけ作ってみよう

[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アプリにしていきましょう。

>>ここまでの結果

 

手順2.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を使う準備はバッチリです。
>>ここまでの結果

 

手順3.コントローラーを使って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を3つ並べていました。

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

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

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

 

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

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

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

 

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

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

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

{{todos.length}} → 3

>>ここまでの結果

手順4.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にて処理状況が
完了済の場合のスタイルを設定しています。
(文字の上に横線・色薄く)

>>ここまでの結果

(最後)手順5.ToDo追加機能と、完了済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">
<h2>Todo <span>{{todos.length}}件</span></h2>
<div>
[ <a href="" ng-click="clear()">完了済を消去</a> ] ※14
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()"> ※11
<input type="text" ng-model="text" size="30" placeholder="Todoを入れてください。"> ※13
<input type="submit" value="Todo追加">
</form>
</div>
</div>

<script>
function TodoController($scope) {

$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の先駆者になりましょう!

  • このエントリーをはてなブックマークに追加
メニューボタンメニュー閉じるボタン