はじめに
BASE株式会社でシニアエンジニアを務めているプログラミングをするパンダ（@Panda_Program）と申します。本連載はバックエンドの開発者向けに特化したフロントエンド入門です。
対象読者
本連載の対象読者はオブジェクト指向プログラミングの基礎を理解しており、フロントエンド開発に興味があるバックエンドエンジニアの方です。バックエンド開発で主流であるオブジェクト指向プログラミングと比較しながらフロントエンドの考え方を理解することで、スムーズにフロントエンド開発を始められることを目的としています。
Reactコンポーネントを理解する
ではReactコンポーネントを具体的なコードで見ていきましょう。
2019年2月6日にReact v16.8がリリースされ、React Hooksが導入されました。それまでReactコンポーネントはClassコンポーネントで作成していました。Classコンポーネントは以下の通りです。
import React, { Component } from 'react';
export default class Article extends Component {
render() {
return (
<article>
<header>
<h2>記事タイトル</h2>
<p>著者: @Panda_Program（公開日: 2024/12/31）</p>
</header>
<p>本文です</p>
</article>
);
}
}
実のところ、バックエンド開発者の方にとってはクラス形式のReactコンポーネントの方が理解しやすいと思います。
しかし、React v16.8のリリース以降はクラスコンポーネントではなく関数コンポーネントが一般的になったため、ここからは関数コンポーネントで説明します。
Reactコンポーネントは状態がない（stateless、ステートレス）コンポーネントと状態を持つ（stateful、ステートフル）コンポーネントに分けられます。最初にReactコンポーネントの基本である状態がないコンポーネントの紹介をします。
状態がない（stateless）コンポーネント
ReactはOCamlの関数型プログラミングの特徴に影響を受けています[1]。状態のない関数コンポーネントは純粋関数の特徴を持つといえます。
純粋関数とは、同じ入力に対して常に同じ出力を返し、副作用を持たない関数です。例えば、与えられた数値を2倍する以下の関数は純粋関数です。2を与えれば4を、4を与えれば8を必ず返すからです。
function double(x: number) {
return x * 2;
}
double(2) // 4
double(4) // 8
ステートレスな関数コンポーネントも同様です。値をハードコードしたArticleコンポーネントは、どこから何度呼び出されても必ず同じJSXを返します。
function Article() {
// 必ず同じJSXを返す
return(
<article>
<header>
<h2>記事タイトル</h2>
<p>著者: @Panda_Program（公開日: 2024/12/31）</p>
</header>
<p>本文です</p>
</article>
);
}
Reactコンポーネントは以下のように呼び出されます。
<Article /> // Article() と同じイメージ
関数コンポーネントはJavaScriptの関数として記述されるため引数を受け取れます。Reactではコンポーネントに対する入力をprops（プロップス）と呼びます。
type Props = {
title: string
author: string
publishedAt: string
content: string
}
// Props を引数としている
function ArticleWithProps({title, author, publishedAt, content}: Props) {
return (
<article>
<header>
<h2>{title}</h2>
<p>著者: {author}（公開日: {publishedAt}）</p>
</header>
<p>{content}</p>
</article>
);
}
Propsが必要なReactコンポーネントは以下のように呼び出します。
<ArticleWithProps
title="記事タイトル"
author="@Panda_Program"
publishedAt="2024/11/30"
content="本文"
/>
// 以下と同じイメージ
// ArticleWithProps({
// title: "記事タイトル",
// author: "@Panda_Program",
// publishedAt: "2024/11/30",
// content: "本文",
// })
Reactの世界では、与えられた入力（props）に対して常に同じ出力（JSX）を返すという、ステートレスな関数コンポーネントが持つ純粋関数の特性を以下の数式で表現します。
UI = f(props)
これは関数fにpropsを与えれば、必ずpropsの値に応じたUIを返すという意味です。関数型プログラミングにインスパイアされたReactの特徴をシンプルに表現したものと言えるでしょう。
- [1]Reactの作者である@jordwalke氏がOCaml愛好家であるため（出典：Medium「My React List」）。
