CTO 藤村がホストするPodcast、論より動くもの.fmの第26回を公開しました。今回はフロントエンドエンジニアのうしろのことVue Fes Japan 2023の感想やCloudflare WorkersとRemix、最近注目している技術について話しました。
論より動くもの.fmはSpotifyとApple Podcastで配信しています。フォローしていただくと、新エピソード公開時には自動で配信されますので、ぜひフォローしてください。
テキストで読みたい方は下記からご覧ください。
Vue Fes Japan 2023 面白かったね
藤村：こんにちは、論より動くもの.fmです。論より動くもの.fmは、STORES のCTOである私、藤村が技術や技術じゃないことについてざっくばらんに話すPodcastです。今日はSTORES で活躍しているフロントエンドエンジニアのうしろのこさんに来てもらいました。よろしくお願いします。
うしろのこ：こんにちは。
藤村：自己紹介をお願いします。
うしろのこ：STORES で活躍しているフロントエンドエンジニアのうしろのこです。今は藤村さん直下のCTO室に所属していて、傭兵みたいに色んなところにいってフロントエンドを作っています。よろしくお願いします。
藤村：よろしくお願いします。我々はフロントエンドのいろんなことを話す機会がちょこちょこありますよね。
うしろのこ：1on1をやると半分ぐらいはその話みたいな感じですね。
藤村：そうなんですよ。僕、Vue Fesに行ったんですけど、あれは面白かったですね。
うしろのこ：Vue Fes、めちゃくちゃ盛り上がってましたよね。藤村さんはKaigi on Railsも行ったんでしたっけ。
藤村：Kaigi on Railsの裏番組だったんだけど、途中から来て、途中で帰りました。
うしろのこ：タクシーで来てそのまま会場入りみたいな？
藤村：普通に電車で来たけどね 。
うしろのこ：電車なんだ。
藤村：電車で来て中野でVue Fesが終わってから、中野の武道家で家系ラーメンを食べて、Kaigi on Railsに向かいました。
うしろのこ：また戻ったんですね。
藤村：そうそう。
うしろのこ：なんか矢沢みたいなのを想像してた。
藤村：普通に公共交通機関ですよ。Vue Fesはなんであんなに面白かったんでしょうね。
うしろのこ：今回の参加人数はスタッフを入れて600弱ぐらいで、規模がかなりデカかった。日本でやってるフロントエンドのカンファレンスだと最大規模。いろんな人がいたし、海外からわざわざ日本に来てる人もいたし。
藤村：参加のために？
うしろのこ：そう、参加のために。すごいですよね。あと、いろんな話を聞けましたよね。
藤村：単純にメンツが豪華すぎない？Vue.jsの一番大きいカンファレンスかみたいな感じでほぼキーパーソンがずらずらっと並んでいる感じで、すごいですよね。
うしろのこ：全員参加みたいな。すごかった。
藤村：僕はずっとReactをやってた人間なんで、ぶっちゃけVue.jsにめちゃくちゃ注目してたわけじゃなかったので、それもあって面白かったのかもしれない。Vue.jsとNuxtのエコシステムからどんどんいろんなものが出てるなって思った。
うしろのこ：そうなんですよね。もともとVue.jsがプラグイン志向で、いろんなものを接続できるように作ってあるんですけど、そこがめちゃくちゃ拡張されて、今はVue.jsのフルスタックフレームワークのNuxt.jsはほとんど切り出されたプラグインの寄せ集めみたいな感じになってて。だからVue.jsの部分をまるっとReactに差し替えれば、Nuxtと同じスタックでReactが動かせちゃうぐらい分解されてる。
藤村：マジでできるの？
うしろのこ：マジでできますってかありますよね。
藤村：すごいな。
うしろのこ：そのレベルで抽象化されてる。登壇されてる方もいましたけど、内部ライブラリだけじゃなくて、Vue Language ServerのVolar.jsは今Svelteの構文解析に使われてますし。Evan Youの最大の発明はVueじゃなくてViteなんじゃねっていう説が今あって、Next以外は全部Viteみたいなレベルなんで。最近は特にいろんな界隈に影響を出してるなーっていうのを感じますね。
藤村：単なるライブラリとかフレームワークのカンファレンスというよりも、フロントエンドのエコシステムのカンファレンスみたいな感じだったよね。
うしろのこ：確かにそうですね。もうちょっとVue 2からVue 3へのマイグレーションとかNuxtのマイグレーションみたいな話に偏るかなと思ってたんですけど、コアメンバーのスピーカーの方々とかの登壇内容はVueに寄ったものというよりは、フロントエンドのツールチェイン周りの話とかがわりとあって、普通にフロントエンドカンファレンスの印象ですね。
藤村：Vue周りの人が多く出るフロントエンドのカンファレンスって感じ。Anthony Fuさんのトークでも言ったけど、最初は限定された用途で作って、それをユースケースとして一般化して広げていくっていうノリがコミュニティ全体にあるのかなと勝手に想像したな。
うしろのこ：そこに生存戦略を見出しているのかもしれないですけどね。最近はバチバチに他のライブラリと殴り合うよりは、自分たちの作った技術を広く浸透させていくっていう方にベットしてるのかもしれないですね。
藤村：みんなも使ってくれよ！みたいな。
うしろのこ：そうそう。
藤村：今2023年で、真面目にSPAとかを書くようになってもう10年くらい経つけど、フロントエンドはちょっと乱世やりすぎたみたいな感じがあるもんな。
うしろのこ：最近はプラクティスが固まってきて、みんなやってることも同じ感じですけどね。
藤村：遅いのでRustで書き換えます、みたいな。
うしろのこ：そう。Vue界隈だとRust化が今めっちゃ進んでて、そっちに舵をきると思ってなかったからびっくりですよね。
藤村：うしろのこさんはRustやらないんですか？
うしろのこ：Rustやらないとって思ってます、今。
藤村：ちょっと触れた方が楽になる説あるよね。
うしろのこ：そうなんですよ。結局今までってWebpackのプラグインとかrollupのやつとかは全部JSで書かれてたから、何かあったら自分でパッチ当てられるんですよ。そこがRustで書かれるようになったら、追えなくなっちゃうっていうのはエンジニアの生命線として怪しくなる。
藤村：そうよね。
うしろのこ：2021年ぐらいにmizchiさんがフロントエンドエンジニアは全員Rustが書けるようにならないと今後やばいみたいなことを言ってたんですけど、その通りになりつつあるなっていう。
藤村：そうね。足回りを触るんだったらもういるよねっていう時代になりつつあるんですよね。
うしろのこ：そうそうそう。表面的なところを触って作れるものは規模がたかがしれていて、大きいものを作ろうとすると内部的なものへの理解も必ず必要になってくるから、Rustからはもう逃げられんなっていうところまで来てますね。
藤村：すごいよな。めちゃくちゃ面白くないCTOの発言みたいな感じになるけど、こうやっていろんな道具、プログラミング言語みたいな超基礎的な道具から、それを使ってモジュールバンドラーが出てきたり、コンパイラが出てきたりして、フロントエンドの様子が変わっていって、いつの間にかRustが実験的な道具ではもはやない、みたいなノリじゃないですか。っていう風に移り変わっていくのを見るのは面白いなって思いました。
うしろのこ：面白いですよね
藤村：他人事の発言だけど。
うしろのこ：サーバサイドRustより先にフロントエンドの方に侵食してくるのも面白いなって思いました。普通にRustでウェブサーバっていうのが浸透する前に、フロントエンドツールチェインの方にめちゃくちゃ染み込んできてるというか。フロントエンドってJavaScriptが絶対王者じゃないですか。そこの牙城を切り崩すのがRustなんだっていう。
藤村：フロントエンドって結局何かを実行可能な形式にして、ブラウザに届けないと動かないわけじゃん。それが至上命題って考えると、それを一番早く安全にやれるプログラミング言語が選ばれたっていうのは、まあそうかもしれないねって気がするよね。
うしろのこ：僕はRustエアプだから、まじでわかってないんですけど、Rustで書いたらなんで早くなるのかっていうのを、みんないい感じに言語化して教えてほしいですね。
藤村：俺も即答できないな。
うしろのこ：なんでなんですかね。単純に処理が速いとかっていう話だったら、V8とかめっちゃ速いから別にNode.jsでも速いだろうって思うんですけど。Xのポストで見たのは、Rustは速くなるんじゃなくて遅く書かないことがやりやすいっていう説があるんじゃないかと。
藤村：遅く書けないみたいな。
うしろのこ：そう、遅く書けないから速さを維持できる。
藤村：遅く書くのって簡単だもんな。
うしろのこ：まあそうですね、適当にforループ3重ぐらいにしたら大体遅くなるし。
藤村：普通に書いたら遅くならないってプログラム言語はありがたいですね。
うしろのこ：前にJavaScriptのArrayのメソッドでfilter()ってあると思うんですけど、filter()がTypeScriptの型的に相性が良くないことがあって、flatMapで代替してたんですけど、flatMapにすると5倍ぐらい遅くて。でもTypeScript的にはflatMapで条件分岐して空配列を返すことで長さを調節するっていうのはやりやすいというか、すっきりするコードになるからやりがちなんですけど。意識してなくても遅いコードになっちゃうっていうのはやりがちだなって思いましたね。
Cloudflare WorkersとRemix
藤村：話は変わるんですけど、今年は新しいものを作ってたじゃないですか。意欲的なアーキテクチャになっていて、今のところうまくいってるなと思うんですけど、簡単にどんな風な構成で作ったか教えてくれませんか？
うしろのこ：ざっくり言うとCloudflare WorkersとRemixっていうReactのフルスタックフレームワークがあるんですけど、これを使ったフロントエンドの環境構築で、アプリケーションを0→1で作りました。最近リリースして安定稼働しているんですが、自分が技術選定する上でReactを選んだのが初めてだったから結構悩みました。
藤村さんと話している中でCloudflare Workersはめっちゃ体験いいよねってなって、社内でもあんまり事例がなかったから、とりあえず使ってみようっていうところで、Workersを使うことを最初に決めて。Cloudflare Workers上で素直に動く、サポートも手厚い、ドキュメントも結構あるっていう視点で選ぶとNextよりもその当時はRemixの方がCloudflare Workersサポートっていうのが厚かった。僕が始めたより前にもう一個新しいプロダクトが始まってたんですけど、そこではもうNextを使ってたから同じものを使うのも面白くないなと思って、Remixでプロトタイプ作って出してレビューしてもらったらいいじゃんってなってそれで進めました。
藤村：Remixを使ったことと、Cloudflare Workers使ったこと、あとは作っていて、こういうちょっとしたサーバーサイドの処理とかがあるんだがどうしようね？っていう時に、Workersでやっちゃえばバックエンドまで通さなくていいっていうのもあったじゃないですか。あれも良かったですよね。
うしろのこ：めちゃくちゃ良かったですね。バックエンドはGoで書かれたものがGCPに上がってるんですけど、そっちでDBに対する操作とかやっているので、そこに例えば認証の処理とかが入ってくるとバックエンド側が膨らんじゃうんですけど、認証認可の処理っていうのを全部Workers上でやったので関心事がめっちゃ切り分けられた。
藤村：バックエンドの人たちはGraphQLでドメインモデルをいじくるコードを書き続けるだけみたいな感じにきれいになったもんね。
うしろのこ：そうなんですよね。うれしそうでうれしいって感じですね。
藤村：若干攻めた構成だし、僕はCloudflare Workersって諸刃の剣だとは思っていて、簡単に三層構造になるじゃないですか。ブラウザで動いてるクライアントとWorkersとバックエンドみたいな。（ただでさえWeb開発は難しいのに）そんな難しいことをして何がうれしいんだみたいに思ってるところもあったんですよ、複雑になるだけだろうみたいな。でもクリアな責任分担になって、なんらそこの切り分けで困ったりしなかったですね。
うしろのこ：あとRemixがサポートしてるセッションストレージが使いやすい。Cloudflare Workers KVってやつがあるんですけど、あれにセッションを入れて管理するモジュールがあって、それが使いやすくて、ユーザーのログイン情報のセッションの引き回しがやりやすかった。BFFの層でやることでよりセキュアにできる、クライアント側に余分なコードを送らなくて済むっていうのも良かったですね。
藤村：きっとRemixとCloudflare Workersの相性が良かったっていうのもあるのかもね。
うしろのこ：そうですね。そこら辺なんも考えずにできるように最初からなってたから、だいぶ楽にさせてもらいましたね。
藤村：RemixってShopifyプロダクトじゃないですか。ShopifyはめちゃくちゃCloudflare Workersを使ってるらしくて。
うしろのこ：そうなんだ。
藤村：レールが敷いてあるというか、落とし穴が全部塞がれているのかもしれないですね。
うしろのこ：使い始めた時からだいぶ経って直ってきてるとこあるんですけど、不安定な部分もいくつかあったんですけど、そういうのもShopifyパワーでどんどん穴を埋めてもらってもう今は普通に不満ないぐらいのものにはなってますね。
藤村：同業の後輩としては、パイセンありがとうございます、使わせていただきますって感じですね。
うしろのこ：使えるものを使わせていただきますって感じですね。
藤村：Worker単体で見ると体験はどうでした?
うしろのこ：あのクオリティであの値段っていうのがやばくて。技術的な話じゃないかもしれないですけど、デプロイが超早いんですよね。
藤村：まじで全然体験が違いますよね。
うしろのこ：やばいですね。デプロイが早すぎて終わったのかどうかわかんないんですよね。
藤村：そうそうそう。
うしろのこ：あれなんかCI止まってね？って思ったら、デプロイ終わってるみたいな。そのレベルなんで、初期のプロトタイプのデプロイだともう1秒とかなんですよ、まじで。
藤村：普通のものとオーダーが2個違う感じあるよね。2個は言い過ぎか。でも、オーダーは違うもんな感覚として。
うしろのこ：そうなんですよね、そこの体験が本当によかったのでWorkers使えるなら使いたいなっていうモチベーションになった。あとそもそも社内でCloudflare自体の先行事例があって、Workersを使う時にちょっと稟議を通せばOKくらいで使えちゃったから、そこも楽でしたね。安いし。
藤村：そうなんですよね。意外とうちの会社はスタートアップの中でCloudflareをめっちゃ使い倒してるのではないか。
うしろのこ：国内事例としてはだいぶ大きい方だと思いますけど。
藤村：そうですよね。
うしろのこ：最近よく聞くD1、R2とか、Durable Objectsはまだ使ってない。本当のバックエンド構成にWorkersが絡んでないから、そういうとこの知見もほしいとは思いますけどね。
藤村：エッジワーカーで完結するバックエンドシステムってどんな開発体験なのか見てみたいですよね。
うしろのこ：ね、だからバックエンドのデプロイも超速いってことですもんね。
藤村：そうそうそう。そんなこと体験したことないからさ、デプロイが数秒で終わるとか。
うしろのこ：気になるな。
藤村：エッジワーカーって本当に発明なんだな。昔、社内の皆さんにCloudflare Workersが革命的であるっていう電波ブログを書いたじゃないですか。今もその気持ちは変わらなくて、バックエンドシステムはLinuxのコンテナをまくしかない世界からそれよりも全然小さいチャンクのものがまけるようになったっていうポテンシャルはまだまだ測り知れないものがあるのかもなっていう想像をしている。
うしろのこ：エッジで動かすっていうのもすごいんですけど、そもそものクオリティが高くあるっていうのがすごいと思ってて。品質が普通に高い、管理画面もそうだし、ログストリーミングとかブラウザ上からもできるんですけど、めっちゃレスポンスいいし。技術的にエンタープライズに耐えうるクオリティであるっていうのは間違いないかなっていう。
藤村：Wranglerの何を触ってても、こうなってて欲しかったわって挙動になっていて、エンジニアが触って「これ好き」ってなるクオリティの会社向けツールを出してるっていうのもいいですよね。
うしろのこ：僕がやってたプロジェクトだと使ってないんですけど、Cloudflare Tunnelとか。
藤村：Tunnelめっちゃ便利なんですよね。
うしろのこ：藤村さんがめっちゃ推してて、使う機会があったら使いたかったなって。
藤村：うしろのこさんは知らない時期かもしれないですけど、多分10年前ぐらいがHerokuのピークの頃で、（Cloudflareは）一番よかった頃のHerokuを触ってる気分になるんですよね、思い出すんですよ。本当に開発者の生産性を伸ばすために作られた道具っていう感覚がWranglerとか触ってるとたまに思い出す。
うしろのこ：なるほどね。
最近注目しているのはWeb Infra
藤村：次の話にいくと、最近フロントエンドやその周辺でうしろのこさんが注目してるものはあるんですか？
うしろのこ：フロントエンドで注目してるっていう点で言うと、会社単位になっちゃうんですけど、ByteDanceっていうTikTokを運営している会社がフロントエンドツールチェインをRustで置き換えるのをオープンソースでやっていて。WebpackのRust化はVercelもやっていて、Turbopackってやつがあるんですけど。Rspackっていうカニのアイコンのものとか。
あとはViteが今多分進行中なんですけど、内部的にRollupとesbuild使ってるのを、RollupをRustで書き換えたRolldownに移行していて、それをByteDanceでRspackをやっている人たちがRolldownもやっている。Viteも内部的にRustに変わっていく。さっき言ってたフロントエンドツール チェインがRust化されているよねっていうのを今一番推し進めてる企業がByteDanceかなと思うので、すごい注目してます。 ByteDanceっていうリポジトリじゃなくてWeb Infraっていうオーガナイズでやってると思うんですけど、ウォッチしとくといいと思いますね。
藤村：面白いですね。カニが可愛いな。
うしろのこ：なんでカニなんだろう。
藤村：Rustがカニだからじゃない？
うしろのこ：Rustってサビじゃないんだ、Rustってカニなの？
藤村：わからない。Rustってカニのキャラいなかったっけ？
うしろのこ：こいつか、見たことあるわ。フェリス君っていうらしいですよ、このカニは。非公式マスコット。
藤村：なるほど、面白いな。
うしろのこ：このOxcっていうリポジトリがあると思うんですけど、日本の人もコントリビュートしてるのを最近よく見ますね。
藤村：最近こういうツールで他にも話題になっていたやつなかったっけ？これを入れておけば、lintもフォーマッターもほぼ全部あるよみたいな。
うしろのこ：ああ、Biomeじゃないですか。
藤村：そうだ、Biomeだ。
うしろのこ：そうそう、あのRomeの後継みたいな。おお、すごい、Biomeのホームページを見たら時雨堂がスポンサーしてて、めっちゃでかいロゴが載ってる。
藤村：でかい、本当だ。
うしろのこ：さすがっす。
藤村：いやぁ、JavaScriptはどんどん新しいものが出てくるのが面白いですよね。
うしろのこ：面白い。変化が早いってよく言われますけど、良くなるスピードが早いんですよ。一つの技術を枯らすのも大事ですけど、こうやってできることをどんどんやっていくっていうその速度が早いのはいいことだと思う。
藤村：まあシンプルに見てて楽しいよね。
うしろのこ：そうそう、使えるおもちゃが増えるみたいな。毎週イトーヨーカドーに行ったら別のおもちゃが入ってるみたいな。
藤村：そうね。しかも使ってみようって時がエンジニアとしては楽しいですよね。
うしろのこ：最初は粗探しの視点で見るんですよ。これ元々できてたやつちゃう？みたいな感じで見ていくんですけど、その発想なかったわ、みたいなのが割とありますね。で、ベンチマークとって速いじゃん、みたいな。
藤村：うん。面白い作品がどんどん出てくる、しかもタダっていう。 はい、いっぱい話しちゃったのでそろそろ終わろうと思います。
うしろのこ：はい。
藤村：藤川さん、ありがとうございました。
うしろのこ：ありがとうございました。
藤村：ということで、論より動くもの.fmを終わろうと思います。#論より動くもの で感想をXにポストしていただけると嬉しいです。あとお便り募集フォームも作ったので、お便りもいただけると嬉しいです。そして STORES で一緒に働くエンジニアも募集していますので、戦国時代が続くフロントエンドを楽しくやっていきたい人はぜひお声がけください。ということで、論より動くもの.fmを終わろうと思います、ご機嫌よう。（完）
次回の更新をお楽しみに！
STORES ではエンジニアを募集しています。論より動くもの.fmを聴いて、少しでも STORES に興味を持たれた方は、ぜひカジュアル面談でお話しましょう！
