Slide 1

Slide 1 text

© Stanby, Inc. TypeScript ASTとJSDocで実現する コードの自動削除 株式会社スタンバイ 川野 賢一 1 2025.05.24 TSKaigi 2025

Slide 2

Slide 2 text

© Stanby, Inc. 自己紹介 2024年1月に株式会社スタンバイに中途入社 仕事 ● 求人検索エンジン「スタンバイ」のWebフロントエンド開発 ● オウンドメディア「スタンバイplus」の開発 +α ● 日々の業務を楽に楽しくするためTypeScript製社内ツールの開発 ○ Chrome拡張機能、Slack App、GASなど TSKaigi 2024でASTの話を聞いたことをきっかけに、ASTを活用したCLI ツールも作りました!(本日のテーマです!) 2 川野 賢一

Slide 3

Slide 3 text

© Stanby, Inc. 不要になったA/Bテストのコード どうやって消してますか? 3

Slide 4

Slide 4 text

© Stanby, Inc. 我々のチームではこれまで コメントアウトを使って範囲を示し 目視で手動で消してました 4

Slide 5

Slide 5 text

© Stanby, Inc. コメントアウトを使った範囲指定のやり方 5

Slide 6

Slide 6 text

© Stanby, Inc. コメントアウトを使った範囲指定のやり方 ❌ 範囲指定を間違えてしまう ❌ 書きたい順序でかけない ❌ 開始/終了コメントを書き忘れる 6 困ったこと

Slide 7

Slide 7 text

© Stanby, Inc. コメントアウトを使う背景 7 多くの開発が並行して行われている

Slide 8

Slide 8 text

© Stanby, Inc. さらなる困ったこと 8

Slide 9

Slide 9 text

© Stanby, Inc. さらなる困ったこと 9

Slide 10

Slide 10 text

© Stanby, Inc. さらなる困ったこと 10

Slide 11

Slide 11 text

© Stanby, Inc. さらなる困ったこと 11

Slide 12

Slide 12 text

© Stanby, Inc. さらなる困ったこと 12

Slide 13

Slide 13 text

© Stanby, Inc. さらなる困ったこと 13

Slide 14

Slide 14 text

© Stanby, Inc. さらなる困ったこと 14

Slide 15

Slide 15 text

© Stanby, Inc. さらなる困ったこと 15 1つずつ確認して 削除するのがツラい!!

Slide 16

Slide 16 text

© Stanby, Inc. 問題は2つ ● 目印の残し方(範囲指定)がイケてない ● 1つずつ確認して削除するのが大変   16

Slide 17

Slide 17 text

© Stanby, Inc. ① JSDocで範囲の問題を解決する! 17

Slide 18

Slide 18 text

© Stanby, Inc. コメントアウトの代わりにJSDocを使う 18

Slide 19

Slide 19 text

© Stanby, Inc. コメントアウトの代わりにJSDocを使う 範囲の概念がなくなり、これらの問題は解決!! ✅ 範囲指定を間違えてしまう ✅ 書きたい順序でかけない ✅ 開始/終了コメントを書き忘れる 19 JSDocを使って対象を指定する

Slide 20

Slide 20 text

© Stanby, Inc. 問題は2つ ● 目印の残し方(範囲指定)がイケてない ● 1つずつ確認して削除するのが大変   20

Slide 21

Slide 21 text

© Stanby, Inc. ② ASTを活用して自動化する! 21

Slide 22

Slide 22 text

© Stanby, Inc. コメントアウトとJSDocの違い 22 JSDocはノードに紐づく

Slide 23

Slide 23 text

© Stanby, Inc. 構文解析して対象のノードを削除する 23

Slide 24

Slide 24 text

© Stanby, Inc. 構文解析して対象のノードを削除する 24 JSDocのタグを取得し 対象であればノードを削除する 1つずつノードを見ていく中で

Slide 25

Slide 25 text

© Stanby, Inc. これまでは コメントアウトを使って範囲を示し 目視で手動で消してましたが 😢 25

Slide 26

Slide 26 text

© Stanby, Inc. これからは JSDocを使って対象を指定し CLIで自動で消せるようになりました 🎉 26

Slide 27

Slide 27 text

© Stanby, Inc. 今後の展望 条件分岐を含むような複雑なケースに対応できていない…😢 コマンドを実行するだけで 不要なコードをすべて削除できるようにしたい!💪 27

Slide 28

Slide 28 text

No content