CTO 藤村がホストするPodcast、論より動くもの.fmの第31回を公開しました。今回はVue Fes Japan 2024について、フロントエンドエンジニアのwattanx、うしろのこと話しました。
論より動くもの.fmはSpotifyとApple Podcastで配信しています。フォローしていただくと、新エピソード公開時には自動で配信されますので、ぜひフォローしてください。
難易度の高い取り組みには、基礎的な知識がベースにないと応用できない
藤村：こんにちは、論より動くもの.fmです。 論より動くもの.fmは STORES のCTO 藤村が技術や技術じゃないことについてざっくばらんに話すポッドキャストです。今日は STORES の社員のうしろのこさんとなべちゃんに来てもらいました。よろしくお願いします。まずは自己紹介からお願いします。
うしろのこ：STORES でフロントエンドエンジニアをやっているうしろのこと申します。最近はVue.jsからちょっと離れて他のことをやっていて、フロントエンド全般のUX、DXを向上するチームに入っていろいろやっています。よろしくお願いします。
なべ：STORES の渡邉です、なべちゃんと呼ばれてます。最近は新規事業の開発をしたり、Nuxtのコミッターをしてます。よろしくお願いします。
藤村：今ちらっと話してもらったんですけど、最近お二人は STORES でどんな仕事をしているのかを聞きたいんですけど、 うしろのこさんはどんなことをしてるんですか？
うしろのこ：僕はここ1年ぐらいはなべちゃんがやってるものとはちょっと違う新規事業の開発をしていて、それが一旦落ち着いてきたので、チームを異動しました。今はユーザーがいい感じにログインして、いい感じにいろんなアプリケーションで同じ体験が得られるようにする、かつ、今 STORES はいっぱい製品があるんですけど、その製品を開発する上でフロントエンドエンジニアがもっと体験よく、同じコードを書かないような仕組みづくりの両方をやっています。今、本当にやり始めなので、まだ具体的なものは出てきてないです。昨日やっていた業務は、OIDC（OpenID Connect）のドラフトをめちゃくちゃ読み込んで、その技術スタックで何ができるのか見識と議論を深めるみたいなことをやってました。
藤村：OIDCって（仕事をしようとすると）ちゃんと最初に（仕様を）読むになるよね。
うしろのこ：読まないと何が仕様ですでに定義されていて、何がないのかっていうのがわからないから、結局あのすごい長い仕様書を読み込まないといけないんだなって感じました。
藤村：正解が書いてあるっていうのはある意味ありがたいですよね。
うしろのこ：うん。そういうセキュアな実装を求められるところを、オレオレでやっちゃうと不安なので、ちゃんと研究されてドラフトに落とし込まれて、ちゃんと仕様になってる部分もあるんですけど、そういう知識があるのとないのとだと、全然違うなって思いますね。
藤村：インターネットでものを作っていると、どこにいてもRFCを読むとかは出てくるって感じがあるよね。
うしろのこ：難易度の高い取り組みをするためには、そういう基礎的な知識がベースにないと応用ってできないから。あとフロントエンドの仕事には一見見えないんですけど、フロントエンドのユーザー体験とか開発者体験っていうのを改善しようとした時に、ボトルネックって別にフロントエンドだけにあるとは限らないので。今回のケースで言うとログイン周りの体験は、そういう仕様とか、なんならそのバックエンドの仕組みにも手を出していかないと、本当には改善できないので。そういう意味でケーパビリティ求められる仕事かなって思いますね。
藤村：ありがとうございます。なべちゃんは最近は何してるんですか？
なべ：最近は新規事業の開発のフロントエンド部分をメインにやっていて、その前は STORES ネットショップ の管理画面をNuxt 3に移行するっていうのをやってました。
藤村：新規事業は何で作ってるんですか？
なべ：Next.jsで作ってます。
藤村：Nuxt を深く知っている人が、Next.jsを触るとどう見えますか？
なべ：React Server Componentsは、すごい開発体験がいいなって思ってます。
藤村：いいんだ。
なべ：そうですね。Nuxt でサーバの処理を書くよりかはわかりやすいかなっていう印象です。
藤村：スタイルの違いみたいなのも感じられます？
なべ：スタイルの違いか。基本的な部分（できること）は（だいたい）同じなんですけど、フレームワーク特有のものはあったりしますね。Vue.jsを使っててもそんなに苦じゃないというか、全然書けるなっていう感覚では。
藤村：ありがとうございます。
Vue Fes Japan 2024の見どころ解説、Evan Youのキーノート予想
藤村：今日はVue.jsに造詣の深い2人を招いているんですけど、もうすぐVue Fes Japan 2024があるじゃないですか。僕も行くので、見どころを聞きたいなと思って。去年、僕Vue Fes Japanに行って思った以上に面白かったというか、フロントエンドの広範囲なフェスじゃんって感じで、めっちゃ面白かったので今年も楽しみにしてます。今、画面共有でタイムテーブルを映しているので、これをパラパラと見ながら、話を聞いて行こうと思います。 Evan Youのキーノートは何を喋るんでしょうねってのはまだわかんないか。
うしろのこ：なべちゃんは知ってるかもしれないですけど、僕の予想だとRolldownとかViteの次世代コンパイラの進捗、あとVaporモードの進捗が話されるのかなと期待してるんですけど。どうなんですかね。
なべ：Vue 3.5の話とかあるかもしれない。
うしろのこ：ああ、確かに。
なべ：今RCだと思う。
うしろのこ：うんうん。
藤村：Vue 3.5の目玉は何があるんですか？
うしろのこ：useId()とかがきますね。
なべ：そうですね。
うしろのこ：ReactにはすでにあるんですけどuseId()って、サーバーとクライアント間で一意のIDを共有できる。ラベルとインプットIDの紐付けで便利っていう。
藤村：なるほどね。
うしろのこ：開発者がIDを自分で考えなくていいし、SSRも可能で、これがVueに入るっていう感じですかね。
藤村：楽しみですね、どんな話をするのか。
なべ：やっぱりRolldownがみんな気になってるじゃないですか。
うしろのこ：そう、Rolldownが一番気になるんだよな。Rolldownをわからない人向けに説明すると、Rollupっていうバンドラーがあるんですけど、RustでRollup完全互換のバンドルツールを書き直そうというプロジェクトがあって、それがRolldownって言われてます。
何に使うかというとViteっていうツールがあるんですけど、今Viteの内部にはRollupとesbuildっていうもう一つのトランスパイルするツールがある。開発環境と本番環境で使い分けてて、esbuildは開発環境で、本番ビルドするときはRollupという風に使い分けてるんですけど、そこの微妙な差分で開発環境と本番にズレが出ることがあると言われていて、それを解消するためにesbuild並みに速い、かつRollupのプラグインもそのまま使える新しいバンドラーを作ろうっていうのがRolldownっていうプロジェクトです。これが完成するとViteの内部でRolldownが使われるようになって、環境差分が起きにくくなるという期待がされていますね。
藤村：これはJavaScriptトランスパイラ及びバンドラー令和6年最新版ってやつですかね。
うしろのこ：戦国時代の次のそういう時代ってあるんですかね。
藤村：江戸時代じゃない？
うしろのこ：江戸時代か、バンドラーが江戸時代になるってこと？対抗馬として、WebpackをRustで書き換えるプロジェクトが2本あって、1つがRspack。Rspackは最近バージョン1.0.0が出てプロダクトユーズになったんですけど、もう1個がVercelがやってるTurborepoの中で使っているTurbopack。これもWebpack互換のRust製ツールなんですよ。なので今のところ、バンドラーでRust製ツールが3本あるって感じですね。
藤村：esbuildはGoだっけ。
うしろのこ：あれはGoです。
藤村：江戸時代になってほしいけど。
うしろのこ：誰が全国統一するのか気になるところではある。
Oxc、Anthony Fu
藤村：この次のセッションのOxc君は一体何者なんですか？
なべ：これはざっくり言うとフロントエンドツーリングで、Lintやトランスパイラとか、いろんなツールがこの中にある感じですね。
藤村：開発に必要なやつ全部入りみたいな？
なべ：そうですね。
うしろのこ：Rolldownの中でもOxcが使われてるみたいですね。なので間接的にViteはOxcを使うみたいな。
藤村：本当だ。
うしろのこ：ここのセッションもめちゃくちゃ面白い話をしてくれると思います。個人的にすごい気になってる。
藤村：面白そうですね。
うしろのこ：だからVueの話めっちゃ聞きたい人は、Vueの大規模開発のセッションやNuxt 3のバージョンアップの話で業務知識を得られると思うし、普段あんまりVueをやってないけど、なんか面白いカンファレスって聞いたので参加しますという人は、Oxcの話とかはかなりエッジの効いた話になってると思うので、どういう層でも楽しめる時間帯かなって思いますね。
藤村：裏側のも両方とも面白そうだな。
うしろのこ：なべちゃん気になるセッションとかないんですか？
なべ：僕はAnthonyとNuxtのハンズオンが気になってます。
藤村：Anthonyのトークから聞いてみたいですけど、『Anthony's Road to Open Source - Yak Shaving』ですね。注目ポイントはどの辺ですか？
なべ：全然わからないんですけど、OSSとの関わり方とか、良いツールを作るにはどういう考えを持ってるんだろうかみたいなところが気になっていて、その辺りが聞けるかもなと。
うしろのこ：去年もそんな感じだったもんね。
なべ：そうですね、去年は（自分の登壇と）被っていて全く聞けなかったので。
うしろのこ：裏番組だった。
なべ：裏番組だったんで。
藤村：僕は去年Anthonyのトークを見ていたんですけど、カンファレンススピーチとしてめっちゃいい、面白かった。ソフトエンジニアとしての心構え、スタイルみたいな話をされたと思うんですけど、すごい面白かったので、今年も来てくれるのが嬉しいなって思ってます。
うしろのこ：去年のセットセオリーのやつは評判かなり良かったですね。
藤村：面白かったですね。
うしろのこ：なべちゃんは今回も若干被ってるよね。
なべ：若干被ってます、5分だけ被ってるので。
うしろのこ：5分ならまあ。
なべ：そう、5分なら。
うしろのこ：急げば（間に合いそう）。
『Deep dive into Nuxt Server Components』はどんな話をするの？
うしろのこ：なべちゃんのセッション『Deep dive into Nuxt Server Components』も興味ありますけどね、Nuxt Server Componentsの話なんで。
藤村：Nuxt Server Componentsを再実装するという話？
なべ：そうですね。
藤村：すごい、面白い。フレームワークを作ることに興味がある人、それ以外にもソフトエンジニアみんながなるほどってなりそうなセッションだね。
なべ：特殊なことをしているわけではなくて、いろんな技術の詰め合わせなので、頑張って作ってます。
うしろのこ：個人的にはそのNext.jsのServer Componentsと どういう仕組み的な違いがあるのかが気になってますね。あっちはシリアライズされたコンポーネントをレスポンスして返すみたいな技術。クライアントバンドルからServer Componentsを消すみたいなのがメリットだと思うんですけど、Nuxt Server Componentsもそういうメリットがあると思うんですけど、どういうふうに実現されているのかが気になっています。
なべ：他の似たような技術と合わせて話せるといいかなと思ってます。
藤村：ほとんどの人は個々のコンポーネントをサーバーサイドでレンダリングする仕組みを作ったことがないと思うので、芸の肥やしが増えたってなりそうでいいですね。CTO目線だと、若い人に聞いてほしいな、発想が広がるので。僕も個々のコンポーネントをサーバーサイドでレンダリングしたことないのでちょっと聞きに行こうと思います。
なべ：ありがとうございます。
Vue.js チュートリアル決定版
藤村：ハンズオンに注目してると言ってましたが、どの辺が面白ポイントなんですか？
なべ：Nuxt Tutorialっていう公式のチュートリアルをAnthonyが作っていて、これの日本語版をここで公開しますよってことなので、今まで触ったことがない人にもわかりやすいチュートリアルが提供されることに興味があります。
藤村：Vue.js チュートリアル決定版が出るわけですね。
なべ：そうですね。
藤村：初学者の人はマジでありがたいやつだ。
うしろのこ：僕もここ1年ぐらい全然触れてないからこれで入門しようかな。
藤村：みんなで再入門。
うしろのこ：アンラーンして。
本当は全部聞きたい
藤村：うしろのこさんは気になるセッションありますか？
うしろのこ：気になるセッションだらけでマジで困ってます。今まで出たもの以外だと、『 Vue 3 と Svelte 5 のランタイムを比較する 〜技術を一段深く理解する〜』、その隣の『 Vaporモードを大規模サービスに最速導入して学びを共有する』も気になる。これ被っているのでどちらかしか聞けないのが悲しいんですけど。
藤村：Vaporモードは何なんですか？
うしろのこ：ReactとVue.jsって仮想DOMを用いて、部分的にDOMに対してパッチ更新を当てることで、高速に変更を反映する仕組みだと思うんですけど、Vaporモードはコンパイル時に変更がある可能性のある部分をあらかじめ検出しておいて、仮想DOMを介さずにDOMを直接パッチする仕組みをビルド時に入れて動かすことで、仮想DOMを用いた仕組みよりも早く動かすことができるみたいなやつですね。
Vue.jsのVaporモードはツリーの一部分にだけ入れることもできるので、仮想DOMとVaporモードで動く部分をネストできるんです。だから今注目されてる技術で、着想はSvelteなんですけど、Svelteって仮想DOMを使っていなくて、コンパイル時に決定されるので、そこの流行りを取り入れようとおととしぐらいに発表されて、そろそろ使えるものができあがってくるかなっていうタイミングなんで、Vaporモードのセッションは気になりますね。
藤村：今後のVaporモードの進捗次第で実際にサービスに導入できるかの検証も想定していますってことは、まだ実サービスへの導入はしていないって感じなんですね。
うしろのこ：夢のある話なんですけど、kazuponさんというVue.js 日本ユーザーグループのリーダーの方がVaporモードにパッチを当てて、ReactとSvelteを同時に動かすことをやっていて。概念でいえば可能なんですね。中間表現みたいなものをVaporモードは持ってるから、そこから各ライブラリ向けのジェネレータを実装しちゃえば、Vaporモードに乗せて動かすことができるという、Vue.jsに閉じない技術になる可能性があってかなり注目度が高いですね。
藤村：Vue.jsの人たちは他の世界を取り込めるものを作っていくのが上手だよね。
うしろのこ：そこが魅力ではありますね。
藤村：ゆえにVue.jsと関係ない人が参加しても得るものがあるし、ソフトウェアの作り方という面で、気づきと面白いと思えるものがいっぱい出てくるのがVue Fes Japanですね。
うしろのこ：それでいうと『次世代フロントエンドクロストーク』にSosuke Suzukiさんがいらっしゃると思うんですけど、Vue.jsの界隈というよりはPrettierとかRomeとかそっち系の人だから、そういう人が混ざって話すのもすごい面白いですよね。
藤村：これはすごいですね。
うしろのこ：Vue.jsの話なのか。
藤村：Oxcの人とBioamの人、両方いるんですね。
うしろのこ：そうなんですよ、だからツールチェーンや昨今言われている型情報を使ったLintの仕組みとかについて議論されるんじゃないかという期待がありますね。本当に全然Vue.jsと関係ない可能性がある。
藤村：コンパイラをやる人が行ったほうがいいんじゃないですか。
うしろのこ：このタイムテーブル見たときに弊社の（Rubyコミッターの）遠藤さんに絶対参加してほしいなと思ったんですよね。
藤村：なるほどな。面白そう。
うしろのこ：まだ注目セッションいっぱいあるんですけどね。
藤村：そうですね。『Demystifying Vite Internals』も興味ある。
うしろのこ：どうやってRollupプラグインをViteで使えるようにしてるかという話をしてくれるので、Viteのコアな部分も勉強できるセッションですね。
藤村：ソフトウェア設計の話としてめちゃ勉強になるんだよな。
うしろのこ：めちゃくちゃ有意義ですよ。
なべ：IkutaさんもViteを作ってその経験で話すみたいな感じです、最小限のViteを作って。
藤村：おお。
うしろのこ：Vueのコミュニティでサブセットの実装が流行ってるというか、petite-vue(編集注：chibivueのことでした)っていうVueを最小で実装してみるのがちょっとバズったのもあって、じゃあViteもやるかとIkutaさんがpetit-Viteみたいなものをやった経験で話してくれるんだと思いますね。
藤村：面白そう。Vue Fesの回し物みたいな感じになってますが、実際面白かったからな。
うしろのこ：藤村さんなんか絶対見たいセッションとかあるんですか?この中だと
藤村：悩ましいですね。Vaporの仕組みの話が多分される『Vue Vapor: Reinvention』も何なんだろうって気になってたけど、今の話を聞いてたらさらに気になってきたし、同時間帯の『Demystifying Vite Internals』もソフトエンジニアとしては興味があるし、なべちゃんのトークも気になる。もうちょっと現実的な話だと、ライトニングトークの『Protocol BuffersとNuxt3で開発生産性を上げるためのスキーマファースト開発の紹介』が気になりますね。みんなGraphQLをやるところなんですけど、Protocol Buffersだとどんな風になるんだろうか、個人的に興味がある。
あとクロストークはもうメンツからして絶対面白い、知的エンタメとしてめちゃ面白そうだなと思ってる。『同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏』は僕らがやっているSaaSの開発じゃなく、メディアサイネージとかインスタレーションアートの話なので我々とはまた違った世界だと思うんですよね。これもめちゃ気になっている。
うしろのこ：副業先の方と話してる時に、Nuxtでデジタルサイネージをめちゃくちゃ作ってる人がいるぞというのが話題になったことあって、多分その方なんだと思うんですよね。生産性が高くなりましたっていうブログがあった。これも気になりますね。
藤村：そんな感じでとってもVue Fes Japan 2024が楽しみです。
うしろのこ：タイムテーブルを改めて眺めるとすごい楽しみになってきたな。
藤村：うん、面白そう。
うしろのこ：本当は全部聞きたい。
藤村：という感じで、2024年のVue Fes Japanも楽しみだなっていう気持ちになってきました。今日はSaaSのフロントエンドを頑張っているなべちゃんとうしろのこさんに来ていただき、最近の話やVue Fes Japan 2024の気になるトークの話をお届けしました。なべちゃんとうしろのこさん、ありがとうございました。
うしろのこ・なべ：ありがとうございました。
藤村：論より動くもの.fmを終わろうと思います。#論より動くものでぜひ感想をお寄せください。ありがとうございました。ごきげんよう。（完）
STORES はVue Fes Japan 2024でゴールドスポンサー、託児サポートとして協賛しています。ブースもあるので、ぜひ遊びにきてください！
