v0.0.1-alpha0.1から始めた-CTO 藤村とフロントエンド藤川のおしゃべり

heyで採用広報を担当しているえんじぇるです。

7月13日（火）にCTOの藤村 @ffu_ とフロントエンドエンジニアの藤川@ushiro_noko がTwitter Spacesでフロントエンドについておしゃべりしたので、その様子を一部お届けします。

人生で一番弱気なバージョニングをした

藤村：heyでCTOやってる藤村と申します。フロントエンド老人会という名前で、友達と飲んで、ずっとExt JSとか、Backbone.jsより前のUIライブラリの話をして盛り上がったりする、React以降には何にも役に立たないフロントエンドエンジニアです。

藤川：（笑）そんなことないでしょう。

藤村：（笑）で、藤川さんはheyで働いてくれているフロントエンジニアで、最近週に1時間ぐらい時間をもらって、一緒にコードを書いてるんですけど、その話を最初してみようかな。

藤川：そうですね。

藤村：僕ら、今、STORES プラットフォームという、お店のデジタルまるっとデジタル化するシステムを作ってオーナーさんがもっとこだわりや情熱で、面白いお商売ができるようにするお手伝いをしています。オーナーさん、儲かってほしいですよね。

藤川：儲かってほしいですね。

藤村：ていうのをやってて、複数プロダクトあるんですけど、UIが全部ばらばらなんで、困っちゃうんですよ。使いにくいじゃないですか、普通に。

で、デザインシステムを作ろうという話があって、僕がデザインシステムを作ってるわけじゃないんですけど、ideさんっていう人とかが中心にデザインシステムができたんですよね、いい感じのかっこいいやつが。

藤川：そうですね。

藤村：かっこいいから気分いいですよね。

藤川：そうですね。インタラクションも、めっちゃかっこよくて、イケてるUIって感じ。

藤村：そう。それで、どうやって実装していこうかっていうので、いくつか方法を思いつくと思うんですけど、1個は一番愚直かつ無駄の多い方法。それぞれで、Figmaのファイルとかを見て、CSSを書いて実装するやつ。これがつらいよねと。

究極の道は俺たちのデザインシステムにのっとったマテリアルUIみたいなやつを作って、npmインストールしたら全員が使えるっていう最強のやつ。これは難しすぎるというか、いきなりはできないよねということで、第二の真ん中の道を最初目指してたんですよね。

藤川：そうですね。全部やるの難しいから、とりあえずどこかにリファレンス実装があって、コピペ駆動開発みたいなことができればいいかなみたいな軽い感じで始めたんですけど。全然今、コンポーネント作ってますよね。

藤村：そう。コピペもいいけども、何で作ろうってなったんだっけ。

藤川：何でだっけな。これだったら、いけるんじゃない？みたいなタイミングがあった気がします。

藤村：そうだ。俺たちの最強のUIライブラリ、バージョン1.0.0ですべてのUIがそろってるやつみたいなのを最初は想定してたんだけど。これ、オープンソースのライブラリもそうだけど、0.0.1から始めればよくない？ってなった。

藤川：そうだ。

藤村：それでボタンだけから作ろうみたいな話で、作り始めたんですよね。

藤川：そうですね。最初v0.0.1-alpha0.1みたいな、めちゃくちゃ弱気な。

藤村：（笑）この前、俺、出したやつだ。

藤川： めちゃくちゃ弱気なバージョニングしてますけど。

藤村：俺、人生で一番弱気なバージョン出しましたね。

宣言的UIっていうパラダイムシフトのインパクトがめちゃくちゃ大きい

藤村：heyってフロントエンド開発の比重が多いんですよ。購入者が使うお店の画面もあるし、オーナーさんが利用する管理画面がくそ重いみたいなのがあるから、フロントエンドがすごい重要で、フロントエンドが重要じゃなくなることは、当面ないんですよ。

で、フロントエンドをどう作るかみたいな話があって。どう作るかって、いろんな議論があるんですけど、何で作るかって結構でかいんですよね。今、僕らって、ReactとVueじゃないですか。Vueのほうがちょっと少ない、Reactが多くなってきたみたいな感じ。

僕、Reactより前にも、JavaScript書いてたんで、トラウマがあるんですよ。また違うライブラリが流行るんじゃないかみたいな。僕、いかにもフロントエンドに強いCTOは俺だみたいな雰囲気を醸しだしたりしちゃったんですけど、最近の事情とか、注目されてるライブラリとかあんまり見れてなくて。何かあるんですかね、フレームワークなりライブラリなり。

