おっさんエンジニアの備忘録

ここは主におっさんエンジニアが技術的な事を調べたり、試してみたりしたことを備忘録的に書いていくものです。忘れっぽいからね。誰かの参考になったら嬉しい。

AngularJSでの開発環境を作る(yeomanで自動生成されたファイルたちを調べる)

前回作成したAngularJSのアプリのひな形でどんなファイルができているかをいろいろ調べてみようと思います。


app/

それぞれアプリーケーションソースとテストケースが格納されています。
詳しくは次回以降に見ていきたいと思いますので、今回はスキップ。

test/

同じくテストケースが格納されているディレクトリです。
ちなみにgenerator-angularでcontrollerやdirectiveを追加すると、こちらのディレクトリにテストケースのひな形が自動的に追加されます。

$ yo angular:controller piyo
   create app/scripts/controllers/piyo.js
   create test/spec/controllers/piyo.js
$ yo angular:directive fuga
   create app/scripts/directives/fuga.js
   create test/spec/directives/fuga.js

便利ですね。

package.json

npmが読み込み設定ファイルですね。まぁMavenでいうところのpom.xmlって感じでしょうか。
ホームページとか、ライセンスとか、バグトラッキングシステムのURLまで記述することが可能みたいですね。
ですが、yeomanで作られたファイルはスカスカでした、ライブラリとして公開したりする場合はいろいろと追記してあげる必要がありそうですが、今回はとりあえず無視しておきましょう。

ドキュメント:https://www.npmjs.org/doc/json.html
日本語:http://liberty-technology.biz/PublicItems/npm/package.json.html

この中で、開発する際に注目したいのがdependenciesdevDependenciesかなぁと思います。
これは文字通り、外部依存のライブラリの一覧を定義するもので、例えば他の開発者がリポジトリをcloneしたときにnpm installとか叩いてネットから拾ってくるモジュールの一覧になるみたいです。
dependenciesはプロダクト用、devDependenciesは開発とテストのためだけに必要なものを記述するようです。
今回はAngularのアプリなので、実際dependenciesは必要ないかなぁと思います。(だってnode.js使わないし・・・)
※ちなみにJavascriptのライブラリについては後述のBowerを使います。
あと、この辺は手修正しなくても大丈夫みたいです。以下のコマンドで、実際にモジュールを取得しつつ、package.jsonにも追記を行ってくれるみたいです。

$ npm install XXX --save
# 取得と同時にdependenciesに追記
$ npm install XXX --save-dev
# 取得と同時にdevDependenciesに追記

あと、個人的に気になったのが、バージョン指定のところに^だの~だのが書いてあったことです。こちらの意味については下記サイトに詳細がありました。

英語:https://www.npmjs.org/doc/misc/semver.html#ranges
日本語:http://liberty-technology.biz/PublicItems/npm/misc/semver.html
※日本語版がもしかしたら古い気がする・・・

grunt^0.4.5って書いてあるってことは0.5.0とか1.0.0とか出たら自動的にUPDATEされちゃうってことなんじゃ・・・大丈夫なんだろうか・・・いきなり動かなくなったりしないかなぁ・・・こっそり書き換えてきたい気分・・・
※0.xをプロダクトに取り込むとか、おっさんからすると目がチカチカするくらい眩しいです・・・今の時代こんなものなのかなぁ・・・まぁサービス影響あるものじゃないから良いのかな・・・

node_modules

npmが先ほどのpackage.jsonを使ってDLしてきたモジュールを格納するディレクトリです。 特に手で触ることはないかと思います。

bower.json

B owerTwitterが作ってるパッケージマネージャです。yeomanをインストールしたときについでにグローバルインストールされていました。bower.jsonはその設定ファイルですね。

http://bower.io/

ファイルの書き方はpackage.jsonによく似ています。ついでに使い方もnpmによく似ています。なのでbower.jsonも基本的には手で触ることはなさそうです。

$ bower install XXX --save
# 取得と同時にdependenciesに追記
$ bower install XXX --save-dev
# 取得と同時にdevDependenciesに追記

これで自動的にDLされます。その後は以下のコマンドを発行すると、アプリの読み込みの設定が行われます。

$ grunt bowerInstall

この辺の細かい動きは次回以降にさらに深堀したいと思います。
ちなみに、Bowerでインストールしたいモジュールは以下のサイトで探すことができます。

http://bower.io/search/

もしくは以下のコマンドです。

$ bower search XXX

※引数なしでも動きますが、尋常じゃない量が帰ってくるのでオススメできません・・・

.bowerrc

同じくBowerの設定ファイルです。
ここではインストール先を設定しているみたいですね。デフォルトだと直下のbower_componentsというディレクトリになってしまいますが、それだと都合が悪いので設定し直していますね。

