TypeScript ASTとJSDocで実現するコードの自動削除 / Auto remove code with TypeScript AST and JSDoc

Transcript

1. © Stanby, Inc. TypeScript ASTとJSDocで実現する コードの自動削除 株式会社スタンバイ 川野 賢一 1 2025.05.24 TSKaigi 2025
2. © Stanby, Inc. 自己紹介 2024年1月に株式会社スタンバイに中途入社 仕事 • 求人検索エンジン「スタンバイ」のWebフロントエンド開発 • オウンドメディア「スタンバイplus」の開発 +α • 日々の業務を楽に楽しくするためTypeScript製社内ツールの開発 ◦ Chrome拡張機能、Slack App、GASなど TSKaigi 2024でASTの話を聞いたことをきっかけに、ASTを活用したCLI ツールも作りました！（本日のテーマです！） 2 川野 賢一
3. © Stanby, Inc. 不要になったA/Bテストのコード どうやって消してますか？ 3
4. © Stanby, Inc. 我々のチームではこれまで コメントアウトを使って範囲を示し 目視で手動で消してました 4
5. © Stanby, Inc. コメントアウトを使った範囲指定のやり方 5
6. © Stanby, Inc. コメントアウトを使った範囲指定のやり方 ❌ 範囲指定を間違えてしまう ❌ 書きたい順序でかけない ❌ 開始/終了コメントを書き忘れる 6 困ったこと
7. © Stanby, Inc. コメントアウトを使う背景 7 多くの開発が並行して行われている
8. © Stanby, Inc. さらなる困ったこと 8
9. © Stanby, Inc. さらなる困ったこと 9
10. © Stanby, Inc. さらなる困ったこと 10
11. © Stanby, Inc. さらなる困ったこと 11
12. © Stanby, Inc. さらなる困ったこと 12
13. © Stanby, Inc. さらなる困ったこと 13
14. © Stanby, Inc. さらなる困ったこと 14
15. © Stanby, Inc. さらなる困ったこと 15 1つずつ確認して 削除するのがツラい！！
16. © Stanby, Inc. 問題は2つ • 目印の残し方（範囲指定）がイケてない • １つずつ確認して削除するのが大変　　 16
17. © Stanby, Inc. ① JSDocで範囲の問題を解決する！ 17
18. © Stanby, Inc. コメントアウトの代わりにJSDocを使う 18
19. © Stanby, Inc. コメントアウトの代わりにJSDocを使う 範囲の概念がなくなり、これらの問題は解決！！ ✅ 範囲指定を間違えてしまう ✅ 書きたい順序でかけない ✅ 開始/終了コメントを書き忘れる 19 JSDocを使って対象を指定する
20. © Stanby, Inc. 問題は2つ • 目印の残し方（範囲指定）がイケてない • １つずつ確認して削除するのが大変　　 20
21. © Stanby, Inc. ② ASTを活用して自動化する！ 21
22. © Stanby, Inc. コメントアウトとJSDocの違い 22 JSDocはノードに紐づく
23. © Stanby, Inc. 構文解析して対象のノードを削除する 23
24. © Stanby, Inc. 構文解析して対象のノードを削除する 24 JSDocのタグを取得し 対象であればノードを削除する 1つずつノードを見ていく中で
25. © Stanby, Inc. これまでは コメントアウトを使って範囲を示し 目視で手動で消してましたが 😢 25
26. © Stanby, Inc. これからは JSDocを使って対象を指定し CLIで自動で消せるようになりました 🎉 26
27. © Stanby, Inc. 今後の展望 条件分岐を含むような複雑なケースに対応できていない…😢 コマンドを実行するだけで 不要なコードをすべて削除できるようにしたい！💪 27