ぼく（たち）のかんがえた最新のJS開発環境 #scripty04

1. 写真:アフロぼくのかんがえた  さいしんのJS開発環境> たちヤフー株式会社 MSC 開発本部光野達朗(@kotatsu360) SCRIPTY#4 2015/12/15

2. 光野達朗所属：ヤフー株式会社 / リッチラボ株式会社担当：ヤフオク! => 広告&子会社   領域： • Webフロントエンド • バックエンド • インフラ（AWS） • DevOpsとか良い開発環境とか  DX向上  （Developer/Designer Experience） @kotatsu360 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icon made by YOSHI https://ja-jp.facebook.com/yoshi.yone.7

3. こんな開発環境を作った話をします Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し 3. 広告JS CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0

7. ある日の機能追加 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0 「このグローバルな変数は一体・・・読みにくい(ヽ́ω`)」同じようなJSに  同じような修正部署の先輩「リリースの仕方教えて下さい」  「ツールAとBとCでそれぞれ・・・・」「（多い・・・）」 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止自分

13. Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0 できたもの 3. 商品（広告）

14. 3. Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し商品（広告） CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止本日の紹介範囲 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0 できたもの

15. 3. Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し商品（広告） CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0 できたもの

19. 【robj（仮称）】広告開発にあると便利な機能をライブラリ化したもの広告JS 広告個別処理＋広告用lib 【webpack】 CommonJS/AMDの規格に準拠して依存関係を解決する【BABEL】 EC6をEC5に変換するコンパイラ。ブロックスコープなど、整理された記法での開発を可能に Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20. // [FILE] between.js // [NOTE] numを丸める関数 // numがmin以下ならmin, max以上ならmax, それ以外ならnumを返す export default function (min, num, max) { return Math.min(Math.max(min, num), max); } ————————————————————————————————————————————————— // [FILE] sample.js import between from ‘between’ // [NOTE] varではなくES6で定義されたletを使う let num = 50; let res = between(10, num, 20); Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔機能の重複を廃し、堅牢な寿命の長い記述をする。 webpack + babel

21. // [FILE] between.js // [NOTE] numを丸める関数 // numがmin以下ならmin, max以上ならmax, それ以外ならnumを返す export default function (min, num, max) { return Math.min(Math.max(min, num), max); } ————————————————————————————————————————————————— // [FILE] sample.js import between from ‘between’ // [NOTE] varではなくES6で定義されたletを使う let num = 50; let res = between(10, num, 20); Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔機能の重複を廃し、堅牢な寿命の長い記述をする。 webpack + babel /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) { 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); exports['default'] = function (min, num, max) { return Math.min(Math.max(min, num), max); }; module.exports = exports['default']; /***/ } /******/ ]); sample.js:webpack+babelの結果 60行

22. 【ad lib（仮称）】広告開発にあると便利な機能をライブラリ化したもの広告JS 【webpack】 CommonJS/AMDの規格に準拠して依存関係を解決する【BABEL】 EC6をEC5に変換するコンパイラ。ブロックスコープなど、整理された記法での開発を可能に個別処理＋ライブラリ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

23. 広告JS【JSDoc3】コメントから生成【ESLint】全ルールがプラガブルでES6にも対応。 NGな記法も設定可。【power-assert.js】シンプルで可読性の  高いアサーションライブラリテストドキュメンテーションコード規約 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止【mocha】シンプルな BDDフレームワーク

24. // [FILE] test/between.js import between from '../module/between'; describe('between', function () { // mocha:describe it('のnumが範囲内だったらnumが返る', function () { // mocha:it assert(between(0, 50, 100) === 50); // power-assert:assert }); ————————————————————————————————————————————————— // [NOTE] 実行結果、意図的にメソッドを破壊 Safari 9.0.1 between のnumが範囲内だったらnumが返る FAILED # between.js:11 assert((0, _moduleBetween2['default'])(0, 50, 100) === 50) | | 52 false [number] 50 => 50 [number] (0, _moduleBetween2['default'])(0, 50, 100) => 52 /path/to/code/robj/test/between.js:63:16 <- webpack:///test/between.js:11:11 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔シンプルなアサーションと可読性の高い結果表示 mocha + power-assert.js

25. // [FILE] between.js export default function (min, num, max) { var var_variable = 0; // [!!!] ES6で統一したい！命名規則違う！使ってない！ return Math.min(Math.max(min, num), max); } ————————————————————————————————————————————————— ERROR in ./module/between.js /path/to/code/robj/module/between.js error Unexpected var, use let or const instead no-var warning Identifier 'var_variable' is not in camel case camelcase warning "var_variable" is defined but never used no-unused-vars ✖ 3 problems (1 error, 2 warnings) Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔機械で「良い書き方」を指摘 (人間で頑張らない) ESLint

26. /** @module */ /** * 対象が閾値(min, max)に収まるようにクリップする。 * @param {Number} min 範囲の最小値 * @param {Number} num 調べる対象値 * @param {Number} max 範囲の最大値 * @return {Number} min以上max以下の値 * @example * let num = 50; * let res = between(10, num, 20); * // res === 20 */ export default function (min, num, max) { … Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔ドキュメンテーション(元データはソースの横に) 　一手間加えて、開発者ツールからmoduleの実行可能 JSDoc3

27. 広告JS【JSDoc3】コメントから生成【ESLint】全ルールがプラガブルでES6にも対応。 NGな記法も設定可。【power-assert.js】シンプルで可読性の  高いアサーションライブラリテストドキュメンテーションコード規約 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止【mocha】シンプルなテストフレームワーク

28. 広告JS Istanbul 【Gulp】おなじみのタスクランナー。ファイルの更新毎に各種タスクを実行カバレッジ計測  stmt, branch, func, lines 【Karma】  任意のブラウザにテストを流し込む。また結合等の前処理も担当テスト関連の  タスクを移譲ドキュメンテーションや  サンプルページ生成手元とCIサービスで  テストブラウザを変更カバレッジが低いとテスト落とす Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29. // テストがちゃんとある時 ---------------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | ---------------|----------|----------|----------|----------|----------------| module/ | 100 | 100 | 100 | 100 | | between.js | 100 | 100 | 100 | 100 | | // 無い時 ERROR [coverage]: Safari 9.0.1: Coverage for statements (75%) does not meet per-file (/path/to/code/robj/module/between.js) threshold (90%) ERROR [coverage]: Safari 9.0.1: Coverage for lines (50%) does not meet per- file (/path/to/code/robj/module/between.js) threshold (90%) ERROR [coverage]: Safari 9.0.1: Coverage for functions (0%) does not meet per- file (/path/to/code/robj/module/between.js) threshold (90%) ---------------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | ---------------|----------|----------|----------|----------|----------------| module/ | 99.64 | 100 | 98.55 | 99.49 | | between.js | 75 | 100 | 0 | 50 | 15 | Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔テストの維持は機械に任せる(※人はテストの質をみる) Istanbul

30. // [FILE] karma.conf.jsの一部, テスト+結合の設定 module.exports = function(config) { config.set({ frameworks: ['mocha', ‘sinon'], // [NOTE] テストフレームワークの指定 preprocessors: { 'test/**/*.js' : ['webpack', ‘sourcemap'] }, webpack: { devtool: ‘inline-source-map', // [NOTE] ソースマップで開発時のデバッグを容易に module : { /* … */ } }, coverageReporter: { /* … */ }, browsers: [‘Safari'] // [NOTE] テストブラウザの指定 ———————————————————————————————————————————————————————————————————————————————————— // [FILE] gulpfile.babel.jsの一部, karmaの呼出し gulp.task('tdd', ['watch'], function () { let Server = karma.Server; let configFile = path.resolve(__dirname, 'karma.conf.js'); new Server({configFile: configFile}, function (exitCode) { process.exit(exitCode); }).start(); }); ———————————————————————————————————————————————————————————————————————————————————— $ npm start // npm startでgulp呼出し Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔継続的なテスト,ドキュメント更新,カバレッジ計測 Karma <= gulp <= npm start

31. 広告JS Istanbul 【Gulp】おなじみのタスクランナー。ファイルの更新毎に各種タスクを実行カバレッジ計測  stmt, branch, func, lines 【Karma】  任意のブラウザにテストを流し込む。また結合等の前処理も担当テスト関連の  タスクを移譲ドキュメンテーションや  サンプルページ生成手元とCIサービスで  テストブラウザを変更カバレッジが低いとテスト落とす Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

33. $ yo premiumad _-----_ | | .--------------------------. |--(o)--| | Welcome to the cat's | `---------´ | pajamas Premiumad | ( _´U`_ ) | generator! | /___A___ '--------------------------' | ~ | __'.___.'__ ´ ` |° ´ Y ` ? Githubのオーガナイザー名を入力しておくれ！ <GHE> ? リポジトリ名を入力しておくれ！ <GHE> ? プロダクト名を入力しておくれ！ <GHE> create package.json create gulpfile.babel.js create karma.conf.js create LICENSE create README.md create RELEASE.md create .editorconfig create .eslintrc create .gitignore create src/ … # 略 create test/ … # 略 create json/ … # 略 create html/ … # 略 create sample/ … # 略 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ✔忘れがちな初期化作業もテンプレート化 Yeomon Generator

35. 全体図 Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し 3. 広告JS CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0

36. 全体図 Istanbul 1. 初期化広告JS  雛形 2. 開発開始呼出し呼出し呼出し 3. 広告JS CIサービス +監視 4. リリース配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ⃝やったこと 1. 新しい記法 2. コードに再利用性を持たせる 3. 望ましい記法を機械的に確認 4. ドキュメント化 5. テスト&カバレッジ計算の  継続的な実施 6. 1∼6をコマンド一つで実行 7. 初期化作業のテンプレート化 Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0

44. 付録：サービスロゴ参照元 1.babel, https://github.com/babel/logo 2.browser s icons, https://github.com/alrra/browser-logos/tree/master/ 3.editorconﬁg, https://github.com/editorconﬁg のavaster 4.eslint, http://esling.orgのスクリーンショット 5.gulp, https://github.com/gulpjs/artwork 6.Hubot, https://octodex.github.com/hubot 7.JSDoc, https://github.com/jsdoc3 のavaster 8.Karma, https://github.com/karma-runner/karma/tree/master/logo 9.mocha, https://github.com/mochajs/mocha/blob/master/media/ 10.Octocat, https://octodex.github.com/original/ 11.phantomjs, http://phantomjs.org/img/phantomjs-logo.png 12.power-assert.js, https://github.com/power-assert-js/power-assert-js-logo 13.webpack, https://github.com/webpack/docs/issues/4 14.yoemon, https://github.com/yeoman/media （アルファベット順） Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

ぼく（たち）のかんがえた最新のJS開発環境 #scripty04

Yahoo!デベロッパーネットワーク

ぼく（たち）のかんがえた最新のJS開発環境 #scripty04

A particular slide catching your eye?