【やってみよう！React.js】:React 要素とコンポーネントについて知る②

中村陽@元音楽家のITエンジニア

2021年4月8日 22:45

スクショで学ぶ、React.js

Coming soon...

これまで

前回は、React 要素とコンポーネントの概念について学びました。

コンポーネントについて知る

今回は、以下の公式ドキュメントを参照して、コンポーネントについて考えてみます。

このドキュメントの冒頭では、以下のように説明されていました。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

Javascript の二つの側面

そもそも「Javascript の関数」とはなんでしょうか？

MDN Web Docs: 関数では以下のように説明されています。

JavaScript の手続き ― つまり、タスクや値計算を実行する文の集まり

「手続き」という言葉が使われていることからも明らかですが、これは Javascript を手続き型言語として捉えた上での説明です。
もちろんその通りなので、これを否定するわけでは決してありません。

しかし、React のコンポーネントを理解する上では、関数型言語の「関数」と捉えたほうがよいでしょう。

関数型言語の「関数」

この書籍では、関数型言語の「関数」を以下のように説明しています。

与えられた入力の値のみから出力となる値をただ１つ決める規則

0.2 関数とは何か？より

要するに、同じ入力なら同じ結果が得られるということですね。

公式ドキュメントの説明を以下のように言い換えてみます。

概念的には、コンポーネントは関数型言語の関数と似ています。

コンポーネントを定義してみる

では早速、コンポーネントを定義してみましょう。
React では、コンポーネントを以下のように定義することができます。

function MyComponent(props){
	return (
		<div>{props.value}</div>
	)
}

props という入力を受け取り、その中にある value プロパティから取得した値をセットした React 要素を返すコンポーネントです。
Javascript の関数と同じように定義していることから、これを関数コンポーネントと呼びます。

この関数コンポーネントは以下のように呼び出すことができます。

function App(prop){
	return (
		<MyComponent value="Hello React Component!" />
	)
}

関数名（MyComponent）をタグで囲い、value 属性の値に文字列 "Hello React Component!" を指定した JSX です。

このコードを実行することで、画面上には「Hello React Component!」と表示されるでしょう。

どこらへんが関数型言語の関数なの？

コンポーネントに props を渡せば、それをセットした React 要素が返ってくるということはわかりました。
でもどこらへんが関数型言語の関数なんでしょうか？

それは公式ドキュメントの後半に書かれています。

（コンポーネントは）自分自身の props は決して変更してはいけません。

（中略）

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。

「純関数」= 「関数型言語の関数」と考えてよいでしょう。

上記のサンプルコードでいうと、props で渡された文字列 "Hello React Component!" に対して何の変更も許されず、必ず <div>Hello React Component!</div> を返却しないといけません。

つまり、同じ入力（文字列 "Hello React Component!"）なら同じ結果（<div>Hello React Component!</div>）にならないといけないということですね。

純関数の「ように」と書かかれているのは、必ずしも同じ結果になるとは限らないからでしょう。
（表示するブラウザによっては、フォントが違ったり、画面幅によっては改行されているかもしれませんよね）

じゃ、コンポーネントって変えられないの？

そこであなたはこのように思うかもしれません。

でも、ボタンとかチェックボックスがクリックされたら画面変えたいじゃん！

もちろん可能です。
それは state というもので実現できるのですが、state はクラスコンポーネントでのみ使うことができます（そこで Hooks の出番！となるわけですが、それは追々…）。

でも state に進む前に、まずは「純関数のように振る舞わないといけない」というReact のルールをしっかり理解しておくことが、これからの React ライフをエンジョイするためにとても重要です。

React の基本は関数コンポーネント

React を学習し始めると、割と速い段階で state に出会うと思います。
state はクラスコンポーネントで使うものなので、場合によっては関数コンポーネントよりも先にクラスコンポーネントのことを知るかもしれません。
それが悪というわけでは決してありませんが、当たり前に「コンポーネントは変更できるもの」と認識してしまうと混乱を招きかねないと思うのです。

「あれ、props に渡す値を onClick で変えてるのに、表示変わらないな…」
これは私が初学時にやらかした失敗です(^^;

前述の通り、React のコンポーネントには「純関数のように振る舞わないといけない」というルールがあり、それが基本です。
React の公式ドキュメントで、コンポーネントの説明として関数コンポーネントが最初に紹介されていることからもそれは明確です。

純関数のように振る舞う関数コンポーネントがあり、その機能拡張とも言える state を持つクラスコンポーネントがあります。そして、Hooks の登場で、クラスコンポーネントの機能を関数コンポーネントでも利用できるようなりました。
この一連の流れはしっかりと理解しておきましょう！

この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします！より良い記事をお届けできるよう、活動費に充てさせていただきます。