2016 Oct JSの開発環境を晒してみます。

1. JS開発環境を晒す。
@ETROJAN
20 OCT 2016

2. 背景
クライアントJSをnpmで管理し始めた。
▸ Framework, etc.
▸ npm => package manager
▸ webpack => module bundler
▸ babel => ES6 compiler
▸ jsdoc => documentation
▸ webpack-dev-server => httpd
▸ mocha => unit test
▸ Editor, etc.
▸ atom => editor
▸ ternjs => suggest
▸ linter-eslint => linter

3. FRAMEWORK, ETC.
https://www.npmjs.com/
▸ 言わずと知れた JS用 package manager。
▸ クライアントJS用にも利用可能。
▸ webpack+babelを利用すれば、ES6でクライアントJSを書ける。
▸ 独自 package も簡単に作れる。
▸ facebookの yarn を使ってみたら速い。npm install の代替としては使える。
▸ ちなみに、自作パッケージ達。
▸ https://www.npmjs.com/package/adhesion-element
▸ https://www.npmjs.com/package/interstitial
▸ https://www.npmjs.com/package/scroll-y-stop

4. FRAMEWORK, ETC.
https://webpack.github.io/
▸ module bundler。
▸ 主な目的は、require してるモジュールを pack して1つのJSにする事。
▸ 他にも plugin 次第で色んな事ができる。
▸ uglify（難読化）したり。
▸ ローカルの画像もbase64化してJS内に内包したり。
▸ production / development を分けたり。
▸ 最初は設定で苦戦するかも。

5. FRAMEWORK, ETC.
https://www.npmjs.com/package/jsdoc
▸ documentation
▸ JSDoc3対応。
▸ npm install jsdoc
npm install ink-docstrap

6. FRAMEWORK, ETC.
https://www.npmjs.com/package/webpack-dev-server
▸ httpd Server
▸ webpackアプリ向け。
▸ npm install webpack-dev-server

7. FRAMEWORK, ETC.
https://babeljs.io/
▸ javascript compiler。
▸ ES6をES5にしたり、JSXをES5にしたり。
▸ ブラウザがES6に対応してくれれば要らないん
だけど、今は微妙に要るやつ。
▸ でも改めて調べてみると意外と動く。
▸ http://caniuse.com/#search=Es6

8. FRAMEWORK, ETC.
https://mochajs.org/
▸ BDD/TDDが書ける。chaiも使ってる。
▸ BDD（Behavior Driven Development)だと、
should/expect になって、
▸ TDD（Test Driven Development）だと、assert
になる。
▸ 詳しくは@ITの記事で。
▸ ちなみに、個人的な好みは BDD です。

9. FRAMEWORK, ETC.
フォルダ構成
▸ package.json
▸ webpack.config.js
▸ src/ - ソースフォルダ
▸ .eslint.config.js
▸ htdoc/ - 実行環境
▸ doc/ - ドキュメント

10. FRAMEWORK, ETC.
package.json の scripts はこんな感じ。
▸ "lint": "./node_modules/.bin/eslint src"
▸ "doc": "./node_modules/.bin/jsdoc -r -d doc -t ./node_modules/ink-
docstrap/template -R README.md src"
▸ "start": "./node_modules/.bin/webpack-dev-server --port 3000 --hot --
inlne --content-base htdoc/"
▸ "compile:dev":“NODE_ENV=develop ./node_modules/.bin/webpack --watch"

11. EDITOR, ETC.
https://atom.io/
▸ エディタ。
▸ code もいいけど plugin の充実度で今は atom 使ってる。
▸ 気に入った plugin に ★ を付けとけば、他の環境で一括インストール。
apm stars --install
▸ テーマは Atom Dark Slim。
▸ シンタックスは Solarized Dark。

12. EDITOR, ETC.
https://atom.io/packages/atom-ternjs
▸ 独自クラスのメソッドとかも suggest してく
れる plugin。
▸ jsdoc も考慮してくれる。
▸ 完璧では無いが、無いよりは圧倒的に良い。

13. EDITOR, ETC.
https://atom.io/packages/linter-eslint
▸ 構文チェック。
▸ 今は airbnb の設定を使ってる。
▸ apm install linter
apm install linter-eslint
▸ .eslintrc.json
{ “env" : {
"node": true, "es6": true,
"browser": true, "mocha": true },
"extends": “airbnb",
"rules": { "valid-jsdoc": 2 } }

14. 来年は TypeScript
でライブラリ書こうかな。
@etrojan
来年は