プロダクトも技術も、次フェーズの転換期へ。スマートショッピングのフロント開発のこれまでとこれから

林大樹プロフィール
新卒入社した会社の業務改善でVBAに触れたことを機に、プログラミングへ興味を持つ。25歳で東京のSIの会社に転職。フロントエンドやインフラ周りの知見を磨く。その後、電子書籍の会社でエンジニアとして1年ほど勤めたのち、2019年にフロントエンドエンジニアとしてスマートショッピングに入社。現在は、フロントエンドエンジニアに加え、エンジニアリングマネージャー、PdMの役割も担う。

スマートショッピングは「日々のモノの流れを超スマートに」をミッションに、IoT重量計を使った在庫管理・発注自動化のSaaSサービス「スマートマットクラウド」や、面倒な日用品の買い物を自動化しゼロクリックショッピングを実現する消費者向けサービス「スマートマットライト」などを展開しています。「スマートマットクラウド」は2018年の発売からわずか約3年間で1200件以上の取引社数、3万台以上の導入実績を誇り、急成長を続けています。

今回は、2019年のサービス立ち上げ期から参画し、現在はエンジニアリングマネージャーを務めながらこれまでのフロントエンド開発を引っ張ってきた林に、スマートショッピングの開発秘話や技術選定の裏側などについて聞いてみました。

チームに明確な役割はあえて設けず、フレキシブルな組織を目指す

――現在の開発組織の体制について教えてください。

開発組織は、大きく4つのチームに分けて運用しています。あえてチーム間で明確な役割の定義はしておらず、メンバーの意向やドメイン知識を鑑みて、タスクのアサインを調整しています。サービスについても、to B向けのSmartmat Cloudとto C向けのSmartmat Liteがありますが、垣根なくフレキシブルに対応できる組織を目指しています。
それぞれのチームには、プロダクトオーナー／PdMが1〜2名、エンジニアリングマネージャー／テックリードが1〜2名、バックエンドエンジニアが2〜3名、フロントエンドエンジニアが1〜2名というチーム構成です。開発方法としては、スクラム、アジャイルを採用しています。

――林さんはゼロイチフェーズで入社されたと聞きました。当時、開発環境はどのような状況でしたか？

スマートマットは1枚単体でも利用できますが、複数マットを繋げて1つの大きな商品の在庫管理ができる「マルチマット」という機能があります。実はリリース後そのマルチマットのニーズが想定よりも多く、追加機能として開発しようと思っても処理しにくい状況で。そこで開発言語やフレームワークなど土台から再構築することにしました。

――当時の技術選定の背景について教えてください。

まず、選定背景の説明前に現在のフロントエンドの開発環境をご紹介します。

・開発言語：HTML、CSS、JavaScript/TypeScript
・フレームワーク・ライブラリ：Vue、Vuex、Nuxt.js
・インフラストラクチャ： AWS、Amazon EKS
・ミドルウェア： Kubernetes, Docker
・モニタリング・テスト： Sentry, Cypress
・CI/CD：Github Actions
・その他利用ツール：GitHub, Slack, esa

Vue.js / Nuxt.jsがメインとなっていますが、実は今、現在進行形でNext.js / Reactへの乗り換えを行っています。私が入社した当時はスマートマットクラウドの開発メンバーも少なく、デザイナーもおらず、フロントエンドエンジニアは私1人という状況でした。さらに当時、開発スケジュールがタイトだったため、技術的な障壁になりづらく学習コストが低いとされる、JavaScriptのフレームワーク「Vue.js」を選択しました。

キャッチアップが比較的容易で、フレームワーク未経験のメンバーでも、そこまでの学習コストがかからずに、開発できている印象でしたね。結果的には、乗り換えをすることになってしまいましたが、スピードが重視されていた当時の選択としては及第点だったかと思います。

方法は、マットだけではない。在庫や発注管理における、課題解決のためのプラットフォームへ

――入社から3年がたち、現在はどういった課題を抱えていますか？

この3年間でユーザーが増加しました。ありがたいことにご要望も多数いただき、機能開発を行ってきました。しかし機能が増えるに伴って一部UI/UXが分かりづらい部分も増えつつあります。

IoTデバイスは一般的に初期設定のハードルが高いため、機能追加によって生じたシステム全体の複雑性によって、ユーザーが理解できずに利用をやめてしまうのです。

