AngularJS Tutorial #ng_jp
AngularJS Advent Calendar 2014の10日目、AngularJS Tutorial について書く。
先日、AngularJS ハッカソンに行ってきた。
AngularJS使ってないけど、1年に1回くらいはAngularJSの勉強会に参加していて、いよいよ来年くらいからAngularJSを使いそうな気がするので、ハッカソンにも行ってきた。
で、1日かけてAngularJS Tutorialをやっていた。わかっていたけどけっこう大変で、ハッカソンだけで終わらなかった。こんな感じの内容。
チュートリアルの環境構築
Working with the code.
コードを動かしながら作業したかったので、チュートリアルの環境を準備した。環境構築の時点で、けっこう面倒で、2時間くらい使ってしまった…。
最初にあれこれ取ってくる。なんとなくフォークして作業したけど、普通にcloneしてくるだけでよかったかも。
git clone --depth=14 https://github.com/angular/angular-phonecat.git
cd angular-phonecat
nodeのバージョン確認。v0.10.27以上が必要だったので問題なし。
node --version
v0.10.29
続いて npm install。
npm install
> fsevents@0.3.1 install /Users/sada/git/angular-phonecat/node_modules/karma/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild
SOLINK_MODULE(target) Release/.node
SOLINK_MODULE(target) Release/.node: Finished
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
SOLINK_MODULE(target) Release/fse.node: Finished
> ws@0.4.32 install /Users/sada/git/angular-phonecat/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)
CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node
SOLINK_MODULE(target) Release/bufferutil.node: Finished
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node
SOLINK_MODULE(target) Release/validation.node: Finished
> angular-phonecat@0.0.0 postinstall /Users/sada/git/angular-phonecat
> bower install
bower angular-route#1.3.x not-cached git://github.com/angular/bower-angular-route.git#1.3.x
bower angular-route#1.3.x resolve git://github.com/angular/bower-angular-route.git#1.3.x
bower bootstrap#~3.1.1 not-cached git://github.com/twbs/bootstrap.git#~3.1.1
bower bootstrap#~3.1.1 resolve git://github.com/twbs/bootstrap.git#~3.1.1
bower jquery#1.10.2 not-cached git://github.com/jquery/jquery.git#1.10.2
bower jquery#1.10.2 resolve git://github.com/jquery/jquery.git#1.10.2
bower angular-mocks#1.3.x not-cached git://github.com/angular/bower-angular-mocks.git#1.3.x
bower angular-mocks#1.3.x resolve git://github.com/angular/bower-angular-mocks.git#1.3.x
bower angular#1.3.x not-cached git://github.com/angular/bower-angular.git#1.3.x
bower angular#1.3.x resolve git://github.com/angular/bower-angular.git#1.3.x
bower angular-resource#1.3.x not-cached git://github.com/angular/bower-angular-resource.git#1.3.x
bower angular-resource#1.3.x resolve git://github.com/angular/bower-angular-resource.git#1.3.x
bower angular-animate#1.3.x not-cached git://github.com/angular/bower-angular-animate.git#1.3.x
bower angular-animate#1.3.x resolve git://github.com/angular/bower-angular-animate.git#1.3.x
bower angular-mocks#1.3.x ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/angular/bower-angular-mocks.git", exit code of #128
Additional error details:
fatal: unable to connect to github.com:
github.com[0: 192.30.252.130]: errno=Operation timed out
npm ERR! angular-phonecat@0.0.0 postinstall: `bower install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-phonecat@0.0.0 postinstall script.
npm ERR! This is most likely a problem with the angular-phonecat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! bower install
npm ERR! You can get their info via:
npm ERR! npm owner ls angular-phonecat
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 13.4.0
npm ERR! command "/Users/sada/.nodebrew/node/v0.10.29/bin/node" "/Users/sada/.nodebrew/current/bin/npm" "install"
npm ERR! cwd /Users/sada/git/angular-phonecat
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.14
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/sada/git/angular-phonecat/npm-debug.log
npm ERR! not ok code 0
怒られる。このあとあれこれ試してもうまくいかない。
調べたらこんなのでてきて
git configに設定追加して直った。やれやれ。
git config --global url."https://".insteadOf git://
これで環境構築は終わりでnpm startでサーバ起動できて、npm testでテストできる。
E2E(End to End)Testも簡単にできる。まずは準備する。これは1回だけ実行すればいい。
npm run update-webdriver
サーバ立ち上げて
npm start
E2Eテストを実行する。
npm run protractor
こんな感じでセットアップは完了。
チュートリアル
こんな感じの内容。僕はまだ「8 - More Templating」までしか終わってない…。
0 - Bootstrapping
1 - Static Template
2 - Angular Templates
3 - Filtering Repeaters
4 - Two-way Data Binding
5 - XHRs & Dependency Injection
6 - Templating Links & Images
7 - Routing & Multiple Views
8 - More Templating
9 - Filters
10 - Event Handlers
11 - REST and Custom Services
12 - Applying Animations
The End
このチュートリアルのよいところはいろいろある。
- 次の章にいくとき、環境をリセットできる
- テストコードの解説がある
- E2Eテストコードの解説がある
- ちょっと難しいおまけ(Experiments)がある
Amazon.co.jp： RailsによるアジャイルWebアプリケーション開発も、テストを書きながら進めていく感じの本で、このAngularJS Tutorialもそんな感じ。AngularJS TutorialではAngular Wayが学べる。
本よりいいのは、簡単に環境をリセットできるところ。
git checkout -f step-0
ステップごとにタグがうってあって、こんな感じでそのセクションの環境にできる。Experimentsであれこれ試しても、次のセクションに行ったときに、一つ前のセクションの状態に戻して、きれいな状態でそのセクションを試せる。これ、すごくよかった。
あと、楽しかったのはE2Eテスト。これまでやったことなくて、初めて試した。
E2Eテストを起動すると
npm run update-webdriver
ブラウザ立ち上がって勝手にあれこれ動く。
コンソールにはこんな感じででてくる。
npm run protractor
> angular-phonecat@0.0.0 preprotractor /Users/sada/git/angular-phonecat
> npm run update-webdriver
> angular-phonecat@0.0.0 preupdate-webdriver /Users/sada/git/angular-phonecat
> npm install
npm WARN package.json karma-chrome-launcher@0.1.5 No README data
> angular-phonecat@0.0.0 postinstall /Users/sada/git/angular-phonecat
> bower install
> angular-phonecat@0.0.0 update-webdriver /Users/sada/git/angular-phonecat
> webdriver-manager update
selenium standalone is up to date.
chromedriver is up to date.
> angular-phonecat@0.0.0 protractor /Users/sada/git/angular-phonecat
> protractor test/protractor-conf.js
Using ChromeDriver directly...
.-
Finished in 18.594 seconds
7 tests, 11 assertions, 0 failures
こんな風に動くテストの書き方も、チュートリアルから学べる。いい時代。
まとめ
AngularJSは学習コストが高いと言われる。その通りだと思う。でも、これだけ学ぶ環境が整っているのはすごいことだと思う。
普段はRuby on Railsを使っている。Railsも学習コストが高いと言われていて、その通りだと思う。でも広く使われている。
まだチュートリアルの途中だけど、学習コストを超えた先の景色を観たいな、と思う。けっこう楽しそうな気がする。そもそも最近のWeb開発は、なにやっても学習コストは高い。全体的に取っ付きやすくなっているけど、ある程度以上の壁を超えるのは大変。ゆっくりでもこのチュートリアルをやるのは、壁を超える一助になると思った。
ハッカソンでもチュートリアルを最後までやった人はあまり多くなかった。僕も終えてないので、ちゃんと最後までやらなくては。
