hey Product Blog

こだわりを持ったお商売を支えるプラットフォーム「STORES」の開発チームによる技術ブログです。

デザインシステム、Nuxt化、アクセシビリティ。フロントエンドの課題が揃っている面白さ

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

公開進捗詰め?AngularJSをNuxt.jsに置き換えてる話

藤村:藤村大介といいます。ヘイでCTOをやっています。
何でフロントエンドにこんなにこだわるかというと、1つはヘイには3つの事業があって、STORESというネットショップ作成サービス、STORES 決済というキャッシュレス決済、STORES 予約というオンライン予約システムがあります。

 

決済はそんな激重ではないんですけど、予約とECはフロントエンドが激重というか、フロントエンドの事業インパクトがでかい事業なんで、フロントエンドの人にきてもらいたいなっていうのがあります。それと、結構昔からフロントエンド好きで、仕事でもよくやっていたので、フロントエンドの話が好きみたいな人間です。

 

最近はフロントエンドの仕事でいうと、STORESのID基盤を作ったんですけど、そのフロントエンドをNext.jsで書きました。よろしくお願いします。

 

横田:横田と申します。STORESのEC事業で、フロントエンドのチームのエンジニアリングマネジャーをしています。で、STORES自体は2015年入社なんで、7年目ですね。

 

はじめはサーバーサイドとフロントエンドの両方を書くような感じで3年ぐらいやってて、ヘイになったタイミングの2018年ぐらいからフロントエンドチームというのができたので、そこでマネジャーをやり始めました。そこから3年ぐらいはエンジニアリングマネージャーをやってる感じです。よろしくお願いします。

 

藤村:ECのフロントエンドって、どんなふうにできてるんですか。

 

横田:ECはいろいろ構成要素があるんですけど、大きく分けて3つかな。ストア側っていう、購入者さんが見る画面、アイテムが並んでたりだとか、決済とかする画面とかがあるんですけども。

 

藤村:買うところっすよね。

 

横田:そうですね。そこはもう完全にRailsでできてます。RoutingとかもRailsでやってて、そこにAngularJSがのっかってる。一部分だけがVue.jsに変わってるような状態ですね。で、このストア側っていうのは、僕が入ってから2年ぐらいで一回リニューアルしてるんですけども、それからほぼほぼさわられてないぐらいの感じです。

 

あともう1つ大きな構成要素としてあるのが、ダッシュボードと僕たちが呼んでいるオーナーさんがネットショップを管理する画面ですね。アイテムを管理したり、オーダーを受注して発送したりするときに使うもの。そちらは、AngularJSのSPAで元々はできているのを、今、絶賛Nuxt.jsで置き換え中ですね。そっちに今は注力してて、ずっと置き換えを進めてます。TypeScriptで書いてるのと、あとNuxt.jsもComposition APIとか使ってやってます。

 

あとは、サービスサイトですね。ECのトップページはNuxtを使ってます。そのほかには、前回のTwitterSpacesで話していた新デザインシステムができてきたりだとか、それの前に1個、EC内で使ってる共通基盤って僕たちが呼んでるようなコンポーネント集みたいなものもあって、その辺の管理もしてたりするっていう状態です。システム的にはそんな構成ですね。

 

藤村:ダッシュボード、オーナーさんが使う管理画面って、もともとはRailsリポジトリにくっついてたの切り出したんですか。

 

横田:そうです。切り出していってるっていう状態ですね。まだまだ結構RailsリポジトリにAngularJS載っかってるかたちで残っている状態ではありますね。

 

藤村:じゃあ、もともとは全部そっちにあったんですね。

 

横田:そうですね。全部そこでしたね。

 

藤村:それ移し始めたのっていつ頃だったんですか。

 

横田:これが結構前で、いつなんだろう。3年目に入るぐらいかもしれないですね。ちょうどヘイになるかなっていうぐらいで始めましたね。

 

