Name: エヴァン・ユー - Vue、Vite、VoidZeroとJavaScriptツールの未来 (Evan You - Vue, Vite, VoidZero and the Future of JavaScript Tooling)
Uploaded: 2024-11-13T05:19:34.000Z
Duration: 51 min 4 s

程度の副詞

The first stage of VEET really was like, let's just make things work and make it better than the status quo, but underneath there might be a lot of, you know, hacks and things we want to improve in the future.

VEETの最初の段階は、とにかく現状より良くしよう、うまくいくようにしようという感じだったが、その下にはハックや将来的に改善したいことがたくさんあるかもしれない。

そして今、それを実行する適切な時なのだ。

こんにちは、DevTools FMへようこそ。

This is a podcast about developer tools and the people who make them.

このポッドキャストは、開発者用ツールとそれを作る人々についてのポッドキャストです。

そしてこちらは私の共同司会者、ジャスティン。

We're really excited to have Evan Yu joining us again.

またエヴァン・ユーに参加してもらえることを本当にうれしく思っている。

Evan, you were with us on episode 12 back a few years ago talking about VUE and VEET.

エヴァン、君は数年前のエピソード12でVUEとVEETについて話してくれたね。

そして今、レコーディングの時点で119人になっている。

それは、それはたくさんのエピソードだ。

We've been doing it a while, but it's, it's so fantastic to have you back.

しばらくやっていたけど、君が戻ってきてくれて本当に嬉しいよ。

We are continually big fans of your work and how it shapes the ecosystem.

私たちは、あなたの仕事とそれがエコシステムを形成する方法の大ファンであり続けている。

またおしゃべりできるのがとても楽しみ。

And we're going to talk about what you're up to these days.

そして、あなたの近況について話すつもりだ。

But before we dive into that, would you like to tell our listeners a little bit more about yourself?

その前に、あなた自身についてもう少しお聞かせいただけますか？

I am, I have been an independent open source developer since 2016.

私は、2016年から独立したオープンソース開発者です。

実はまだVUEで働いているんだ。

And just recently we started a company called Void Zero and focus a bit deep, even deeper that goes into, you know, the full JavaScript tool chain, starting from servers, no, no, no, starting from parsers to linters, formatters, bundlers, transformers, everything that supports higher level tooling.

そしてつい最近、私たちはVoid Zeroという会社を立ち上げ、サーバーから始まり、いやいや、パーサーから始まり、ライナー、フォーマッター、バンドラー、トランスフォーマーなど、より高度なツーリングをサポートするすべてのJavaScriptツール・チェーンに、少し深く、さらに深くフォーカスしています。

So the bundler we're building called Rodan is going to support VEET in the future.

だから、僕らが作っているロダンというバンドラーは、将来的にVEETをサポートする予定なんだ。

And VEET is now supporting a lot of other frameworks.

そしてVEETは現在、他の多くのフレームワークをサポートしている。

So essentially we're trying to build this vertical unified tool chain that can support all the frameworks that depend on VEET today and hopefully make everyone's development experience better.

そのため、基本的に私たちは、現在VEETに依存しているすべてのフレームワークをサポートできる垂直統合ツールチェーンを構築しようとしています。

So back, back on that old episode, a long ago, you had actually just released VEET.

昔、VEETがリリースされたばかりでしたね。

And since then it's really become like a pillar of the industry.

それ以来、業界の柱のような存在になっている。

Like many a meta framework is based on it now.

現在、多くのメタ・フレームワークがそれに基づいている。

And it's like the starter pack for everything.

すべてのスターターパックのようなものだ。

What was the journey from getting, going from VEET to, oh, we actually have to rebuild most of what's below the surface level and form a company around that?

VEETの設立から、表面レベル以下のほとんどのものを再構築し、それを中心に会社を設立するまでの道のりはどのようなものだったのでしょうか？

I think the idea started at one point because when I first started VEET, I was just doing a prototype, honestly, right?

というのも、VEETを始めた当初は、正直なところ、プロトタイプを作っただけだったんだ。

So I pretty much just took whatever that's available out there and try to fulfill the goals.