karma.conf.js

Karmaというテストツールの設定ファイルです。AngularJSの公式チュートリアルでも使われていますね。(公式の推奨ツールです)
既に基本的な設定がされていますので、直ぐに動かすことができます。
※ただし前回あったように、generator-karmaが少しバグってるようですので、必要なモジュールを追加してから実行してください。

$ grunt test

具体的なテストケースの書き方は次回以降に調べていきたいと思います。

karma-e2e.conf.js

こちらはe2eテストのための設定ファイルです。
しかし、読み込み対象となるtest/e2eディレクトリがなかったり、Gruntのタスクが存在してなかったりと何故か動かない状態っぽいです・・・何でだろ・・・
また、内容についてもKarma+ng-scenarioで記述しようとしておりますが、「新しく始めるならProtractor使いなよ!」と言われております。※参考

この辺はインストールや動かし方から調べなきゃいけなそうですね。次回以降にやりたいと思います。

Gruntfile.js

いよいよ本丸です。
こちらはGruntというタスクランナーの設定ファイルです。まぁMavenでいうところのpom.xmlって感じでしょうか・・・ってあれ?

http://gruntjs.com/

npmはどちらかというと開発環境を構築するためにツールをインストールするものであり、Gruntは実際にそれらのツールを走らせる、という印象です。文字通りタスクランナーですね。(実際npmを使ってGruntはインストールされているようです。正確にはプラグインですが・・・)
先ほどのBowerKarmaといったツールもGruntから呼び出して使うみたいですね。

実際の中身はそれなりのボリュームなので、次回以降に詳しく見ていきたいと思います。
※実際にどんなプラグインが入っていて、それぞれがどんな動きをしているのか・・・ん~、大変そうです・・・

.gitignore

gitの設定ファイルですね。 テンポラリディレクトリなどがignoreされています。

.gitattributes

同じくgitの設定ファイルですね。
ちなみに何故かファイルの終端に改行がありません・・・何故だ?

.editorconfig

おっさん初めてみたファイルです。どうやら以下の規格に準拠するためのものみたいですね。

http://editorconfig.org/

プロジェクト内で標準化されたコードスタイルをIDEなどに伝えるための規格のようですね、とGoogle先生がおっしゃっているような気がします・・・ちなみにEclipseが対応していないという・・・

dist

プロダクト用ソースを作成するため、grunt buildしたときに出力されるファイルを格納するディレクトリです。
こちらの設定はGruntfile.jsに記述されています。

yeoman: {
  // configurable paths
  app: require('./bower.json').appPath || 'app',
  dist: 'dist'
}

ちなみにこちらのディレクトリは.gitignoreされているので、名前を変えたりしたときは注意が必要ですね。

.tmp

文字通りテンポラリディレクトリです。Gruntで実行される様々なタスクで使われる、途中状態のファイルを格納するディレクトリのようです。例えば、CSSを連結した結果のファイルを置いておくとか。
尚、こちらのディレクトリはGruntfile.jsの各所にベタ書きされていますので、もはや変更しようとか思えなくなりました・・・なんでdistみたいに変数で受けなかったんだろう・・・
あと、やはりこちらも.gitignoreされています。

.jshintrc

JSHintの設定ファイルです。これはJavascriptの構文チェックを行ってくれるライブラリらしいですね。package.jsonにもインストールするよう書かれていますし、Gruntfile.jsにもタスクとして登録されていますね。
試しにapp/scripts/app.jsvar hoge = 1;なんてコードを追記して実行してみます。

$ grunt jshint:all

app/scripts/app.js
  line 2  col 9  'hoge' is defined but never used.

✖ 1 problem

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

なんと、変数を読み込んでないだけで怒られてしまいました・・・恐るべし・・・

ちなみに細かい設定については下記サイトを参考にするとよさそうです。

JSHint:http://jshint.com/
オプションの一覧:http://jshint.com/docs/options/

オプション多い・・・まぁいったんはデフォルトで問題ないかなぁ・・・

.travis.yml

Travis CIというCI(継続的インテグレーション)をしてくれるホスティングサービスで使う設定ファイルみたいです。
例えばGitHubとかの連携を設定しておくと、PUSHされたタイミングでTravisが変更を受け取って、このファイルに書かれた情報をもとにテストをして、結果をメールとかで返してくれるものみたいです。
なるほど、世の中便利になったものですね。オープンソースならいいけど、プロダクトコードには不向きかなぁ・・・
まぁあっても影響があるものではないけど、気になるなら消してしまってよさそうですね。
YAMLファイルは昔Symfonyをゴリゴリしていた時以来かも・・・

https://travis-ci.org/


今回はここまでです。
次回は実際のアプリケーションソース(index.html)を読みながら、もう少しGruntの仕事を深堀しようと思います。