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
430
【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
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
500
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
880
童醫院敏捷轉型的實踐經驗
cclai999
0
200
XP, Testing and ninja testing
m_seki
3
200
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
Select API from Kotlin Coroutine
jmatsu
1
190
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
48
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Review Best Practice
trishagee
68
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
220
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Become a Pro
speakerdeck
PRO
28
5.4k
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