次の5年も使い続けてもらう「BASE」のために。次世代管理画面を1から作る、フロントエンドチームの挑戦

【Profile】

写真左：松原 佑介（まつばら ゆうすけ）

BASE Product Division フロントエンドエンジニア 1988年生まれ、愛媛県出身。東京大学農学部卒業後、SI企業に入社。その後、株式会社一休にて主に「一休.comレストラン」のiOSアプリエンジニア、フロントエンドエンジニアとして開発に従事。2018年9月にBASE株式会社にフロントエンドエンジニアとして入社。現在はEコマースプラットフォーム「BASE」の次世代管理画面プロジェクトにてVue.jsを使ったUI構築を担当している。

写真右：三佐和 千鶴（みさわ ちづる）

BASE Product Division フロントエンドエンジニア 1992年生まれ。大学卒業後、営業事務の仕事に就く。正社員として働く傍ら、オンラインサービスでプログラミングを学び、2016年の7月よりBASE株式会社でインターンを開始。アシスタントデザイナーとして業務経験を積み、2017年4月に正社員として入社。現在はフロントエンドエンジニアとしてEコマースプラットフォーム「BASE」の次世代管理画面プロジェクトやUIコンポーネントの作成に従事している。

まず、現在の業務について教えてください。

松原：フロントエンドエンジニアとして現在はショップのオーナーさんが使う管理画面をリニューアルしていく次世代管理画面プロジェクトのフロントエンド開発を主に担当しています。またそれに併せてBASE全体で利用するUIコンポーネントライブラリを新規に作っていますが、そちらの開発にも参加しています。

三佐和：私も同じく次世代管理画面プロジェクトのフロントエンド開発とUIコンポーネントの開発を担当しています。その他にはVue.js の社内向け勉強会の企画・実施等も行っています。

BASEに入社した経緯を教えてください。

松原：BASEへ入社する契機になったのは転職ドラフトでオファーを受信したことでした。

他社さんからもいくつかオファーをいただいていたのですが、実際に面談を受けた中で一番活気がありサービスに対する強い意志・思想を持っていると感じたのがBASEでした。

面談時にBASEのメンバーからは、ネットショップ作成サービス「BASE」は、「お母さんも使える」というコンセプトを貫き、管理画面の使いやすさや誰でも簡単に使えるかどうかを最も大事にしているとの話がありました。転職活動をする際に、次に入る会社では管理画面の使いやすさにフォーカスしたサービス開発に取り組んでみたいという想いもあり、自分のやりたいこととサービスの思想が一致すると思いました。

また、個人的にフロントエンドエンジニアとして自分の腕を試したいという思いがあり、BASEではこれから”次の5年も使い続けてもらう”ための次世代フロントエンド基盤を最初から作るという話に強く興味を持ちました。それに面談の際、Designマネージャーの早川が「BASEに入社してから退屈したことがない」と言っていたのが印象的でしたし、BASEは注目されるサービスを次々にリリースしていると思っていたので、楽しみながら開発を進めていけるイメージが湧き、BASEへの入社を決めました。

三佐和：大学卒業後に営業事務の仕事に就いたのですが、正直楽しいとは思えず、転職活動を始めました。その中でWebエンジニア・デザイナーという職種に興味を持ち、オンラインプログラミングサービス「Progate」でプログラミングの勉強を始めました。同じ時期に、Progateのプログラミング勉強会イベントがあり、その会場が当時のBASEのオフィスでした。BASEのエンジニアと話したりオフィスを見せてもらう中で、ここで働きたいという気持ちが強くなっていったんです。その後、勉強を進めていったのちにBASEでインターンを開始しました。約1年間ほどインターンをして、その後正社員として正式に入社しました。

業務としては、最初はアシスタントデザイナーとしてマークアップを主に担当していて、当時はひたすら必死にLPを作っていました。ここ1年ほどで”フロントエンド”というものの意識がBASEのデザイナーの中で出来てきて、2018年10月にはフロントエンドチームが誕生し自分も所属することになりました。入社した頃はマークアップ中心に業務をやっていて、UIデザインやグラフィックデザインをやっているわけではなかったので、自分はデザイナーと言えるのかなと不安に思うこともあったのですが、最近はようやくフロントエンドエンジニアと名乗れるようになってきたなと、嬉しいような、そんな実感があります。

現在取り組んでいるプロジェクトの概要や、開発の進め方について教えてください。

松原：次世代管理画面プロジェクトの開発メンバーは現在6名で、デザイナー2名、テックリード1名、フロントエンド2名、サーバーサイド1名という構成になっています。サーバーサイドのエンジニアがAPIまでを開発し、フロントエンドエンジニアが画面の大枠を開発し、デザイナーはCSSなどのマークアップや画面のデザインを担当しています。

今までのネットショップ作成サービス「BASE」のフロントエンドはjQueryとCakePHPのサーバサイドテンプレートを利用した素朴な構成でしたが、このプロジェクトでは全面的にVue.jsとTypeScriptを採用して画面を構築しています。API側は引き続きCakePHPを利用しています。

また、画面設計の考え方として新たにAtomic Designを採用しています。汎用性の高いコンポーネントはUIライブラリとして独立させ、社内のどのプロジェクトでも活用できる状態を目指しています。そのためStorybookでコンポーネントカタログを作成し、社内のどこからでも閲覧ができるようにしています。

開発の進め方は会社で大きく方針が決まっているわけではなく、プロジェクトやマネージャーごとの裁量で進みます。実装のフェーズでは各エンジニアの裁量が大きく、新しい技術導入や設計の改善などを積極的に進めています。

