音声書き起こし
1. オープニング
@spring_raining
こんにちは UITの玉田です。ユーザーインターフェースとテクノロジーを愛する 開発者のためのポッドキャスト UIT INSIDE 今回もやっていこうと思います。
@spring_raining
今回はですね 久しぶりにアランさんをお呼びしまして、これはなんていうのがいいんだ E18E エコシステムパフォーマンスの略なんですけれども、これの取り組みについて最近盛り上がっていると聞きましたので ちょっと聞いてみたいと思います。それではよろしくお願いします。
@AlanGDavalos
よろしくお願いします
@spring_raining
ではですね 本題に入る前に アランさん何回か出演されたと思うんですけども、久しぶりだということなんで 最近どういったことやってるかとか聞いてもいいでしょうか。
2. ゲスト紹介
@AlanGDavalos
はい そうですね 多分聞いてる皆さんにとって初めましてになると思うんですけど、私はダオルサランといいまして、LINEヤフーではPP開発グループっていうちょっと聞いてもわからないと思う組織に所属しているんですけど、
@AlanGDavalos
主にいろいろなところの開発支援をする組織に所属していて、そこで様々なプロジェクトに携わってもらっていて、最近だとそこら辺のマネージャー職になってて、こういうインサイドに出てる機会が少なくなったのもそうなんですけど、でもそこでいろいろな社内社外向けのプロジェクトの開発支援を行ってます。よろしくお願いします。
@spring_raining
よろしくお願いします。そうですね 以前出た時からは結構いろいろお互い変わってるところもあるかなと思うんですけど、はい 今回はいろいろと聞いてみようかなと思います。
@spring_raining
早速なんですけれども、ちょっと私もアランさんから話を聞いた時は初めて聞いたので、ちょっと軽く調べながら調べたりはしていたんですけれども、このE18E エコシステムパフォーマンスのことについて、ちょっとお伺いしてもいいでしょうか。
3. e18eについて
@AlanGDavalos
はい そうですね。私もそこまで詳しいってほどでもないんですけど、出る範囲でお話すると、結構これちょっと実はちょっと言うと、ここに関わってるメンバーの何人かが私が何らかの形でコンポーネンツのツールとかを作成していたことで面識がある人が何人かいて、そこの人たちがちょっとSNSでいろいろ話してるって見てのきっかけで知った話なんですけど
@AlanGDavalos
結構数年前、1,2年くらい前からかな、にある組織といえばコミュニティというか、名前の通りJSのエコシステム全体のパフォーマンスを良くしようという思想の下で集まってる人たちの活動のための組織で、本当に様々な観点でエコシステムのパフォーマンスを良くしようとしている組織であって
@AlanGDavalos
多分いろいろ深掘りすると思うんですけど3つの思想の下でエコシステムを良くしようとしていて、1つはクリーンアップ、スピードアップ、レベルアップという3つなんですけど、それぞれ深掘り後でするんですけど、そういう余分なところを削除したり、全体としてもっとこうした方が速度が上がるとか、もっとモダンなものを使うようにするとか、そこら辺が中心になってるので、私としてはすごく同意できるような思想の下なので結構影から応援してる人です。
@spring_raining
なるほどなるほど。私とはい、私も同じような認識でした。
@spring_raining
そうですよね、アランさんはそうですね、元々そういうパフォーマンスとかバンドルサイズとかをとても注意深く見ている方でしたので、多分すごく興味のあるところだろうなとは思ってました。
@AlanGDavalos
まさに結構なんだろう、このコミュニティができる前に結構なんかこういう人たちもそうなんですけど、他の人も結構なんかこういう仕事をしてるんですけどもそういう思想の下で動こうとしてたけど、なかなかその同じ旗掲げる旗がなかったから、なんかちょっと無視されがちというか、なんか本当に一人相撲みたいな感じでやることは分かったんですけど
@AlanGDavalos
コミュニティができたおかげで、結構本当に最近smsで公式アカウントフォローしてるんですけど、なんだろうすごい毎月毎週のようになんかそのこのパッケージですごい良くなったみたいな通知を見て、心が癒されます。
@spring_raining
心が癒されるんですね、そうですよね。
@AlanGDavalos
あのはいなんか目的のところにも書いてあったのかなと思うんですけれども、そのあれですね結構なんですか、そういう取り組み自体をやっている人はたくさんいるけれども、それぞれが結構バラバラだったこれまでは、のがこのコミュニティを通してこうなんていうんですかね
@spring_raining
知識というかいろいろな取り組みみたいなのが集まってくるっていうのが、このエコシステムパフォーマンスの取り組みの中でどんどん集まってきてるっていう状況で
@AlanGDavalos
まさに今一番盛り上がってる時期と言ってもいいぐらいななんだろう、組織としての動き方っていうかが固まりつつあって、結構出してる成果も上がってるっぽいので、もうちょっと最近だと結構、ちょっと事例に話す前になんかもうちょっと何をしてるか話した方がいい気がしますね。
@spring_raining
そうですねはい。そしたらあれですね、そのさっき話したその3つの主要な取り組みのところとかも含めてこれからじゃあ深掘りしておこうかなと思います。
@spring_raining
最初に紹介された通りこのエコシステムパフォーマンスの取り組みは、クリーンアップ、スピードアップ、レベルアップの3つ取り組みがあるんですけれども、じゃあどうしましょうかね、順番に見ていこうかなと思います。
4. Cleanup
@spring_raining
一つ目なんですけれどもクリーンアップですね。この取り組みはエコシステムのライブラリの中で、依存色々と開発していく上でこれまでだと結構依存ライブラリがたくさん含まれていたり、そういったあまり良くないパフォーマンス上良くないライブラリとかがあったりしたものを見直していこうという取り組みで、例えばもうメンテナンスされていないライブラリだけれどもまだ使われていたりとか、あとはもう推奨されていないライブラリみたいなものを洗い出していって、よりモダンなライブラリをみんなで使っていこうというのがこのクリーンアップという取り組みの中の取り組みの一つです。
@spring_raining
で、ecosystem-issuesというリポジトリがGitHubにあるんですけれども、多分その中のイシューでそれぞれのメンバーが改善していける取り組みについて紹介しているという感じですね。
@AlanGDavalos
そうですねおっしゃる通りで、結構ecosystem-issuesというセントラルのリポジトリを見ながら、それぞれのツールの方にちょっとそっちの方でイシューを作ったりメンテナンスとやりとりをして、場合によってプルリクエストすら出してちょっと本当に丸ごとサイクル一つ完結する場合もありえど、イシューだけ作って実際メンテナーで余力があってそっちの方で対応するみたいなケースもあったりして、
@AlanGDavalos
本当に多分イシューごとに状況が違ってたりするんですけど、多分このクリーンアップはこの3つの中で一番多分重めに今活動されてる部分の一つだなと思ってて、例えば最近だとCloudflareのWranglerとかはディペンデンシーを半分に削減したり、Eleventyとかでrimrafを削除するだけで4MBぐらい削除したり、PostCSSでディペンデンシーの25割、25%か25%ぐらい削減したり
@AlanGDavalos
本当にそういう事例ばかり最近見てて、クリーンアップが一番本当に成果が見やすい活動の一つな気がしてて、本当にさっき玉田さんが言ったように動くから放置されがちなところをあえてもっと軽量かつ速度の良い、もしくはモダンな技術を使う方に移動することで、よりみんなが同じような挙動だけど、本当に全体として良いようになるような仕組みが多いかなと思っててすごい良いなと思ってます。
@spring_raining
そうですね、私も今ちょうど見ていてすごくいっぱいありますよね。オープンされてるイシューだけで今の時点で103件があって
@AlanGDavalos
逆に閉じてるイシューとか見てるとそれぐらい今56ぐらいクローズされてて、そこら辺で結構すでに色々なところで終わってるっていうのは結構本当に良いなと思います。それしか言葉が出ないけど
@spring_raining
なるほど。実際の取り組みとしては、イシューの内容を見てみると、例えばあるライブラリーがあるライブラリーの中で古いライブラリーが使われていた場合はそのライブラリーに対して新しくするプリクエストを作って、それがマージされたらクローズっていうのを繰り返してる感じで、そういった感じで、なるほど、別に特に特定のライブラリーとかではなくてとりあえずエコシステムの中でよく使われているライブラリーをよくしていこうという感じなんですね。そうですね。結構色々なことがありますね。
@AlanGDavalos
そういうのが結構気に入ってる理由の一つで、なんかそういうなんだろう、本当によく使われるものだったらとりあえず何とかしようという姿勢が結構強くて、要はなんかよく使われるイコールダウンロード数が多い、イコールその分1メガでも削除できれば、100万以上のダウンロード数のものだったらその分数テラバイトになるっていう話になると思うので、それはすごい効果的ななと思うと思うんですよね。
@AlanGDavalos
中にもまあさっき結構大きめなプロジェクトの話してたんですけど、その他にもなんかViteやらJestやら本当になんかまさまな、なんだろう、関連性が低い、お互いの関連性が低いライブラリー同士でも結構とりあえずやってたりするんですよね。
@spring_raining
そうですね。エコシステムイシューズと関係しているのかはちょっとわからないんですけども、そのエコシステムパフォーマンスのブログの記事の中でViteに対する取り組みとかもあって、最新のブログの中でそうですね、Viteで今確かViteってディペンデンシーを全部バンドルして配布する方式になっていると思うんですけども、それもなんかこう今だともっといい方法があるので段階的にやめていきましょうみたいな提案とかが書いてあったりするんですよね。
@AlanGDavalos
そうなんですよ、結構いろいろな観点なんですよね。ただ単にリプレイスするだけじゃなくて、本当にこれクリーナップ以外の部分にもちょっと触るんですけど、なんか本当にいろいろとよくしよう、なんかもっとその本当にエコシステム全体でもっといろいろとベストプラクティスをよくしようっていう動きが強くて、
@AlanGDavalos
結構なんか最近だとNode.jsでCommon.jsからESMをリクエイアするようになったじゃないですか。あれも多分一部このコミュニティにも所属している人が関わってたような気がしてて、かつあれ自体の実装だけじゃなくてなんか本当になんかその推奨っていうか、今時だと多分Node.jsのパッケージでも多分もうESMで出さない理由は特にない、なくなったっていうのは現状で、でこのクリーナップの部分でもなんかそういうCommon.jsをある程度なくそうっていう動きも多分中にもあると思うんですよ。
@AlanGDavalos
要はその多分Node.jsでも普通にESMを使えるようになったし、Common.jsのパッケージからもESMを使えるようになったのでもうとりあえずどこでも特にずっとCommon.jsのままでメンテナンスされないパッケージとかをもっと軽量のモダンなESMのやつに置き換えるみたいなものも結構大きいかなと思います。
@spring_raining
そうですよね。単純にそのライブラリが重いっていうのを軽くしていこうっていうところもそうですし、さっきのそのCommon.jsからESモジュールのライブラリに変えていくっていうところとかも多分Viteももともと開発を始めた頃は全部バンドルするっていうのが一番良かったんだけれども、もうそういう状況が変わってきてっていもうそろそろ変えていきましょうっていうのを提案していくっていうのがこのecosystem-issuesのすごい意義のあるところだなと思いました。
@AlanGDavalos
そうですね。あとは本当にここで大事なのは無理やりはしてないですよね。大体なんかとりあえず提案してプリクエストまで出すこともあるんですけど、要はなんか拒否されたら拒否されたでそこまで強く押さないというか結構実際のメンテナーの意向をリスペクトするというか、とりあえずこういうことができるよってまずアプローチして、賛成されたらとりあえず誰がどう対応するか見てみるとか、結構そういうペースとしてあったりしますね。
@spring_raining
そうですよねプロジェクトによってそのあたりはいろいろと変わってくると思うので、それは大事だと思います。
@AlanGDavalos
ライブラリの提供側からの観点で見ると、そうですよねその提案するっていうところも大事ですし、このecosystem-issuesの中であと実際にプリクエストを出すまでではないけれども、こういう最近のベストプラクティスはこういったものがあるんだよっていうのを知るためにたまにこのIssue一覧を見て、知識をアップデートするっていうのにもすごく良さそうだなと思いました。
@spring_raining
これがクリーンアップの取り組みになりますね。では他の取り組みについて紹介しようかなと思います。
@spring_raining
2つ目ですね2つ目がスピードアップ、高速化の取り組みです。これはですね軽く公式のウェブページだとあんまり情報がなさそうだったんですけど、要するに多分やっていることはこのエコシステムの中でパフォーマンス上あまり良くないコードの部分とかを特定していこうみたいな取り組みだと読み取りました。
5. Speedup
@spring_raining
例えばすべてのライブラリの高速化っていうのはなかなか難しいので、できるだけよく使われているライブラリの中で、しかも頻繁に実行される部分みたいなのを改善していこうという取り組みですね。
@spring_raining
ちょっとあんまり具体的にプルリクエストを作るみたいなのは見つけられなかったんですけれども、あとウェブページだとあれですねeslintやBiomeのLintルールでこういったオプションを有効化しましょうみたいな提案であったりとか、あとは簡単なコーディングチップスが持っていて、この辺りは一般論として私たちもすごく役に立ちそうだなというところが書いてありますね。
@AlanGDavalos
そうですね。なんかこのスピードアップの部分は結構多分すべての要素はお互いに関連はあったりするので、さっき玉田さんが言ったようにこのスピードアップの部分で今若干他より内容が短いけど、特にちょっと面白いと思ったのはLint周りに書いてるところとかにまさにクリーナップと関連する部分があって、要はそういう古くなってるパッケージとか遅いというかリプレケートされたパッケージとかがあればLintで出してくれるので、
@AlanGDavalos
要はもちろんこの人たちはエコシステム自体のライブラリを、計量している速度を上げてるっていうのはあるんですけど、これはどちらかと言えば一開発者なんかそういうOSSのメンテナーじゃなくて、一開発者としてこれを見て自分のアプリの中でもちょっとこういうことをあんまりやらないようにするための動きかなと私が受け取ってます。
@spring_raining
そうですね。この辺りはすぐに私たちも取り込めそうなところもあったり、このNo Re-Export AllのルールとかNo Barrel Fileのルールとかやりがちというか、そうですね。むしろ昔は推奨すらされてた気がするんですけど
@AlanGDavalos
実はちょうど一緒にやってるプロジェクトでそういう話を直近してましたね。玉田さんと。Barrel Fileをなくしたいなってちょっと最近話してましたね。
@spring_raining
そうですよね。なんかあれですね、なんかここら辺結構ツリーシェイキングされるのかなと思いきやあんまりですよね。
@AlanGDavalos
あんまり良くないので、かつツリーシェイキングもそうなんですけど、実際もう使われてないのにずっとコードとして残るものの検知がしにくくなったりするので、そういう意味でもあんまり良くないですね。
@spring_raining
それはそうかもしれないですね。すごい機械的な解析というよりは、どちらかというと人間が読んだ時に使われてないコードを見つけるのが難しそうな感じはしますね確かに。
@AlanGDavalos
本当にこういうBarrel Fileをやめましょうっていう話とかも本当にいいなと思いました。
@spring_raining
個人的にはこのスピードアップの項目が充実してくれるとすごい嬉しいですね。すごいコーディング規約ではないですけど、ベストプラクティスみたいなのが知れる場が増えると嬉しいなと思いました。
@AlanGDavalos
多分今クリーンアップの部分ですごい力を入れてる分では多分影響範囲が広いので、そういう一開発者としてはこういうところがもうちょっと充実したら、自分のプロジェクトでそれを回避しやすくなるかなと思うのでそこら辺は今後期待って感じですね。
@spring_raining
そうですねここは期待したいです。
Speaker_Unknown
多分Dependのやつだけでも結構既にクリーンアップに関連性が高いので、そこら辺で興味持ってくれた人がいたらそれをeslintに入れて推奨に従うということは一つの方法だと思うんですけど、他にも多分できることは多いけどまだまだそこまでやり方は固まりきれてないかなと思います。
@spring_raining
そうですね。この辺りはもしかしたらクリーンアップの色々なライブラリを見ていて、あまり良くないところとかが分かってきたら今後充実してくるのかもしれないですね。
@AlanGDavalos
だから本当に今後期待です
6. Levelup
@spring_raining
まずはこの3つ目の紹介ですね。これはレベルアップですね、これはですね、ちょっとクリーンアップとだいぶ近いのかなと思うんですけれども、整理した結果これまでより新しいライブラリを使っていこうという提案という感じで書いてあって、多分ほぼクリーンアップと同じなんですけれども、これはどちらかというと今あるライブラリの整理というよりは新しいライブラリの提案という感じですかね。
@spring_raining
ウェブページの例で言いますと、そういう新しいより早くてより小さいいろいろな汎用的なライブラリが最近だとあるというのが紹介されていて、そうですね私この中で一番知ってたのはunjsの取り組みなんですけども、それ以外にもTinylibsとかes-toolingというものが紹介されていて、こういったものもあるんだなという気づきがありました。
@AlanGDavalos
そうですね。なんかさっき言ってたその全部お互いに関連してるところはまさにここが一つで、クリーンアップはどちらかと言えばそういうシステムに対して推奨する動き自体の話をするとして、このレベルアップはクリーンアップに代理、例えばこのライブラリに代理してこういうもっと小さいモダンなやつを使いますよの例として使われることは多いですよね。
@AlanGDavalos
例えば最近のイシューだとTinylibsのtinyglobbyだったかな、そういうライブラリがあって、そういうやつをもっと要はこういう小さめなライブラリをメンテナーに推奨して、これで代理すればこれぐらい小さくなるよっていう風に使うためになってるかなと思います。
@AlanGDavalos
私も玉田さんと同じくもともとはunjsは知ってたけど、他はあんまり知らなかったけど、実際このes-toolingとかはこのエコシステムパフォーマンスの人たちが作ってるツールのレポジトリですね。結構例えばそういう自動的に古いパッケージを自動的にもっといいやり方、もしくはいいパッケージに変えてくれるcodemodなんかを自動的にやってくれるスクリプトを出してたり、他にもいろいろとずっとそういったツールのまとめの場所として使われてるっぽいですね。
@spring_raining
例を出せたら嬉しいんですけど、そうですね、ちょうど今私も見てるところで、es-toolingとかはまさしくそうですね。unjsはすごい目的がいろいろと分かりやすいそのライブラリの中で使うんだろうなみたいなコンポーネント群なんですけど、es-toolingはどちらかというとツールのためのツールというか、例えばnpmgraphこれはあれですかね、Forkみたいですけど、そういうディペンデンシーグラフを作るツール、それは確かに大事そう。
@AlanGDavalos
そうですね、さっき言ってた例えばeslintのディペンデンのプラグインはまさにこの組織の株になってたりしてます。
@spring_raining
なるほどeslintプラグインが
@AlanGDavalos
そうなので本当にいいシステムパフォーマンスのいろいろなツールのまとめの場所としてあるけど、中に入ってるものは結構バラバラですね。
@AlanGDavalos
Tinylibsの方はどちらかというと若干unjsと近い形だけど、もっと本当になんだろう、メジャーなライブラリの軽量版っていう立ち位置だと思うんですよね。
@spring_raining
いろいろありますね。picospinner、これとかは同じようなライブラリがいっぱいあってどれ使うか迷いそうですけれども、こういう推奨されるものがあるとちょっと使いやすいですね。
@AlanGDavalos
実際多分小さそうだなと思うんですよね。参考までに違うと見てるんですけど、すごく小さくよく使うAndrophoriaに上手くまとめられなかったのでちょっとあんまり参考になるデータを出せなかったけど、でも相当小さいだろうとは思いますね。
@spring_raining
はい、そうですね。これを見てて思ったのは、こういうライブラリの選定ってすごく大変だなというのは改めて気づきましたね。結構本当にこういう、特にCLIとかそういうNode.js環境で動く何らかのツールとかライブラリとかを作っていく上で、こういう例えばファイルをグローブするためのライブラリとか、Execをうまくラップして外部コマンドを簡単に使えるようにするためのライブラリとか、そういう細かい細かいライブラリがすごいいっぱいあって、
@spring_raining
大体あれなんですよね。そういうなんか古いけれども有名だけれども古いライブラリからのコードを見て、ここのライブラリでこれを使ってるからこれを使おうみたいなことになりがちなんですけれども、こういうなんていうんですかねちゃんとメンテナンスというか、メンテナンスされて新しいライブラリっていうのが一覧化されていると嬉しいなというのはすごく思いますね。
@AlanGDavalos
そうなんですよ。だから本当になんかこの動きのいいところはまさにそこだと思ってて、結構これ一人で追うのがすごい大変なので、なんか何らかの形でお目伸ばしをとしてもそうなんですけど、まさっきのeslintのプラグインやらcodemodやらは結構今やろうと思えばできるじゃないですかね。とりあえずそこだけ取り入れて、検知できたところを対応するぐらいは割と今やろうと思えばできるものなので、本当にこれ聞いてる皆さんにとって一つだけ持っていけるところがあれば、まさにそこでとりあえずLintのプラグインだけ入れて、怒られたところを対応するだけで結構多分プロジェクトがその分軽量化するので、特に何らかのOSSをメンテナンスしている人がいたら、別に英語分からなくてもいいので、自分自身のライブラリにこういう動きをしてくれると多分エコシステム全体としてはいろいろと良くなるかなと思います。
@spring_raining
そうですね。今のところは多分一番メリットなのはそういうOSSのライブラリを作っている人向けっていうところはあるけれども、そうですね、こういった取り組みが徐々に広まっていくことで例えばWebアプリケーションを開発している人とかも多分どんどん恩恵があるものだと思うので広まっていってほしいと思いますね。個人的にはこのTinylibsすごい良さそうだなと思ったので今後使ってみようかなと思います。
@AlanGDavalos
そうですね。これをきっかけにunjsを初めて知った人にも、ぜひお勧めしたいです。
@spring_raining
unjsも結構数は多いんですけれども、多分使いたいと思うようなツールとかは見つけられると思うので、
@AlanGDavalos
ナイトロとかニトロどう読むかあれなんですけど、サーバーをいろいろまとめてくれるようなやつとかはすごい良さそうですね。
@spring_raining
そうですね。unjs自体はすごい正確なのか分からないですけど、Nuxt.jsのパーツをより分割したものというイメージであったんですけど、最近だとその枠から超えて本当にいろいろありますね。自分も全然知らないやつとかいっぱい増えてる気がします。
@AlanGDavalos
そうですね。実際今見てたら78もデポジトリがあるらしくて、多いのは多いんですけど、一般的にサーバーのものだったり、特定の画像だったり、データベースのアクセスだったり、そういったいろいろなツールがあるので結構いいなと思います。
@spring_raining
そうですね。はい、ありがとうございます。という感じで、エコシステムパフォーマンスの取り組みについて紹介しました。
@spring_raining
これはコミュニティベースの活動ということで、私もつい最近参加したんですけども、Discordサーバもあるということなので、英語でチャットしたければ、見るだけでも全然いろいろと活発に会話されていたのでぜひそちらも見てみてください。
@spring_raining
ではエンディングに移ろうかなと思います。
7. クロージング
@spring_raining
というわけで、今回はエコシステムパフォーマンスの取り組みについて話していきました。LINEヤフーのフロントエンド組織では、フロントエンドに関する議論や意見交換を日々行なっていますので、今後もLINEヤフーに関するフロントエンドの情報交換を行って いきますのでぜひ聞いてみてください。また、このポッドキャストのご意見ご感想につい ても受け付けておりますのでいつでも投稿していただければと思いますそれでは ありがとうございました。
@AlanGDavalos
ありがとうございました。
