Mercari Engineering Blog

We're the software engineers behind Mercari. Check out our blog to see the tech that powers our marketplace.

Design Systemへの取り組み 〜Frontend編〜

この記事は、Mercari Bold Challenge Monthの1日目の記事です。

こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。

Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。

現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。


MercariにおけるDesign System

Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design Systemもその一つです。 これは会社全体のOKRでも目標として大きく掲げられており、担当のデザイナーとエンジニアを配置しつつ進められています。


既に非常に大きいプロダクトへ成長しているため、開発時にチームが別れていることが多くなっています。そのため関わるエンジニアも多く車輪の再発明が起こりやすい構造になってきていました。私たちはDesign Systemを通して、一貫したサービス体験をお客さまに提供できるようになることを目標としています。


Be Professional Day (BPD) with the Frontend Team!

Hi! I'm @sottar, a frontend engineer at Mercari. The other day, Mercari's Frontend Team held an offsite called Be Professional Day (BPD)! Japanese is here

What is BPD?

This article has a good explanation about BPD. Basically, it's a day where team members take on projects that they want to do, but can't in their normal work.


Right now at Mercari, engineers belong to teams divided by domains, and development is done in each domain team. Because of this, frontend engineers don't work together very often, and there are fewer opportunities to spend time together across different domain teams. The number of members has also increased, and newer frontend members haven't had the chance to interact with frontend members of other domain teams.

Also, when you focus on only product development, you start thinking too much from a short-term perspective. But sometimes there are things that you can do to improve development efficiency and quality in the long term, even if it doesn't help the product in the short term. We decided to hold BPD in the team as a way to pay back the technical debt we've accumulated in our usual rapid product development and as a chance to try out new technology.


Checking who wants to attend and deciding the date In addition to all of the frontend members, we even had members of GOT, who usually provide support for our meetings, join us to work on frontend development! (What is GOT?) Renting an external venue for a day with Space Market Creating a page for BPD on the company wiki and filling in the tasks each person will take on We wanted to have as much time as possible to focus on work, so everyone decided what they were going to do in advance. Arranging lunch and dinner We didn't want to make things confusing on the day of the offsite, so we arranged delivery for lunch, and used Uber Eats for dinner.

Day of the Offsite

Everyone getting comfortable as they work
At the end of the day, all team members presented what they did that day. Drinks were provided at the presentation, and we had a great time!

Each member presented what they did
The rest of the team listening to the presentations

There were all kinds of presentations, from tools created to improve the efficiency of our normal work to trying out new technology we haven't used before.

Wrap up

At BPD, we were able to work on things we usually aren't able to do, and we were really pleased with the results.

It was the first time we held this event, so there were definitely things that could have gone better, but it was a good offsite, and we're hoping to hold it again in the future.


Mercari is looking for frontend engineers!

If this all sounds interesting to you, why not apply?

Mercari, inc. - Jobs: Software Engineer, Frontend - Apply online

App development with Kotlin Multiplatform

This is a translation of the article @panini wrote for the Mercari Advent Calendar 2018. The original Japanese article is available here.

At Mercari, much of our Android app development is done in Kotlin. Kotlin is mostly known for its use when running on the JVM, however the official projects KotlinJS and Kotlin/Native allow us to use Kotlin in JavaScript and Native (C) environments too!

Kotlin Multiplatform

With Kotlin Multiplatform, we are able to support multiple platforms with a single codebase.


I think that DRY code is very important.

In my opinion, the fact that we have to reimplement all our business logic on each end client that we support is not a very efficient way of working. On top of this, each time we reimplement this logic, the chances of bugs happening increases, as does the maintenance cost. Because of the pain that this creates, projects such as ReactNative and Flutter were born - being able to support multiple native clients using a single code base sounds like a great solution, however these projects also require you to share the UI code as well, which means we are unable to take advantage of each platforms unique points, unless we are okay with littering our code with checks such as if (platform == "iOS").

The only part I want to be able to share is the logic, so I wrote a proof of concept for sharing logic between Android & iOS!