Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Lintでレビューをラクにしよう/ Easing Code Review with Lint for TypeScript
TATSUNO Yasuhiro
April 03, 2019
Programming
3
330
Lintでレビューをラクにしよう/ Easing Code Review with Lint for TypeScript
名古屋フロントエンドユーザーグループ TypeScript勉強会 での発表です。
https://nfug.connpass.com/event/123497/
TATSUNO Yasuhiro
April 03, 2019
Tweet
Share
More Decks by TATSUNO Yasuhiro
See All by TATSUNO Yasuhiro
月間数十億リクエストのマイクロサービスを支える JVM+AWS フルサーバーレス開発事例 / Now and Future of Fully Serverless development at Chatwork
exoego
1
310
Scala と AWS でフルサーバーレス開発事例 / How Chatworks uses Scala and Serverless
exoego
3
900
忙しい Scala 開発者の超時間節約術 / Big Timesavers for Busy Scala Developers
exoego
1
710
TypeScript の便利な型変形を なんとかして Scala.js で使う / Emulating TypeScript Utility Types in ScalaJS
exoego
2
1.4k
AIのビジネス利用を加速する教師データ作成の戦略 / Annotation Strategy to accelerate using AI for business
exoego
0
950
SageMaker Ground Truthはどう使うべきか/When to use SageMaker Ground Truth
exoego
0
260
Serverless in Scala on Node.js
exoego
3
400
作りたいものがない人がモダン開発を勉強し続ける方法/How I keep on learning modern technologies and development methods
exoego
0
110
20分で分かるDynamoDB/DynamoDB in 20 minutes
exoego
1
130
Other Decks in Programming
See All in Programming
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
120
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
170
Imperative is dead, long live Declarative! | Appdevcon
prof18
0
110
シェーダー氷山発掘記
logilabo
0
150
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
180
[DevTrends - Jun/2022] Arquitetura baseada em eventos
camilacampos
0
150
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
0
170
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
2k
From Java through Scala to Clojure
lagenorhynque
0
230
NEWT.net: Frontend Technology Selection
xpromx
0
250
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
350
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
The Mythical Team-Month
searls
209
39k
What the flash - Photography Introduction
edds
62
10k
Infographics Made Easy
chrislema
233
17k
Facilitating Awesome Meetings
lara
29
4k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Ruby is Unlike a Banana
tanoku
91
9.2k
KATA
mclloyd
7
8.7k
Docker and Python
trallard
27
1.6k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Transcript
Lintでレビューをラクにしよう @exoego 2019-4-3 TypeScript勉強会 #nfug
twitter: @exoego 長野県の田舎でリモートワーク フロントエンドもバックエンドもプロダクトマネージメントもOSSもやるマン コミュニティ Vue i18n Japan AWS User
Group 名古屋支部 名古屋 Java User Group
TypeScriptの型検査 便利!
という話は誰かがして くれるはずなので 違う「検査」を紹介
Lint 使ってますか? 全員使ってたらLT終了
本日のお話 1. Lint の紹介 2. Lint があってよかった実体験 3. TypeScript で
Lint
1. Lint の紹介
重要だけど退屈なレビューに 時間をかけてませんか? コーディングスタイルに従ってる? 未使用コードが残ってる? 古い書き方しちゃってる?
重要だけど退屈なレビューに 時間をかけてませんか? コーディングスタイルに従ってる? 未使用コードが残ってる? 古い書き方しちゃってる? こういうレビューを自動で やってくれるのが Lint(er)
要するに Lint(またはLinter) とは プログラミングの支援ツール。ソースコードを分析し、 様々な問題を検査してくれる 検査は Warning(無視してよい)にもできるし、Error 扱 いにして見逃さず修正にしてもよい 最近の
Lint は、自動修正までやってくれる よくある修正は Lint に任せて 工数節約してコード品質アップ
色々な言語で使える 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
ESLint/TSLint で 見つけられる問題の例 ESLint: no-await-in-loop ルール ループ内の非効率かもしれない await を発見。非同期処理のレビューがラクに ESLint:
no-cond-assign ルール if (foo.bar = ‘message’”) を発見。たまにやらかす… TSLint: no-unsafe-any ルール any型での雑なメンバーアクセス、ダメ絶対。ちゃんとキャストかジェネリクス使って!!
様々な OSS が Pull Req に自動 Lint してレビューコストを下げてる →OSSメンテ続けやすくする仕組み Vue
i18n みんなも自動 Lint でレビューをラクに!
2. Lint があって よかった実体験
とある 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); } 数年物のバグ、あなたはレビューで見つけられますか? テストがないのが問題だけど
3. TypeScript で Lint
導入デモ TypeScriptの著名レポジトリに Lint 導入して、 見つけた問題を修正 Pull Req してみた …をやろうとしたら、著名レポジトリでは あらかた導入済みだった!
著名レポジトリを参考にしよう!
TSLint派 angular/angular Microsoft/vscode nestjs/nest codercom/code-server grafana/grafana ESLint派 denoland/deno
現在 TypeScript では TSLint がメジャー が、Microsoft は ESLint を推してく らしい
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
まとめ 退屈なレビューは Lint に任せて、本質的な レビューに集中しよう! TypeScript では TSLint がデファクトだけど JS
にも対応した ESLint もいいよ! Lint の設定は、よく練られたデファクトに 乗っかるとラクだよ!