だから僕は、そこにあるものは何でも取り入れて、目標を達成しようとしたんだ。

And there were a lot of trade-offs and nowadays I consider them kind of hacks because I didn't have the, you know, the bandwidth to do all the things myself.

そして、多くのトレードオフがあり、今となってはハックのようなものだと考えている。

So I have to use what other people have built.

だから、他の人が作ったものを使わなければならない。

And that's, I think that's typically what we've been doing in the Java ecosystem because we feel like, okay, like we don't want to necessarily reinvent the wheels.

Javaのエコシステムでは、車輪を再発明する必要はないと考えているからだ。

Why not just use things people have already done?

すでに人々がやっていることを使えばいいじゃないか。

So in the beginning we were, I was using Rollup because I've always liked Rollup's

当初はロールアップを使っていた。

API and then we ran into performance issues because, so the first step of VEET was to have a native ESM dev server, right?

VEETの最初のステップは、ネイティブのESM開発サーバーを持つことでしたね。

簡単なことのように聞こえる。

And then we use Rollup to try to handle the dependencies because some dependencies are in CJS.

そして、依存関係がCJSにあるため、ロールアップを使って依存関係を処理しようとする。

We want to convert them to ESM so they can load in the browser.

それらをESMに変換し、ブラウザで読み込めるようにしたい。

But Rollup was actually quite slow if you have large dependencies.

しかし、Rollupは依存関係が大きい場合、実際にはかなり遅かった。

And so we started using ESBuild for that purpose.

そのためにESBuildを使い始めた。

And then we tried using ESBuild for production bundling and it was not satisfactory because it has no control over how the chunks are split.

そして、ESBuildを本番のバンドルに使ってみたが、チャンクの分割方法を制御できないため、満足できるものではなかった。

And the way ESBuild splits code is just a bit counterintuitive if you're building applications.

また、ESBuildがコードを分割する方法は、アプリケーションをビルドしている場合、ちょっと直感に反する。

So we're like, okay, now we need to think about, okay, we use ESBuild for development and pre-bundling, but we use Rollup for production bundling.

開発用とプリバンドル用にはESBuildを使い、本番用バンドルにはRollupを使う。

And we kind of smoothed over the surface to make them work kind of the same way.

そして、同じように機能するように表面を滑らかにしたんだ。

And later on when people started building real applications with VEET, for example, when people are using VEET with React and previously everyone was using Babel because Babel was supported.

その後、人々がVEETを使って実際のアプリケーションを作り始めたとき、例えば、人々がReactでVEETを使っているとき、以前はBabelがサポートされていたので、誰もがBabelを使っていた。

Interestingly, if you use VEET by default and you write JSX in TypeScript, they are transformed using ESBuild, which is quite fast.

興味深いことに、デフォルトでVEETを使い、TypeScriptでJSXを書くと、ESBuildを使って変換される。

But the moment you want hot module replacement for React, now you need to use Babel because ESBuild does not support hot module replacement transforms.

しかし、Reactのホットモジュール置換をしたい場合、ESBuildはホットモジュール置換トランスフォームをサポートしていないため、Babelを使用する必要がある。

So then Babel, again, made everything slow.

だからバベルは、またしてもすべてをスローにした。

So people also came up with an SWC version of the React plugin.

そこで、ReactプラグインのSWCバージョンも開発された。

So you see the problem here is there are great tools out there, but some of them do this, some of them do that.

つまり、世の中には素晴らしいツールがあるけれど、あれもこれもできるものがあるということだ。

And now some of the things they both do, they decide to do them differently.

そして今、2人がやっていることのいくつかは、違うやり方でやることにした。

And that's the reality that we're kind of dealing with in a JavaScript tooling ecosystem.

それが、JavaScriptツールのエコシステムで私たちが直面している現実なのだ。

I'm pretty sure if you've worked with custom build stacks long enough, you understand what I'm saying, right?

カスタムビルドのスタックに長く携わってきた人なら、私の言っていることが理解できるだろう？

So in a lot of ways, the reason people love VEET is because we kind of hide this complexity away from them and try to give you a very smooth and consistent entry point so that you don't need to think about these things.

