チーム立ち上げから1年半で8名体制に。フロントエンドチームのみなさんに今とこれからについて聞きました

社長室の米田です。

今回は、フロントエンドチームのみなさんに座談会という形でお話を聞きました!

BASEでフロントエンドチームが発足したのは、2018年12月。かつてはフロントエンド専任のエンジニアがいなかったところから、いまではマネージャーを含めて8人のフロントエンドチームとなりました。

それぞれのメンバーが入社したきっかけ、いま携わっているプロジェクト、チームで取り組んでいること、いまある課題などを話してくれました!
(WFHの方針により、今回はオンラインにてインタビューを実施しました。)


f:id:aiyoneda:20200602163530p:plain
フロントエンドチームのみなさん

まずはそれぞれ自己紹介をお願いします。前職でやっていたこと、BASEに入社したきっかけ、BASEでの印象的なプロジェクト、いま携わっているプロジェクトを教えてください!

松原(写真2段目中央):前職ではレストラン予約サイトのフロントエンド開発をやっていました。iOS開発もやっていましたね。

BASEに入社したきっかけは、転職活動の際に転職ドラフトで指名もらったことです。面接で話を聞く中で、組織の前向きな雰囲気やメンバーの人柄、ベンチャーらしい活力を感じていいなと思いました。また技術的な部分で言うと、当時のBASEは次世代フロントエンド基盤を1から作るタイミングだったのでそのチャレンジに取り組みたいと思い、入社しました。

今は、商品オプションApp(※)のフロントエンド開発をやっています。次世代フロントエンドの基盤がある程度できたので、いまは機能をガンガン作っているフェーズですね。

これまでの開発で印象的だったことは、コンポーネントライブラリを1から作ったことです。個人的に勉強になることが多く、レイヤーが低いことほど考えることも意外と多いなという点で学びが多かったです。

※ネットショップ作成サービス「BASE」の拡張機能であるBASE Appsの機能の一つ。

三佐和(写真上段右):2016年7月からBASEでインターンを開始して、2017月4月に正社員として入社しました。前職では、人材会社の営業事務をしていました。

インターンの時はアシスタントデザイナーという肩書で、フロントエンドエンジニアと肩書がつくようになったのはここ2年の話なんです。未経験からエンジニアになったので、最初はマークアップから業務を始めて、次第にフロントエンド開発に関わるようになりました。

いまはショップデザイン編集機能アップデートのフロントエンド開発や、デザイナーと協力してUI調整を行っています。

これまでで印象的だったプロジェクトは、去年リリースした注文管理画面のリニューアルです。初めてVueを使ってがっつり開発したプロジェクトで、周りの力を借りながらなんとかリリースできたので思い入れがあります。

青木(写真下段中央):僕は2019年5月に入社しました。前職はSchoolWithという会社で語学留学の総合サイトのバックエンド・フロントエンドの開発をしていました。

BASEに入社したきっかけは、元々神宮司(執行役員VP of Product)が知り合いだったことです。前職にいたときもオフィスが近かったので、たまに神宮司とランチに行ってBASEの話を聞いていました。定期的にBASEの話を聞く中で、ある時神宮司から「最近フロントエンドチームを作ったから話を聞きに来てみたら」と誘われて 、改めてBASEについていろいろ調べました。テックブログの記事を読んで技術的にも面白そうだなと思いましたし、BASEではCakePHPを使っていて自分の経験が活かせる環境だとも思ったので、入社しました。

直近では4月にリリースされた商品説明Appの開発に携わっていました。いまはまた別の機能の開発に携わっています。

これまでBASEほど規模が大きいチームでの開発経験がなかったので、色々と勉強になる点で印象深いです。コンポーネントライブラリを作るのも初めての体験なので、面白いですね。

加藤(写真中段左):僕は2019年8月に入社しました。前職はランサーズでフロントエンド開発をしていました。その前の会社では受託制作をしていました。

