新しい Yeoman と、ついでに MEAN を試してみる


どうも、Yeoman 大好きおじさんです。先日 **Yeoman のバージョン 1.3.0** がリリースされたみたいなので、試してみます。

![スクリーンショット 2014-10-06 13.41.27.png](https://qiita-image-store.s3.amazonaws.com/0/35733/638ae19b-f640-c4cf-e444-d77b6b1e286a.png "スクリーンショット 2014-10-06 13.41.27.png")

前提となる環境は Mac です。
参考：[Mac で Yeoman の環境を構築する手順](http://qiita.com/hkusu/items/0d2ed38c47b73201f4c2)

ちなみに **npm コマンド（Node.js）** は、GUIインストーラではなくて、上記リンクでの手順のように **Homebrew** でインストールすることをオススメします。理由は、Homebrew だと root権限ではなくユーザ権限で npm および周辺ツールが動かせるので **ディレクトリ/ファイル権限系のエラーに悩まされなくてよい** からです。だって開発って、ユーザ権限でやりますよね。

あと、ついでに Yeoman で **MEAN** も試してみようと思います。

> [MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由](http://albatrosary.hateblo.jp/entry/2014/10/06/073638) にも書かれていますが、 **MongoDB** **Express** **AngularJS** **Node.js** を組み合わせた開発です。
> サーバサイドを含めて言語は **JavaScript** データは **JSON** に揃えられるというメリットがある、という理解でよいのかな？

MEAN については賛否あるかもしれませんが、プロダクション(本番)で使うかどうかは別として、ツール類やプロトタイプなどライトなもの用途という感じでしょうか。

## yo を最新へアップデート

- 下記コマンドを叩く。

	```shell:
	$ npm udate -g yo
	```

- バージョンを確認。

	```shell:
	$ yo -v
	
	1.3.0
	```

## 新しい yo を試してみる

- yo を起動。

	```shell:
	$ yo
	```

- インストール済みのジェネレータから選択して、ジェネレータ起動ができるようになったようです。

	![スクリーンショット 2014-10-06 14.27.13.png](https://qiita-image-store.s3.amazonaws.com/0/35733/5445dd96-89ed-f7da-57fe-9b17320c7c08.png "スクリーンショット 2014-10-06 14.27.13.png")

- ジェネレータのアップデートや、新しいジェネレータのインストールもここからできるみたい。

	![スクリーンショット 2014-10-06 14.28.19.png](https://qiita-image-store.s3.amazonaws.com/0/35733/4b839343-7da5-b8aa-90f0-8a61d2824734.png "スクリーンショット 2014-10-06 14.28.19.png")


## MEANを試す

新しい Yeoman で早速、MEAN を試してみます。このジェネレータが人気ぽいので、これを採用します。
⇒https://github.com/DaftMonk/generator-angular-fullstack

### ジェネレータのインストール

- yo を起動して、ジェネレータのインストールを選択。

	![スクリーンショット 2014-10-06 14.28.41.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c295996f-54aa-60a2-2f97-82371e87e5cf.png "スクリーンショット 2014-10-06 14.28.41.png")

- `angular-fullstack` で検索し、一番上のものを選択。

	![スクリーンショット 2014-10-06 14.30.14.png](https://qiita-image-store.s3.amazonaws.com/0/35733/d1bf0b32-36cf-b18b-ee10-810e99b1339f.png "スクリーンショット 2014-10-06 14.30.14.png")

- インストールが完了。

	![スクリーンショット 2014-10-06 14.31.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/8afcf879-2557-a06a-9900-a804aad62441.png "スクリーンショット 2014-10-06 14.31.24.png")

### ジェネレータの起動

- yo を起動して、先程インストールしたジェネレータを選択。

	![スクリーンショット 2014-10-06 14.31.41.png](https://qiita-image-store.s3.amazonaws.com/0/35733/29ad045e-e972-98fa-a7c1-19917099dfa0.png "スクリーンショット 2014-10-06 14.31.41.png")

- おじさんからの質問に答えます。ここは好みで選択。

	![スクリーンショット 2014-10-06 14.33.56.png](https://qiita-image-store.s3.amazonaws.com/0/35733/aa054e96-e3f9-c837-03bf-8652adefebe6.png "スクリーンショット 2014-10-06 14.33.56.png")

	> 選択できるオプションは [ジェネレータのGitHubページ](https://github.com/DaftMonk/generator-angular-fullstack) で確認できまます。
	> mongoDB は別途インストールが面倒なので外しました。

- フロントエンドとサーバサイドの雛型ソースコードが展開されます。
	- ソースコードを見るだけでも、参考になるのではないでしょうか。

		![スクリーンショット 2014-10-06 15.27.23.png](https://qiita-image-store.s3.amazonaws.com/0/35733/4918e33b-b461-95e8-d4b9-f1eeefab8907.png "スクリーンショット 2014-10-06 15.27.23.png")

- 雛型そのままで、動作確認してみます。

	```shell:
	$ grunt serve
	```

	自動的にでデフォルトブラウザが起動します。

	![スクリーンショット 2014-10-06 15.31.02.png](https://qiita-image-store.s3.amazonaws.com/0/35733/4cb82c57-d6dd-be1e-fb15-7a9d8bb83a37.png "スクリーンショット 2014-10-06 15.31.02.png")

## おわりに

試していませんが、上記 MEAN のジェネレータは **Heroku** へのデプロイもサポートしているようです。
MEAN については、Heroku へデプロイ前提であれば、ちょっとしたサーバサイドを用意しないといけない場合に検討してもいいのではないでしょうか。
（業務でやるなら、Node.js は Heroku がスケールしてくれる？として、DB はやはり RDB が必要になってくるケースが多いとは思う。具体的には RDB + キャッシュ目的の MongoDB かな。）

![スクリーンショット 2014-10-06 15.40.46.png](https://qiita-image-store.s3.amazonaws.com/0/35733/fac61f34-103e-0342-ddf0-3e7394a08860.png "スクリーンショット 2014-10-06 15.40.46.png")