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
【CircleCI】TypeScriptのLint結果を定期的にSlack通知することで少しずつ型安全になっていく様を眺めていく
Search
Yuto Tachibana
May 20, 2021
Programming
3
340
【CircleCI】TypeScriptのLint結果を定期的にSlack通知することで少しずつ型安全になっていく様を眺めていく
【オンライン】【テスト・新機能LT大会編】CircleCI コミュニティミートアップ の登壇資料です
https://circleci.connpass.com/event/211477/
Yuto Tachibana
May 20, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
330
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Java 22 Overview
kishida
1
180
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
見た目から始める生産性向上
ikumatadokoro
7
850
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
What We Can Learn From OSS
inouehi
0
420
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
Site Reliability Engineering for GMO
pyama86
8
1k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
2 週間で Twitter Bot を作ってみた
contour_gara
0
550
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Designing the Hi-DPI Web
ddemaree
276
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Agile that works and the tools we love
rasmusluckow
325
20k
For a Future-Friendly Web
brad_frost
172
9k
Building Adaptive Systems
keathley
31
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Web development in the modern age
philhawksworth
202
10k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Transcript
【CircleCI】TypeScriptのLint結果を定期的にSlack 通知することで 少しずつ型安全になっていく様を眺めていく 2021.05.20 @tachibanayu24
About me @tachibanayu24 たちばな ゆうと(@tachibanayu24) • 💻 オンボーディング支援の HRサービス Onnでテックリード
• 💚 TypeScript/React/Goなどが好き • 🤔 PS5買えたものの下手すぎて最近起動してない
About Onn @tachibanayu24
TL;DR • 😇 今の会社にジョインしたとき、 TSの設定が strict: false だった • 🤔
Lintエラーを減らしたいがリリースして間もないのでどんどん新規開発しなければならない • 💡 一気に修正するのはきついので、毎日残りエラー数を Slackにpostして意識付けしていく • 👏 2ヶ月半で80%のLintエラーは修正できた @tachibanayu24 👇 Zennにも書いてます 【TypeScript】CircleCIで毎日Lintの結果をSlack通知して少しずつstrictにしていきたい https://zenn.dev/tachibanayu24/articles/fd5ea1cb021f3a 撮影・シェアOKです 後ほどスライドはアップロードして Tweetします
strict: true TypeScriptでStrict Checksをすべて有効化する デフォルトではtrue 当然trueが推奨される 放置すると保守性が低く、危ないコードになっていく。。 noImplicitAny / noImplicitThis
暗黙のanyや、それを持つthisを許可しない alwaysStrict use strictにしてくれる strictNullChecks nullとundefinedを区別する @tachibanayu24 strict: trueにすることで設定されるオプションの一例 (これ以外もあるよ! )
Approach • 時間を止めてリファクタリングに集中することは出来ない • ある程度の人数のチームで同時に進める必要がある • とはいえ直ちに修正しないといけない問題というわけではない 👉 まずはどれくらい Lintエラーが残っているのかを毎日レポートして、チーム全体の意識付けを強化する
@tachibanayu24
Approach codebase scheduled task POST checkout Lint Report result やったことは非常にシンプル
1. 深夜0時にGitHubからcheckoutしてくる 2. eslintを実行する 3. 結果をSlackに流す @tachibanayu24
Code #!/bin/bash # Lintの結果をSlackに通知します result_text=$(yarn lint 2>/dev/null | grep "✖")
# ✖があるのは結果行 slack_payload=" [ { … }, { 'type': 'section', 'text': { 'type': 'mrkdwn', 'text': '${result_text}' } }, { … }, { … }, ] " curl 'https://slack.com/api/chat.postMessage' \ -X POST \ --header "Authorization: Bearer ${SLACK_ACCESS_TOKEN}" \ -d "channel=${SLACK_DEFAULT_CHANNEL}" \ -d "text=${result_text}" \ -d "blocks=${slack_payload}" - run: name: Send Lint Results command: sh .circleci/send_lint_result.sh; nightry: triggers: - schedule: cron: "0 15 * * *" # UTC filters: branches: only: - develop jobs: - lint jobをスケジュールして checkoutや依存関係のインストール後にshellを実行するようにして 実行結果 を取得してSlackAPIを叩くだけ @tachibanayu24
Result • 2/26: 603個 -> 5/20: 117個 まで減った 👏 •
残り50個とかになったらあとは一気に lint errorを潰してTSの設定を変える予定 @tachibanayu24
Conclusion • TypeScriptをstrictな構成に近づけていく取り組みについて話しました ◦ CircleCIを用いて定期的に ESLintを実行し、エラー数をメンバーで監視することで、無理なく Lintエラーを減らし ていくことが出来ました • かなりシンプルなことしかしていませんが、「こういう使い方もできるなぁ」という話でした
🙏 @tachibanayu24
入社オンボーディングを支援する HRサービスOnn 絶賛エンジニア募集中です! 正式版リリースしたばかりなのでばかりなので技術選定などから積極的に関わることが出来ます! 話聞いてみたいな〜 という方はHPか立花へのDMまで 👉 https://onn-hr.com/ or @tachibanayu24
@tachibanayu24