SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

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

図3:React Native Paper (公式ドキュメントより引用)
図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を用意する
図4:srcフォルダにもMain.jsを用意する

 App.jssrc/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.jsXxxProviderを追加する機会は少しずつ増えていきます。そういった場合に、ファイル分けをしておくと便利です。

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

次のページ
目的に応じてテキストを使い分ける

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact Native入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12087 2020/04/03 16:37

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング