@potato4d が @kazuma0129 に、 TypeScript プロジェクトの dead code を検知・削除できる ts-prune について話を聞いてみました
@potato4d
こんにちは、 UIT の potato4dです。ユーザーインターフェースと、テクノロジーを愛する開発者のための Weekly Podcast、 UIT INSIDE。今週も始めていきたいと思います。 今回はですね、大橋さんをゲストにお呼びして、ts-prune というライブラリと言いますか、 CLI と言いますか。について話を詳しく聞きたいなと思っております。
@potato4d
本日はよろしくお願いいたします。
@kazuma0129
よろしくお願いします。
@potato4d
今回、大橋さんが UIT INSIDE 初出演かなと思いますので、簡単に自己紹介をお願いしてもよろしいでしょうか。
@kazuma0129
はい、 大橋と申します。僕は兼務しておりまして、今本務の方が UIT 4室の Dev.2 チームで、兼務の方で UIT Dev.9 チームになっています。担当案件が
@kazuma0129
Dev.2 チームの方は、 LIFF SDK と LIFF の開発を担当しています。 Dev.9 チームの方では、@potato4d さんと一緒に LINE スキマニのウェブフロントエンドの開発をしています。
@potato4d
ありがとうございます。今回は LINE スキマにで利用しているツールについて話してもらえるというところですかね。よろしくお願いいたします。
@kazuma0129
よろしくお願いします。
@potato4d
それでは、早速 本題に入っていきたいなと思うんですけど、今回テーマになっている ts-prune という CLI ツールについて、簡単にご紹介いただいてもいいですか。
@kazuma0129
はい、そんな難しいものではなくて、TypeScriptの プロジェクト内で、モジュール内で関数とか変数だったり、 モジュールが export されてるけど、外部から参照されていない関数とか、変数をあぶり出してくれるっていうCLIツールに
@kazuma0129
なってます。はい、
@potato4d
あれですね、結構未使用な関数とか変数だけだったら、 ESLint とかで検知できるけれども、なかなか import/export ってなるとできないので、その辺りまで固定してくれるツールっていう感じですか。
@kazuma0129
はい、そうですね、
@potato4d
これはもう npm パッケージでインストールして、はい、そのまま使えるっていう認識でいいですかね。
@kazuma0129
はい、すぐ使えます。
@potato4d
なるほど、名前の通り、 TS プロジェクト限定という感じなんですかね。
@kazuma0129
そうですね、内部でTypeScriptのコード解析してるみたいなので、TypeScript だけだと思います。
@potato4d
なるほど。 TS でのインポート情報とかから、はい、TS ベースで動かしてるので、 TS プロジェクト必須っていう風な感じなんですね。結構最近だとtsのプロジェクトがもうスタンダードかなと思うんで、そんなにts限定でも困らないかなっていう感じはします。
@kazuma0129
そうですね。
@potato4d
この ts-prune についてなんですけど、そもそもこれを探し出したきっかけというか、使ってみようと思った経緯はどういったところにあるんですか。
@kazuma0129
そうですね、これ隙間にに関わり始めて、最近大きなプロジェクトが進行中なんですけれども、その中で共通化できそうなコードとかがあれば、共通化。その都度見つけたらしていきましょうね。という進め方をしていて、僕入って3ヶ月くらいなんですけど、初めてコードを俯瞰して見る機会が増えた中で、
@kazuma0129
「これって使ってないんじゃね。」っていうコードが結構あったりしたんですね。それがどこでどういう風に使えてるかとか、なんか結構わからなかったりするので、手軽にワンショットで dead code を網羅してくれるツールがあるんじゃないかなと思って探したらあったって感じです。
@potato4d
初めはリファクタリングしようと思って、やり始めて、実際、 dead code っぽいものがあるけど、本当に dead code かわからなくて。できれば、機械的に置き換えてしまいたいっていうところから始まったっていうところですね。結構どのプロジェクトでも、こういう話はよく上がるなと思いますね。実は私も dead code 削除したいなと思ったことあったんですけど。その時そんなにきっちり調べるというか、改めて機械的にやるとか探してるわけでもなくて、なんかそういうのしたいなと
@potato4d
思ってそのままみたいなものがあったんで。このツールの話聞いた時にはすごい便利だなと。
@potato4d
どこで見つけてきたんですか。ts-prune は。
@kazuma0129
えっと、海外の技術ブログみたいなのってたら、見つかりました。 確か、ググったキーワード的には、『TypeScript dead code』みたいに雑に調べて。
@kazuma0129
たまたまですね。
@potato4d
もうなんかこう。実際 GitHub とか見てみると、Star も結構ついてますし、ダウンロードもかなりされてるんで。グローバルだとよく使われてるツールみたいですね。
@kazuma0129
はい、そうですね、
@potato4d
私も知らなかったんで、ただこれはすごい。
@kazuma0129
助かりましたね。
@potato4d
これでできれば、あの export だけしてるコードを全部消せると、1番嬉しいっていうところ。はい、
@potato4d
実際に使ってみてどうでした。
@kazuma0129
そうですね、使ってみてまでもやりたいことは、あのワンショットでできてたので、そこは あの問題なくできたと思います。ただ、ちょっと細かいところとか気になったのは、 なんか除外するファイルとか、ディレクトリーのイメージ的に指定するなんかが欲しいなみたいな思ったりしましたね。
@kazuma0129
例えば、ああ、インスasリントだとインスリントイグノアみたいなやつ。
@potato4d
はいはい、はい、はいはい
@kazuma0129
でちょっと調べたんですが、 ts-prune ーにもなんかそれが一応ある。じゃあるみたいなんですが、 正規表現のワンショットで除外してくださいみたいな感じだったので、ああ、はい
@potato4d
あ、なんかあれですね。グロムみたいな簡単な形式でまとめて指定するのはできないみたいな
@kazuma0129
そうです。そうですはいとか、あと、リードビに記載されてる分とかだけ言うと、もうちょっとなんか、 コードに除外したいんだったら、なんかグレップとかにして、パイプして繋げてくれみたいな感じだった。はい、 なんか、あんまり提供されているインターフェイスはそんなに多くないかなっていう感じでした。
@potato4d
ああ、はい、なるほど、なるほど、 ま、別に他のツールと組み合わせるとできなくもないけれども。ま単体としては、結構シンプルな作りになっているっていう風な感じなんです。うん、そうですね、なるほど、 あ、確かに今ちょっとリードミン見てますけど、はい、なんか複数のはい、パスをイグがしたいならどうしてま。どうしたらいいっていうのに、はい、
@potato4d
結構グレープがもう直で。
@kazuma0129
そうなんですよね、なんか、そこら辺をべっこでまとめたいよねみたいな思いますね
@potato4d
ああ、確かに確かにはい、まあ、ただ目的が達成されたって感じなん
参加者 3
ですね。はい、
@kazuma0129
そうですね、
@potato4d
私もこれのプルリクエストは見ましたけど、なんかプルリクだけしか見てないんで、実際tsplンがどれぐらい。こううん、うん、精度高くやってくれるか見たまでは見れてなかった ですけど、はいじゃま基本的にはいやる。そのデトコとか削除するってだけで言うと、そんなにこう不満は
@kazuma0129
うん、うん、
@potato4d
もうほぼほぼないかなっていう感じなんですかね。
@kazuma0129
そうですね、なんかカウントしてみたんですけど、
@potato4d
はいはい、
@kazuma0129
800人ファイルがえっと、tsとtsxのファイルスあって、それから37ファイル削除できました。
@potato4d
おおな
@kazuma0129
5パーセントぐらいですかね、
@potato4d
5パーセントぐらい結構削れてますね。そうです
@kazuma0129
ね、結構ありましたね、
@potato4d
思ったよりとより
@kazuma0129
声がそうですね。で、なんかその内訳みたいなのもちょっと見てみたんですけど、
@potato4d
はいはいはい、
@kazuma0129
あの月間にのプロジェクトは2年くらいあるんですかね。
@potato4d
そうですね、今2年、今今1年半ぐらいのコードベースで、その前の開発期間が1年ぐらい。確か昔にあったって聞いてるので、2年半ぐらいうん、うん、あるはずですよね。す
@kazuma0129
そうですよね、で、 なんかその最近そのリラックスを剥がそうみたいなムーベントが起こってるからか、それに、関連したリデューサーとか、アクションとかが結構使われてなかったみたいで、それを消すことができました。
@potato4d
あ、なるほど、なるほど、はい、リラックス探すってなった時に、はい、なんかあれですかね。あの、 結構表面的なうんというか、直接叩かれてるファイルは決しているけれども、そっから依存してるところは消されてないみたいなんが、はいはい、そこがうまく消えてくれたっていう感じですかね。
@potato4d
確かに、結構消しセルとか出てくるとこう消していいのかどうか。ま、一応そのファイルをいちいち見に行って、ちゃんとグレとかしたら なんか見ればするがま、ちょっと大変だし、見逃しもあるしっていう感じになるんで。はい、確かにそういうのまで一緒にできるのはいいです。
@kazuma0129
そうですね、あとだから結構1番多かったのはやっぱりおそらく下げたのであろう。試作の 名残りの梱包ネットとかがやっぱ多かったです。あ、
@potato4d
はいはいはいはいはい、今実装してみたけど、使わなかったからそのままになってるみたいな。
@kazuma0129
はいみたいな。はいで表に出てないけど、定義はされてるみたいな。はいはい、あったりしましたね。
@potato4d
確かになんかそういうのは結構プロダクトに残りがちな気がしますよね。はい、私もこの間abテストの なんか残ってる子も見つけたりしたんで、はい、なんかそういうのとかありがちなんで、はい、こう着せると嬉しいですよね。
@kazuma0129
いや、気持ちいいですね、消せたら
@potato4d
でま。そういうところに、結構tsplは今回役立ってくれたっていう感じですね。はい、
@kazuma0129
あと、話がちょっとそれちゃうんですけど、なんかなんでこう。ミシオの関数とか、変数がたくさんありそうだと かわかったのかっていう話なんですけど、
@kazuma0129
チームメンバーとかも結構してなかったやつなので、紹介しておくと、ブースコードを使ってるんですけども、そのブエコードで でで、その関数とか、変数の非参照数をちょこっと出してくれるやつがありまして。
@potato4d
ああ、なんかセッティングスを書けば、はいできるみたいな、そういう感じですかね、そう
@kazuma0129
そうです、それで、わかった節もありますね。
@potato4d
あ、こう意外と実際なんかホバーしてみたりすると、0って書いてあるのに、なんでこの口座残ってるんだろうって思った結果みたいなところ
@kazuma0129
はい、そうです。そうです、
@potato4d
それで、気づいて、あのまとめて削除していいんじゃないかっていう風なところに踏み切れた感じです。
@kazuma0129
そうですね、
@potato4d
うん、ちょっと。それの設定方法とかよければ、ショートにもえっと、載せておこうかなと思うので、皆さんよければ、ちょっともし知らない人は見てみてもらえればなと思います。 さっき、ちょっとだけ、あのイグロアとかの話とかで、なんかこういうのできると、もうちょい嬉しかったなみたいな話があったかなと思うんですけど、他にもなんかこう。今後もtsプロンとか、定期的にこう 見逃しを防ぐためにも使うことはあるかなと思うんですけど、次使う時にはこういうのもできてほしいみたいな他になんかあったりしますか。
@kazuma0129
そうです、 理想的なものとしては、はい、今ってこうプロジェクト内をえっと、操作して、 全部の参照されてないやつを抜き出すみたいな
@kazuma0129
なってると思うんですけど。これが変更を加えたコードを追加した新たに実装したコードで使われてないコードとか が生まれる可能性も多分あるので。ああ、はい、そういうのがコミットごとにチェックできたら嬉しいなとか思ったりします。
@potato4d
ああ、なんかあれですかね。ハスキートリントステージのところには、収まるようなシステムで使えると嬉しいってやつですね。
@kazuma0129
そうですね、そうなってくるとは、継続的に その使われてないコードを生み出さないようにできるんじゃないかとは思います。
@potato4d
確かに確かになんかあれですもんね。なんかそうすれば、ciにも組みもいるというか、今だと定期的にこれを実行するって形になっちゃうかなと思うんですけど。うん、なんかそうじゃないでそうですもんね。
@kazuma0129
そうですね、確かにそれはできると嬉しいかもしれないですね。
@potato4d
まあではグレップとかまた頼らなくても、もう少しこう。石表現以外の。はい、なんか グロブであったりっていうので、こう指定できたりっていうのと、まあ、こう変更対象だけ見地みたいなのができるとま、もっとこう便利に使えそうかなっていうところですかね。
@kazuma0129
はい、そう思います。
@potato4d
ts-prune については、こんな感じですかね。はい、ご紹介ありがとうございますはい、ありがとうございました。
@potato4d
というわけで、今回は大橋さんにtsploについてご紹介いただきました。 lineのフロンテント組織 UIT では、このようなフロンテンドに関する議論やディスカッションを日々行っています。 UIT insideで公開しているエピソードの中にはですね
@potato4d
社内の勉強会などなどから始まった企画もありますので、今後もどんどん社内の情報を発信していければなと考えております。 また、このポートキャストを聞いて、LINEに興味を持っていただいた方はぜひぜひ Show Note の最下部にある求人のへのリンクの方から、カジュアル面談の申し込みなどしていただければと思います。
@potato4d
というわけで、今回は ts-prune について、大橋さんに紹介いただきました。ありがとうございました。
@kazuma0129
ありがとうございました。
