[React]初心者でも分かるコンポーネントとは？解説記事

2021年7月12日

Reactでよく使用される「コンポーネント」という概念についてまとめていきます。結構コンポーネント、コンポーネントって使うけど、実際にちゃんと説明できるかと言ったら難しいところでしたので、今回体系的にコンポーネントという概念をまとめてみました。

特にReactを勉強し始めの初学者の方でも分かりやすいように記述していきますのでご安心ください。

Reactの使い所

コンポーネントを理解するために、まずReactのことを少し復習してみましょう。

Reactとは、Facebookが開発したUIライブラリのことであり、UIを作成するためにコンポーネント（部品）を組み合わせてWeb上の画面を作っていくことに使われます。

コンポーネントとは

コンポーネントとは簡単に言うと

見た目 + 機能

を組み合わせたUIを構成する部品のことです。

このコンポーネントを複数組み合わせてWEB上の画面を構築していきます。

例えば、こんな感じで記事一覧の各記事情報BOXのところでコンポーネントを使用していることもあります。

Shopify 記事一覧　react コンポーネント

（下記ページは実際はReact使用していないので、あくまでもイメージです。）

このように再利用することを前提としている、ページ内で複数使用される部分でコンポーネントが使用される場合が多いです。

通常jQueryなどを使用すると要素の情報DOMで書き換えるということをするのですが、Reactの場合は再描画するというイメージになります。

後ほど詳しく説明しますが再描画される条件は基本的には下記です。

・propsが変更された時

・stateが変更された時

なぜコンポーネントを使うか

ではなぜコンポーネントを使用するのでしょうか。

その理由としては下記が主な理由になっています。

再利用するため	何度も同じ部品、機能を記述しなくて良い。
コードの見通しをよくするため	基本的は"1コンポーネント=1ファイル" 特に要素が多数ある場合はコンポーネントを使用すると見易い。
変更が簡単	再利用しているので、1ファイル（コンポーネント）を変更すれば全ての利用場所を変更できる。

コンポーネントの種類

またコンポーネントには二つの種類があります。

ただ現在ではクラスコンポーネントを使用する機会は、ほとんど無くなってしまったので、最初は関数コンポーネントを覚えることに注力すれば良いかと思います。（2020年からHooksが使えるようになったので、クラスコンポーネントでしかできないことが関数コンポーネントでできるようになりました。）

Class Component（クラスコンポーネント）

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional Component （関数コンポーネント）

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

もしくは


function Welcome(props) { return

<h1>Hello, {props.name}</h1>

; }

コンポーネントの使い方とprops

コンポーネントの構造

基本的には

・親コンポーネント

・子コンポーネント

を作成して、

・親コンポーネント → 子コンポーネントをimport

・子コンポーネント → 親コンポーネントにexport

で親コンポーネント内で子コンポーネントを使用していくことになります。

コンポーネント間のprops受け渡し

コンポーネントは再利用できることを前提に作られています。

なので、完全に定数のみのコンポーネントを使用するのではなく、変数を使用して受け取った値を利用することが必要になります。

そこで登場するのがpropsです。

先ほど親コンポーネントで子コンポーネントを使用することを述べましたが、簡単に言うと親から子コンポーネントに渡す値のことをpropsと捉えても問題ないかも知れません。

なので、

・親コンポーネントにてpropsを定義

・子コンポーネントにてpropsを受け取って出力

といった流れで使用するのが基本になります。

基本的に子コンポーネントでは静的なデータを使用せず、propsを使用して動的データを表示するように調整すると再利用しやすいコンポーネントになるかと思います。

実際のReactのコード

上記を踏まえて、実際のコードを使って親コンポーネント、子コンポーネントを作っていきましょう。

App.jsx（親コンポーネント）


import Message from "./components/Message"

function App() {
   return (
      <div>
         <Message
            title={'ようこそEC Penguinサイトへ'}
            subtitle={'Reactのコンポーネント説明です'}
         />
      </div>
   );
}

export default App:

components/Message.jsx（子コンポーネント）


const Message = (props) => {
   return (
      <div>
         <h1>{props.title}</h1>
         <p>{props.subtitle}</p>
      </div>
   );
};

export default Message;

とこのような感じになります。やっていることとしては親コンポーネントでpropsを指定し、子コンポーネントに渡した上で子コンポーネントを表示しているという形です。

コンポーネントの状態(state)

次にコンポーネントの状態（state）についてです。

stateはpropsと違い、後から変更することも可能です。コンポーネントの状態を変更することができるuseStateを使用すると、コンポーネントの中で変数の値を保持、更新ができるので非常に重宝されており、React Hookの中で、最も使われている機能の一つとも言えます。

stateの宣言


const [state, setState] = useState(initialState)

というようにstateを宣言します。

state → 現在の状態
setState → 更新関数
initialState → 初期値

のことを指します。

stateの更新


setState(newState)

というようにstateを更新することもできます。

setState → 更新関数
newState → 新しい値

のことを指します。

具体的な使用

ではstateの宣言と更新方法がわかったところで、実際にどのように使用するのかをみていきましょう。

今回は公開ボタンを押したら記事を公開ステータスにするというコンポーネントを作ってみます。


import {useState} from "react";

const Article = (props) => {
   const [isPublished, setIsPublished] = useState(false)
   return (
      <button onclick={() => setIsPublished(true)}>公開</button>
   );
};

といった感じで最初にisPublishedを定義します。そして、そこに初期値のfalse, 更新関数のsetIsPublishedを定義します。そこでボタンのonclickを使用して、setPublishedの更新関数を実行するという形になります。