藤川：SvelteていうZero-Runtime。今、Zero-Runtimeじゃないらしいんですけど、吐き出すバンドルサイズがめちゃくちゃ小さいっていうライブラリがあって、そこは結構使ってるとこは使ってるっていう感じですね。

前に仲のいいフロントエンドで、今、某社でエンジニアリングマネージャーをしている知人と、ちょっと喋ったんですけど、あんまり今、フロントエンドって変化ないよねっていう話をしていて。

Reactってパラダイムシフトが起きたんですよね、出たときって、宣言的UIっていう。今後、例えばReact廃れます、Vue廃れますっていうときって、宣言的UIより、より高度なものか、もしくはハードウェアごと変わっちゃう。例えばHoloLensみたいなものが流行って、ウェブをAR空間で操作できるようになりますみたいな。X軸Y軸だけじゃなくて、Z軸までいろんなこと対応しなきゃいけませんとなったときに、それに適した何かが出てくる可能性はあるけど、それもReact使われてそうだなとか思うんですけど。

藤村：そうね。Reactでも、3次元でもReactもVueもいけそうだよね。HTMLの部分だけ改造すれば。

藤川：宣言的UIの先って、僕、全然想像ついてないんですけど、多分そこが生まれないとパラダイムシフトって起こらないだろうなと思ってて。

て、考えると、Backboneとかで、7、8年前ぐらいに流行って、今はあんまり使われてないですけど、VueとReactが同じように、VueもReactも、出てから既に5年ぐらい経ってると思うんですけど、向こう5年で同じような道をたどるかというと、ないんじゃねえかなって思ってます。

何が起こるかわかんないんで、そこは注意する意味がないとは言わないんですけど、宣言的UIっていうパラダイムシフトのインパクトがめちゃくちゃ大きくて、いまや、世界中のデフォルトになってるわけなので。多分宣言的UIで、今、困ってるっていう人、いないと思うんです。

藤村：確かに。宣言的UIくそだなと思ってる人、あんまり聞いたことない。

藤川：直近、データを基にしたレンダリングだと、こういうことできないで困るよねみたいな人って、あんまりいないと思うので。困る人が出たら、それを解決する何かが出ると思うんですけど、あんまりそういう話聞かないので、しばらくないかなと思ってます。

藤村：まあ、なさそうだな。出てくるような時代になると、さっき言ったような、役に立たないかもしれないことも勉強してきた人の底力みたいなものが生かされるんでしょうね。

藤川：そうですね。そういうとこで、いち早く飛びついて、ものを理解して取り込めるっていうのは、基礎がちゃんとできてる人だと思うので。

藤村：今、流行ってるパラダイムじゃないものを、俯瞰的に移り変わりで、流行ってないものも含めて理解できてる人とか、いろんなパラダイムの基になってるコンセプトみたいなのを深く理解してる人じゃないと、わかんないんじゃない？

藤川：しかも、多分、次出てくるパラダイムの変化って、宣言的UIに影響を受けてると思うので。

藤村：そうですね。宣言的UIの問題を解決するやつが出てくる。

藤川：そうだと思うんです。なんで、結局ReactとかVueがどうやって、値の変更を検知して、再レンダリングしてるかっていうところは理解しておいて損はないかなみたいな。全然heyのフロントエンドの話してないんですけど。

藤村：してないですね。それで言うと、今、heyのフロントエンドの話だった。僕としては、今ってReactとVueべったりになっちゃってるじゃないですか。これで、今後違うフレームワークとかツールが、すごい主流になったときに、僕らが身動きとれねえってなったら、すごいつらいな。新しい機能を出すのにすごい時間かかるみたいになると嫌だなと思って、この話をしたんですが、当面大丈夫そうではあるよねみたいな感じもしてたところ。

藤川：多分ReactやVueが、やべえ、廃れちゃったってなるより前にうちのプロダクト、でかくなりすぎて、どうしようみたいになってると思うんです。

藤村：そうですね。どちらかというと、大規模フロントエンド開発っていうやつがそびえ立ってる感じですよね。

藤川：そうだと思います。既に結構大変なんですけど、プロダクトが3つプラスでPOSレジを最近リリースしたので、4つなんですけど。

藤村：さらに言うと、実はID基盤とかもありますからね。

藤川：そうです、ID基盤。世間では、あんまり認知されてないですけど。

藤村：確かに言ってない。

藤川：各プラットフォームで共通で使えるIDの基盤っていうのを、自作したんですね、あれは。

藤村：そうなんです。自作って言っても、コアの部分はもちろん、ありもののライブラリを使ってるんで、部品組み立てて作ったみたいな感じですね。

藤川：それも、これからサービスがスケールしていくにつれて、絶対に必要になることだから、このタイミングでやりましょうみたいな。

結局われわれがやることって、今後事業がスケールしていくから、じゃあ、そのスケールに合わせて、どういうことをやるべきかっていうところから出発してるんで。ReactとかVueが死ぬからどうみたいなことよりも前に、事業的にどうなの？みたいなところから話す気がしますね。

ぶっちゃけ、Vueが死ぬってなっても、じゃあ、フォークして俺たちがメンテすれば生きていけるんなら、それでよくね？みたいな話になる可能性もあるじゃないですか。ならんとは思いますけど。

藤村：（笑）Vueをフォークしてしまった会社の話とか聞いてみたい。

大規模フロントエンドをどうするか

藤村：大規模フロントエンドになっちゃったんですね。これ、本当どうすればいいんだろうな。

記事にも書いたんですけど、これをどうするかの設計って難しい。設計も難しいし、設計したものを現実に出現していくのも難しくて、これってオーナーさんに提供している価値が増えるっていうものでもないし、しかも、やるとなったら数年がかりだったりもするし。

その一発目をどう作るかっていう意思決定は、あとですごい響くし、めちゃくちゃ難しいんですね。バックエンドだと何をどう、別のサービス、別のバックエンドのAPIを切り出していくみたいなのって、大工事オブ大工事じゃないですか。それの極致が、俺らはマイクロサービスでいくみたいな話だと思うんですけど、フロントエンドも多分同じような、ある種の大規模なアーキテクチャの変更を決めて、戦略的に投資していくっていうのをやらないといけないレベルに、僕らの場合はなっちゃってるという気がするんですよね。

これをどうしていくかを考えるのが難しいし、僕が考えるのはやってみたいけど、それはさすがに誰かに任せたらというところもあるので、この前の記事を書いたみたいなところもあるんですね。

藤川：やってくれる人いませんかねみたいな。

藤村：誰か相談に乗ってくれーみたいな。一緒にやってくれーみたいな感じで。

藤川：興味ある方いませんかが近いと思うんですが。

藤村：そうですね。大規模なフロントエンドの分化って、マーチン・ファウラーのブログにも書いてあったけど、マイクロフロントエンドみたいな話って出てるんですけど、よくよく見てみると、フロントエンドを分割するときの小技集みたいな感じになってて、そうだよね。どれもみんな思いつくよね、感じしかなくて。

だから、誰しもが思いつくやつを、どこでどう当てはめて、どうやってリリースしていくかが難しいんだよなみたいなことを思って。マーチン・ファウラーのブログは、こういういかにも便利そうなことを並べて、俺たちはすごいことをやってるって感じにしやがってみたいな。散々マーチン・ファウラーのブログ読んでた人間がこんなことを言うのも何なんですけど、思っちゃったみたいな。

藤川：めちゃくちゃとがった話するじゃないですか。

藤村：いやいや、全然もう、穏健派なんで。とかいうのを思って、大規模フロントエンドってどうすればいいのかなって。

藤川：大規模フロントエンド、ちょっと片足突っ込んでますよね。デザインシステムとかって、結局どういう風に管理していくか、更新していくか、リリースしていくかみたいなところ、絶対話として出てくるし。

藤村：リリース、悩ましいですよね。

藤川：リリース、お願いベースになっちゃうよなとか。

藤村：リリース戦略が。

藤川：結局作ったデザインシステム使われなきゃ意味ないんで。別に苦言じゃないんですけど、デザインシステムって、できあがったコンポーネントありきだなというのがあって、結局俺たちの考えた最高のデザインシステムをFigmaに起こしたとしても、それが実装されなければ、誰にも価値を届けられないじゃないですか。

藤村：それは、そうね。

プライベートで、美大出身の人と仲良くなることが多くて。美大出身の人たちって、われわれが本当にこの変数名どうしようって1時間2時間考えるじゃないですか。それと同じことを、グラフィックデザインのサイズとか、字をどうやって配置するかっていうので、ずっとやってるんですよ。

それで達成される質っていうのって、我々エンジニアにはとてもじゃないけど、実現できない非常に細かい蓄積があってのもので、それが結果的に、目で見てUIとかを認識するわけじゃないですか。その時にシュッとそれがボタンであるとかいうところがわかって、全体の体験として、STORESだねってなるっていうところに貢献してるんで、何だろう。自分としてはそこがまじで地獄のように大変でっていうところは、強調しておきたかったかな。

