Reactの基本を学ぼう～コンポーネントの仕組みと作り方

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

コンポーネントとprops（2）

コンポーネントを再利用する

　さて、前項で「どうせ自作のコンポーネントは、元をたどれば基底のコンポーネントの組み合わせでしかない」という話をしました。それなら、コンポーネントを自作せず、リスト7のように基底のコンポーネントを並べたほうが楽なのでしょうか。

　そういうケースもあるかもしれませんが、コンポーネントに分けると、「再利用することができる」というメリットが発生します。

　メリットの実例として、まずはWelcomeコンポーネントを再利用してみましょう。Welcomeコンポーネントを増やします（リスト8）。

［リスト8］App.js（Welcomeコンポーネントを並べる）

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

export default function App() {
  return (
    <View style={styles.container}>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </View>
  );
}

function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

const styles = StyleSheet.create({
// 省略

　これを実行すると、図2のようになります。

図2：コンポーネントは再利用が容易

　Welcomeメッセージが3つ現れましたね。同じ表示になる画面部品を作って、それを使い回せる、というのは、似た部品が多く現れるアプリ開発においては、とてもありがたい特徴です。

実装を隠蔽できる

　次に、スタイルの隠蔽についても目を向けてみます。これについてはコンポーネントを別のファイルとして管理したほうがうまみが出やすいので、App.jsと同じ階層にWelcome.jsを作ってみましょう（リスト9）。

［リスト9］Welcome.js

import React from 'react';
import { Text } from 'react-native';

export function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

　すると、App.js側ではWelcomeコンポーネントをインポートして使うことになります（リスト10）。

［リスト10］App.js（Welcomeコンポーネントを別ファイルから取り込む）

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Welcome } from './Welcome';

export default function App() {
  return (
    <View style={styles.container}>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </View>
  );
}

const styles = StyleSheet.create({
// （省略）

　この時点で、App.jsはWelcomeコンポーネントがどんな実装になっているのかについて、関心を持たなくなりました。関心があるのは、次の2点だけです。

• どんな名前のコンポーネントなのか
• どんなpropsを持っているのか

　この先は、Welcomeコンポーネントのファイル内で、独自にスタイルを付けてフォントを変えたり、文面を変えたりしても、App.jsには影響がありません（リスト11）。

［リスト11］Welcome.js

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';

export function Welcome(props) {
  return (
    <Text style={styles.text}>
      Hello, {props.name}!!
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    fontFamily: Platform.select({
      ios: "Hiragino Mincho ProN",
      android: "serif",
    }),
    fontSize: 48,
  }
});

　App.jsには手を入れず、Welcome.jsだけを編集して、再度実行してみると、図3の表示になります。

図3：Welcomeコンポーネント内のスタイルだけを変更した

　UIを適切に分割してコンポーネント化しながら定義していくことで、ある部分の修正で他の部分に影響が出ないようにするのが、コンポーネント化の醍醐味の1つです。名前を付け、propsを定義して切り出せそうな部分を見つけたら、積極的にコンポーネント化していきましょう。

まとめ

　今回は静的に定義できる範囲でUIを定義する手法を学びました。次回は、コンポーネントに状態を持たせて、UIを更新する手法について解説します。