UIライブラリで美しいデザインを手軽に利用する

基礎からはじめるReact Native入門 第8回

Material DesignをReactコンポーネントとして使う

　さて、Material Designには仕様が明確であるという特性があるため、これを多くのエンジニアがUIライブラリとして実装しました。Google公式のライブラリもあれば、サードパーティのものもあります。ブラウザ向けにCSSとして再現されたもののほかに、コンポーネントの形にまとめられたものもあります。

　ご多分に漏れず、React Native向けにもMaterial DesignのUI部品を定義した、Reactコンポーネント集がライブラリとして提供されています。それが今回解説するReact Native Paperです（図3）。

図3：React Native Paper （公式ドキュメントより引用）

　「Paper」という名前は、Material Designが「紙とインク」といった私たちもよく知る物体（マテリアル）の振る舞いを模倣して作られたデザイン仕様であることに由来しています。

　開発をしているcallstack社は、React Native本体の開発コミュニティでコアメンバーを務める人が何名かおり、React Native Paperも品質に期待が持てるプロダクトです。

React Native Paperに用意されたコンポーネント　

　本記事では、React Native Paperが提供する、すべてのコンポーネントの使い方について解説することは、残念ながらできません。そこで、雰囲気をつかんでもらうために、コンポーネントの一覧を紹介します（表1）。

表1：React Native Paperの便利な部品

コンポーネント	概要
ActivityIndicator	円状のUIで読み込み中を示す。React Native本家のものとほぼ同等。
Appbar	ヘッダーを表示する。（フッターにもできる）
Avatar	アイコンを表示する。
Badge	任意のビューの右上にバッジを表示する。
Banner	画面上部から現れるメッセージエリアを表示する。
BottomNavigation	下タブメニューを表示する。
Button	ボタンを表示する。
Card	カードを表示する。
Chip	ツールチップを表示する。
DataTable	表を表示する。
Dialog	ダイアログを表示する。
Divider	分割線を表示する。
Drawer	ドロワー内のメニューを表示する。（左端への出し入れは実装しない）
FAB	Floating Action Button（右下の丸ボタン）を表示する。
HelperText	主にTextInputと併用して、入力欄の下にエラーメッセージ等を表示する。
IconButton	アイコンだけのボタンを表示する。
TouchableRipple	タップ時の波紋が広がる演出（リップルエフェクト）を表示する。
List	リストを表示する。
Menu	メニューを表示する。
Modal	画面にオーバーレイする領域を表示する。（Dialogの要素技術）
Portal	本来のビューツリーとは違う場所にビューを表示する。（Modalの要素技術）
ProgressBar	横棒のUIで処理待ちを示す。
Searchbar	検索欄を表示する。
Snackbar	下からポップアップするメッセージを表示する。
Surface	Material Designが定義する「紙」の概念を再現する。（浮いているUIの要素技術）
Switch	スイッチを表示する。
TextInput	テキスト入力欄を表示する。
ToggleButton	トグル（切り替え）できるボタンを表示する。

　かなり豊富なコンポーネントが用意されていますね。これらとは別に、テキストについても触れておきましょう。Material Designでは、テキストの役割に応じて、フォントサイズやウェイトが細かく指定されています。

　テキストの詳細は、公式ドキュメントを参照してください。

　次の表2でもわかるように、このTypography仕様についても、React Native Paperは可能な範囲でサポートしています。

表2：テキスト表示（Typography）のコンポーネント

コンポーネント	概要
Text	テキストを表示する。React Native本家のものとほぼ同等。
Subheading	小見出しを表示する。
Title	タイトルを表示する。
Paragraph	段落を表示する。
Headline	見出しを表示する。
Caption	注釈を表示する。

　これらのコンポーネントを駆使することで、美しいUIを組み立てていくことができるでしょう。

React Native Paperをセットアップする

　では、実際の使い方について解説します。おおむね公式ドキュメントに沿う形で解説します。

React Native Paperのインストールと初期設定

　まずは、サンプルプロジェクトを作りましょう。リスト1のようにexpo initコマンドで、ブランクプロジェクトを選択します。

［リスト1］サンプルプロジェクトを作成する

$ expo init paper-sample --template blank

　次に、React Native Paperをインストールします。

［リスト2］React Native Paperをインストールする

$ npm install react-native-paper

　もし、素のReact Nativeで開発をする場合には、ここでreact-native-vector-iconsをインストール必要がありますが、今回利用するExpo環境ではすでにインストールされているため、割愛します。

　インストールが終わったら、babel.config.jsを修正します。リスト3の形になるよう、envキーにオブジェクトを追記してください。

［リスト3］babel.config.jsにリリース用の設定を行う

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: { // (1)
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};

　（1）にproductionとある通り、リリースビルドを実施するときだけ有効になる設定です。厳密には、今回の記事で動作確認をするだけであれば不要ですが、将来リリースするためのアプリを作る際には、ぜひ設定していただきたいので言及します。

ソースコード側の初期設定

　さて、これで環境は整いましたので、ソースコード側の初期設定も済ませましょう。これまで、本連載ではプロジェクトフォルダのトップレベルにあるApp.jsを編集してサンプルを作ってきましたが、今回はsrcフォルダを作成し、アプリケーション本体をそちらに配置します。というのも、App.jsのようなエントリーポイントと呼ばれるファイルには、アプリ起動時の初期設定を書き込むことになるため、通常のアプリの実装とは分けておきたいのです。というわけで、今回は図4のようにsrc/Main.jsを作成しましょう。

図4：srcフォルダにもMain.jsを用意する

　App.jsとsrc/Main.jsの実装は、リスト4を参照してください。

［リスト4］App.jsとsrc/Main.js

// App.js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Main } from './src/Main';

export default function App() {
  return (
    <PaperProvider>{/* (1) */}
      <Main />
    </PaperProvider>
  );
}

// src/Main.js
import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';

export const Main = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        {/* これから実装する */}
      </ScrollView>
    </SafeAreaView>
  );
};

　（1）のPaperProviderを外側にかぶせることで、内側に配置されたコンポーネントにテーマを適用できるほか、別のオーバーレイするUIを表示できるようになります。ライブラリを導入していく中で、App.jsにXxxProviderを追加する機会は少しずつ増えていきます。そういった場合に、ファイル分けをしておくと便利です。

　さあ、これでReact Native Paperを使う準備はできました！