つまり、VEETが人々に愛されている理由は、このような複雑なことを隠蔽し、非常にスムーズで一貫したエントリー・ポイントを提供することで、このようなことを考える必要がなくなるからなのです。

But we're kind of, for me, I think we achieved this goal with the initial version of VEET, but long term wise, when people are starting putting more and more dependence on VEET, right, we've seen more and more frameworks moving over to use

しかし、VEETの初期バージョンでこの目標は達成できたと思うが、長期的には、人々がVEETにますます依存するようになり、より多くのフレームワークがVEETを使用するようになる。

VEET as the base layer, I kind of start to worry because I feel like, you know, the internal is not as pretty as it should be.

VEETをベースレイヤーにすると、なんだか心配になってくるんだ。

And we kind of just swept all the deeper problems under the rug and pretend everything is great.

そして私たちは深い問題をすべて水に流し、すべてが素晴らしいかのように装ってきた。

So I guess deep down, you know, along with VEET's growth and adoption, I've always had this, like, inner urge to say, like, is it really up to the task of being the future of all these, like, next generation frameworks serving as the infrastructure?

VEETが成長し、採用されるにつれて、私はいつも心の奥底で、VEETは本当にインフラとして機能する次世代のフレームワークの未来にふさわしいのだろうか？

Will VEET be able to live up to that expectation?

VEETはその期待に応えられるだろうか。

And I don't think it will if we just keep using this sort of fragmented internals and try to stitch things together and smooth all of the inconsistencies.

そして、このような断片的な内部構造を使い続け、物事をつなぎ合わせ、すべての矛盾を解消しようとしても、そうなるとは思えない。

In a way, the tool chain we're building right now at Voice Zero is an attempt to kind of attack this problem more fundamentally.

ある意味、私たちが今Voice Zeroで構築しているツールチェーンは、この問題をより根本的に攻撃する試みなのだ。

Let's say, like, if we want to solve all the problems we want to fix in VEET, what do we need? We need a bundler that actually is designed for it.

例えば、VEETで解決したい問題をすべて解決しようと思ったら、何が必要だろう？実際にそのために設計されたバンドラーが必要だ。

And we need this bundler to be also built on top of a tool chain that can, you know, handle all the different concerns, like starting from the AST all the way to minification and production, bundling, right, through a consistent system.

そして、このバンドラーは、ASTから始まり、最小化、生産、バンドルまで、一貫したシステムを通して、すべての異なる懸念を処理できるツールチェーンの上に構築される必要がある。

And at the same time, we also want to make each part of this tool chain individually usable.

そして同時に、このツールチェーンの各パーツを個別に使えるようにしたい。

So let's say you want to just take the parser and do something crazy with it.

では、パーサーを使って何かクレイジーなことをしたいとしよう。

You can totally, you should be able to do that, right?

全然できる、できるはずだよね？

This tool chain, although it's unified and it's a coherent system, it should not be a black box, right?

このツールチェーンは、統一された首尾一貫したシステムだが、ブラックボックスであってはならない。

You should not have to say, like, you either take it all or you can never use it.

全部取るか、絶対に使えないか、などと言うべきではない。

So I think that's, these are the two main premises that we're sort of centering the tool chain around is unification, but without sacrificing the ability to, of composability.

つまり、この2つの大前提があるからこそ、ツールチェーンの中心は統一されたものでありながら、コンポーザビリティを犠牲にすることはないのです。

We'd like to stop and thank our sponsor for the week, Mux.

今週のスポンサーであるMuxに感謝の意を表したい。

If you haven't heard of Mux, Mux is an awesome platform that makes adding video to your product easy as adding a few libraries.

Muxをご存じない方もいらっしゃるかもしれないが、Muxは製品にビデオを追加する際に、いくつかのライブラリを追加するだけで簡単にできる素晴らしいプラットフォームだ。

If you never had to add video to a product, you don't know how many pits of failure there are, whether it's file formats, delivery, uploads, or even playback.

製品にビデオを追加したことがない人は、ファイル形式、配信、アップロード、あるいは再生など、どれだけの失敗の落とし穴があるかわからない。

There's so much to worry about and so much that will bog your team down while trying to ship a stellar product.

