JS開発環境を晒す。
- 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 } }