どうも、社内アドベント10日目になりました。
カレンダーもどんどん埋まってきていて、とてもいい感じですね
今回から3週連続でWebアプリ作成過程の成果を共有したいと思います
(かんせいするとはかぎらない(´・ω・｀)）
これまで断片的に勉強していたAngularJSでなにか作りたいとおもっていた矢先に、こんな記事を見つけました。
というわけで、今回はWeb界隈で話題となりつつあるMEANスタックについて、勉強がてらプライベートPCに環境構築した手順をまとめてみました。
次回のADVENTがMEAN Stack関連になるかは土日の暇っぷり次第ですね。
- M…MongoDB(NoSQL)
- E…Express(Node.js Webアプリケーションフレームワーク)
- A…AngularJS(クライアントMVC系フレームワーク)(AngularJSではModel-View-Whatever)
- N…Node.js(サーバーサイドJavascript)
一貫してJavascript(所謂フルスタック)!!! Web関連の方はLANPのJavascriptバージョンといえばわかりやすいでしょうか
mean.io公式には、以下の説明が書いてあります。
MEAN is an opinionated fullstack javascript framework - which simplifies and accelerates web application development.
…そういうことなのです
自宅のプライベート用PCへセッティングしてみます
環境はこんな感じです
- OS:Mac OSX 10.10(Yosemite)
- Homebrewは入ってましたがNodeは入っていなかった模様
- 余談出すが、YosemiteにしてからRubyのバージョン関連で問題があるそうなので、Yosemiteに上げる前に適宜updateしたほうが良さそうです
- Homebrewのupdate問題を1日掛けて解決するという問題発生
- http://chroma.hatenablog.com/entry/2014/10/29/191638
- 余談出すが、YosemiteにしてからRubyのバージョン関連で問題があるそうなので、Yosemiteに上げる前に適宜updateしたほうが良さそうです
以下は事前にインストールしておいてください
Windows環境だったりUNIX環境の場合は、適宜読みなおしてください
(環境によってうまくいかないとはおもいますが…)
- Node.js
- npm
- MongoDB
mean brew install mongo
* インストール後はMongoDBを立ち上げておかないと、gruntできないようです
- Bower
npm install -g bower
- Grunt(ビルドツール)
- sudoしないとはいらなかった
sudo npm install -g grunt-cli
macじゃない人は、上のインストールができるように各自調べてください
ここは公式通りにMEANを入手してみましょう
sudo npm install -g mean-cli
mean init myApp
なんか出た！
アプリケーションは作成できたみたいです
次に install dependencies と run the app しろとのことなので、ターミナルに書いてあるように以下のコマンドを打ってみましょう
cd myApp && npm install
grunt
ここまできたら、ブラウザで localhost:3000 にアクセスしてみましょう
** 爆速 **
4行打っただけで、myAppへMEAN環境を構築できました
myAppの中はこんなかんじです
あとはmyAppの中をゴニョゴニョするだけで、Webアプリケーション開発に専念できるわけですね
- たった4行でWeb開発に必要な環境が整ってしまうとは…
- しかもすべてクライアントもサーバーもすべてjsなので、個人的にはとっつきやすい
- ただし、Angularの学習コストの高さと、MongoDBの知らなさ加減が半端ではないので、引き続きのお勉強は必要ですね
- まずはREDME.mdの読み込み
- 「データを見せるだけなら外部API叩いて、Angularでゴニョゴニョで済んでしまうのでは？」という期待のもと、来週以降はそこらへんの記事あげられるようにがんばります
- 要するにMongoDBゴリゴリなWebアプリ以外も作れそう