藤川：（笑）めっちゃわかりますよ。

藤村：それを起こしただけだと絵に描いた餅っていうのは、まさにその通りではあると思う。

藤川：言いたいのは、今、デザインシステムの名称を言いそうになって、焦ったんですけど。

藤村：早く公開したいですね。

藤川：早く公開したいです。しんどいんでね。隠す意味もあまりないかなと思うんですけど。

デザインシステムを作ってるデザイナーさんとめっちゃやり取りするんですけど、ものすごい考え抜かれてて、あらゆるユーザーを考慮してるんですよね。最近弊社で、アクセシビリティについて考慮したいよね、という実装レベルの話でいろいろ出てきていて。

発端は、オーナーさんが運営しているストアでお客さんがものを買えなかったっていう、キーボード操作オンリーでっていうところから、やっていかなきゃねという風に気付いたっていう感じなんですけど。それをデザインシステムで、ある程度アクセシビリティが担保された状態を目指したいよねっていう話になって、デザイナーさんと相談してみたんですけど、既にデザイナーさんは色覚など含め、全部考慮してやってるんですよね。

藤村：プロはそうなんですよね。

藤川：もうやってるんだなと思って。うちら、エンジニアが実装サボってるだけなんだなっていう。申し訳ないなと思って。結局やってないの自分じゃんっていう。

藤村：やばい。まだ0.0.1-alpha1しか出してない人間からすると、耳が痛すぎる話です。

藤川：（笑）そうなんですよね。だから、すごいデザイナーさんがやってることって、めちゃくちゃ意義があって、自分たちよりもお客さんにとって、どういう価値を届けられるかっていうことを、すごい考えながら、どんなお客さんがいるのかっていうのを考えながらやってるんだなっていうのを、すごいわかったっていうか。

僕たちもやんないとなとか思ったんですけど。じゃあ、めちゃくちゃ考え抜かれたシステム上のデザインっていうのを、実際にコンポーネントにして、お客さんに直接届けるっていう仕事って、僕たちの仕事だと思うんで、だから、実装って大事だよねっていう、オチがない話なんですけど。

藤村：それで言うと、僕らが早くVueのUIライブラリと、ReactのUIライブラリを書いて、それをオーナーさんに届ける速度を上げるっていうのを頑張らないといけないですね。

僕らの場合、フロントエンドって添え物じゃない

藤川：heyのフロントエンド、今、どんな人と働きたいみたいな話したいですね。せっかくたくさんの人が聴いてらっしゃるので、どんな人と働きたいと思いますか。

藤村：今、考えてるんですよ。何で難しい質問かというと、例えばポジションが1個しかなかったら、こういう人ですって言えるんですけど、このぐらいの組織規模になると、全方位的にポジションが空いてるんですよね。

なので、「藤村さん、それは、state モナドの理解が微妙に間違ってる」みたいな話をしてくれる人もほしいし、「そういうところはいいんだ」っていう人も来てほしいし、いろんな人が活躍してもらえる状況ではあるんで、逆にどういう人がっていうの難しいみたいなところがあって、せっかくのこういう場面で、歯切れの悪い答えになってしまって、俺はどうしようみたいな感じ。

藤川：（笑）heyのフロントエンドの求人みたいなやつも、まとめるかみたいな話もちょっとしましたよね。

藤村：そうなんですよ。でも、なんだろう。思うのは、僕らの場合、フロントエンドって添え物じゃないじゃないですか。

藤川：添え物とは？

藤村：フロントエンドは、添え物ではなくて、ある種一個の主役なんですよね。だからフロントエンドのコードを書いて、事業的に利益を出して、社会貢献をすることができるって、喜びの一つだと思うんですよね。

僕は会社って、人に喜んでもらって、世の中を豊かにして、利益を出すことが至上命題であると思っていて。それが会社っていうものの存在意義だと思うので、そこにフロントエンドエンジニアとして貢献して。かつ、僕らエンジニアとしては、難しい問題を倒すのも、喜びじゃないですか。

藤川：まあ、そうですね。

藤村：何か幸福に働けて、いい時間を過ごせるみたいなことをしたい人に来てほしいなみたいな。やばい、めちゃくちゃ働く上での一般論みたいなのを言ってしまって、何もメッセージがないみたいな感じになってます。

藤川：全然伝わってるとは思いますよ。

