メインコンテンツまでスキップ

UIライブラリの選定

Status: Accepted

要約​

アプリで利用するUIライブラリの比較・導入の検討を実施しました。 検討した結果、UIライブラリのデフォルト仕様に準拠したアプリを作成する上では多くのメリットを享受できる反面、独自デザインのアプリを作成する場合は、必ずしもそうではない場面もありました。

そのため、このアプリではUI構築に関する基本方針を以下とします。

  • React Nativeのコンポーネントを利用、もしくはそれらを組み合わせて部品を作成する
  • テーマ機能として、@shopify/restyleを導入する

コンテキスト​

React Nativeには、アプリ全体のテーマを設定する機能がありません。また、用意されているコンポーネントも少ないため、アプリのUIを構築するために多くの部品を自分達で作成する必要があります。 それらの足りない部分を補う手段として、サードパーティのUIライブラリの導入を検討します。

議論​

UIライブラリの比較​

UIライブラリの検討にあたり、いくつかの候補を挙げて比較します。

UIライブラリライセンスGithub star開発母体テーマ機能1の有無
Ant Design Mobile RN(5.0.0)MIT License2.5kAnt Design Team○
NativeBase(3.4.6)MIT License17.9kGeekyAnts○
React Native Elements(4.0.0-rc.5)MIT License22.5kReact Native Elements○
React Native Paper(4.12.1)MIT License9.4kCallstack○
RNUILib(6.17.2)MIT License4.5kWix.com○
UI Kitten(5.1.2)MIT License9.1kAkveo○
UIライブラリ特徴
Ant Design Mobile RNAnt Designのモバイル仕様です。比較検討に利用したバージョン（当時の最新版）では、Ant Design Mobile RNが依存している以下のライブラリがこのアプリで利用しているバージョンと合わなかったため、比較検討を断念しました。
・@react-native-picker/picker（Ant Design Mobile RN: ^1.9.10、アプリ: 2.4.0）
・react-native-gesture-handler（Ant Design Mobile RN: ^1.10.3、アプリ: ~2.2.1）
NativeBaseStyled SystemをサポートしたUIライブラリです。コンポーネント、テーマ機能も豊富で、レスポンシブなデザインを考慮したBreakpointsなどの機能もあります。アプリのデザインに応じたカラースキーマを用意することで、各コンポーネントの特性やインタラクションに応じた配色でUIを表示してくれます。また、CSSのgapに似た機能をもつレイアウトコンポーネントは使いやすく、直感的にUIの配置を指定できます。
React Native Elements他のUIライブラリと比較するとシンプルなデザインが特徴のライブラリです。デフォルトで用意されているデザイントークンなどは少ないですが、テーマ機能を拡張することで柔軟に対応できます。ただし、検討時に利用したバージョンはRelease Candidate versionとなっており、Stableなバージョンでは、以下の依存ライブラリがこのアプリで利用しているバージョンと合いませんでした。
・react-native-safe-area-context（React Native Elements: ^3.1.9、アプリ: 4.2.4
React Native PaperMaterial Designに準拠したライブラリです。検討時に利用したバージョンでは対応していませんが、次期バージョンのv5では、Material You（Material Design v3）にも対応するようです。Material Designに準拠したデザインのアプリを開発する上では非常に便利ですが、その反面独自にデザインしたアプリを開発する場合は、デザインのカスタマイズに費やすコストが高くなりそうです。（例えば、テキストインプットのアンダーラインを消すのに一苦労がありました。）
RNUILibコンポーネントの表現力が豊かで、テーマ機能も充実しているライブラリです。WheelPickerなど、他のUIライブラリには存在しないコンポーネントもあります。デザイントークンも豊富で、Styled Systemを使用しているような感覚でUIを構築できます。ただし、テーマ機能に関するドキュメントが少なく、テーマの設定に最も時間を費やしました。
UI KittenEva Design SystemをベースとしたUIライブラリです。アプリのコンセプトに応じたカラースキーマを定義することで、Eva Design Systemに即したUIを表示できます。また、カラースキーマを作成するツールも用意されており、簡単にアプリのブランディングが可能です。テーマ機能は豊富で拡張も可能ですが、テーマの設定方法が他のUIライブラリと違い独自性が強いです。また、デザインのカスタマイズに制限があるコンポーネントもありそうです。（例えば、Top Tabsを使用した場合に、選択したタブのBorderをBottomに表示することができませんでした。）

UIライブラリを利用した際の注意点​

テーマ機能で各コンポーネントのスタイルなどを定義する際に、まずは各コンポーネントの仕様を把握する必要があります。 例えば、ボタンの色を変更するPropsはUIライブラリによって様々です。そのPropsを特定した上で、テーマ機能に設定する必要があります。

また、UIライブラリの各コンポーネントにデフォルトで設定されているスタイルは、基本的にドキュメンテーションされていません。そのため、独自にデザインされたアプリを作成するには、UIライブラリのソースコードを追いながら、デフォルト設定を変更するといった作業も必要になってきます。

React Native + テーマ機能​

前述の注意点から、UIライブラリを導入しないで、React Nativeのコンポーネントにテーマ機能を追加できる@shopify/restyle2の導入も検討しました。

  • 基本的には、React Nativeのコンポーネントを利用、もしくはそれらを組み合わせて部品を作成する
    • @shopify/restyleを利用して、React Nativeのコンポーネントにテーマ機能を追加する
    • UIライブラリに似た機能を持つコンポーネントが存在する場合は、それらのソースコードを参考にして部品を作成する
  • 開発コストが高くなりそうな部品は、サードパーティのライブラリを利用する
    • ライブラリのテーマ機能は利用しない

上記方針でアプリの一部画面を作成した所、UIライブラリを利用した際の注意点に記載した内容はほとんどなくなりました。基本的には自分たちで作成した部品であるため、テーマで設定するべきPropsなども把握できています。そのため、独自にデザインされたアプリを作成する場合は、この方針との相性が良いと感じています。

決定​

基本方針は以下とします。

  • React Nativeのコンポーネントを利用、もしくはそれらを組み合わせて部品を作成する
  • テーマ機能として、@shopify/restyleを導入する

ただし、開発コストが高くなりそうな部品に関しては、サードパーティのライブラリの利用を検討します。

  1. テーマ機能とは、各コンポーネントや、ダークモード時のスタイル、デザイントークンなどを定義できる機能を表しています。↩
  2. @shopify/restyleと似ているコンセプトのライブラリとして、Styled Systemや、Emotionがあります。↩
に最終更新