現在、メインターゲットの1つである医療業界のお客様は、日常的にパソコンを使わない方が多いため、直感的にスマートフォンやタブレットで操作できることが重要になります。しかし、スマートフォンやタブレットだと、レイアウトが崩れてうまく表示されないこともあって。

――課題解決のために、どのような施策に取り組んでいますか？

継ぎ足しの開発ではなく、デザイナー、PdMを巻き込んで足元の抜本的な改善に取り組んでいます。具体的には、JavaScriptからTypeScriptへの移行を検討しています。しかし、現在使用しているVue.jsとTypeScriptの相性が悪くて。また最近、Vue.jsがVue3.0へアップデートされたのですが、後方互換のない破壊的変更が含まれており、技術選定でみるとリスクが大きいと感じました。その点、ReactはTypeScriptとの相性も良く、かつ後方互換もあるため、来年ごろから、1つのアプリケーションを分割し徐々に置き換える「マイクロフロントエンド」と呼ばれるアプローチで、Reactにリプレイスをする予定です。

――今後の展望について教えてください。

スマートマットの利便性を高めつつ、“脱マット”化も目指したいです。というのも、スマートマットの性質上、どうしても置くスペースに限界があるんですね。そうなると、置くスペースが限られるお客様とそうでないお客様で提供できる幅に差が出てしまうわけです。

また、現状だと0.1g単位の軽すぎるもの、また反対に1tなど重過ぎるものも計れないという制約があります。ですので、今後はマットだけではなく、デバイスやカメラなど計測するインタフェースのバリエーションを増やし、お客様の課題解決に寄与できるプラットフォーマーになりたいですね。

主体性を持って、チャレンジする姿勢が評価される環境

――開発メンバーとは、どのようにコミュニケーションをとっていますか？

基本的に、毎朝のオンラインミーティングで、業務上の悩みやタスクの進捗状況を確認します。また、スプリントの最初にプランニングを実施し、「担当者」「ボリューム」「期間」といったラベルでタスクを割り振ります。そして、1スプリント（=弊社では2週間）の終わりに、割り当てたタスクの達成状況や、タスクが適正だったかを振り返っていますね。

――どのような形で、ユーザーの声や要望は共有されるのでしょうか。

Salesforceに営業担当が入力した既存のお客様の声、解約理由や失注理由をもとに、上級管理職が出席する週1回の横断会議で、具体的なお客様の機能追加、改善提案などを共有してもらっています。

――マネージャーとして、大切にしていること・意識していることは？

新鮮なうちに、フィードバックすることを心がけています。また、我々の期待を押し付けるのではなく、現場のメンバーの意向や希望も汲んだうえで、妥協点を探ることも大事にしていますね。

――評価で重視しているポイントを教えてください。

主体性を持って、新しいことにチャレンジすることですね。ミスなく業務を進めることも素晴らしいですが、「自ら課題を見つけて、こういったアプローチで改善しました」という動きは特に評価をしています。

組織や会社の課題を発見し、アグレッシブに変えていける人と働きたい

――スマートショッピングのフロントエンジニアとして働く魅力について教えてください。

大きく3つあって、1つ目がチャレンジを歓迎する点です。失敗を責めるのではなく、それをどう次の学びに生かすかを考えることを重視しています。技術も積極的に新しいものを採用しています。最近だと、Next.js/ReactやGraphQLなどを導入しました。

2つ目が、開発の際に仕様策定やデザインから関われる点です。機能開発の際は、「何に使われるか」「なぜやるのか」という疑問点を解消し、納得感を醸成してから、開発に着手するように心がけています。

3つ目が、フラットに言い合える関係性です。「誰が言ったか」ではなくて、「何を言ったか」で判断することを重要視していますね。たとえ、管理職が発言したことでも間違っていればそれを正しますし、逆に若手メンバーが発言したことに妥当性があれば、それを受け入れる文化があります。

――これから、どんな方に入社して欲しいですか？

当社はスタートアップで発展途上の会社であるため、自ら組織や会社の課題を発見し変えていける、推進力のある人を求めています。もしかしたら、変化への耐性が低い人には苦労する環境かもしれません。IoTなど新しい技術が好きな方に加え、プロダクト志向で会社や組織を大きくしたい方には、特にマッチするでしょう。