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
この中で、開発する際に注目したいのがdependencies
とdevDependencies
かなぁと思います。
これは文字通り、外部依存のライブラリの一覧を定義するもので、例えば他の開発者がリポジトリを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
ower
はTwitterが作ってるパッケージマネージャです。yeoman
をインストールしたときについでにグローバルインストールされていました。bower.json
はその設定ファイルですね。
ファイルの書き方はpackage.json
によく似ています。ついでに使い方もnpm
によく似ています。なのでbower.json
も基本的には手で触ることはなさそうです。
$ bower install XXX --save
# 取得と同時にdependenciesに追記
$ bower install XXX --save-dev
# 取得と同時にdevDependenciesに追記
これで自動的にDLされます。その後は以下のコマンドを発行すると、アプリの読み込みの設定が行われます。
$ grunt bowerInstall
この辺の細かい動きは次回以降にさらに深堀したいと思います。
ちなみに、Bower
でインストールしたいモジュールは以下のサイトで探すことができます。
もしくは以下のコマンドです。
$ 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
って感じでしょうか・・・ってあれ?
npm
はどちらかというと開発環境を構築するためにツールをインストールするものであり、Grunt
は実際にそれらのツールを走らせる、という印象です。文字通りタスクランナーですね。(実際npm
を使ってGrunt
はインストールされているようです。正確にはプラグインですが・・・)
先ほどのBower
やKarma
といったツールもGrunt
から呼び出して使うみたいですね。
実際の中身はそれなりのボリュームなので、次回以降に詳しく見ていきたいと思います。
※実際にどんなプラグインが入っていて、それぞれがどんな動きをしているのか・・・ん~、大変そうです・・・
.gitignore
git
の設定ファイルですね。
テンポラリディレクトリなどがignoreされています。
.gitattributes
同じくgit
の設定ファイルですね。
ちなみに何故かファイルの終端に改行がありません・・・何故だ?
.editorconfig
おっさん初めてみたファイルです。どうやら以下の規格に準拠するためのものみたいですね。
プロジェクト内で標準化されたコードスタイルを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.js
にvar 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をゴリゴリしていた時以来かも・・・
今回はここまでです。
次回は実際のアプリケーションソース(index.html)を読みながら、もう少しGruntの仕事を深堀しようと思います。