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
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
Parallel Socket Communication in Swift
s_shimotori
0
260
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.4k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
Introduction for Open Source Swift Workshop
giginet
PRO
0
290
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
11k
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
LPIXEL×CADDi_kaerururu
kaerururu
3
300
OpenTelemetry のサービスという概念について
azukiazusa1
1
410
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
How STYLIGHT went responsive
nonsquared
92
4.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Being A Developer After 40
akosma
56
580k
Debugging Ruby Performance
tmm1
68
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Statistics for Hackers
jakevdp
789
220k
Navigating Team Friction
lara
177
13k
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