藤村:2018年、2019年とか、それぐらいですよね。

 

横田:そうですね。そのあたりから。

 

藤村:RailsにくっついているのからSPAにする時は、いいこと悪いことみたいなの考えるじゃないですか。やっぱ悩みました?

 

横田:でも、ダッシュボード自体は、もともとAngularJS、SPAにはなってたんですよね。

 

藤村:そういうことか。

 

横田:そうなんですよ。リポジトリだけ一緒になってたっていう状態で。で、最初のインデックスだけRailsから配信されてるようなかたちだったんで、そこはそのままの構成でいいかなっていうので、切り出すタイミングで、リポジトリを分けたという状態ですね。

 

藤村:僕らのオーナーさんが使う管理画面って、結構でかいじゃないですか。

 

横田:でかいっすね。

 

藤村:これって、何かRailsだとよくくそでかモノリスみたいな話になるけど、くそでかNuxt.jsプロジェクトみたいな感じになったりしそうな感じなんですかね。

 

横田:最終的にはくそでかになるんじゃないかなっていう感じですね(笑)。

 

藤村:(笑)。まあそうだよな。

 

横田:まだまだ半分も終わってないような状態なんで。で、やっと最近一気に進められる体制になってきたんで、これからそこと戦っていくみたいな感じですかね。

 

藤村:置き換えていくのは、どうですか。いや、何かあれっすね。CTOが、ECのフロントエンドのエンジニアマネジャーに、進捗どうですかって聞くの、公開進捗詰めみたいな。

 

横田:これ詰められてる感じっすかね(笑)。最近やっとガッと進むようになった感じはありますね。

 

藤村:やったー。

 

横田:本当に、そうなんですよ、おかげさまで(笑)。2年ぐらいはどうしても機能の優先だとか、結構大きなデザインのリニューアルが入ってて、そこで半年は止まったりっていうのがあったんですけど、それとのバランスも取りつつ、人数も増えたんで、置き換えに注力できるメンバーも今、複数名いるので、結構進みはよくなったのかなって感じですね。

 

藤村:いいですね。

 

横田:で、そろそろやっと終わりを見据えて、スケジュール立ててできるかなって感じですね。

 

藤村:いや、ダッシュボード全部SPAになると、結構楽そうですよね。楽そうっていうか、思った以上に生産性インパクトあるんじゃないかなと、僕は想像してるけど。

 

横田:確かにそうですね。AngularJSもなかなか見たくないと思うので(笑)それだけでも。

 

藤村:僕らの、オーナーさんの何億円の流通額を作ったんだっていう偉大なレガシーですよね。

 

横田:まあそうですね。それ考えると偉大ですね。

 

藤村:レガシーって遺産っていう意味だから、いいことなんですよね。

 

横田:確かにそういう意味ではだいぶ価値は生みましたね、これ。次に残ってるのが、ストア側をどうしていこうかって、購入者側が結構残ってるんで、そこが一番、でも何か一番面白いとこかなって感じはしますね。

 

藤村:そうですね。最後に残してあるとっておきのデザートみたいな感じありますよね。

チームランチ会が大喜利化している

藤村:フロントエンドチームはどんな体制なんですか。

 

横田:ECのフロントエンドチームはUI改善チームっていう名前なんですけど、今メンバーが僕含めて11人ですね。社員8人、業務委託3人でやっていて、大きく2つのチームに分けています。

 

プロダクト系チームと呼んでるんですけど、機能開発とか既存機能の改修とかを行う3名のチームが2つあって、そのチームはPdM、バックエンド、デザイナーのメンバーと一緒に開発してスクラムでやってるような感じす。

 