元々僕は勝手にBASE対して親しみを持っていて。前職ではCakePHP使っていたので使っている技術が近いことや、以前BASEのオフィスでデザイナーイベントを一緒にやったこともあるんですよ。前職ではデザインチームの所属だったこともあり、自分は発表する立場ではなかったんですがイベントをBASEのオフィスに見に行ったんですよね。

BASEに入社を決めた理由は、組織全体の「サービスを良くしていく」という気持ちが強いなと感じたことと、会社の規模や使用技術が自分のスキルを活かしやすい環境だったことですね。

取り組んでいるプロジェクトについてですが、少し前までは顧客管理機能の開発をしていて、いまは新規の機能の開発をしています。これまでで印象に残っているプロジェクトでいうと、開発の最初から最後まで携わったメルマガAppのアップデートですね。

プロジェクトの進め方が印象に残っていて、単なる機能のアップデートを目的とせず、ユーザーへの価値の提供がどうやったら上がるかをプロジェクトメンバー全員で議論しながら進められたんですよね。機能の大まかな方針はディレクターが決めつつも、デザイナーやサーバサイドのエンジニアも一緒になって議論しながら開発できて、良いプロジェクトだったなと思います。

右京(写真下段右):僕は2017年1月に入社しました。前職では電子書籍の開発をしていて、iOSを中心にクライアントサイドの開発をなんでもやってましたね。BASEにはiOSエンジニアとして入社しましたが、2017年末くらいからフロントエンド開発の割合が多くなっています。元々知り合いだった神宮司に誘われて入社しました。

いまはショップデザイン編集機能アップデートやフロントエンドの基盤周りも整備していて、例えばビルドを早くしたり、さっきまでやっていた作業で言うと、GitHub Packagesというのが最近できたので社内で使っているライブラリをそれに移行していたりしました。

過去の開発で印象に残っているのは、2018年の年初のあたりにプロジェクトでの開発を進めながら2000くらいのファイル消したことですね。

一同:(笑)

すごい(笑)取り組み始めたきっかけは何だったんですか?

右京:当時はjQueryが13ほどのバージョンが存在していて、jQueryを消そうと思って見ていたら、使っていないJSやCSSが100個くらいあって、使ってないアセットが200個くらい出てきて…という感じで芋づる式でファイルがどんどん出てきて、過去5年分くらいのフロントエンド周りのファイルを全て整理しました。ファイルの量が果てしないのと、全てのファイルにおいて消していいのか確認する必要があったので、印象に残っています。

谷口(写真中段右):私は今年の3月に入社しました。前職では京都にいて公共施設のヘルプデスク2年間やったあと、同じ会社で広告代理店向けの制作をやっていました。

BASEは元々サービスを知っていましたし、テックブログを読んで最近のフレームワークを使っていたりTypeScriptを使っていたので興味があったことや、プロダクトに対して熱意高い組織だなと感じたことや入社を決めました。

いまはプロジェクト化されないような粒度の細かい改善を次々とやるプロジェクト、に取り組んでいます。まだ入社したばかりなので、早く1人前になれるように日々キャッチアップしています。

田中(写真下段左):私は今年の4月に入社しました。前職はぐるなびでフロントエンドエンジニアをしていました。

実は前職の同期が2019年9月にBASEに転職していて、その時私は転職活動をしていなかったのですが、「BASE楽しいよ」って話は聞いていました。そして転職活動時にエージェントからBASEを紹介してもらったので、改めて自分でもテックブログなど調べてみてBASEのフロントエンド開発に興味を持ち、入社を決めました。

まだプロジェクトにアサインされていないんですが、いまはデザイナーと協力してプロダクトの細かい改善に取り組んでいます。

山崎(写真下段左):いまはフロントエンドチームと、サーバーサイドのチームであるShop Groupのエンジニアリングマネージャーを担っています。フロントエンドチームのエンジニアリングマネージャーは2020年1月から務めています。

前職はWebゲームの開発をしていて、前々職もゲーム業界だったので、トータルで8年ほどゲーム開発を担っていました。

