AngularJSのはじめの一歩(詳細) #Angular

AngularJSのチュートリアルのトップページとstep-0を読んでのレポート。

まず初めの一歩ということで、AngularJSを利用するための必要な環境構築と
Angularの概要を説明してくれているstep-0について、簡単に取りまとめました。

はじめに

Angularのチュートリアルは素晴らしいです。
gitを使って、ファイルの準備や環境の準備に余計な手間をかける必要が無いようになっている。

知りたいことだけに注力できる。
やり直しやstepの切り替えがしやすい。
図解もあるし、解説が丁寧。
翻訳プロジェクトもあり、日本語のTutorialも下記のプロジェクトで参照できるようです。
- AngularJSドキュメント日本語翻訳プロジェクト

まずは、環境構築

git のインストール

なにわともあれ、何をするにしてもgitが必須です。
gitをインストールしましょう。

個人的に使っているGuiツールは、SourceTree for WindowsからGitを利用するで解説されているSourceTreeです。
Guiを使ったソース管理はできませんが、GUIを使ったgitの基本的な操作ができることは当たり前として、コンソール操作もできるような仕組みになっているので、このソフトを起点にしてWindowsシェルを起動して作業することができるのが便利だと思っています。
SourceTreeをいれればGitを入れる必要はありません。

Node.jsとKarmaのインストール談話

テストも含んだチュートリアルの完遂には、Node.js の0.8以降とKarmaが必要という。

正直に、Node.jsにも詳しくないし、Karma にも詳しくない。
(PHPに特化した職業プログラマになってしまうと、どうしてもこういった技術から遠ざかるようだ)

完全なる余談

Node.jsは、Chromeのエンジンらしく「event-driven, non-blocking I/O model」を利用して動いているものらしい。
Apacheなんていらないようだ。
( Node.js のevent loop を理解するためのページを参考にしようとしたけれども、読めない。。。どっかのタイミングで訳をこちらのサイトに載せよう。)

Karmaは、テストツールであり、シンプルな方法でプロダクトのテストができることを目指しているツールだそうだ。
Jenkinsやその他に2種類ほどCI(Continuおous Integrationツール)に対応しており、テスト自動化も想定されている。

各ツールの公式ページの概要だけを読んで書いてみた。余談に思えるが、多分こういったツールを作成した人たちの思想からAngularJSが創りだされた理由があるように思うので、少しでも書ける範囲でメモを記述おばしてみました。

後でほかの投稿でいい記事がったので追記
* Node.jsの問題点、デメリットと解決方法まとめ
* Node.jsを大雑把に5分で理解する

AngularJSの動作環境を構築する

Node.exeをダウンロード

手元の環境がWindowsだった(それもVista)。そこで、まずは、msiを試してみたところ、インストール出来なかった。
どうも、Node.exeの方が簡単そうなので、それにした。

Cygwinも試したが、コンパイラがインストールされていないとかツールがないとか言われて段階的に解決していこうとしたが最終的に挫折。Node.exeを使うのが勉強には時間的にも良し。

ダウンロードは公式ページで行った。

また、コメント部で @ledsun@github にご紹介いただいている方法を使ったらWindowsでも簡単導入可能！

KarmaはNode.exeを使ってnpmインストール

何も考えずAngularJSのチュートリアル通りインストール完了。
後でも出てくるが、一度立ち上げたらファイル編集後に自動的にテスト実行してくれるので便利。

Rubyやっている人の話でプログラミング中に勝手にテストしてくれる仕組みがあると便利とは聴いていたが、こういうことだったのか。JSファイルを編集して更新したら緩慢なWindows上なのにさくさく動く。
PHPでもNetBeensとかEclipseとか使っても出来るんだろうが重くて使えん。

AngularJSを好きになった理由の一つが、このKarmaを利用してブラウザなしにサーバーサイドなしにJSをさくさくと開発できそうなところだ。

以上の通り手元がWindowsであった関係上、Windowsのみの説明になってしまいました。
Linuxの方は、Windowsのような癖はないと思うので、気にしないことにします。

step-0 のレポート

Javascript Expression をHTML内で簡単に利用できる

Angularのいい点は、HTML内にJavaScript　Expressionを簡単に書ける場所をすぐに作れるようになることですね。

  <p>Nothing here {{'yet' + '!'}}</p>

上記の「{{ }}」で囲まれた部分が文字を結合して出力する簡単なJavascrip Expressionになっています。
jQueryでこれを書こうとしてもイメージできないはずです。jQueryはDOM操作に特化しているためでしょうね。

これは、サーバ側のテンプレートエンジンでよくつかわれる仕組みですね。
（私の場合はTwigだったり、Smartyだったり、PageTemplateだったりのイメージです)

見慣れている人はそんなもん当たり前のように感じるかもしれません。しかし、
JavaScriptでこういった記述ができることはかなり強力な手段として利用できることになると、
改め気付いてほしいです。

Angularのディレクティブという概念

上記のような便利な記述を実現するには、Angularは、ディレクティブと呼ばれる概念を理解する必要があります。

もっとも重要なディレクティブが、「ngApp」です。

<html ng-app>

サンプルでは上記のように、htmlタグ中に埋め込まれています。
このngAppディレクティブ（html内に埋め込む際は「ハイフン(-)」で小文字表記になります)は、Angularがコンパイルする個所の目印となる存在です。
このngAppがなければAngularはｊｓファイルを読み込んでも不要な長物になってしまいます。

そして、どこに埋め込んでもいいようです。埋め込んだタグを起点にして囲まれた領域がすべてAngularの手中におさまるようになっているので、特に動的な部分が狭いのであれば、局所的に動作するようにngAppを埋め込めばいいようです。
複数回ngAppを埋め込むとどうなるか、、、、、、、今後の勉強で明らかにします。

  <script src="lib/angular/angular.js"></script>

上記のangula.jsが読み込まれると、先ほどご説明した通り、まずngAppディレクティブを探しにいきます。
ngAppのタグを起点にして子要素すべてをコンパイル対処として取り込みます。

そして、ngAppで囲まれた領域に対して、ユーザーから何らかの操作が行われるのを待ちます。
ngAppで囲まれた時点で、その領域内のイベントハンドリングはブラウザではなくAngularの持ち場になると考えていいと思っています。

以上、step-0を読んだレポートになります。
Angularを知るには氷山の表面の汁程度の説明しかありませんが、それだけでも十分強力なフレームワークであることはわかるのではないでしょうか。