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
440
【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
XP, Testing and ninja testing
m_seki
3
250
AIともっと楽するE2Eテスト
myohei
7
2.7k
PipeCDのプラグイン化で目指すところ
warashi
1
280
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
180
VS Code Update for GitHub Copilot
74th
2
650
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Facilitating Awesome Meetings
lara
54
6.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Statistics for Hackers
jakevdp
799
220k
What's in a price? How to price your products and services
michaelherold
246
12k
RailsConf 2023
tenderlove
30
1.1k
The Cult of Friendly URLs
andyhume
79
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Embracing the Ebb and Flow
colly
86
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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