Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
写真:アフロ
ぼくのかんがえた

さいしんのJS開発環境>
たち
ヤフー株式会社 MSC 開発本部
光野達朗(@kotatsu360)
SCRIPTY#4 2015/12/15
光野 達朗
所属:ヤフー株式会社 /
リッチラボ株式会社
担当:ヤフオク! => 広告&子会社 

領域:
• Webフロントエンド
• バックエンド   
• インフラ(AWS)
• DevOpsとか良い開発環境とか

DX向上

(Deve...
こんな開発環境を作った話をします
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
3. 広告JS
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan...
写真:アフロ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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.flaticon.com is licensed by CC BY 3.0
「このグローバルな変数は一体・・・読みにくい(ヽ́ω`)」
同じようなJSに

同じような...
疲れる
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com ...
写真:アフロ楽をしようCopyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ゴールの設定写真:アフロ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
問題の整理
❌重複コードが多い

 別の広告同士でdiffをとったら差があまりない
❌人手に頼る開発

 コード規約の順守、リリース、テスト、etc
❌可読性が低い古いJS

 IE6のハックが含まれていたり・・・
Copyright (C) ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ゴール
コードの再利用性を高める

 となりからコピペ、ダメ。ゼッタイ。



自動化

 人...
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights ...
3.
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
商品(広告)
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan Corporation. A...
3.
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
商品(広告)
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan Corporation. A...
商品(広告)
広告JS
この資料の主役。
実際にサービス面で広告を
表現するJavaScript
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁...
広告JS
既存 : 広告毎に新規
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
【問題点】
重複多い
【robj(仮称)】
広告開発にあると便利な機能を
ライブラリ化したもの
広告JS
広告個別処理+広告用lib
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無...
【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, ma...
// [FILE] between.js
// [NOTE] numを丸める関数
// numがmin以下ならmin, max以上ならmax, それ以外ならnumを返す
export default function (min, num, ma...
【ad lib(仮称)】
広告開発にあると便利な機能を
ライブラリ化したもの
広告JS
【webpack】
CommonJS/AMDの規格に準拠
して依存関係を解決する
【BABEL】
EC6をEC5に変換するコンパイラ。
ブロックスコープなど...
広告JS【JSDoc3】
コメントから生成
【ESLint】
全ルールがプラガブ
ルでES6にも対応。
NGな記法も設定可。
【power-assert.js】
シンプルで可読性の

高いアサーションライブラリ
テスト
ドキュメンテーション コ...
// [FILE] test/between.js
import between from '../module/between';
describe('between', function () { // mocha:describe
it(...
// [FILE] between.js
export default function (min, num, max) {
var var_variable = 0; // [!!!] ES6で統一したい!命名規則違う!使ってない!
retu...
/** @module */
/**
* 対象が閾値(min, max)に収まるようにクリップする。
* @param {Number} min 範囲の最小値
* @param {Number} num 調べる対象値
* @param {Num...
広告JS【JSDoc3】
コメントから生成
【ESLint】
全ルールがプラガブ
ルでES6にも対応。
NGな記法も設定可。
【power-assert.js】
シンプルで可読性の

高いアサーションライブラリ
テスト
ドキュメンテーション コ...
広告JS
Istanbul
【Gulp】
おなじみのタスクラン
ナー。ファイルの更新
毎に各種タスクを実行
カバレッジ計測

stmt, branch, func, lines
【Karma】

任意のブラウザにテス
トを流し込む。また結
合等...
// テストがちゃんとある時
---------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | %...
// [FILE] karma.conf.jsの一部, テスト+結合の設定
module.exports = function(config) {
config.set({
frameworks: ['mocha', ‘sinon'], // ...
広告JS
Istanbul
【Gulp】
おなじみのタスクラン
ナー。ファイルの更新
毎に各種タスクを実行
カバレッジ計測

stmt, branch, func, lines
【Karma】

任意のブラウザにテス
トを流し込む。また結
合等...
Istanbul
商品の雛形
初期設定のテンプレートを管理
設定ファイルとか持ってくる
ディレクトリやファイルの

命名規則を保つ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights R...
$ yo premiumad
_-----_
| | .--------------------------.
|--(o)--| | Welcome to the cat's |
`---------´ | pajamas Premiumad...
Istanbul
商品の雛形
初期設定のテンプレートを管理
設定ファイルとか持ってくる
ディレクトリやファイルの

命名規則を保つ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights R...
全体図
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
3. 広告JS
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan Corporation....
全体図
Istanbul
1. 初期化広告JS

雛形
2. 開発開始
呼出し
呼出し
呼出し
3. 広告JS
CIサービス
+監視
4. リリース
配信へ
Copyright (C) 2015 Yahoo Japan Corporation....
写真:アフロ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
写真:アフロ楽をしようCopyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
コードの再利用性を高める
自動化
モジュール化
ドキュメンテーション・テスト
何らかの規格に基づいたOSSの選定
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. ...
コードの再利用性を高める
自動化(テスト・規約・初期化)
先進的な技術を選ぶ(技術の寿命は要注意)
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載...
• 各ブラウザ・各端末での表示テストの自動化
• リリースフローの可視化(ChatOpsの本格導入)
• platoをつかった静的解析の導入
• システム全体の更新
引き続き取り組んでいること
Copyright (C) 2015 Yahoo ...
エンジニアが集中して
良い広告(サービス)を作る
この取り組みは開発環境を整えるのが目標ではない。
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載...
ありがとうございました!!
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
付録:サービスロゴ参照元
1.babel, https://github.com/babel/logo
2.browser s icons, https://github.com/alrra/browser-logos/tree/master/...
Upcoming SlideShare
Loading in …5
×

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

9,292 views

Published on

ぼく(たち)のかんがえた最新のJS開発環境
光野達朗, ヤフー株式会社

2015.12.15 SCRIPTY#04
http://scripty.connpass.com/event/22663/

Published in: Technology
  • Be the first to comment

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

  1. 1. 写真:アフロ ぼくのかんがえた
 さいしんのJS開発環境> たち ヤフー株式会社 MSC 開発本部 光野達朗(@kotatsu360) SCRIPTY#4 2015/12/15
  2. 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. 3. こんな開発環境を作った話をします Istanbul 1. 初期化広告JS
 雛形 2. 開発開始 呼出し 呼出し 呼出し 3. 広告JS CIサービス +監視 4. リリース 配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0
  4. 4. 写真:アフロ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  5. 5. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  6. 6. 所属部署は広告JSの開発を担当 例)アドギャラリー:プレミアムビジョン・ヤフオク 網掛け部分を動作させるJSを開発Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  7. 7. ある日の機能追加 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0 「このグローバルな変数は一体・・・読みにくい(ヽ́ω`)」 同じようなJSに
 同じような修正 部署の 先輩「リリースの仕方教えて下さい」
 「ツールAとBとCでそれぞれ・・・・」 「(多い・・・)」 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 自分
  8. 8. 疲れる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0
  9. 9. 写真:アフロ楽をしようCopyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  10. 10. ゴールの設定写真:アフロ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  11. 11. 問題の整理 ❌重複コードが多い
  別の広告同士でdiffをとったら差があまりない ❌人手に頼る開発
  コード規約の順守、リリース、テスト、etc ❌可読性が低い古いJS
  IE6のハックが含まれていたり・・・ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  12. 12. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ゴール コードの再利用性を高める
  となりからコピペ、ダメ。ゼッタイ。
 
 自動化
  人手に頼らない。ある日、誰かが異動しても大丈夫
 
 先進的な技術を選ぶ (技術の寿命は要注意)  なうでヤングなエンジニアになろう
  13. 13. Istanbul 1. 初期化広告JS
 雛形 2. 開発開始 呼出し 呼出し 呼出し CIサービス +監視 4. リリース 配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0 できたもの 3. 商品(広告)
  14. 14. 3. Istanbul 1. 初期化広告JS
 雛形 2. 開発開始 呼出し 呼出し 呼出し 商品(広告) CIサービス +監視 4. リリース 配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 本日の紹介範囲 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0 できたもの
  15. 15. 3. Istanbul 1. 初期化広告JS
 雛形 2. 開発開始 呼出し 呼出し 呼出し 商品(広告) CIサービス +監視 4. リリース 配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0 できたもの
  16. 16. 商品(広告) 広告JS この資料の主役。 実際にサービス面で広告を 表現するJavaScript Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 入稿物 HTML … 広告の構成要素たち。
 今日は出番なし

  17. 17. 広告JS 既存 : 広告毎に新規 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 【問題点】 重複多い
  18. 18. 【robj(仮称)】 広告開発にあると便利な機能を ライブラリ化したもの 広告JS 広告個別処理+広告用lib Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  19. 19. 【robj(仮称)】 広告開発にあると便利な機能を ライブラリ化したもの 広告JS 広告個別処理+広告用lib 【webpack】 CommonJS/AMDの規格に準拠 して依存関係を解決する 【BABEL】 EC6をEC5に変換するコンパイラ。 ブロックスコープなど、整理され た記法での開発を可能に Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  20. 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. 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. 22. 【ad lib(仮称)】 広告開発にあると便利な機能を ライブラリ化したもの 広告JS 【webpack】 CommonJS/AMDの規格に準拠 して依存関係を解決する 【BABEL】 EC6をEC5に変換するコンパイラ。 ブロックスコープなど、整理され た記法での開発を可能に 個別処理+ライブラリ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  23. 23. 広告JS【JSDoc3】 コメントから生成 【ESLint】 全ルールがプラガブ ルでES6にも対応。 NGな記法も設定可。 【power-assert.js】 シンプルで可読性の
 高いアサーションライブラリ テスト ドキュメンテーション コード規約 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 【mocha】 シンプルな BDDフレームワーク
  24. 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. 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. 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. 27. 広告JS【JSDoc3】 コメントから生成 【ESLint】 全ルールがプラガブ ルでES6にも対応。 NGな記法も設定可。 【power-assert.js】 シンプルで可読性の
 高いアサーションライブラリ テスト ドキュメンテーション コード規約 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 【mocha】 シンプルな テストフレームワーク
  28. 28. 広告JS Istanbul 【Gulp】 おなじみのタスクラン ナー。ファイルの更新 毎に各種タスクを実行 カバレッジ計測
 stmt, branch, func, lines 【Karma】
 任意のブラウザにテス トを流し込む。また結 合等の前処理も担当 テスト関連の
 タスクを移譲 ドキュメンテーションや
 サンプルページ生成 手元とCIサービスで
 テストブラウザを変更カバレッジが低い とテスト落とす Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  29. 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. 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. 31. 広告JS Istanbul 【Gulp】 おなじみのタスクラン ナー。ファイルの更新 毎に各種タスクを実行 カバレッジ計測
 stmt, branch, func, lines 【Karma】
 任意のブラウザにテス トを流し込む。また結 合等の前処理も担当 テスト関連の
 タスクを移譲 ドキュメンテーションや
 サンプルページ生成 手元とCIサービスで
 テストブラウザを変更カバレッジが低い とテスト落とす Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  32. 32. Istanbul 商品の雛形 初期設定のテンプレートを管理 設定ファイルとか持ってくる ディレクトリやファイルの
 命名規則を保つ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 広告JS
  33. 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
  34. 34. Istanbul 商品の雛形 初期設定のテンプレートを管理 設定ファイルとか持ってくる ディレクトリやファイルの
 命名規則を保つ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 広告JS
  35. 35. 全体図 Istanbul 1. 初期化広告JS
 雛形 2. 開発開始 呼出し 呼出し 呼出し 3. 広告JS CIサービス +監視 4. リリース 配信へ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0
  36. 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.flaticon.com is licensed by CC BY 3.0
  37. 37. 写真:アフロ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  38. 38. 写真:アフロ楽をしようCopyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  39. 39. コードの再利用性を高める 自動化 モジュール化 ドキュメンテーション・テスト 何らかの規格に基づいたOSSの選定 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 取り組んだ事 先進的な技術を選ぶ(技術の寿命は要注意)
  40. 40. コードの再利用性を高める 自動化(テスト・規約・初期化) 先進的な技術を選ぶ(技術の寿命は要注意) Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Istanbul 取り組んだ事 説明を省きましたが editorconfigも使っています 選定の指標に
  41. 41. • 各ブラウザ・各端末での表示テストの自動化 • リリースフローの可視化(ChatOpsの本格導入) • platoをつかった静的解析の導入 • システム全体の更新 引き続き取り組んでいること Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  42. 42. エンジニアが集中して 良い広告(サービス)を作る この取り組みは開発環境を整えるのが目標ではない。 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 大事な事 そのための手段。
 楽になった分、エネルギーは開発に注ぎます
  43. 43. ありがとうございました!! Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
  44. 44. 付録:サービスロゴ参照元 1.babel, https://github.com/babel/logo 2.browser s icons, https://github.com/alrra/browser-logos/tree/master/ 3.editorconfig, https://github.com/editorconfig の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. 無断引用・転載禁止

×