Mercari Engineering Blog

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

ReactでWeb, ReactNative, Sketchに共通で使えるコンポーネントを作る話

Mercari Advent Calendar 2017 の11日目はフロントエンドエンジニアの @sawa-zen がお送りします。

はじめに

2013年に Facebook 社から React がリリースされ多くのフロントエンドエンジニアから注目を集めました。React を使用したWebサービスも次々と現れており、Web 界隈では今やポピュラーなライブラリとなりましたが、React の活躍は Web だけに収まりません。React Native の登場によりネイティブアプリを React の記法で実装できるようになり、さらには Airbnb 社から react-sketchapp が登場し Sketch のデザインデータも React で管理できるようになりました。

しかし、完全に同じ記法で書けるというわけではありません。

Web, ReactNative, Sketchでの記法の違い

以下は Web, ReactNative, Sketch で同じデザインのボタンを実装した時のコードです。

f:id:sawa_zen:20171210184445p:plain

上の図を見て分かる通りこのコードでは以下のような違いがあります。

  • divなどの HTML のタグは Web でしか使用できない
  • ピクセル指定する場合、Web ではpxを入れるが ReactNative と Sketch では不要
  • ReactNative のみ StyleSheet.create() を使用してスタイルを作成する

React の記法で書けると聞いて ReactNative や react-sketchapp を始めてみたものの、この違いにがっかりした人も少なくないはずです。 実は react-primitives を使うことでこの問題を解決できます。

react-primitivesとは

react-primitives はプラットフォーム毎のAPIに左右されず共通で使用できるインターフェースです。react-primitives は以下の6つの機能を提供します。

  • Animated: Viewにアニメーションを追加するためのコンポーネント
  • StyleSheet: ReactNative の StyleSheet と同じ
  • View: レイアウトのためのコンポーネント
  • Text: テキストのためのコンポーネント
  • Image: 画像のためのコンポーネント
  • Touchable: インタラクションのためのコンポーネント

詳しくは README.md をご参照ください。

react-primitives を使って実装してみる

先程のボタンを react-primitives を使って実装してみます。

import React from 'react';
import { StyleSheet, View, Text } from 'react-primitives';

const style = StyleSheet.create({
  view: {
    width: 160,
    height: 40,
    backgroundColor: 'red',
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 14,
  }
});

const PrimaryButton = () => (
  <View style={style.view}>
    <Text style={style.text}>Button</Text>
  </View>
);

上記のコードは Web, ReactNative, Sketch それぞれで問題無く動作します。このように react-primitives を使うことで記法の統一ができ、プラットフォーム間の違いに混乱することが無くなります。元々の ReactNative のコードと同じに見えますが、プラットフォームに依存したモジュールを import していないという違いに気づきましたか?

プラットフォーム間で使いまわせるコンポーネント

react-primitives による本当の恩恵は記法の統一ではありません。 実は先のコードはプラットフォームに関係無く import して使いまわすことができます。react-sketchapp はスタイルガイドやシンボルを Sketch プラグインとしてデザイナー間で共有するためのものでしたが、この時点から react-primitives を導入するとフロントエンドエンジニアはスタイルがあてられたコンポーネントを初めから使用できます。

f:id:sawa_zen:20171210165013p:plain

プロジェクトにこのフローを導入すれば、フロントエンドエンジニアはプラットフォーム毎にデザインを反映させる手間が無くなりロジックに集中することができます。さらにスタイルガイドはコードで書かれているためバージョン管理することもレビューを受けることもできます。

現状の課題

しかし、このフローを導入するにはいくつか問題があります。

  • 見た目がプラットフォーム毎に微妙に異なる
  • react-primitives が React v16 以上では動作しない
  • react-primitives が Sketch v48 以上では動作しない
  • デザインを適切なReactのコードに変換する人が必要

※ 2017/12/09時点

まとめ

react-primitives によってプラットフォーム間でのコンポーネントを使い回しが可能になりました。 これは今までの開発フローを大きく改善する一つの手段になると筆者は考えています。まだ課題はいくつかありますが、近い未来には React を導入することによる大きなメリットの一つになるでしょう。

明日12日の執筆者は @vbanthia さんです。お楽しみに!

メルカリではフロントエンドエンジニアを募集しています!一緒に働ける仲間をお待ちしております。

採用情報 | 株式会社メルカリ