All Articles

最近の自分のJavaScriptの開発環境とかツールまとめた

最近の自分的なJavaScriptの開発環境とかツールまとめ

最近携わってるプロジェクトでは開発ツールとかの選定がある程度自由にやらせてもらっていて、ようやくテストとかその辺に手を出し始めたので、そのまとめです。

※自分が理解しやすい・使いやすいなーってものを選定しているので、人によっては別のものの方がいい可能性が高いかも。

ビルドとか自動化とか

タスク管理系はgruntgulpでもいいんだけど、もう慣れてしまってて特に不自由はないので、ラクな方で。最初makeでやろうとしてた プロジェクト固有なものを除いて凝った自作タスクはやめて、結合とかビルド用のタスクをちょろちょろと設定。 使ってるのは以下。最近の流行りから一歩遅れてる感が否めないけど、そんなに目新しいのってないよね?

  • grunt-sprockets: 自作のnpmタスク。RailsのAsset Pipelineみたいにコード中に別のクラス(ファイル)を埋め込んだり、環境別にパラメータを振ったりできるので結構重宝している。grunt-contrib-concatはもう使わない。
  • grunt-sass: libsass使うSassコンパイラ。Scssがあんまり上手に書けないので、これでコンパイルできる範囲のものしか書かない。
  • grunt-contrib-watch: grunt-este-watchの方が軽くていいって話を聞いてるけど、まぁこれでいっかみたいな感じで使ってる。
  • grunt-contrib-uglify: minifyするやつ。
  • grunt-contrib-cssmin: minifyするやつ。

今やってるのはそれほど複雑なCSSを書かないので、スタイルガイドは作ってない。作るとしたらKSS使う。 あと、Transistionのイージング(timing-function)を生成してくれるツールがあって、これにお世話になっている。

Ceaser CSS EASING ANIMATION TOOL

テストとか

mocha.js + chai.js + sinon.js。本当はbuster.jsが好きなんだけど、なんとなくmocha使ってたら慣れてきてしまった。あとsinon.jsが素敵。 最初はshould.jsだったんだけど、

should.jsが辛いのでやめたくなった

の通り辛くなったので、chai.jsでexpectするようにしている。あとは、

testem + mocha + istanbul で網羅性の高いテスト駆動開発

の通りにistanbulでカバレッジ確認しながら。testemも時々起動するけど、基本的にmochaをそのまま走らせている。

ただ、CLIのテスト(機能というか単体テスト)とブラウザテスト(DOM依存のテスト)がどうしても上手くマージできず、 結局別々にテストケース書いて相互に補完する感じになっているので、この辺り良い方法があったら教えて頂きたい所存です…。

あとはPhantomJSも使ってるんだけど、CLIからの起動だとUAの変更ができなかったりして色々面倒なのでPending。余裕があればCasperJSに変えるかも。

ドキュメント生成とか

色々試した結果、yuidocで落ち着いた。ただ、デフォルトでyuidocのロゴが出るのがちょっとなーって思ってたらいいテーマがあったので気に入っている。

royriojas/yuidoc-theme-blue

yuidocのアノテーションもわかりやすい(複雑なのは使ってない)ので、結構馴染んでる感じ。grunt-contrib-yuidocがあるので自動生成も簡単。

まとめ

今更感あるけど、ようやくこの辺りをちゃんとやりはじめたので、ここからブラッシュアップしていかなければ。 それにしても昔に比べて複雑になってきて、もうJavaScriptは「ブラウザとテキストエディタさえあれば使える」って言語の域を越え始めているんじゃないかなって思います最近。

エディタとか

Vim。