コンポーネントとprops（1）
Reactにおけるコンポーネントとは、UIを再利用可能な部品として定義したもののことをいいます。JSXとして利用した場合の見た目こそHTMLやXMLのようですが、概念としては「ある引数（プロパティ）を与えられると、あるUIを返す」という、関数に似た特徴を持っています。
本節では、まずコンポーネントの定義の仕方を解説してから、他のコンポーネントの中で利用する方法について解説します。
関数コンポーネントとクラスコンポーネント
コンポーネントを定義するための、最もシンプルな方法は、JavaScriptの関数を定義することです（リスト3）。
import { Text } from 'react-native';
function Welcome(props) {
return <Text>Hello, {props.name}</Text>; // (1)
}
リスト3は、props（プロップス、プロパティの意）というオブジェクトを1つ受け取り、JSXを返す関数です。これは、有効なReactコンポーネントとして動作します。関数で作られたコンポーネントなので、関数コンポーネントと呼ばれることもあります。
JavaScriptのクラス構文を用いてコンポーネントを定義することもできます。
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のように、サンプルプロジェクトを作成します。
$ expo init component-sample # templateはblank # プロジェクト名はcomponent-sample
生成されたプロジェクトの中にあるApp.jsを、リスト6のようにします。
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のようになります。
めでたく「Hello, Bob」が表示されました。処理としては、リスト6の（1）で渡されたpropsが（2）のTextコンポーネントに渡された文字列の中で展開され、その結果生まれた文字列である「Hello, Bob」 をTextコンポーネントが表示した、といった流れです。
「関数コンポーネントとクラスコンポーネント」で解説した、有効なReactコンポーネントとして定義された関数やクラスは、このようにJSXとして表記することができます。
結果的に表示されているものとしては、Welcomeコンポーネントを利用しなかったリスト7と等価になります。
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を自作したりすれば、基底のコンポーネントを増やすこともできますが、上級編なので本連載では扱いません。
