CTO 藤村がホストするPodcast、論より動くもの.fmの第25回を公開しました。今回はVue Fes Japan 2023のスペシャルランチセッションで公開収録をしました。ゲストは、Vue Fes Japan 2023で登壇したwattanxです。
論より動くもの.fmはSpotifyとApple Podcastで配信しています。フォローしていただくと、新エピソード公開時には自動で配信されますので、ぜひフォローしてください。
テキストで読みたい方は下記からご覧ください。
複数プロダクトの管理画面を統一したい気持ち vs 難易度
藤村：こんにちは、論より動くもの.fmです。論より動くもの.fmは、STORES のCTOである私、藤村が技術や技術じゃないことについてざっくばらんに話すPodcastです。今日はなべちゃんに来てもらいました。よろしくお願いします。
wattanx：よろしくお願いします。
藤村：自己紹介をお願いします。
wattanx：本名はわたなべと申します。普段Xとかは「wattanx」と書いて「わったん」と読む、ややこしいハンドルネームで生活しています。社内では、なべちゃんと呼ばれることが多いので、そちらで呼んでいただいても大丈夫です。STORES では、STORES ネットショップ の開発に携わっていて、プライベートではNuxt Bridgeというライブラリのコントリビュータをしています。よろしくお願いします。
藤村：よろしくお願いします。最近、どんな仕事をしていますか？
wattanx：最近は、STORES ネットショップ の事業者の方が使う管理画面があるんですが、今は STORES ネットショップ と STORES レジ で共通の管理画面になっているので、それをもっといい感じにしていくプロジェクトをやっています。
藤村：STORES の管理画面ってどうなっていくんでしょうね。複数のプロダクトがあるじゃないですか。ネットショップ、レジ、予約システム、ブランドアプリと。
wattanx：大統一管理画面がほしい気持ちはありつつも、どうやって作ればいいんだろうかと。
藤村：そもそも技術スタックも違うし、例えば全部ひとつのNuxtのプロジェクトでやったとしても、ボリューム的に無理じゃないですか。
wattanx：そうですね。
藤村：やっぱりどうしようって感じですよね。
wattanx：予約はNext.jsで作られているし、ネットショップはNuxtだし、他はまた違う技術で作られているし。
藤村：最近、Remixで作られたものがリリースされているんですよね。
wattanx：そうですね。いろんな技術を使っているので、全部を一気に統一するのは難易度が高いですね。
藤村：STORES のフロントエンドをどうしようみたいな相談が始まるところであった。
Nuxt Bridgeとは？
藤村：そもそもVue.jsはいつ頃から触っていたんですか?
wattanx：Vue.jsを本格的に触ったのは、STORES に入社してからですね。それまでは軽く触る程度、Class API がある時代に触っていたりはしましたけど、ちゃんと触ったのは STORES に入ってからですね。
藤村：そこからNuxt Bridgeまでだいぶジャンプがあるような気がするんですけど。最初はインターナルに興味があったわけではなく、ユーザとして使っていたんですよね。
wattanx：一ユーザーとして使っていましたね。
藤村：Nuxt Bridgeの話を聞いちゃう。Nuxt Bridgeとは何なんですか？
wattanx：Nuxt Bridgeは、今新しいNuxtがNuxt 3とかなんですけど、以前のバージョンをNuxt 2と呼んでいて、2から3ってめちゃめちゃ破壊的変更があるんですね。その移行の負担を減らすために作られているのがNuxt Bridgeというライブラリで、それを入れるとNuxt 2から3にあげるときの移行の負担を減らすことができるツールになっています。
藤村：今日も2から3の移行の苦しみ的なセッションとか他にもあるなと思うし、フロントエンドコミュニティで2から3への移行は大変という話はよく見るんですけど、フロントエンドに詳しくない人に説明すると、どこら辺が大変なんですか？
wattanx：まず、Nuxtって中身はVueなんですよね。Nuxt 2はVue 2で作られていて、Nuxt 3はVue 3なんですね。なので、あげるときにVue 2からVue 3への移行も入ってくるのがまずしんどいポイントです。あとはNuxt 2から3でAPIが結構変わっているので、それもしんどいポイントです。
藤村：2個変わっちゃうわけですね。
wattanx：そうですね。
藤村：想像するに、どっちかだけを上げるのは難しいから一緒にあげざるを得なかった。
wattanx：両方あげざるを得ないですね。
藤村：あるあるだな。悲しいけど、それをやらないとアーキテクチャが次にいけない。
wattanx：そうです。
藤村：Nuxt Bridgeはどんなことしているんですか？
wattanx：Nuxt 3の機能をNuxt 2でも使えるようにしていて、Nuxt 3ではこういう書き方ができますというのをNuxt 2でもできるようにしています。Nuxt 2の状態でNuxt 3になっていく。そうすることによって、最終的にNuxt 3に上げるときの差分を減らしています。
藤村：Nuxt 3の機能をNuxt 2でも使えるように再実装している部分があったりとか？
wattanx：そうですね。
藤村：Nuxt 3の記法で喋るNuxt 2になるみたいな？
wattanx：そうです。
藤村：どうやって作るんですか？
wattanx：Nuxt 3のAPIの実装を見て、Nuxt 2でどう実装するか考えて作っていますね。全く同じというのは無理なので、同じインターフェースを持ちながら中身はNuxt 2用に書いています。
藤村：世の中がNuxt 3になるといらなくなってくれるはずってこと？はかないソフトウェアではありますね。
wattanx：あと半年強ぐらいはめちゃめちゃ使われる感じではあるんですけど、そこから先はみんなNuxt 3になっているでしょうということで、だんだん使われなくなっていくと思いますね。
藤村：なべちゃんがNuxt Bridgeから逃れられなくなってしまって、アプリケーションを何とかメンテするみたいな仕事がめっちゃ降ってきそうだなって。あとはNuxt BridgeはEOLですって言っているのに、結構みんな使っていて保守するかみたいな感じで。そうならないといいけど。
wattanx：なっちゃう部分はあると思います。Nuxt 2の状態でNuxt 3の機能が使えるので、これでいいかってなっちゃうんですね。そこがあるかなという気がしますね。
藤村：Nuxt 3が使えるようになったNuxt 2をNuxt Bridgeでできた状態から3にさらにできやすくするためのチャレンジも何かありそうですね。
wattanx：何かあるかもしれないですね。
Nuxt Bridgeにコントリビュートするようになったきっかけ
藤村：Nuxt Bridgeってなべちゃんが知る前からありましたよね？
wattanx：僕が知る前からありましたね。
藤村：STORES で使っている？
wattanx：使っています。
藤村：なんでその開発に関わるようになったんですか？
wattanx：STORES で使っていて、バグを見つけたんですよね。バグがあったので、issueを立てて、休みの日にバグについて調べていたら、自分で直せるなと思ったんですよね。なので、プルリクを送ってみて、何やかんやあってマージされてみたいなのが最初ですね。そこから、バグをいっぱい見つけて、プルリクをバンバン投げていたら、いろんな権限をもらって、コントリビュータになりました。
藤村：仕事で使っていると直すところがいっぱいあったので、いつの間にかみたいな。
wattanx：そうです。
藤村：最初のバグはどんなやつだったんですか?
wattanx：最初は、ある条件下だとこの関数が実行されないみたいな。そういうバグで、いろいろ調べてて、直せるなと思ったんです。元々、回避方法があったので、そんなに急いでないバグだったんですけど、とりあえずissueを立てて、こうしたら再現できましたという再現環境を用意して、自分で直す。
藤村：もう、再現環境を用意できたら勝ちみたいなところはありますよね。これ直せるじゃん、みたいな。
wattanx：ほぼわかってたみたいな感じです。
藤村：OSSに関わるコントリビューションは初？
wattanx：いっぱい使われているOSSにコントリビュートするのは、初めてに近いですね。自分でもいろいろ作ってたりするし、ドキュメントのタイポ改善みたいなのは、やったことがあったんですけど、がっつりロジックを変えたのはNuxt Bridgeが初ですね。
藤村：グローバルに使われているOSSにコントリビュートする、パッチを書いて送るのに緊張しませんでしたか？
wattanx：いやー、何回かドキュメントの修正を送っていると、ハードルが結構下がります。
藤村：知っているわけだ。この人が見てくれるだろうって思うわけですね。
wattanx：フォークして、ディスクリプションちゃんと書いてプルリクを送れば見てくれることはわかってたので、そんなにハードルはなかったですね。
藤村：少しずつ階段を登っていった。
wattanx：ステップアップしていったんですね。
藤村：新機能追加だとちゃんとプロポーザルを作らないといけなくてハードル高いけど、バグ修正だったら、直りましたわって。
wattanx：そうですよね。
藤村：今はコミット権限を持っていて、メインブランチの開発をしている？
wattanx：write権限を持っていて、リポジトリに直接クローンして、ブランチを切ってプルリクを送ることができます。
藤村：グローバルに使われているOSSの開発に関わっていると、マジで思いもよらない国の人々とGitHubで関わったりするじゃないですか。感触はどうですか？そういうのに初めて触れた時の気持ちを教えていただきたい。
wattanx：めちゃくちゃコメントがついている、みんなが困っているissueがあって、それを直した時に、「Awesome!」とか「いい仕事したね」みたいなコメントが来て、めちゃめちゃ嬉しかったですね。
藤村：あれ謎ですよね。仕事なのか趣味なのかわかんないけど、世界中の人がコメントしてくれる、あの感動はすごいですよね。仕事だとないですよね。仕事は仕事で楽しいけど、グローバルのOSSに何かやるとそういうのが楽しいよな。
wattanx：普段関わっていない方から「助かったよ」みたいな、そういうのをもらえるとめちゃくちゃモチベーションになりますね。
藤村：僕は結構あるんですけど、GitHub上のOSSで普通にバグったコードを出して、直してもらうみたいなことはありましたか？
wattanx：僕がプルリクを出して。
藤村：ボコボコにやられたみたいな。
wattanx：それはないです。会話が難しいところは直接書き換えて修正してくれることが最初の方はありましたけど、バチバチにやるみたいなのは全然ないです。
藤村：昔、HaskellコミュニティのOSSをちょっとやってた時に、数値計算のライブラリがあって、それのプルリクを出したんですよ。わかりやすく計算をミスしてて、まじで恥ずかしかった。世界中に生き恥を晒しました。こいつ四則計算もまともにできないのかっていう、そういう恥を晒しました。糧にはなりましたね。
wattanx：なりますよね。全然あります。タイポとか。
藤村：タイポね。ありますよね。
wattanx：恥ずかしい。
藤村：生き恥を晒しながらでも前に進めると「Awesome！」って言ってくれる人がいたりして、最高に気分がいいんですよね。
wattanx：まじでめちゃめちゃ嬉しいです。
Nuxt 3を勉強したい人はNuxt Bridgeにコントリビュートしよう
藤村：NuxtやVue.jsに限らず、ソフトウェアエンジニアとして興味あることってあるんですか？
wattanx：興味のあること…
藤村：引き続き、Nuxt Bridgeをやっていく？
wattanx：しばらくはNuxt Bridgeをやっていきます。まだまだNuxt 3との差分を減らせるところがあると思うのでそこを探りつつ、Nuxt 3の新しい機能をもうちょっと深掘りして調べようかなと。それこそ STORES で使えるようになったら、もっとフィードバックをしていきたいなと思ってます。
藤村：自分で作ろうとか、こういうのを作りたいみたいなのはありますか？
wattanx：今はあんまりないですけど、業務で困ったりしたら、効率化するツールとかは作る気がしますね。
藤村：Nuxt Bridgeは互換レイヤーならではの悩ましさがあるんじゃないかという気がするんですけど、テクニカルにはどのようなところがややこしいですか？
wattanx：悩ましいところか。Vue 3でしかできないことがあったりとか、Nuxt 2本体の構造を変えないといけないことがあったときに、何もできないのが難しいですね。
藤村：本質的に、そういう変更をしたいから3を作ったんだよなというのは、さすがに吸収できないっていう。
wattanx：そうですね。
藤村：だんだんコードを見せてもらいながら話したくなってきたんですけど、あと2分くらいなので、意外と早いです。では、締めに向かおうかと思うんですが、Nuxt Bridgeの開発を手伝ってくれそうな人たちに一言お願いします。
wattanx：Nuxt Bridgeって、結局はNuxt 3の機能を見て、Nuxt 2に実装しているので、めちゃくちゃNuxt 3の勉強になるんですよね。なので、Nuxt 3を勉強したい人はNuxt Bridgeにコントリビュートするといいかなと思います。
藤村：ありがとうございます。ということで、時間なので終わろうと思います。#論より動くものfm で感想をお待ちしてますので、ぜひとも感想を聞かせてください。 そして、STORES では一緒に働いてくれるエンジニアを探していますので、ぜひとも、彼や僕にお声がけください。ということで、論より動くもの.fm、今回はなべちゃんを招いてNuxt Bridgeの話を聞きました。ありがとうございました。
wattanx：ありがとうございました。（完）
次回の更新をお楽しみに！
お便り募集を始めました。ご意見ご感想をいただけると嬉しいです。
論より動くもの.fm お便り募集フォーム
STORES ではエンジニアを募集しています。論より動くもの.fmを聴いて、少しでも STORES に興味を持たれた方は、ぜひカジュアル面談でお話しましょう！