あと基盤改善チームと呼んでるチームがあって、そこにも3名いるんですけど、今のところはNuxt化と新デザインシステムのほうへ注力しています。もともと基盤改善チームって、できたりなくなったりみたいなのを繰り返してきたところがあって。プロダクトの機能開発にリソースを取られがちで、どうしても先を見越した技術的な投資ができない状態だったんです。最近はその3名はリソースを確保できる状態になってきてて、Nuxt化に力を入れてますね。なので、そこのチームで、フロントエンド全般の基盤作りとか、技術的な検証、設計やDevOps周りも含めてやってるような感じですね。

 

藤村:3人編成って、成り行き上そうなってる感じ?それとも3人がいいなみたいな?

 

横田:そう言われると、2人だと少ないなっていう感触があって、3人が今んところベストな感じですね。

 

あと、運用のところで、運用週っていう仕組みを設けていて、週ごとに1人、運用週に割り当てられて、その人は改善タスクとかプロダクトの開発から一旦離れて、改善とか問い合わせの対応とかするっていう時間を設けてるんですね。

 

なので、2人体制だと1人離れてしまうと、どうしても1人だけになっちゃって(笑)、レビューがされなくて進まないとかいうのがあったので、3人にしたっていうのが最初だと思いますね。ただ、全体の人数が増えてくると、運用にあたるタイミングもどんどん1カ月先、2カ月先になってくるんで、今だと結構2人でも回ったりするのかなっていうような感覚はあったりしますね。

 

藤村:何かでも、僕、大体5人とかのチームに開発ってなりがちだなと思ってて、3人って面白いなって思いました。

 

横田:それって、フロントは5人ってことですか。

 

藤村:違う違う。一般的にエンジニアのチームって、よくいわれてんのが、マネジャーが見れる人数、8人が限界みたいなのがあって。で、8人の開発チームって何か多いなって感じとかあるじゃないですか。で、5人ぐらいのセットがちょうどいいみたいな感覚が僕ん中にあって。

 

横田:それで言うと、バックエンドと合わせると6人かな。

 

藤村:そういうことか。

 

横田:なので、大体それぐらいの規模感でやってます、いち機能は。あと、デザイナー1人とPM1人ぐらいの体制が、標準的なやつですね。

 

藤村:どんな雰囲気なんですか。

 

横田:雰囲気、難しいですね(笑)。どんな感じなんですかね。みんな自分から、この辺やりたいですとか、改善したいですみたいなのが出てくるチームになってるのかなと思っていて。

 

最近だとアクセシビリティの改善をやりたいっていうのがチームの中から上がって、みんなで2、3カ月ぐらい勉強会をやって、実際にそこからプロダクトに落とし込んでいってます。こういうのやりたいですみたいなのが発信できて、それを実際に動けるような状態にはなってたりするのかな。

 

藤村:何か昔、UIチームが最近ハマっているものみたいなesaがありましたよね。あれ超面白かったですね(笑)。

 

f:id:sweet_chiho05:20211001141920p:plain

チームランチ会のお題

横田:月1でチームランチ会っていうのをやっていて、毎回お題が設けられて、今ハマっているものとか、今年買ってよかったものとか、全然技術関係ないものとかをだらだらみんなで話してるんですけど、みんなそれをちょっとやりすぎて、最近大喜利みたいになってきてて。

 

藤村:なってるよね(笑)。

 

横田:面白いことを言わないといけないみたいなプレッシャーがだんだん出てきてるみたいな感じです(笑)。

 

藤村:あれ、コンテンツ力かなり高いですよね。

 

横田:そうなんですよ。近づいてくると、プレッシャーになりますね(笑)。

 

藤村:(笑)。面白いこと言わないといけないチーム、つらいな。

 

横田:ちょっとそこはリセットしないといけないですね、一回(笑)。

 

藤村:盛り上がりすぎた弊害ですね(笑)。

 

横田:いや、でも面白いですね、本当に。

 

藤村:あれ超面白い。

 

横田:仕事と全く関係ないことを話してることが多いんで。みんなのこととか知れるんで、いい場っすね。

 

