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

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

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

https://ja-jp.facebook.com/yoshi.yone.7

3.

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

http://www.freepik.com

4.

5.

6.

7.

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

http://www.freepik.com

8.

http://www.freepik.com

9.

10.

11.

12.

13.

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

http://www.freepik.com

14.

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

http://www.freepik.com

15.

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

http://www.freepik.com

16.

17.

18.

19.

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

20.

webpack + babel // [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. 無断引用・転載禁止

21.

[beta]

webpack + babel
// [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);
}

sample.js:webpack+babelの結果
/******/ (function(modules) { // webpackBootstrap
/******/
// The module cache
/******/
var installedModules = {};
/******/
/******/

—————————————————————————————————————————————————
// [FILE] sample.js
import between from ‘between’
// [NOTE] varではなくES6で定義されたletを使う
let num = 50;
let res = between(10, num, 20);

// 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;

60行

/******/
/******/
/******/

}

// 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'];
/***/ }
/******/ ]);

✔機能の重複を廃し、堅牢な寿命の長い記述をする。
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

22.

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

23.

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

24.

[beta]

mocha + power-assert.js
// [FILE] test/between.js
import between from '../module/between';
describe('between', function () {
it('のnumが範囲内だったらnumが返る', function () {
assert(between(0, 50, 100) === 50);
});

// mocha:describe
// mocha:it
// 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. 無断引用・転載禁止

25.

[beta]

ESLint
// [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
warning Identifier 'var_variable' is not in camel case
warning "var_variable" is defined but never used

no-var
camelcase
no-unused-vars

✖ 3 problems (1 error, 2 warnings)

✔機械で「良い書き方」を指摘 (人間で頑張らない)
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

26.

JSDoc3 /** @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) { … ✔ドキュメンテーション(元データはソースの横に) 一手間加えて、開発者ツールからmoduleの実行可能 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

27.

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

28.

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

29.

Istanbul // テストがちゃんとある時 ---------------|----------|----------|----------|----------|----------------| 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 perfile (/path/to/code/robj/module/between.js) threshold (90%) ERROR [coverage]: Safari 9.0.1: Coverage for functions (0%) does not meet perfile (/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. 無断引用・転載禁止

30.

[beta]

Karma <= gulp <= npm start
// [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. 無断引用・転載禁止

31.

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

32.

33.

Yeomon Generator $ yo premiumad _-----_ | | |--(o)--| `---------´ ( _´U`_ ) /___A___\ | ~ | __'.___.'__ ´ ` |° ´ Y ` .--------------------------. | Welcome to the cat's | | pajamas Premiumad | | generator! | '--------------------------' ? 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. 無断引用・転載禁止

34.

35.

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

http://www.freepik.com

36.

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

http://www.freepik.com

37.

38.

39.

40.

41.

42.

43.

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!デベロッパーネットワーク

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

ゼロから始める転移学習

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

各ページのテキスト