表参道.rb #12 http://omotesandorb.connpass.com/event/32744/

1. ES2015のカバレッジ計測
2016/06/02(木) 表参道.rb #12

2. 自己紹介
● HN: 神速
● twitter: @sinsoku_listy
● github: sinsoku
● 所属: 株式会社grooves
● 言語: Ruby, Node.js, Swift

3. CSSのカバレッジ計測ツール
clairvoyance (クレアボヤンス: 千里眼)
https://github.com/sinsoku/clairvoyance

4. なぜ作ったのか？
● 別ページのデザインが壊れる
● 使ってなさそうだけど、怖くて消せない
● grep ができない
● 上書きが多い
● 突然の !important
● 書いた人はもういない・・・

5. 1. PhantomJS で描画

6. 2. document.querySelectorAll() でチェック
描画されたhtml

7. 使い方
$ npm install -g clairvoyance
$ clairvoyance --css path/application.css
--html path/index.html

8. {
"/user/sinsoku/app/path/application.css": [
null, 1, 1, 1, null, 0, 0, 0
]
}
coverage/css-coverage.json
null => disabled, 0 => uncoverd, 1 => coverd

9. HTMLレポート
--reporter のオプションでJSON以外でも出力でき
ます。
$ npm install -g clairvoyance-html
$ clairvoyance --css path/application.css
--html path/index.html
--reporter clairvoyance-html

12. ここから本題

13. これをES2015で直した
● gulp + babel
● ESLint (airbnb)
● remap-istanbul + codecov

14. gulp + babel
clairvoyance
├ lib/
└ test/
元のディレクトリ構成

15. gulp + babel
clairvoyance
└ src/
├ lib/
└ test/
変更後のディレクトリ構成

16. gulp + babel
clairvoyance
├ lib/
├ test/
└ src/
├ lib/
└ test/
gulp build 後のディレクトリ構成

17. ESLint

18. ESLint
$ npm install -g eslint
$ eslint --init
Answer questions about your style
❯ Use a popular style guide
Inspect your JavaScript file(s)

19. ESLint
$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
Google
❯ AirBnB
Standard

20. $ gulp lint
[19:52:41] Requiring external module babel-register
[19:52:43] Using gulpfile ~/projects/github/sinsoku/clairvoyance/gulpfile.babel.js
[19:52:43] Starting 'lint'...
[19:52:44]
/Users/sinsoku/projects/github/sinsoku/clairvoyance/src/lib/clairvoyance.js
1:1 error Unexpected var, use let or const instead no-var
2:1 error Unexpected var, use let or const instead no-var
4:28 error 'Clairvoyance' was used before it was defined no-use-before-define
17:30 warning Missing function expression name func-names
17:38 error Missing space before function parentheses space-before-function-paren
22:3 error Unexpected var, use let or const instead no-var
22:3 error All 'var' declarations must be at the top of the function scope vars-on-top
22:7 error Unexpected dangling '_' in '_this' no-underscore-dangle
24:11 error '_createPhantom' was used before it was defined no-use-before-define
24:33 error '_findCssFiles' was used before it was defined no-use-before-define
24:54 error '_findHtmlFiles' was used before it was defined no-use-before-define
25:11 warning Missing function expression name func-names
25:11 error Unexpected function expression prefer-arrow-callback
25:19 error Missing space before function parentheses space-before-function-paren
26:7 error Unexpected var, use let or const instead no-var
28:12 error Unexpected var, use let or const instead no-var
28:12 error All 'var' declarations must be at the top of the function scope vars-on-top
29:14 error All 'var' declarations must be at the top of the function scope vars-on-top
29:14 error Unexpected var, use let or const instead no-var
（以下略

21. あとは頑張って直すだけ！

22. remap-istanbul + codecov
babel を使うとカバレッジがうまく取れない
=> floridoo/gulp-sourcemaps で sourcemap 生成
=> SitePen/remap-istanbul でカバレッジ修正

23. gulp.task('build', ['clean'], () =>
gulp.src('src/lib/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write('../maps', {
includeContent: false, sourceRoot: '../src/lib'
}))
.pipe(gulp.dest('lib'))
);

24. gulp.task('remap-istanbul', ['test'], () =>
gulp.src('coverage/coverage-final.json')
.pipe(remapIstanbul({
basePath: 'maps/',
reports: {
json: 'coverage/coverage.json',
html: 'coverage/lcov-report',
lcovonly: 'coverage/lcov.info',
},
}))
);

25. Codecov

27. ご清聴ありがとうございました。