何もないところから AngularJS のひな形を作ってブラウザで表示するまで

最近の JavaScript 関連の技術にはほとんど触ったことがなかったので、今回ひととおりセットアップしたことでいろいろとカルチャーショックを受けた。記念にブログに書いておこうと思う。

ちなみに、JavaScript 関連の技術が進化していくスピードはすさまじいので、このブログの記事もそのうち無意味なものになると思いますが、その辺は念頭に置いて読んでください。

AngularJS という JavaScript の Web アプリケーションフレームワークのひな形を作って、それをローカルの Web サーバ上で動かしてブラウザで表示するまでをやります。

ごちゃごちゃとやるまえに、それぞれの用語を整理しておいた方がいいと思うので、簡単に書いておきます。

こういう手順で行きます。

ここにインストール方法が書いてあるので、どれかをやればいいと思うのですが、私は Manual install に書いてある方法をちょっと変えて実行しました。

$ ghq get git@github.com:creationix/nvm.git
$ ln -s `ghq list -p nvm` ~/.nvm
$ git checkout `git describe --abbrev=0 --tags`
$ source ~/.nvm/nvm.sh

その後 .zshrc で source ~/.nvm/nvm.sh が実行されるように設定した。

で、http://nodejs.org/ を見ると Current version: v0.10.33 になってたので以下を実行した（2014/11/05 現在）。

$ nvm install 0.10.33
$ node --version
$ v0.10.33

で、このままだと新しいシェルを立ち上げたときに node が見えなくなってしまうので、以下を実行した。

$ nvm alias default 0.10.33

npm というのは Node.js のためのパッケージ管理ツールです。 Node.js を入れたときに一緒に入っているはず。

$ npm install -g bower
$ npm install -g grunt-cli
$ npm install -g coffee-script
$ npm install -g yo
$ npm install -g generator-angular

私は1つずつインストールしたんですが、たぶんまとめて以下のように書いてもいけると思います。

$ npm install -g bower grunt-cli coffee-script yo generator-angular

$ yo angular myapp

JavaScript の代わりに CoffeeScript を使う場合は以下のようにする。

$ yo angular myapp —coffee

いくつか質問されるので適当に答えます。

$ cd myapp
$ grunt serve

これを実行すると、grunt でいろんなタスクが実行されたあとで、localhost の 9000 番ポートで Web サーバが立ち上がり、ブラウザでページが表示されます。

未経験の状態からここまでやってみて思ったこと。

JavaScript ってこんなに大がかりなものだっけ・・・
- 最終的にはサーバーから JavaScript を配信してブラウザで実行するだけなんだけど、そういったアプリを開発するためにこれだけいろいろなツールを使うというのが、驚きというか、へえ・・・というか、すごいなーと思うし、JavaScript の人気があるからこれだけいろいろなツールが開発されているのかなあ、と思ったりした。時代は変わった。
yo angular の出力結果がとにかく多すぎで意味不明
- 知らなすぎて圧倒される
- これは npm install したときも同じことを感じて、依存モジュールぽいのがたくさんインストールされてビックリした

この手順は単に自分がやったことを記録しただけなので、場合によっては同じ手順でうまくいかないこともあると思います。また、関連技術の進化によってやり方が変わっていくと思うので、詳しくは公式サイトをよく読んでください。

おわり。