---
title: ぼく（たち）のかんがえた最新のJS開発環境 #scripty04
tags:  #scripty04  
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GE86KQ8L7D.jpg?width=480
description: ぼく（たち）のかんがえた最新のJS開発環境 光野達朗, ヤフー株式会社  2015.12.15 SCRIPTY#04 http://scripty.connpass.com/event/22663/
published: December 16, 15
canonical: https://convert.docswell.com/s/ydnjp/KW6W1K-2015-12-16-135104
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GE86KQ8L7D.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LEL9ZXRQJR.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JMZVLPKEW.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PJR62K1679.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PEXMDLYD7X.jpg)

Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 6

![Page Image](https://bcdn.docswell.com/page/3EKGXL3DJD.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L73N53GP75.jpg)

ある日の機能追加
同じような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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/87DWD413JG.jpg)

疲れる
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Icons made by Freepik form www.ﬂaticon.com is licensed by CC BY 3.0


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJP9XMQPE8.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2EVML95VEQ.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/57GGXZ617L.jpg)

問題の整理
❌重複コードが多い
別の広告同士でdiffをとったら差があまりない
❌人手に頼る開発
コード規約の順守、リリース、テスト、etc
❌可読性が低い古いJS
IE6のハックが含まれていたり・・・
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EQX8L4N7P.jpg)

ゴール
コードの再利用性を高める
となりからコピペ、ダメ。ゼッタイ。
自動化
人手に頼らない。ある日、誰かが異動しても大丈夫
先進的な技術を選ぶ (技術の寿命は要注意）
なうでヤングなエンジニアになろう
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 13

![Page Image](https://bcdn.docswell.com/page/KJ462DQ371.jpg)

できたもの
監視
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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LE1VMZPZ7G.jpg)

できたもの
本日の紹介範囲
監視
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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GEWL392672.jpg)

できたもの
監視
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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/47ZMV9DRE3.jpg)

商品（広告）
広告JS
この資料の主役。
実際にサービス面で広告を
表現するJavaScript
入稿物
HTML …
広告の構成要素たち。
今日は出番なし
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 17

![Page Image](https://bcdn.docswell.com/page/YJ6N5K11JV.jpg)

広告JS
【問題点】
重複多い
既存 : 広告毎に新規
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GJ55YP4LJ4.jpg)

広告JS
【robj（仮称）】
広告開発にあると便利な機能を
ライブラリ化したもの
広告個別処理＋広告用lib
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 19

![Page Image](https://bcdn.docswell.com/page/LE3N53GDE5.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/8EDWD4127G.jpg)

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. 無断引用・転載禁止


# Page. 21

![Page Image](https://bcdn.docswell.com/page/V7P9XMQLJ8.jpg)

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 = &quot;&quot;;
/******/
// Load entry module and return exports
/******/
return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
&#039;use strict&#039;;
Object.defineProperty(exports, &#039;__esModule&#039;, {
value: true
});
exports[&#039;default&#039;] = function (min, num, max) {
return Math.min(Math.max(min, num), max);
};
module.exports = exports[&#039;default&#039;];
/***/ }
/******/ ]);
✔機能の重複を廃し、堅牢な寿命の長い記述をする。
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 22

![Page Image](https://bcdn.docswell.com/page/2JVML956JQ.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/5EGGXZ62EL.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4JQX8L49EP.jpg)

mocha + power-assert.js
// [FILE] test/between.js
import between from &#039;../module/between&#039;;
describe(&#039;between&#039;, function () {
it(&#039;のnumが範囲内だったらnumが返る&#039;, 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[&#039;default&#039;])(0, 50, 100) === 50)
|
|
52
false
[number] 50
=&gt; 50
[number] (0, _moduleBetween2[&#039;default&#039;])(0, 50, 100)
=&gt; 52
/path/to/code/robj/test/between.js:63:16 &lt;- webpack:///test/between.js:11:11
✔シンプルなアサーションと可読性の高い結果表示
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 25

![Page Image](https://bcdn.docswell.com/page/K7462DLRE1.jpg)

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 &#039;var_variable&#039; is not in camel case
warning &quot;var_variable&quot; 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. 無断引用・転載禁止


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LJ1VMZLVEG.jpg)

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. 無断引用・転載禁止


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GJWL39V3E2.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4EZMV94GJ3.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/Y76N5K3Q7V.jpg)

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. 無断引用・転載禁止


# Page. 30

![Page Image](https://bcdn.docswell.com/page/G755YPL274.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/9J2NG6L1ER.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/DEYPV9Q4EM.jpg)

商品の雛形
Istanbul
ディレクトリやファイルの
命名規則を保つ
広告JS
初期設定のテンプレートを管理
設定ファイルとか持ってくる
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 33

![Page Image](https://bcdn.docswell.com/page/VJN5MLK678.jpg)

Yeomon Generator
$ yo premiumad
_-----_
|
|
|--(o)--|
`---------´
( _´U`_ )
/___A___\
| ~ |
__&#039;.___.&#039;__
´
` |° ´ Y `
.--------------------------.
|
Welcome to the cat&#039;s
|
|
pajamas Premiumad
|
|
generator!
|
&#039;--------------------------&#039;
? Githubのオーガナイザー名を入力しておくれ！ &lt;GHE&gt;
? リポジトリ名を入力しておくれ！ &lt;GHE&gt;
? プロダクト名を入力しておくれ！ &lt;GHE&gt;
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. 無断引用・転載禁止


# Page. 34

![Page Image](https://bcdn.docswell.com/page/YE9YN4VRJ3.jpg)

商品の雛形
Istanbul
ディレクトリやファイルの
命名規則を保つ
広告JS
初期設定のテンプレートを管理
設定ファイルとか持ってくる
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 35

![Page Image](https://bcdn.docswell.com/page/GE86KQPG7D.jpg)

全体図
監視
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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/LEL9ZX1XJR.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4JMZVLW3EW.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/PJR62KYR79.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/PEXMDLGY7X.jpg)

取り組んだ事
コードの再利用性を高める
モジュール化
自動化
ドキュメンテーション・テスト
先進的な技術を選ぶ(技術の寿命は要注意）
何らかの規格に基づいたOSSの選定
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 40

![Page Image](https://bcdn.docswell.com/page/3EKGXL44JD.jpg)

取り組んだ事
コードの再利用性を高める
説明を省きましたが
editorconﬁgも使っています
自動化（テスト・規約・初期化）
Istanbul
先進的な技術を選ぶ(技術の寿命は要注意）
選定の指標に
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 41

![Page Image](https://bcdn.docswell.com/page/L73N53LD75.jpg)

引き続き取り組んでいること
•
各ブラウザ・各端末での表示テストの自動化
•
リリースフローの可視化（ChatOpsの本格導入）
•
platoをつかった静的解析の導入
•
システム全体の更新
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 42

![Page Image](https://bcdn.docswell.com/page/87DWD4N2JG.jpg)

大事な事
この取り組みは開発環境を整えるのが目標ではない。
エンジニアが集中して
良い広告（サービス）を作る
そのための手段。
楽になった分、エネルギーは開発に注ぎます
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 43

![Page Image](https://bcdn.docswell.com/page/VJP9XM5LE8.jpg)

ありがとうございました!!
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


# Page. 44

![Page Image](https://bcdn.docswell.com/page/2EVML9P6EQ.jpg)

付録：サービスロゴ参照元
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. 無断引用・転載禁止