藤村:いいですよね。単純に気持ちよく働けますよね。

 

横田:そこで話してると話してないだと、だいぶ違うかなって感じはありますね。誰かいないんですか、今。メンバー。

 

藤村:ここで一緒に話せる人ですよね。

 

横田:うん。ヤマピーがいる。山下さん呼びますか。

 

藤村:いいですね(笑)。

 

山下:こんばんは。

 

藤村:すいません、急にお誘いしちゃって。

 

山下:山下といいます。2019年の4月に入って、ずっとECのフロントエンドをやっています。今は新規機能開発のチームにいて、日々新しい機能を作っております。みんなからはヤマピーって呼ばれてます。

 

藤村:ありがとうございます。

 

横田:機能開発系のチームでリーダーをやっているヤマピーですね。

 

藤村:質問していいですか、お二人に。STORESのフロントエンドの仕事してて、何が面白いですか、何個かあるとしたら。面白ポイント。メンバーが面白いっていうのが1個(笑)。

 

横田:何だろうな。フロントエンドのやりがいが、大きいサービスなのかなっていうのはありますよね。反応とかもダイレクトにもらえることが多いですし、オーナーさんの作業に直接関わるような管理画面を作ったときの反応なんかもたくさんいただけて、それがいい反応だったりすると、自分がやったったなっていうのが感じられたりだとか。フロントエンドでやってて面白いこと、何すかね。

 

山下:今のタイミングだと、新規機能開発とかもそうなんですけど、基盤周りでデザインシステムだったり、リプレイスだったりとか、アクセシビリティも今動き始めてたりしてて。結構退屈しないんじゃないかなと思いますね、常に興味のあるものが近くにあるというか。

 

藤村:確かにフロントエンドでありそうなネタが、事業上のインパクトがある課題としてそろってるみたいなところありますね。

 

横田:確かに。

 

山下:大体そういう面白そうなネタとかが、課題から生まれてきて、それを声出す人もちゃんといるので、そこがいいチーム。ふざけてるだけじゃないのかなと思います。

 

一同:(笑)

 

横田:何かしらちょっと新しいところとかは、機能開発のところで盛り込んだりしようみたいなところはあったりするんで、その辺がすごい事業的にも絡む改善ができるところなのかなっていう感じですね、ECのサービスだと。

 

藤村:いや、僕は改めて聞いてて思ったんですけど、フロントエンドの仕事をして、使っている方の事業にフロントエンドのUIの改善がすごいインパクトがある。で、オーナーさんが必要としてるものを作ると、オーナーさんが喜んで売り上げがあがって、僕らの事業としても伸びるみたいなのって当たり前っぽく感じるんだけど、この当たり前ができてるのはまじで偉大というか、いいよなって思います、単純に。すごい語彙力ゼロみたいな人間になってしまった。

 

偏執的なこだわりを何かに持ってる人が好き

藤村:僕、さらに横田さんに聞きたいんですが、マネージャーあるある質問なんですけど、誰かにパスしたいマネジメント仕事って、どういうのがあります?

 

横田:パスしたいやつか。パスしなきゃいけないやつはいくつかあって、すごい細かい自分しか知見がないようなところの機能だったりとかが、まだ持ってる部分が正直あって、その辺はちゃんと渡さないとなっていうのがあるんですけど。

 

基本的にうちのチームは、どうしてもマネジャーしかできないような仕事以外のところは、かなり任せてパスできている状態かなと思ってて。それこそ、今いるヤマピーとかリーダー陣とかには、ほぼほぼプロジェクトのところは任せてやってもらってるし。なので、あと残ってるのは、本当にEMがやるもんだろみたいなところだったりするんで(笑)、そこはまあまあ、やるしかないかなって感じですけど。

 

藤村:それって、ある種、自立的なチームになってるってことだと思うんですけど、最初からやっぱ自立的なチームにしようっていうのはあったんですか、思いというか。

 