BASEに入社したきっかけですが、ずっとゲーム開発しかやってこなかったので、他のサービスもやってみようかなと思って、情報収集のために転職ドラフトに登録しました。そしたらBASEからスカウトを受信して、「CTOと面談できる」と書いてあったこともあり、話を聞きに行きました。

当時CTOだったえふしん(取締役EVP of Developmentの藤川)さんは昔から知っていたので、「本当に面談してくれるんだ」とも思ったりしましたが(笑)えふしんさんに会社、開発、組織の課題を聞いて、私自身の経験を活かして一緒に課題に取り組めそうだなと感じました。

それから鶴岡さん(代表取締役CEO)とも会食させてもらって、実際に話してみて事業やプロダクトにほんとに真摯に向き合っているんだなと感じ、入社を決めました。

ここからはチームのみなさん向けにいくつか質問を用意していますので、それを聞いていこうと思います。それでは早速最初の質問に。Vue.jsを使用していますが、実際に開発していていかがでしょうか?

谷口:僕はとっつきやすいなという印象でした。

加藤:日本で使っているユーザーが多いので、情報が多い点は良いですね。日本語のドキュメントが早い段階から整備されている印象です。

右京:デメリットで言えば、Reactと違ってDOMな部分に型はまったく影響しないことですかね。

松原:Vue.jsを採用しようと決めた当時は社内にフロントエンドエンジニアが少なく、デザイナーもフロントエンドのコードを書く前提だったので、書きやすさや学習コストを考慮したんです。しかし、フロントエンドチームが育ってきたいまではデザイナーがコードを書くこともほとんどなくなってきたので、また一から作り直す、というようなことがあれば現時点では別の選択肢もあるかなとは思ってます。

右京:実は、最近はReactも開発に取り入れています。

Vue.js以外も取り入れてるんですね。では次の質問に移ります。社内には「BBQ」という内製のコンポーネントライブラリがありますが、内製化した経緯などを教えてください。

松原:ショップオーナーさんが使う管理画面のフルリニューアルにあわせてフロントエンド基盤を刷新するという背景があり、管理画面のリニューアルに際してはデザイナーがAtomic designを基にしたデザインをしたいという思いが強く、ごく自然な流れで内製化することになりました。

三佐和:私はこのプロジェクトがきっかけで初めてVueを書いたんです。Vueのキャッチアップをしつつ、一つ一つのコンポーネントを地道に作り上げていったので、印象深いプロジェクトでした…!

加藤:当たり前ではありますが、同じコードを書かないって意味では生産性は上がっていると思います。テストでざっくりモックを上げるときにも使えますし。あと、「BBQ」がデザイナーとのコミュニケーションの前提になっている点でも共通の事前情報があるので、開発効率の向上に寄与しているんじゃないかと思います。

ちなみに「BBQ」という名称の由来って何でしたっけ?

「BASE」のロゴがティピなので、内製しているシステムなどはキャンプに関わるものが多くあるんです。「BBQ」もその流れですね(笑)

青木:「BBQ」という名称が決まって、デザイナーが「BBQ」のロゴを作ろうって話がとんとん拍子に進んでいった、あの流れ良かったですね。

「BBQ」という名前はサービスとロゴとのつながりがあったんですね!では次の質問に。ここ2年ほどでVue.jsとTypeScriptでフロントエンド基盤を整えてこられたと思いますが、直近ではフロントエンド領域で技術的にどういうチャレンジをしているのでしょうか?

右京:いますぐという話ではないんですが、そう遠くない時期にBASEのバックエンドは大きな転換期を迎えると思っています。「BASE」はいままでCakePHP2で支えられてきたサービスですが、社内ではCakePHP2をメンテナンスし続けるか、別のフレームワークに乗り換えるかという話題が出てきています。いずれにせよなにかしらの転換期は来ていると思っています。

バックエンド基盤を変えるとなると、それに応じてフロントエンドのアーキテクチャも変える必要があります。 世間的にはBFFと呼ばれる概念や、GraphQLの登場だったりとサバクラ間で使われる技術も大きく変化してきており、そのような技術基盤に関心がある人にとっては興味深いテーマになるかなと思います。

