読者です 読者をやめる 読者になる 読者になる

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

はじめに

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

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

今回やること

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

用語の整理

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

手順

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

  1. nvm で Node.js をインストール
  2. Bower, Grunt, CoffeeScript, Yeoman, yeoman/generator-angular をインストール
  3. Yeoman でひな形を作る
  4. grunt serve

nvm で Node.js をインストール

https://github.com/creationix/nvm

ここにインストール方法が書いてあるので、どれかをやればいいと思うのですが、私は 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

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

https://github.com/takatoshiono/dotfiles/commit/e9065189df29fa29735c0bd850d371bd7e9c9c4d

で、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

Bower, Grunt, CoffeeScript, Yeoman, yeoman/generator-angular をインストール

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

Yeoman でひな形を作る

$ yo angular myapp

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

$ yo angular myapp —coffee

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

grunt serve

$ cd myapp
$ grunt serve

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

おわりに

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

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

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

おわり。

AngularJSアプリケーション開発ガイド

AngularJSアプリケーション開発ガイド