AngularJSとは、Google社主導で開発されているJavaScriptのフレームワークのことです。大規模なアプリケーションでも安定した、綺麗なコードで書きやすい仕組みが用意されていることが特徴です。
今回は、AngularJSとはなんなのか？どういう特徴があるのか？から、実際にアプリケーションを作りながら、覚えられる実践講座までご用意いたしました。
AngularJSの簡易的な入門書のようにお使いいただければと思います。
INDEX
AngularJSとAngular2
2010年頃に初版がリリースされていて、執筆時点では1.5.7版がリリースされています。
AngularJSには、バージョンが２迄存在しており、最近ではAngular2の話題がホットですが、実は、バージョン1.x系と2.x系の互換性はありません（この先もきっとありません）。
今回は、バージョン1.x系にあたる、AngularJSについて作成する際に必要な準備、そして開発手順と言った、入門者がまずやった方がいいポイントをまとめさせていただきました。
※以下、AngularJSと記述した場合は1.x系。Angular2と記述した場合は2.xとする
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞なぜ今更AngularJS？
Angular2ももうすぐ正式リリース（執筆時点ではまだrc4）するし、AngularJSとの互換も無いならなぜ今更AngularJSを学ぶ必要が？と思われる方も少なく無いと思います。
その理由は、実績の多さと活用のしやすさです。
確かにAngularJSとAngular2には互換性はありませんが、根底の概念は大きくは変わりません。そして、Angular2はまだまだ若いです。より良いフレームワークになっていく為にこれからも仕様が変わっていく可能性は大いにあり得ます。
一方で、AngularJSは6年もの間、既に様々なWebサイトやシステムを支えてきており、実績が十分にあります。また、AngularJSに関する情報もインターネット上にたくさんあるので、問題に直面した場合も解決策を見つけやすく、使いやすいため、Angular2が正式リリースした後も、しばらくはAngularJSが使われるだろうと思われます。
まずは実践！AngularJS
まずは、AngularJSを触ってみましょう。以下の機能を持った簡単なアプリケーションを作ります。
Twitterのユーザーリストを追加して、アクセスできるアプリケーション
＜機能一覧＞
* フォームでtwitterのユーザー名入力機能
* 登録したtwitterユーザーの一覧表示機能
* ユーザー一覧から各twitteアカウントページへのアクセス機能
AngularJSの準備
公式サイト(https://code.angularjs.org/)にてJavaScriptが公開されているので、最新版を参照します。
（ついでに生のHTMLでは見た目が素っ気ないのでBootstrapを参照しています。Bootstrapについては詳しく説明はしませんが、簡単に見た目の整った画面が作れる便利な道具だと思ってください）
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <!-- 見た目用にBootstrapを使う --> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- AngularJS 1.5を公式サイトから引っ張ってくる --> <script src="//code.angularjs.org/1.5.7/angular.min.js"></script> </head> <body> </body> </html> |
アプリケーションの準備
AngularJSのJavaScriptと画面であるHTMLを繋げるためには必ずおまじないが必要です。まずはAngularJSのアプリケーションをJavaScriptで作りましょう。以下の内容を含んだ app.js を準備します。
JS
|
1 2 3 4 5 |
// app.js // 「myAppというAngularJSのアプリケーションを作ります」宣言だと思ってください angular.module('myApp', []); |
上で作った myApp というアプリケーション（正確にはモジュール）とHTMLを紐付ける必要があります。
そこで登場するのが ng-app です。細かい説明はここで一気に覚えるのは難しいので省きますが、AngularJSにはJavaScriptとHTMLを紐付ける為の便利な合言葉に ng-* というものがいくつも用意されていると思ってください。 ng-app に関しては以下のように記述することで、このタグ（今回の場合 <html> タグ）の配下は myApp が管理しますよ、と宣言していると思ってください。また、上で作った app.js も含めておきましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html ng-app="myApp"> <head> <!-- 見た目用にBootstrapを使う --> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- AngularJS 1.5を公式サイトから引っ張ってくる --> <script src="//code.angularjs.org/1.5.7/angular.min.js"></script> <!-- ↓↓↓自分で作ったJavaScriptはここから↓↓↓ --> <script src="app.js"></script> </head> <!-- 省略 --> </html> |
ここまででいったんの準備は完了です。この準備はどのAngularJSのアプリケーションを作るときでも必要だと思っておいてください。
画面を作成
それではAngularJSを書いていきましょう、と言いたいところですがまずは今回の画面の大枠をHTMLとBootstrapで先に作ってしまいましょう。HTMLを以下のようにします。あまり細かいことは気にしなくていいですが、大きくは「ユーザー登録フォーム」と、登録したユーザーを表示する「ユーザー一覧」があることを覚えておいてください。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html ng-app="myApp"> <!-- 省略 --> <body class="container"> <div> <div> <h1>登録フォーム</h1> <form> <div class="form-group"> <label for="username">ユーザー名</label> <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力"> </div> <button type="submit" class="btn btn-primary">登録</button> </form> </div> <hr> <div> <h1>ユーザー一覧</h1> <ul> <li style="padding: 5px"> <!-- ここにユーザー一覧を出したい！ --> </li> </ul> </div> </div> </body> </html> |
Controllerの作成
ようやくAngularJSらしいJavaScriptを書きます。その名も controller です。 controller は画面からのアクションに反応したり、画面に情報を表示できるようにしてくれるキーとなる存在です（正確には $scope という存在と組み合わさって実現されます）。
画面に必要な機能としては以下が考えられます。
* フォームのINPUTに入力されたユーザーを登録
* 登録されたユーザーをユーザー一覧に保存
これを実現するためにJavaScriptの観点で必要なものは下のようになるかと思います。
* 入力されたユーザー名を保持しておける変数 → username
* 登録ボタンが押されたときの登録処理（関数） → submit
* 登録したユーザーを複数保存しておける配列 → users
これらを踏まえて controller を書いてみましょう。まずは app.js を編集します。
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// app.js angular.module('myApp', []) .controller('AppController', function($scope) { // 入力されたユーザー名を保持 $scope.username = ''; // ユーザー一覧（空の配列で初期化） $scope.users = []; // 登録を押されたときの関数 $scope.submit = function() { // 新しいユーザーをユーザー一覧に登録する $scope.users.push({ username: $scope.username, url: '//twitter.com/' + $scope.username }); }; }); |
controller の追加方法は、 angular.module にぶら下げる形で、 .controller(<コントローラー名>, <コントローラーの実装>) という形で登録します。これは AngularJSのルールなので覚えておくしかないです。
JavaScriptがわかる人であればなんとなく上のコードが何をしているか分かるかと思います。ただし、謎の $scope という存在がいると思います。
$scopeについて深く説明すると文面が多くなってしまうのですが、いったんはHTMLとJavaScriptを紐付けてくれる人だと思ってください。ざっくりとした説明ですが $scope に入れたものはHTMLで使える、と思ってもらっていったんは大丈夫です。
そして、 function の引数として function($scope) と書くことで、AngularJSが 魔法のように $scope を使えるようにしてくれます。（これをDependency Injectionと言うのですが、細かい説明をここでは省略します）
ControllerとHTMLの紐付け
それでは、Controllerの内容をHTMLと紐付けます。ここでも ng-app のときのように合言葉を使います。
ng-controller
まずはControllerが使える範囲を決めるために、 ng-controller を使います。これを使ったタグの配下はそのController（今回であればAppController）と紐付きます。とりあえずはみんなを包み込んでくれている <div> に先ほど作った AppController を紐付けましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<body class="container"> <!-- ng-controllerで紐付け --> <div ng-controller="AppController"> <div> <h1>登録フォーム</h1> <form> <div class="form-group"> <label for="username">ユーザー名</label> <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力"> </div> <button type="submit" class="btn btn-primary">登録</button> </form> </div> <hr> <!-- 省略 --> </div> </body> |
これで <div> 配下で AppController の $scope に入れたものを使えるようになります！何を $scope に入れたか思い出してみましょう。
* username → 登録するユーザー用
* submit → ユーザー登録用の関数
* users → 登録したユーザー一覧用
ng-modelでINPUTと紐付け
INPUTで入力した内容を、登録するユーザー名として使いたいですよね。さらにこれが自動的にINPUTと連動してくれたら楽ですよね！そんなときに使えるのが ng-model です。下のように書くことで、 $scope の中の username とINPUTを紐付けることができます。
|
1 2 3 |
<!-- INPUTに$scope.usernameを紐付ける --> <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力" ng-model="username"> |
ng-submitで関数と紐付け
これでINPUTの紐付けは完了しましたが、紐付けしただけでは登録はできませんね！登録ボタンを押したら submit が実行されるようにしたいです。ここでは <form> を使っているので、 ng-submit を使うことができます。それでは <form> と submit を紐付けましょう！
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form ng-submit="submit()"> <div class="form-group"> <label for="username">ユーザー名</label> <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力" ng-model="username"> </div> <button type="submit" class="btn btn-primary">登録</button> </form> |
こうすることで登録ボタンを押したときに $scope の submit が実行されるようになります。これだけ簡単に書くことができるのです。
ng-repeatで配列を紐付け
ここまでで何かしら紐付けはしているのですが、本当に動いているかどうかよくわからないですね。登録したユーザー一覧を画面で見ることができたら、今までの処理が動いているかどうかわかるはずです。ユーザー一覧を表示したいのですが、一覧というものは同じような部品を **繰り返し** 表示しますよね。配列に入っているものを繰り返し簡単に表示したいです。
そこで登場するのがAngularJSの中でも最も使う頻度の高い ng-repeat です。とにかくどうやって書くか見てみましょう！
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div> <!-- ユーザー一覧表示エリア --> <h1>ユーザー一覧</h1> <ul> <!-- 繰り返したいタグに対してng-repeatを使う --> <li style="padding: 5px" ng-repeat="user in users"> <div> <!-- ng-repeat内のuserをタグで囲まれた範囲内で使うことができます --> <a href="{{user.url}}" target="_blank">{{user.username}}</a> </div> </li> </ul> </div> |
<li> を繰り返し表示したいので <li> に ng-repeat を書いています。 ng-repeat="user in users" と書くことで users に入っている一個一個の要素を user として取り出して ng-repeat の付いているタグ内で使うことができます！さて、ここでまた新たな記述方法が登場しています。
HTML
|
1 |
<a href="{{user.url}}" target="_blank">{{user.username}}</a> |
なにやら {{}} で囲まれたものがあります。これは **インターポレーション** と呼ばれるもので、単語は難しく聞こえるんですけど結局は {{}} の中のオブジェクトや式をAngularJSが変換して画面に出してくれる便利な仕組みのことです。上の書き方をしたことで user の持っている username が表示され、 <a> のリンク先は user に設定した url が使われることになります。
これでユーザー一覧が完成しました！
完成！
最終的には以下のようにHTMLとJavaScriptが作られているはずです！実行してみてちゃんと動くかみてみましょう！
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html> <html ng-app="myApp"> <head> <!-- 見た目用にBootstrapを使う --> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- AngularJS 1.5を公式サイトから引っ張ってくる --> <script src="//code.angularjs.org/1.5.7/angular.min.js"></script> <!-- ↓↓↓自分で作ったJavaScriptはここから↓↓↓ --> <script src="app.js"></script> </head> <body class="container"> <div ng-controller="AppController"> <div> <h1>登録フォーム</h1> <form ng-submit="submit()"> <div class="form-group"> <label for="username">ユーザー名</label> <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力" ng-model="username"> </div> <button type="submit" class="btn btn-primary">登録</button> </form> </div> <hr> <div> <h1>ユーザー一覧</h1> <ul> <li style="padding: 5px" ng-repeat="user in users"> <div> <a href="{{user.url}}" target="_blank">{{user.username}}</a> </div> </li> </ul> </div> </div> </body> </html> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// app.js angular.module('myApp', []) .controller('AppController', function($scope) { // 入力されたユーザー名を保持 $scope.username = ''; // ユーザー一覧（空の配列で初期化） $scope.users = []; // 登録を押されたときの関数 $scope.submit = function() { // 新しいユーザーをユーザー一覧に登録する $scope.users.push({ username: $scope.username, url: '//twitter.com/' + $scope.username }); }; }); |
改善してみよう
簡単なアプリケーションを作ってみましたが、使いづらい点がいくつかあることにすぐに気づくと思います。例えば以下のような点です。
* INPUTが空白でも登録できてしまう（空白なら登録しないようにしたい）
* ユーザー登録をしたのにINPUTがそのまま表示されている（登録後はINPUTを空にしておきたい）
* ユーザーが一人も登録されていないときの表示が不親切（一覧も表示されないので「ユーザーが登録されていない」などのメッセージが表示されるとより良い）
* 登録したユーザーを一覧から削除できない（間違えて登録してしまった場合に削除する手段がない）
などなどです。ぜひ、これらの機能を自分で追加してみましょう。一つの例として以下のソースを載せておきますので参考にしてみてください。
https://embed.plnkr.co/6sRCfZ00PB7nctL4W7OG/
便利なAngularJS 活用する際の注意点
いかがでしたでしょうか？ほとんどコードを書かずにHTMLとJavaScriptを連携させることができたと思います。これがAngularJSの強みです。ただし、同時にこれがAngularJSの弱み（？）とも言えます。この限られた紙面で様々な機能を説明することができずに省略してしまっていますが、様々な難しそうな用語（Dependency Injection、インターポレーションなど）が出てきますし、色々とAngularJSが自動で魔法のようにやっていることもたくさんあります。
この記事内で全く触れていませんが、AngularJSには再利用可能な部品を作っていくためのDirectiveとComponentというとても重要な仕組みもあります。このように、覚えておくと良い概念も少なくありません。訳の分からないまま使っているとどうしても不安な気持ちが広がってしまうと思います。
が、フレームワークを使うにあたってそのフレームワークのルールを覚えるというのはある程度仕方の無いものです。ただし、そのルールを覚えることでより早く、より良い物を作りやすくなるのであれば、覚えることに意味があるのだと思います。AngularJSにはそれを覚えるだけの価値が十分にあります。そして、AngularJSが使えるようになった先にはAngular2にもシフトしやすくなるという明るいであろう未来もきっと待っています。今日からどんどんAngularJSを使っていきましょう！
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中