Node.js で開発するにあたってのぼくなりの環境を紹介します。

こんな感じ

環境構成

使っているツールは次のとおりです。

Mac OS X
Terminal.app
tmux
- https://tmux.github.io/
MacVim Kaoriya
- https://github.com/splhack/macvim-kaoriya
n
- https://github.com/tj/n
avn-n
- https://github.com/wbyoung/avn-n

各設定はここに放り込んであります。

tmux

terminal multiplexer というもので ( 略 ) とても便利です。
ローカルで作業するのでセッションとかあんまり恩恵ありません。あ、まちがって Cmd+q 押してターミナルを終了しまったときはとても便利です。

左上

git 操作や各コマンドの実行をするところです。主にプロジェクト開始時にここで作業することが多いですね。次のような npm scripts を定義して適宜叩いたりしています。

package.json

{
    "scripts": {
        "build": "webpack",
        "build:watch": "webpack --watch",
    }
}

左下

ESLint による静的解析や flow による型チェック、テストを常に流しておく場所です。次のような npm scripts を定義して、大雑把に npm run test --silent しながら開発します。

package.json

{
    "scripts": {
        "coverage": "nyc --reporter=lcov npm test",
        "lint": "eslint src test",
        "lint:fix": "eslint src test --fix",
        "test": "npm run lint && npm run type-check && npm run test:spec",
        "test:spec": "mocha test/specs/**/*.js",
        "test:watch": "nodemon --watch src --watch test --exec npm test",
        "type-check": "flow"
    }
}

test:watch のところに定義してあるように、常にテストを流すために nodemon が大活躍です。シンプルで使い勝手よい。何か変えたらその結果がみえる。それで十分です。

あ、 ESLint はルールのメンテナンスコストが高いので、プロジェクト初期は standard でざっとはじめて、いざルール変更が必要になったときに ESLint に切り替える、といったことをしています。

右側

主にエディターを立ち上げて作業するペインとしています。

エディターに関しては現在は WebStorm 、 Atom 、 VSCode など様々な選択肢がありますが「思考のスピードで編集」するため Vim を好んで使っています。あと軽い。

ハイライトは次を使っています。

jsx にも地味に対応しててステキ。インデントがたまにおかしくなることがありますが、 ESLint の --fix オプションがこれまたステキなのでざくっと書いてフォーマッティングしています。細かいこと気にすんなガハハ。 ESLint の --fix オプションは gofmt くらいに canonical になればいいなあと思っています。

まとめ

たまに左側もしくは右側の最下段にもう一段もうけてログを流したりしますが、基本は上に書いたとおりです。 UI まわりなどブラウザー・シミュレーター・エミュレーターでの確認が必要なときは別モニターにプレビューをうつしたり、それができないときは雑に gVim で編集しながら微調整します。

各ツールの最新バージョンを使おうと思っていたら自然とこうなっていました。 "Do one thing and one thing well" なものを組み合わせていこう。