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. 疲れる
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Icons made by Freepik form www.flaticon.com is licensed by CC BY 3.0
12. 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.flaticon.com is licensed by CC BY 3.0
できたもの
3. 商品(広告)
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
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. 全体図
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