Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lintでレビューをラクにしよう/ Easing Code Review with Lint ...
Search
TATSUNO Yasuhiro
April 03, 2019
Programming
3
630
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
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
620
Bun に LCOV 出力を実装した
exoego
2
240
terraform-provider-aws にプルリクして マージされるまで
exoego
2
440
ライブラリをパブリッシュせずにすばやく試す
exoego
2
300
esbuild 最適化芸人
exoego
3
2.1k
いい感じに AWS を組み合わせたビルディングブロックでアプリ開発を支援する / TdTechTalk 2022 11
exoego
0
770
Empowering App Dev by Nicely-Crafted High-Level AWS Components
exoego
0
81
月間数十億リクエストのマイクロサービスを支える JVM+AWS フルサーバーレス開発事例 / Now and Future of Fully Serverless development at Chatwork
exoego
1
760
Scala と AWS でフルサーバーレス開発事例 / How Chatworks uses Scala and Serverless
exoego
3
1.5k
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
184
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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 の設定は、よく練られたデファクトに 乗っかるとラクだよ!