藤村：だから、フロントエンドで仕事をしたい人にとっては、大きな成果が出るところだと思うんですよね。僕らの会社でフロントエンドを書くのって、世の中に大きなインパクトがあると思うので、それを面白いと思ってもらえる人に来てもらえるとうれしいなって思いますね。

藤川：直接heyのビジョンに共感していただけたら、めっちゃうれしいんですけど、Just for Funとか、ファミトラ（ファミリア＆トラステッド）とか言ってますけど、直接じゃなくても、例えばとあるウェブを使っている人がショップで何か購入しようとして、その体験がめちゃくちゃよくて、そのお店のリピーターになってくれたみたいな。実はその体験って、全部俺が実装したんですよって言いたくないですか。めちゃくちゃ言いたいじゃないですか。

藤村：それはそうね。

藤川：そこに喜びを感じられる人だったら、ファミトラとか、Just for Funとかという文字列がぴんときてない人でも、そこを何とかしてあげたい、俺の力でと思っている人は、結果的にうちのビジョンに共感できてるって思うので。

藤村：そういう意味では、僕らのビジョン、そんなにうちの会社のいいところというか、僕、働いてていいなと思うのって、そんなに僕らが目指してる世界観のことを嫌いな人って、そうそういないはずなんです。

藤川：まあ、そうですね。

藤村：いろんな人を巻き込めるっていうか、いいと思えるところを会社が目指しているっていうのは、すごい財産だなと思うんです。僕らって、万人がいいねと思えるところをやっていると思ってて。

それぞれの人生とか生き方のコンテキストで楽しめるっていうか、それぞれの人生のコンテキストを乗っけて何か会社がやろうとしてることに、ど真ん中で全部、俺は100％hey野郎だっていう感じじゃなくても、少しでも乗っかれるっていうところは、僕らの会社のいいところかなと思いますね。なので、100％じゃなくても大丈夫。

藤川：何なら、友達がネットでショップを出したくて、どこにするか迷っているんだけど、一番パフォーマンスいいサイト教えてみたいな、フロントエンドエンジニアに質問がきたときに、胸を張って、うちが一番世界で速いって言いたい。

冷やかしでもいいんで話聞いてください

藤村：最後は来てくださってるフロントエンドエンジニアの方と、聞いてくださった方にお礼っていうことで締めましょうか。

藤村：スタートアップ業界って、おおむね3年とか5年くらい同じ会社に所属するじゃないですか。3年とか5年って人生においては、結構長くて。その時間をどう過ごすかって、重要なチョイスだと思うんです。

それで言うと、僕は僕個人としても、heyっていう会社で働けるのは、すごいハッピーだし、ここで仕事をすることで、世の中、一緒に働いてる方、あとは株主の方とかに価値を提供することが、すごいいい体験だなと思っていて。いい時間の使い方だなと思っている。すごいジャンプしちゃったな、話が。

藤川：（笑）

藤村：で、フロントエンドで仕事をしている、フロントエンドじゃなくてもエンジニアをやっている方に、キャリア的にも、成果的にも、向かい合う課題の難しさ的にも、いい環境は作れている気もするので、ぜひ一緒に働いてくださる方がいてくれるといいなと思っています。（笑）やばい。だんだん逆に難しくなってきた。

藤川：（笑）。そんなことないですよ、全然。本当にその通りだと思います。3年とか長いですよね。

藤村：そうなんですよ。青年期のいい時間の3年って、人生で1回しかないですからね。難しい問題解いて、お客さん、オーナーさんを助けて、自分としてもハッピーな職業人生を送ってっていうのが、できるっていうのは、すごい重要なことだと思うんで。

僕もそういうところが提供できるように最大限努力するつもりだし、できると思うんですよね。フロントエンドに限らず、エンジニアリングに限らず仕事をするという面では。

なので、ぜひもし興味があったら、一声かけていただければ、僕もお話しさせていただきたいなと思うので、もし、今、聞いてくださってる方で興味があるという、ちょっと冷やかしでも話を聞いてみたいなという方があったら、お気軽に声をかけていただければなと思います。

藤川：冷やかしでもいいんで、カジュアル面談を受けていただけると、ここで話した話より、もっと具体的な話が聞けると思うので。カジュアル面談のほうが、何ならいい話ができると思うので、ぜひ興味ある方は、ちょっとheyのフロントエンドってどういうチーム構成で、どうやって開発しているのか調査に行ったろうみたいな。別に入る気なくてもいいんで、来ていただけると、うれしいです。

藤村：相談に乗ってほしいぐらいの感じですよね。話を聞いてほしいですね。