Reactのスロット機能

2022年6月21日

React のスロット機能

Vue では、スロットを使って「親」の部品から、「子」の部品にデータを渡す事ができます。React でも似た様な機能を使うことができます。この記事では、React のスロット機能の使い方を紹介します。

スロットとは？

HTML のタグで囲まれた部分です。

<h1>スロット</h1>

この例では、「h1」のタグで囲まれた「スロット」の部分です。この部分のデータを呼び出している「部品」（子）に渡す事ができます。

Vue の場合には、呼び出される側の部品（子）の方で、

<template>
  <slot>子で設定したデータ</slot>
</template>

の様に「slot」のタグで囲んでおくだけで利用できます。この場合、「子で設定したデータ」は、親でスロットのデータを設定している場合には上書きされる仕組みです。親側でスロットのデータを設定していない場合には、この「子で設定したデータ」が表示される仕組みです。

React の場合はどうなっているか？

React でも同じ様な機能を利用できます。 React の場合は、このスロットのデータも「プロパティ」の一部として、呼び出される部品（子）に渡されます。

React の呼び出される側（子）の「部品」の例です。

import React from "react";
interface IProps {
  children: string | undefined;
}
export default function Step14Child(props: IProps): JSX.Element {
  return (
    <React.Fragment>
      <div>
        <p>{props.children ? props.children : "Fallback content"}</p>
      </div>
    </React.Fragment>
  );
}

React の場合は、「children」という名前でデータが渡されます。

予め呼び出される側（子）でデータを設定したい場合には、Typescript(Javascript)で表示を選べるようにしています。

props.children ? props.children : "Fallback content"

のように意図的にデータの表示をプログラムで記述する必要があります。型の宣言でも、このデータが設定されない場合（undefined）の場合がある事を宣言します。

呼び出し側の記述

呼び出し側（親）の部品では、特別な指定はありません。上で挙げた例の場合には、呼び出す部品の名前は「Step14Child」という名前なので、これをタグにしてスロットのデータを囲んで渡すだけです。

import React, { useState } from "react";
import Step14Child from "./step14Child";
import "./styles/step14.css";
export default function Step14(): JSX.Element {
  const [msg, setMsg]: [string, React.Dispatch<React.SetStateAction<string>>] =
    useState("from parent");
  return (
    <React.Fragment>
      <div>
        <Step14Child>{msg}</Step14Child>
      </div>
    </React.Fragment>
  );
}

この例では、「msg」というステートで管理している変数をスロットで渡しでいます。通常のプロパティの様に、アトリビュート（attribute）のタグを指定して渡す必要はありません。

React のコンセプト

React では、スロットのデータも「特別な」プロパティとして扱う事で、仕組みをシンプルにしています。あとは、できるだけ、「プログラム」で記述できるような形にしているというのが基本コンセプトです。
このチュートリアルの例でも何度か紹介していますが、「表示」も Typescript(Javascript)で記述するというのが基本的な考え方で、Vue の表示は「html」ベース、データの処理は「Javascript(Typescript)」ベースと分けて考えているコンセプトとは少し違います。
この辺りが、React の場合、よりプログラム（Typescript/Javascript）の詳しい知識が重要になってくる理由になっています。
Vue の場合には、初心者がいきなり学習しても比較的学びやすいと言われているのに対して、React の場合は、ある程度 Javascript(Typescript)を学習してからの方が理解しやすく、Vue に比べるとややハードルが高いと言われる原因になっています。
プログラムが主体なので、React の場合、実装の方法も選択肢が増えます。Vue の方がどちらかというと、（表示の）装方法はある程度限定されやすい傾向にあります。

まとめ

Vue の公式チュートリアル（英語版）をベースに、同じ様な機能を React で実装する例を紹介してきました。React でもほぼ同じ様な機能の実装が可能ですが、その実装のやり方は、結構違う部分も多くなっています。このように、同じ機能の実装を比べてみると、「今」の段階で Vue か React を選択する際に、どちらの方が向いているのかを考える良い基準になります。
React の場合は、よりプログラミングの知識が必要になる場合が多く、Vue の方が初心者でも実装しながら学べる要素が多くなっています。
初めて Web 開発のフレームワークを選ぶ場合には、どちらかというと Vue の方が入りやすいケースが多くなっています。この辺りが、初心者に Vue を推奨する大きな理由になっています。ただ、プログラミングにある程度慣れてくると、React も実装の幅も広くなって使いやすく便利なフレームワークです。
今回のチュートリアルの例のように、実際に両方を使って見て、利点と欠点を体験した上で選択できると実装に合わせた良い選択ができる様になります。

このブログを検索

シリコンバレースーパーウエア