仕事でやりがいだと感じているところはどのようなところでしょうか？

松原：エンジニアリングの面では、1から新しいフロントエンドを構築していくフェーズに携われているのはとてもやりがいがあると思っています。フロントエンドの知識は日進月歩であって、その中から最も適切なものを組み合わせて構築していくのはエンジニアとしての力が問われるところでとても興味深いです。

また社内にVue.jsの一定の経験があるメンバーがまだ少ないので、そこを自分が引っ張っていって、メンバー内のVue.jsの理解が進んだり、プルリクの内容が以前より良くなっていると自分の役割を果たせているなと感じます。

サービス面では、”使いやすい管理画面”にフォーカスして開発を行える環境が良いなと思っています。一般的にBtoCのWebサービスの管理画面は、自社の営業担当やカスタマーサポートがマンパワーで入力や操作を行って解決してしまう場合もあるため、個人的にはUI/UXが片手間になりがちなのではないかと思っています。

一方で「BASE」の管理画面はショップのオーナーさんが使う画面であり、「BASE」のオーナーさんはネットショップの開設が初めての方や、ITの専門知識をお持ちでない方もいらっしゃいます。「BASE」は「お母さんも使える」をコンセプトにしていることから、誰でも簡単に使えることを最も大事にしています。なので開発側としても管理画面のUI/UXにしっかりエンジニアリングのコストをかけることができ、フロントエンドの視点からも使いやすい管理画面をきっちり作っていくことができるのがやりがいのある部分だと感じています。

三佐和：いまのフロントエンド開発は、楽しい半分、正直大変だなあと思う時もあります（笑）1からUIコンポーネントを作っているので、いかに自分以外の人がメンテナンスしやすい環境を作るか、無駄がないシンプルな構造にするかを考えるのが難しいですし頑張りどころでもあります。デザイナーの中でもマークアップするメンバーがいるので、ゆくゆくはメンテナンスもデザイナーができるようにするなど開発がしやすい環境を作っていこうと思っています。

次世代管理画面プロジェクトは長期にわたるプロジェクトですが、モチベーションの維持などを含めどのように業務を進めているのでしょうか？

三佐和：そうですね。正直、UIコンポーネントを作っていくって結構地味じゃないですか？（笑）昨年は次世代管理画面で使われるUIコンポーネントを一つ一つひたすら作っていました。管理画面の部品ばかりを作っていて、実際の管理画面に自分自身が触れているわけではなかったので、これってちゃんと仕事できてるのかな？と自分でもよく分からなくなっちゃったときがありました。

そんな時も、フロントエンドをみているテックリードが私の出したプルリクをすぐ見てレビューしてくれて、自分の仕事を見てくれる人がいると安心しますしちゃんと役に立っているんだと実感が湧きます。

それから以前、代表の鶴岡が社内で雑誌の取材を受けているときに、ちょうど近くにいたので撮影で数人のメンバーと一緒に映るように頼まれたことがあって。

私のPCの画面を見ながら撮影を進めていたのですが、鶴岡が私が作ったコンポーネントを見て「なにこれ？動かしてみて！」と言われて、動かしてみたら「こんなにパターンがあるんだ、すごい！」だとか褒めてくれたんですよ。なんだか泣きそうになりましたね（笑）そうやって褒めてもらえると嬉しいですし、今後もコンポーネントをどんどん作っていくぞ、と身が引き締まりました。

あとVue.js勉強会のときに、ずっとjQueryを使っていて勉強会を実施するまでは少しVue.jsに抵抗感があった早川が、終わったあとに「Vue.jsってすごいね、使いやすいね」って言ってくれて、「でしょでしょ、すごいでしょ！」って気持ちになりました（笑）自分がフロントエンドエンジニアとしてチームに貢献できた気がしてとても嬉しかったです。

フロントエンドチームの専任メンバーは2名ですが、チームはどのような雰囲気ですか？

松原：フロントエンドチームはまだまだ生まれて半年で人数も少ないですが、明るく和やかな感じです。専任ではないメンバーも含めて、お互い信頼しあってそれぞれの業務を任せているので仕事がしやすいです。

三佐和：少人数なので業務に関することもそれ以外も相談しやすいです。席が近いので困ったときも分からないことを気軽に聞けるのですごく助かっています。

最後に、どういう人と一緒に働きたいですか？

三佐和：先ほどからお話しているように、次世代管理画面プロジェクトではVue.jsを使って開発をしているので、Vue.jsでの開発の実務経験がある方に来ていただけると頼もしいですね。

フロントエンドの課題はたくさんありますし、私たち2人では拾いきれない課題もあるので、何でも自発的に課題を拾って解決していく方と一緒に働きたいです！

松原：BASEの事業に興味があるというのが一番だと思いますが、エンジニアとしては次々と新しい話題が出てくるWeb界隈の話を自分でキャッチアップして楽しむ好奇心がある方、その知識をうまく業務にあわせた形で活用していける方と一緒に働きたいです。フロントエンドはユーザーが直接触れる部分なので、技術とサービスの折り合いをつけてユーザー体験を良くしていける方、サービスのUIを考えていくことやユーザーの体験を良くしていくことに情熱を持てる方だとBASEの環境はとてもフィットすると思います。

フロントエンドエンジニアという領域は比較的歴史の浅い肩書でもあり、スーパーなエンジニアは相対的に少ないと思います。なので、今のスキルがどうかというよりもこれから自分でなんでも手を動かして、仕事しながら成長していけるような方だと一緒に楽しく働いていけるんじゃないかなと思っています。