Reactの「部品」

Reactの「部品」

React も Vue と同様によく使う表示のパターンを部品化して再利用する事ができます。この記事では React の部品の使い方を紹介します。

基本は「部品」！

部品化と言っても特別な事はありません。 これまで、紹介してきた記述は基本的に全て「部品」です。 今までの記述は、React のトップレベルの「部品」であるの「App.tsx」から呼び出しています。今回は、意図的に一つの部品を作成して、React の上位（親）の部品から呼び出すやり方を紹介しています。

今回の部品は、「A Child Component！」を表示するだけのシンプルな物です。

import React from "react";

export default function Step11Child(): JSX.Element {

  return (

    <React.Fragment>

      <div>

        <h2>A Child Component!</h2>

      </div>

    </React.Fragment>

  );

}　

基本的な記述は、これまで紹介してきた書き方と同じです。 違いは、別に部品を作って呼び出す点です。

呼び出し元の記述

呼び出し元（親）の記述は、必要な部品を「import」して呼び出すだけです。

import React from "react";

import Step11Child from "./step11Child";

import "./styles/step11.css";

export default function Step11():JSX.Element {

  return (

    <React.Fragment>

      <div>

        <Step11Child />

      </div>

    </React.Fragment>

  );

}

Web アプリでよく利用するようなパターンの表示は、部品化すると利用する度に同じ記述を書かないで済むので開発が効率的にできるようになります。

特定の入力フォームや、ログインのフォームなどはよく利用するパターンの一例です。

何を部品化するか？

ところで、部品化を考える場合に大切な事は「何を部品化するか」という点を考えることにあります。

今回の課題は、部品化のやり方を学習するのが目的なので、実は余り部品化のメリットはありません。特に部品化しなくても、今までのような、一つの「部品」の中に記述しても同じ機能を実現できます。

現実的には、実際の開発では今回のようなパターンでは部品化をしないで書く方が一般的です。

実際に部品化すると有利なケースは、繰り返し利用する場合や、一つのファイルで記述すると記述が長くなる場合なども部品化して分割することで見通しが良くなります。

よく利用する部品の例

Web 開発でよく利用する部品化の例を挙げてみます。

Web 開発では、各ページで共通に利用する、メニューバーやフッターなどは部品化すると便利な例です。

あとは、既に例で挙げていますが、ログインのためのフォームなども良く利用するパターンの一つです。

こうした部品は、一つのプロジェクトに限らず、別のプロジェクトでも利用可能な場合が多いので部品化を進めておくと、開発を効率的に進めるのに大きな役割を果たすことが可能です。

まとめ

表示の部品化は Vue でも利用価値の高い機能の一つです。 このあたりの考え方は、React も Vue も余り差がありません。

従って、Vue を学習している場合には、今回の課題は殆ど新しく学習する事はありません。

全体的に見ると、React の方が Typescript(Javascript)の知識に関しては、より深いものが要求されるのは、これまで紹介してきた通りです。しかし、今回の課題のように、非常に近い仕様のものも多く、一つのフレームワークを学習してマスターしておくと、次の学習は比較的スムーズにできます。