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

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

光野達朗
所属：ヤフー株式会社 /
リッチラボ株式会社
担当：ヤフオク! => 広告&子会社  
領域：
• 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

こんな開発環境を作った話をします
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

写真:アフロ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

所属部署は広告JSの開発を担当
例）アドギャラリー：プレミアムビジョン・ヤフオク
網掛け部分を動作させるJSを開発Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

疲れる

ゴールの設定写真:アフロ

問題の整理
❌重複コードが多い 
別の広告同士でdiffをとったら差があまりない
❌人手に頼る開発 
コード規約の順守、リリース、テスト、etc
❌可読性が低い古いJS 
IE6のハックが含まれていたり・・・

ゴール
コードの再利用性を高める 
となりからコピペ、ダメ。ゼッタイ。 
 
自動化 
人手に頼らない。ある日、誰かが異動しても大丈夫 
 
先進的な技術を選ぶ (技術の寿命は要注意）
なうでヤングなエンジニアになろう

Istanbul
雛形
2. 開発開始
呼出し
呼出し
呼出し
CIサービス
+監視
4. リリース
配信へ
できたもの
3. 商品（広告）

3.
Istanbul
雛形
2. 開発開始
呼出し
呼出し
呼出し
商品（広告）
CIサービス
+監視
4. リリース
配信へ
本日の紹介範囲
できたもの

3.
Istanbul
雛形
2. 開発開始
呼出し
呼出し
呼出し
商品（広告）
CIサービス
+監視
4. リリース
配信へ
できたもの

商品（広告）
広告JS
この資料の主役。
実際にサービス面で広告を
表現するJavaScript
入稿物
HTML …
広告の構成要素たち。 
今日は出番なし

広告JS
既存 : 広告毎に新規
【問題点】
重複多い

【robj（仮称）】
広告開発にあると便利な機能を
ライブラリ化したもの
広告JS
広告個別処理＋広告用lib

【robj（仮称）】
広告JS
広告個別処理＋広告用lib
【webpack】
CommonJS/AMDの規格に準拠
して依存関係を解決する
【BABEL】
EC6をEC5に変換するコンパイラ。
ブロックスコープなど、整理され
た記法での開発を可能に

// [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);
✔機能の重複を廃し、堅牢な寿命の長い記述をする。
webpack + babel

// [NOTE] numを丸める関数
// numがmin以下ならmin, max以上ならmax, それ以外ならnumを返す
}
—————————————————————————————————————————————————
// [FILE] sample.js
import between from ‘between’
// [NOTE] varではなくES6で定義されたletを使う
let num = 50;
let res = between(10, num, 20);
✔機能の重複を廃し、堅牢な寿命の長い記述をする。
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) {
};
module.exports = exports['default'];
/***/ }
/******/ ]);
sample.js:webpack+babelの結果
60行

【ad lib（仮称）】
広告JS
【webpack】
CommonJS/AMDの規格に準拠
して依存関係を解決する
【BABEL】
EC6をEC5に変換するコンパイラ。
ブロックスコープなど、整理され
た記法での開発を可能に
個別処理＋ライブラリ

広告JS【JSDoc3】
コメントから生成
【ESLint】
全ルールがプラガブ
ルでES6にも対応。
NGな記法も設定可。
【power-assert.js】
シンプルで可読性の 
高いアサーションライブラリ
テスト
ドキュメンテーションコード規約
【mocha】
シンプルな
BDDフレームワーク

// [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
✔シンプルなアサーションと可読性の高い結果表示
mocha + power-assert.js

var var_variable = 0; // [!!!] ES6で統一したい！命名規則違う！使ってない！
}
—————————————————————————————————————————————————
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)
✔機械で「良い書き方」を指摘 (人間で頑張らない)
ESLint

/** @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
*/
…
✔ドキュメンテーション(元データはソースの横に)
　一手間加えて、開発者ツールからmoduleの実行可能
JSDoc3

広告JS【JSDoc3】
コメントから生成
【ESLint】
全ルールがプラガブ
ルでES6にも対応。
NGな記法も設定可。
【power-assert.js】
シンプルで可読性の 
高いアサーションライブラリ
テスト
ドキュメンテーションコード規約
【mocha】
シンプルな
テストフレームワーク

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

// テストがちゃんとある時
---------------|----------|----------|----------|----------|----------------|
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 |
✔テストの維持は機械に任せる(※人はテストの質をみる)
Istanbul

// [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呼出し
✔継続的なテスト,ドキュメント更新,カバレッジ計測
Karma <= gulp <= npm start

Istanbul
商品の雛形
初期設定のテンプレートを管理
設定ファイルとか持ってくる
ディレクトリやファイルの 
命名規則を保つ
広告JS

$ 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/ … # 略
✔忘れがちな初期化作業もテンプレート化
Yeomon Generator

全体図
Istanbul
雛形
2. 開発開始
呼出し
呼出し
呼出し
3. 広告JS
CIサービス
+監視
4. リリース
配信へ

全体図
Istanbul
雛形
2. 開発開始
呼出し
呼出し
呼出し
3. 広告JS
CIサービス
+監視
4. リリース
配信へ
⃝やったこと
1. 新しい記法
2. コードに再利用性を持たせる
3. 望ましい記法を機械的に確認
4. ドキュメント化
5. テスト&カバレッジ計算の 
継続的な実施
6. 1∼6をコマンド一つで実行
7. 初期化作業のテンプレート化

コードの再利用性を高める
自動化
モジュール化
ドキュメンテーション・テスト
何らかの規格に基づいたOSSの選定
取り組んだ事
先進的な技術を選ぶ(技術の寿命は要注意）

コードの再利用性を高める
自動化（テスト・規約・初期化）
先進的な技術を選ぶ(技術の寿命は要注意）
Istanbul
取り組んだ事
説明を省きましたが
editorconﬁgも使っています
選定の指標に

• 各ブラウザ・各端末での表示テストの自動化
• リリースフローの可視化（ChatOpsの本格導入）
• platoをつかった静的解析の導入
• システム全体の更新
引き続き取り組んでいること

エンジニアが集中して
良い広告（サービス）を作る
この取り組みは開発環境を整えるのが目標ではない。
大事な事
そのための手段。 
楽になった分、エネルギーは開発に注ぎます

ありがとうございました!!

付録：サービスロゴ参照元
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
（アルファベット順）

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

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

More from Yahoo!デベロッパーネットワーク (20)

Recently uploaded

Recently uploaded (9)

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