ゼロから始める！AngularJSの環境構築 [Mac編]


## はじめに

AngularJS の学習を始める場合、書籍やネットを読むだけだとなかなか頭に入りません。なので、手元で動かしてみるのが良いかと思いますが、その際は AngularJS を動作させる環境を構築する必要があります。

> 単純にJavaScirptライブラリをダウンロードして利用したり、CDNから読み込んでもいいのですが、それだとパッケージ管理やコンパイル、ビルド、テストなど、昨今のフロントエンド周辺環境は別に用意する必要が出てきます。

ですので、最初は [Yeoman](http://yeoman.io) という、フロントエンドの環境一式を構築してくれるツールを利用するのがお手軽かと思います。Yeoman の公式ジェネレータとして AngularJS プロジェクトの雛型も用意されているので、その雛型のソースコードを見てみるのも、イメージを掴む良い教材となるかと思います。

今回は、Macが前提ですが、最低限の環境を構築する手順を紹介します。

## 前提

- OS： `Mac OS X (Mavericks)`
- Yeoman と、Yeoman の [AngularJS雛型ジェネレータ](https://github.com/yeoman/generator-angular) を使います。
	- もし Yeoman が Mac に入っていなければ、こちらを参考にインストールしてください。
		- [Mac で Yeoman の環境を構築する手順](http://qiita.com/hkusu/items/0d2ed38c47b73201f4c2)
	- もし雛型ジェネレータが Mac に入っていなければ、次のようにインストールしてください。

		```shell:
		$ npm install -g generator-angular
		```

## 環境の構築手順

### ① プロジェクト用の適当なディレクトリを作りジェネレータを起動

```shell:
$ mkdir hoge
$ cd hoge
$ yo angular
```

※ もし CoffeeScript で書きたい場合は `--coffee` オプションを指定してください。

> ちなみに昔は `--minsafe` オプション(ファイルを縮小しても動かすようにするオプション)があったのですが、最近のジェネレータでは無くなったようです。

### ② 対話インタフェースが起動⇒最初の質問(SASS)だけ `No` を選択

![スクリーンショット 2014-10-01 19.20.47 のコピー 2.png](https://qiita-image-store.s3.amazonaws.com/0/35733/31d6593a-fcd0-9b35-010d-0812e2992b78.png "スクリーンショット 2014-10-01 19.20.47 のコピー 2.png")

> [SASS](http://sass-lang.com/) は CSS の代替言語です(実際にはCSSへコンパイルされる)。ややこしいので今回は外しておきます。
> Twitter Bootstrap は最低限の見栄えを実現するために選択しておきます。

### ③ ジェネレータによる生成が終わると、ファイルが展開される

![スクリーンショット 2014-10-01 19.30.13 のコピー 2.png](https://qiita-image-store.s3.amazonaws.com/0/35733/634a3700-cb4c-84ff-9b74-097cd81d0fd4.png "スクリーンショット 2014-10-01 19.30.13 のコピー 2.png")

主要なファイルをピックアップすると、

- `app/scripts/controllers/main.js`
	- メインページのコントローラです。手元でコードを書いて動作確認するなら、このファイルを利用するのが良いかと思います。
- `app/scripts/app.js`
	- ここで全体に関わる設定を行います。初期は利用するモジュールの定義と、URLのルーティングが記載されています。
- `app/views/main.html`
	- メインページのビューです。手元でいろいろ試すなら、このファイルを利用。
- `app/index.html`
	- シングルページアプリケーションの基準となるHTMLです。新しくJavaScriptファイルやCSSファイルを読み込みたい場合は、このファイルを修正します。
- `bower_components フォルダ`
	- 利用する JavaSciptライブラリが格納されています。パッケージ管理は Bower の担当です。
- `node_modules フォルダ`
	- Grunt(タスクランナー)が利用するモジュールが格納されています。
- `test フォルダ`
	- テストコードはここに書きます。
- `bower.json`
	- Bower の設定ファイルです。利用するJavaScriptライブラリが定義されています。
- `Grunt.js`
	- Gruntのタスク定義ファイルです。タスクを追加/修正する場合は、このファイルを。
- `package.json`
	- Grunt の設定ファイルです。利用するGruntのモジュールが定義されています。

コマンドラインで `$grunt serve` と入力すると、Macのデフォルトに設定したブラウザが起動し動作確認することができます。

![スクリーンショット 2014-10-01 19.25.51 のコピー 2.png](https://qiita-image-store.s3.amazonaws.com/0/35733/16de0344-66be-04fc-b30c-318dc7a4bbfd.png "スクリーンショット 2014-10-01 19.25.51 のコピー 2.png")

あとは、ソースを読むなり、書いて動かしてみるなりすると良いかと思います。

もしフィルターやサービス等の雛型を追加したい場合は、ジェネレータのコマンドをご覧ください。
⇒ https://github.com/yeoman/generator-angular

## そのほか参考情報

- AngularJSの書籍
	- [AngularJSアプリケーション開発ガイド](http://www.amazon.co.jp/dp/4873116678)
	- [AngularJSリファレンス](http://www.amazon.co.jp/dp/4844336681)
- AngularJSの本体ソースと公式リファレンス
	- https://github.com/angular/angular.js
	- http://docs.angularjs.org/api
- Qiitaの投稿
	- http://qiita.com/tags/angularjs
- (知らなければ)まずJavaScriptについて知る
	- [JavaScript 第6版](http://www.amazon.co.jp/dp/4873115736/)

## おわりに

もしモバイルで使う場合ではどうか、という観点で、こちらにも投稿しました。
⇒ [『AngularJSでのモバイルフロントエンド開発』というタイトルで発表してきた](http://qiita.com/hkusu/items/dbcdc011d2be11fc9f20)
モバイルで AngularJS を利用することを検討されている方は、よろしければご覧ください。