優れた製品を出荷しようとしている間に、心配しなければならないこと、チームを停滞させることがたくさんある。

They have a set of APIs and components that make adding video playback to your app or platform super easy.

APIとコンポーネントのセットがあり、アプリやプラットフォームに動画再生を追加するのがとても簡単になる。

And since there are a bunch of experts that know video inside and out, they'll have so many different features that your team would never have the time to get to.

また、ビデオを知り尽くした専門家が集まっているため、あなたのチームでは到底手が回らないようなさまざまな機能を備えているはずだ。

One of those things being metrics, they have all sorts of different fancy metric dashboards to understand how people are consuming video in the apps that you ship.

そのひとつがメトリックスで、アプリ内で人々がどのようにビデオを消費しているかを理解するための、さまざまな種類の派手なメトリックス・ダッシュボードがある。

Recently, they've been adding even more capabilities to their platform.

最近では、そのプラットフォームにさらに多くの機能を追加している。

Now you can see when viewers dropped from your videos, so you can gain better insight into how people are consuming those videos.

視聴者がいつ動画から脱落したかを確認できるようになり、人々がどのように動画を消費しているかをより深く知ることができる。

So if you want to add video to your platform and you don't want to spend weeks to months doing it, head over to Mux.com.

あなたのプラットフォームにビデオを追加したいが、そのために数週間から数ヶ月を費やしたくないなら、Mux.comに行こう。

And with that, let's get back to the episode.

それではエピソードに戻ろう。

So you've been a independent developer for a while and probably one of the most successful, being able to work on a lot of open source projects and produce a lot of very successful open source projects while working mostly on your own.

ですから、あなたはしばらくの間、独立した開発者であり、おそらく最も成功した開発者の一人で、多くのオープンソースプロジェクトに携わることができ、ほとんど自分ひとりで仕事をしながら、非常に成功したオープンソースプロジェクトを数多く生み出してきました。

And now you're going this route of, so you've raised some VC, you're forming Void

そして今、あなたはVCを調達し、ヴォイドを設立している。

Zero, you have a few people coming to join you to like work on this ecosystem tooling.

ゼロ、このエコシステム・ツールの作業をするために、何人かがあなたに加わることになる。

So why did you decide to make that transition from independent developer to starting a company?

では、なぜ独立系デベロッパーから起業に踏み切ったのですか？

And like, what about the timing or the circumstances made this a different choice?

そして、そのタイミングや状況が、この選択を違ったものにしたのか？

So I think overall, I would actually consider myself a pretty risk averse person.

だから全体的に見れば、僕はかなりリスクを嫌う人間だと思う。

Some of the biggest decisions I'd made in my life, I kind of feel like I just swinged it, but like going fully independent to work on Vue, I didn't really know what that would entail. Luckily, I think I built a lifestyle entrepreneurship, kind of lifestyle business thing around Vue.

私の人生で最も大きな決断のいくつかは、まさにそれをしたような気がする。しかし、ヴューに取り組むために完全に独立するようなもので、それが何を意味するのかよくわからなかった。幸運なことに、私はVueを中心にライフスタイル起業家精神、ライフスタイル・ビジネス的なものを築き上げたと思う。

So that is enough to sort of support me and make my life sustainable.

だから、それだけで僕の生活を支え、持続可能なものにしている。

So on top of that, right, I'm not starting a company because like, oh, we need to make more money. So that situation.

それに加えて、もっとお金を稼がなきゃいけないから会社を始めたわけじゃない。だから、そういう状況なんだ。

It's more about starting the company is the more realistic way to essentially fulfill the vision that I'm trying to achieve.

それよりも、会社を設立することが、私が達成しようとしているビジョンを本質的に実現するための、より現実的な方法なんだ。

So it's also partly based on the experience of working as an independent developer.

だから、独立した開発者として働いてきた経験に基づいている部分もある。

字幕リスト動画再生

エヴァン・ユー - Vue、Vite、VoidZeroとJavaScriptツールの未来 (Evan You - Vue, Vite, VoidZero and the Future of JavaScript Tooling)

stuff

episode

sort

essentially