時期としては1、2年後くらいにはなりそうですが、今後入社するならそこに1から絡めるかもしれませんね。 BASEではバックエンドに先んじてフロントエンド基盤だけを変えたので、バックエンドの技術基盤が変わるタイミングで、これまで作り上げてきたフロントエンド基盤とうまく融合できるようにある程度仕組みを変える必要はあります。

それでは質問のテーマを変えて。いまチームとして取り組んでいることを教えてください。

山崎:日例を毎日14時からZoomで開催していて、プロジェクトの状況共有や、お困りごとがあればそれを共有する場にしています。在宅勤務になってからは全社で実施されるようになりましたが、フロントエンドチームではその前から実施していました。

元々あるプロジェクトで日次ミーティングを実施していて、毎日少しでも顔合わせてコミュニケーションする機会ができたのがよかったという実感があったのでチームにも取り入れようとなったのがきっかけです。

その他には、週に1度、1時間使ってチームで勉強会を実施しています。現在は『Clean Architecture 達人に学ぶソフトウェアの構造と設計』という書籍の輪読を行っています。

勉強会はどういうきっかけで始まったんですか?

青木:そういえば、もともと社内でサーバーサイドのメンバーが『オブジェクト指向設計実践ガイド ~Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方』や『入門 監視 ―モダンなモニタリングのためのデザインパターン』の輪読会をやっていましたね。

松原:次第にフロントエンドチームもメンバーが増えてきたので、チームとして勉強会をしてもいいかなと思って私から呼びかけたのが最初です。

加藤:副次的な効果として感じているのは、コードレビューの際に「この本のこの概念を相手は知っている」といった共通の前提知識がある上でコメントをし合えるので、コミュニケーションに良い影響があったと思います。

谷口:前職ではエンジニアの人数が少なかったこともあって勉強会などの機会がなかったので、こういう環境はありがたいですね。

チームで定期的にスキルアップに取り組んでいるのは素晴らしいですね。ちなみに、いまBASEではWFH(在宅勤務)になっており、日次のチームミーティングや勉強会もオンラインで実施されているかと思います。最近ご入社された方はご入社当日からWFHでしたが、いかがでしょう?

田中:まだオフィス出勤していないので比較はできないんですが、リモートワークだからこれができないというのは今のところないです。

(WFHについては谷口さんの入社エントリもぜひ読んでみてください!)

それでは最後に。いまのフェーズでBASEのフロントエンドチームに入る魅力や面白さはどのあたりでしょうか?

松原:環境的な面で言えば、これだけの規模の開発組織があって、その中でこの人数のフロントエンド専任チームがあるというのは世の中的にもまだまだ多くないと思うので、そこは魅力の一つじゃないでしょうか。

加藤:人数が多いほうがわいわいしますし、同じテーマを話せる人がたくさんいるほうが仕事していても楽しいですね。

山崎:フロントエンドチームが発足してから1年半ほどでマネージャー含めて8人のチームになり、いい意味でまだまだ完成していないチームだと思っています。今後はよりチームメンバーそれぞれの個性や得意領域が出てくると思うので、これからチームがさらに発展していくフェーズだという点は一つポイントだと思います。

私が他のチームも見ていて個人的に感じるのは、フロントエンドチームは特にサービスに対する意識が高いことです。技術のプロフェッショナルとして開発に取り組むのはもちろん、サービスの開発エンジニアとして、「ユーザーにどういった価値が提供できるか」をそれぞれのメンバーが強く考えているのがすごく良いなと思っています。

それからフロントエンドに限った話ではないですが、BASEは事業自体が伸び続けていて、開発プロジェクトも常に20ほど走っていたり、日本だけでも100万ものショップさんに使われていてトラフィックもかなりあるサービスなので、たくさんのユーザーさんに使っていただいているプロダクトの開発に携れることは純粋にとてもやりがいがあると思います。


フロントエンドチームのみなさん、ありがとうございました!

BASEではフロントエンドエンジニアを積極的に採用しています。ご興味のある方は下記の求人をぜひご覧ください!

herp.careers