Tweet
Tweet

Slide 1

Slide 1 text

Lintでレビューをラクにしよう @exoego 2019-4-3 TypeScript勉強会 #nfug

Slide 2

Slide 2 text

twitter: @exoego 長野県の田舎でリモートワーク フロントエンドもバックエンドもプロダクトマネージメントもOSSもやるマン コミュニティ Vue i18n Japan AWS User Group 名古屋支部 名古屋 Java User Group

Slide 3

Slide 3 text

TypeScriptの型検査 便利！

Slide 4

Slide 4 text

という話は誰かがして くれるはずなので 違う「検査」を紹介

Slide 5

Slide 5 text

Lint 使ってますか？ 全員使ってたらLT終了

Slide 6

Slide 6 text

本日のお話 1. Lint の紹介 2. Lint があってよかった実体験 3. TypeScript で Lint

Slide 7

Slide 7 text

1. Lint の紹介

Slide 8

Slide 8 text

重要だけど退屈なレビューに 時間をかけてませんか？ コーディングスタイルに従ってる？ 未使用コードが残ってる？ 古い書き方しちゃってる？

Slide 9

Slide 9 text

重要だけど退屈なレビューに 時間をかけてませんか？ コーディングスタイルに従ってる？ 未使用コードが残ってる？ 古い書き方しちゃってる？ こういうレビューを自動で やってくれるのが Lint(er)

Slide 10

Slide 10 text

要するに Lint（またはLinter） とは プログラミングの支援ツール。ソースコードを分析し、 様々な問題を検査してくれる 検査は Warning（無視してよい）にもできるし、Error 扱 いにして見逃さず修正にしてもよい 最近の Lint は、自動修正までやってくれる よくある修正は Lint に任せて 工数節約してコード品質アップ

Slide 11

Slide 11 text

色々な言語で使える Lint JavaScript: ESLint TypeScript: ESLint, TSLint CSS/altCSS: Stylelint HTML: htmllint, tidy Markdown: markdownlint Ruby: RuboCop PHP: phplint, PHP_CodeSniffer Python: Pylint, Pycodestyle Java: Checkstyle, SpotBugs Scala: Scalafix

Slide 12

Slide 12 text

ESLint/TSLint で 見つけられる問題の例 ESLint: no-await-in-loop ルール ループ内の非効率かもしれない await を発見。非同期処理のレビューがラクに ESLint: no-cond-assign ルール if (foo.bar = ‘message’”) を発見。たまにやらかす… TSLint: no-unsafe-any ルール any型での雑なメンバーアクセス、ダメ絶対。ちゃんとキャストかジェネリクス使って!!

Slide 13

Slide 13 text

様々な OSS が Pull Req に自動 Lint してレビューコストを下げてる →OSSメンテ続けやすくする仕組み Vue i18n みんなも自動 Lint でレビューをラクに!

Slide 14

Slide 14 text

2. Lint があって よかった実体験

Slide 15

Slide 15 text

とある OSS に ESLint 導入→バグ発見 rules: function (field, rules) { if (Array.isArray(field)) { $.each(fields, function (index, field) { module.remove.rule(field, rules); }); } else { module.remove.rule(field, rules); } 数年物のバグ、あなたはレビューで見つけられますか？ テストがないのが問題だけど

Slide 16

Slide 16 text

3. TypeScript で Lint

Slide 17

Slide 17 text

導入デモ TypeScriptの著名レポジトリに Lint 導入して、 見つけた問題を修正 Pull Req してみた …をやろうとしたら、著名レポジトリでは あらかた導入済みだった！ 著名レポジトリを参考にしよう！

Slide 18

Slide 18 text

TSLint派 angular/angular Microsoft/vscode nestjs/nest codercom/code-server grafana/grafana ESLint派 denoland/deno

Slide 19

Slide 19 text

現在 TypeScript では TSLint がメジャー が、Microsoft は ESLint を推してく らしい

Slide 20

Slide 20 text

ESLint/TSLint 設定多すぎて迷う？ デファクトの設定に従うのがオススメ JavaScript Standard Styleベース https://www.npmjs.com/package/eslint-config-standard https://www.npmjs.com/package/tslint-config-standard 著名企業が公開した設定も広く使われてます https://www.npmjs.com/package/eslint-config-airbnb https://www.npmjs.com/package/eslint-config-google https://www.npmjs.com/package/tslint-microsoft-contrib

Slide 21

Slide 21 text

まとめ 退屈なレビューは Lint に任せて、本質的な レビューに集中しよう！ TypeScript では TSLint がデファクトだけど JS にも対応した ESLint もいいよ！ Lint の設定は、よく練られたデファクトに 乗っかるとラクだよ！