console.blog(self);

技術、読んだ本、いろいろ。

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

ブラウザ立ち上がって勝手にあれこれ動く。

f:id:sadah:20141210224958g:plain

コンソールにはこんな感じででてくる。

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開発は、なにやっても学習コストは高い。全体的に取っ付きやすくなっているけど、ある程度以上の壁を超えるのは大変。ゆっくりでもこのチュートリアルをやるのは、壁を超える一助になると思った。

ハッカソンでもチュートリアルを最後までやった人はあまり多くなかった。僕も終えてないので、ちゃんと最後までやらなくては。

広告を非表示にする