Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
【CircleCI】TypeScriptのLint結果を定期的にSlack通知することで少しずつ型安全になっていく様を眺めていく
Yuto Tachibana
May 20, 2021
Programming
3
240
【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
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
Migrating to Kotlin State & Shared Flows
heyitsmohit
1
190
EFFICIENT CREATION OF AN EMPTY COLLECTION IN .NET
abt
0
150
Independently together: better developer experience & App performance
bcinarli
0
160
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
satsukies
0
190
シェーダー氷山発掘記
logilabo
0
140
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
690
heyにおけるCI/CDの現状と課題
fufuhu
2
550
From Java through Scala to Clojure
lagenorhynque
0
150
[DC SF 2022] Hitchhiking through Jetpack Compose
jossiwolf
2
160
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
0
130
言語処理ライブラリ開発における失敗談 / NLPHacks
taishii
1
430
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Debugging Ruby Performance
tmm1
65
10k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
How to Ace a Technical Interview
jacobian
265
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.3k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
How to train your dragon (web standard)
notwaldorf
58
3.9k
A better future with KSS
kneath
225
15k
Product Roadmaps are Hard
iamctodd
34
6.5k
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