もくもくろぐ

技術力

Webアプリの環境をYeomanで整えた話

これはなに

日記です。
そろそろWebアプリとか作って遊びたいなと思ったので、
YeomamAngularJS を使って環境を構築しました。

あとは Webサーバ をアレコレして、外部からアクセスできるようにしました。
というかWebサーバを建てる話って案外少なくて、みんな常識みたいにしてるけどそういうもんなのかな…それはまた次の話。

Yeoman

新規にWebアプリを作成するにあたって、MVCモデルを使いたかったけどどのようなディレクトリ構成にすればいいか分かりませんでした。
ググってもいい感じなのがでてこないし、JavaScriptじゃなくてCoffeeScript使いたいし…とか思っていたら Yeoman というものに出会いました。

Yeomanとは

AngularJSを使ったWebアプリケーションのひな形を作ってくれるやつらしいです。

AngularJS

JavaScriptフレームワークです。なんかいい感じにしてくれるらしい(適当)。
フレームワークどれにしようかと思ったけど最近アツいっぽいのでとりあえず導入してみました。

インストール

Node.jsを適当にbrewなりなんなりでインストールしたあと、

% node -v
% npm -v

で node と npm が入っていることを確認。

% npm install -g yo
% npm install -g generator-angular

で必要なものをインストールして完了です。
あとは作成したいディレクトリに % cd して

% yo angular

で終わり。いろいろ聞かれるので、とりあえず全部 No を選択していいと思います。
ちなみにぼくは CoffeeScript で生成したかったので、

% yo angular --coffee

としました。これでAngularJS, CoffeeScriptのYeomanプロジェクトができました。めでたし。

% grunt server

とすれば、デフォルトではlocalhostの9000番ポートにアプリが立ち上がります。めでたし。


チーム開発するとき

チーム開発のときは、予め作成されたプロジェクトをクローンして作業することになるわけです。
そのときはちょっと方法が違うのでメモ。

node, yo, grunt など上で整えた環境が入っているとします。

% git clone なんかリポジトリ.git

で対象のリポジトリをクローンしてきたら、

% cd リポジトリのディレクトリ

でディレクトリに入ります。それから、

% npm install
% bower install

で設定ファイルをインストールしてから

% grunt server

これでおわり。
外部に公開のものだったら、 Gruntfile.js の hostname が localhost になっていない可能性があるので、手元で実行したかったら変更を忘れずに。


まとめ

まだ環境を整えただけで開発してないのでなんとも言えない部分はありますが、
ひな形が欲しかったので手軽に構築できてとてもハッピーになりました。

参考サイト

今回紹介したものをもっとくわしく述べているサイトがいっぱいあるのでこっちをみるといいです。