横田:どうしても自分が頼りないと思ってたんで(笑)

 

藤村:(笑)

 

横田:10人もマネジメントするのは限界があるなと思ってたんで、そこはもう任せれるやつはどんどん任せてやっていったほうが、チーム的にも強くなるかなっていうのはあって。どうしてもやっぱ自分が持ちすぎちゃうと、自分の限界のとこまでしかチーム自体も成長しないかなっていうのがあったので、意識してやってもらうようにはしてましたね。

 

藤村:いいですね。耳が痛いです、僕は。

 

一同:(笑)

 

藤村:難しいんですよね、全部やりたくなっちゃうから。

 

横田:いや、わかる。

 

藤村:大胆にやらないことを決めないと。

 

横田:ヤマピーにはすごい任せすぎてる感もあったりするかなと思うんですけど。

 

山下:いやいや、余裕ですよ。

 

横田:(笑)

 

藤村:おー(笑)。

 

横田:まだまだいけるな。

 

藤村:かっけえ。

 

山下:僕が入社した時はUI改善チームの社員4人目で入社して、業務委託の方が3人で、計7人だったんですけど、入って1カ月後ぐらいには、1人のプロジェクトにアサインされました。そこから結構いい距離で、開発を任せてくれて、めちゃめちゃうれしかったし、成長できたし、あのとき1人で任せてもらえてよかったなみたいな時期はありました。

 

横田:いい話だ。

 

藤村:いい話すぎて、特にコメントすることがなくなってしまいました。

 

一同:(笑)

 

横田:確かに突っ込みどころ残さないとだめですね。

 

藤村:大喜利体質が出て(笑)。僕から質問してもいいですか。これは長い質問なんですけど、お二人に聞いてみよう。こういう人がきてくれると、これ3種類あるんですけど、1.個人的に楽、2.事業上よい、3.よくわからないけど楽しそう。

 

横田:最後むずいっすね。よくわからないけど楽しそう(笑)。

 

藤村:個人的にこういう人来てくれると自分楽だなみたいなので、どういう仲間が増えるといいなみたいなのあります?

 

横田:でも、事業上いいみたいなのは、ほぼほぼ一緒のような感じになっちゃいそうな感じですけど、一つはマネージャーですね。

 

11人とかの規模になってくると、そろそろ1人で見切るのもしんどいかなっていうのもあったりするんで、半分半分とかで見たりだとか、ちょっと見るところを変えて、違う視点でやれるマネージャーがいるとすごい助かります。

 

あとは、これからどんどんストア側を攻めていくうえで、テック的なところをリードしてくれるテックリードみたいな人とかがいてくれたらいいなと思いますね。あとは、楽しそう…難しいですけど(笑)

 

藤村:(笑)

 

横田:楽しそう、何すかね。でも、バックエンドにも強い人がフロントチームとしていてくれると、助かるなというか、やれることの可能性が広がるなと思っていて。

 

藤村:確かにね。ほぼほぼバックエンドエンジニアでもあるみたいな人がいてくれると、めっちゃいいですよね、フロントエンド。

 

横田:それぐらいの人がいると、めちゃめちゃ助かりますね。

 

藤村:あえてフロントエンドもできるバックエンドの人を、UI改善チームにきてもらうとかも、すごい生産性上がんのかもしんないですね。

 

横田:めちゃめちゃいいかもしれないですね。

 

藤村:山下さんはどうですか。

 

山下:きてほしい人だと、物怖じせずしっかりもの言ってくれる人、過去の経験からとか、そういう人は欲しいなとは思いますね。あと課題を見つけて提案してくれるようなアクティブな人は、いてもらえると助かるなっていうのがあって。

 

というのも、やっぱ僕たちずっと中で開発してると、自分たちが書いてるコードが、実は外から見るとあんまりいけてないみたいなことって、長らく開発してると出てくるので、そういうところに鋭く突っ込み入れてもらったりとか。でも、入社したばっかりでそういうところ躊躇しちゃうこともあるかもしんないんすけど、そういうところを言ってくれる人とかは、いてもらえると助かるなっていうのはありますし。

 

