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

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

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

　Reactにおけるコンポーネントとは、UIを再利用可能な部品として定義したもののことをいいます。JSXとして利用した場合の見た目こそHTMLやXMLのようですが、概念としては「ある引数（プロパティ）を与えられると、あるUIを返す」という、関数に似た特徴を持っています。

　本節では、まずコンポーネントの定義の仕方を解説してから、他のコンポーネントの中で利用する方法について解説します。

関数コンポーネントとクラスコンポーネント

　コンポーネントを定義するための、最もシンプルな方法は、JavaScriptの関数を定義することです（リスト3）。

［リスト3］シンプルなコンポーネント

import { Text } from 'react-native';

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

　リスト3は、props（プロップス、プロパティの意）というオブジェクトを1つ受け取り、JSXを返す関数です。これは、有効なReactコンポーネントとして動作します。関数で作られたコンポーネントなので、関数コンポーネントと呼ばれることもあります。

　JavaScriptのクラス構文を用いてコンポーネントを定義することもできます。

［リスト4］シンプルなコンポーネント

class Welcome extends React.Component {
  render() {
    return <Text>Hello, {this.props.name}</Text>; // (1)
  }
}

　リスト3とリスト4は、Reactから見ると同じものを表現しています。状態管理やライフサイクルの管理方法の面で違いはあるのですが、関数コンポーネントのほうが簡潔に書けるケースが多いため、本連載で解説する際には、主に関数コンポーネントで例示します。

　ところで、リスト3の（1）やリスト4の（1）で{props.name}といった表現が登場しました。これは、<Text>などの文字列を挟んで表現するコンポーネントと併用するための文法で、{}に囲まれたJavaScriptの式を評価して、文字列として展開します。どんな挙動になるのかは、次項で解説します。

コンポーネントを使う

　せっかくなので、実際にリスト3のWelcomeコンポーネントを動かしてみましょう。リスト5のように、サンプルプロジェクトを作成します。

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

$ expo init component-sample
# templateはblank
# プロジェクト名はcomponent-sample

　生成されたプロジェクトの中にあるApp.jsを、リスト6のようにします。

［リスト6］App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Welcome name="Bob" />{/* (1) */}
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: "center",
    justifyContent: "center",
  }
});

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

図1：Welcomeコンポーネントを表示した

　めでたく「Hello, Bob」が表示されました。処理としては、リスト6の（1）で渡されたpropsが（2）のTextコンポーネントに渡された文字列の中で展開され、その結果生まれた文字列である「Hello, Bob」 をTextコンポーネントが表示した、といった流れです。

　「関数コンポーネントとクラスコンポーネント」で解説した、有効なReactコンポーネントとして定義された関数やクラスは、このようにJSXとして表記することができます。

　結果的に表示されているものとしては、Welcomeコンポーネントを利用しなかったリスト7と等価になります。

［リスト７］App.js（Welcomeコンポーネントを使わない）

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, Bob</Text>
    </View>
  );
}

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

　このように、どんなに複雑なコンポーネントでも、実行時には原則としてViewやText（ブラウザならdivやspan）といった基底のコンポーネントの組み合わせとして実行されます。例外として、React Nativeでネイティブモジュールを自作したり、ブラウザ向けにWeb ComponentsのCustom Elementsを自作したりすれば、基底のコンポーネントを増やすこともできますが、上級編なので本連載では扱いません。