藤村:よくわかんないけど楽しそうっていうのは?

 

山下:こういう人は楽しそうだなみたいなってことですか。

 

藤村:そうそう。技術的にもキャラ的にも。

 

山下:何だろうな。チームメンバーが今持ってない得意領域がある人とかは、きてくれたら楽しくなりそうだなとかは思ったりします。『ONE PIECE』じゃないけど、『ONE PIECE』のメンバーってそれぞれ強みがあるじゃないですか、特徴が。そういう感じで、まだ強みがかぶらないところの強みを持ってる人っていうか、はありますかね。

 

藤村:目の前の仕事に直接役に立つとかいうのじゃなくても、問題解決の引き出しとかになってきますもんね。

 

山下:そうなんですよね。

 

藤村:わかります。僕的には、IDとかフロントエンドのセキュリティに詳しい人きてくれるといいなみたいなのは、ID基盤作ってるからってのもあるけど、個人的にはフロントエンドという面だとあったりしますね。

 

横田:藤村さんのよくわからないけど楽しそうな人って、どういう人なんですか。

 

藤村:これはもう完全に趣味で、あんまり世に使われなそうなオープンソースのソフトウェアを一生懸命作ってる人とかすごい好きなんですよ。情熱があって、自分の作品をプログラミングで作ってる人はすごい好きですね。そういう人は、大体そういう何かを作ることを通して、プロダクト作るのってオープンソースでも結構大変で、プロダクトデザイン力を求められるし周辺知識とかもすごい要るし、結構そういう何か自分で作ってる人は、事業やる上での力を持ってるってのは、すごい思うんですよ。

 

横田:確かにすごいわかるかも。

 

藤村:あとは、やっぱ偏執的なこだわりを何かに持ってる人が好きですね。めちゃくちゃユニコード好きとかそういう。

 

横田:なかなか偏執的ですね(笑)。

 

藤村:やば、これ1時間でやろうっていってて、あと2分になっちゃいました。次回ももしよかったらお越しください。

 

横田:締めますか。

 

藤村:じゃあどうしよっかな。締め方について、横田さんと僕の事前打ち合わせではなかったから、アドリブ力が求められてますね、今。

 

横田:一本締めっすか。

 

藤村:一本締め(笑)。一本締めさ、これ聞こえないですよ、多分。拍手の音が。

 

横田:(笑)

 

藤村:締めに入ろうと思います、では。こんな感じで今日は、STORES ECのフロントエンドのお二人にきてもらって、お話を聞きました。

 

で、話の中でもあったんですけどヘイはシンプルにいいプロダクトを作って、いいコードを書いて、使ってくださる方に喜んでもらって、僕らも事業がうまくいってっていう、素直にいいコードを書いて、素直にちゃんと成果を出せるいい環境なので、もし興味がある方がいたら、僕とかにTwitterのDMで「おい」みたいな感じでいいので、連絡をもらえればなと思います。

 

そして、またこういう感じで話す時間を、TwitterSpacesでやろうと思っているので、次回ももしよかったらお越しください。という、やばい、締め力の不足を、今感じてます。

 

横田:いや、めちゃめちゃ締まりました、今ので。

 

藤村:面白いこと言わないとまずいみたいな、すごいプレッシャー(笑)。

 

山下:イメージが。

 

一同:(笑)

 

藤村:みなさん遅くまでありがとうございました。

 

次回予告

次回のTwitterSpacesは10/5(火) 22:00〜開催します。次回のTwitterSpacesは10/6(水)22:00〜に開催します。ぜひお聞きください。

 

hey では一緒にはたらく仲間を絶賛大募集しております!お話を聞いていただけるだけでも大歓迎です。