2023.12.03 2024.04.14

Reactでコンポーネントを作ろう

hebishima.shogo

はい、hebiです。

作成したWebサービスをもとに、ホーム画面とボタンコンポーネントを作成したいと思います。まだWebサービスを作成できていない方は以下の記事をどうぞ！

コンポーネントとは

コンポーネントを作成する前に、コンポーネントについて説明します！

ぺんぎん

コンポーネントってなんなの？？

hebiじぃ

簡単に言うと、画面に表示させる部品のことをコンポーネントと言うのじゃ。1度作ったコンポーネントは別の画面にも再利用することができるのでとても便利なのじゃよ。

ぺんぎん

うーん、、いまいちピンとこないなぁ。。具体的にどのようなコンポーネントを作成すればいいの？？

hebiじぃ

そうじゃな。では早速コンポーネントを作成してみるとしよう。

ホームコンポーネントの作成

ホーム画面コンポーネントを作成してみましょう。

HomePage.tsxを作成

srcフォルダにcomponentsフォルダを作成し、HomePage.tsxを作成します。

フォルダ名はなんでも大丈夫です。components/page/HomePage.tsxのように画面のコンポーネントをまとめてもいいかもしれません！

HomePage.tsxを修正

「ホーム画面」の文字を表示する簡単なHomePageコンポーネントを作成します。

const HomePage = () => {
  return <div>ホーム画面</div>;
};

export default HomePage;

アロー関数という書き方で記述しましたが、以下のように通常の関数宣言でも実装できます。

function HomePage() {
  return <div>ホーム画面</div>;
}

export default HomePage;

ポイント

最近ではアロー関数の方が好まれる傾向にあるので、覚えておきましょう！！

Appコンポーネントから呼び出す

作成したHomePageコンポーネントをAppコンポーネントから呼び出します。

import React from "react";
import HomePage from "./components/HomePage";

function App() {
  const divStyle = {
    margin: "100px",
  };
  return (
    <div className="App">
      <div style={divStyle}>
        <HomePage />
      </div>
    </div>
  );
}

export default App;

HomePageコンポーネントの利用方法

「import HomePage from “./components/HomePage”;」を定義することでHomePageコンポーネントを使えるようにします。
<HomePage />を記述することでAppコンポーネント内でHomePagコンポーネントが表示されるようになります。

hebiじぃ

ぺんぎんよ、npm startを実行するのじゃ！

ぺんぎん

npm start！！！！！！！！！！

ぺんぎん

おっ！ホーム画面が表示された！！
なるほど、HomePageコンポーネントが表示されたわけか！！

hebiじぃ

コンポーネントの概念が分かったみたいじゃの。
ではこの流れでボタンコンポーネントも作成してみるのじゃ。

ボタンコンポーネントの作成

ボタンコンポーネントを作成してみましょう。

ここでは以下について学ぶことができます。

型定義
Props(プロップス)

CustomButton.tsxを作成

src\componentsフォルダに、CustomButton.tsxを作成します。

CustomButton.tsxを編集

ボタンを表示するCustomButtonコンポーネントを作成します。

import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  width?: string;
}

const CustomButton = (props: ButtonProps) => {
  return (
    <button style={{ width: props.width }} {...props}>
      {props.children}
    </button>
  );
};

export default CustomButton;

HomePageコンポーネントから呼び出す

作成したCustomButtonコンポーネントをHomePageコンポーネントから呼び出します。

import CustomButton from "./CustomButton";

const HomePage = () => {
  const onClick = () => {
    alert("保存しました");
  };

  return (
    <div>
      <div>ホーム画面</div>
      <CustomButton width="100px" onClick={onClick}>
        保存
      </CustomButton>
    </div>
  );
};

export default HomePage;

ぺんぎん

おっ！ボタンが表示された！

ぺんぎん

コンポーネントについては理解できたけど、HomePageコンポーネントと比べるとちょっと複雑だよなぁ。

hebiじぃ

コンポーネントにはProps(プロップス)という概念があるのじゃ。Propsについて説明していくとするかの。

TypeScript言語でWebサービスを作成しているから型定義についても説明するぞ。

型定義

作成したCustomButtonコンポーネントにデータを渡したい場合に型を定義します。

CustomButtonコンポーネントでは、以下のようにButtonPropsという型名で型を定義しています。頭にinterfaceまたはtypeを指定することで型となります。

interface ButtonProps

ボタンの横幅を渡したいので、widthというプロパティ名を定義します。
“10px”のような値が入るので、string型にしています。

interface ButtonProps{
  width?: string
}

widthを受け取りたくない場合もあると思うので、widthの後ろに?を付けています。?を付けないとwidthは必須項目になります。

最後にbuttonの標準のプロパティも一緒に渡したいので以下のようにextends React.ButtonHTMLAttributesを追加しています。これによりonClick、disabled、type なども渡せるようになります。

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  width?: string;
}

もし高さも渡したい場合はheightを追加しましょう！

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  width?: string;
  height?: string;
}

ButtonPropsだとextendsにより複雑に見えますが、簡単な例だと以下のように型定義を行えます。

interface TestProps {
  width?: string;
  height?: string;
}

Props(プロップス)

Propsとは、親から子のコンポーネントへ値を渡すために利用します。

受け取ったPropsの値を変更することはできません。

子から親へPropsでのやり取りはできないので注意してください。

Propsは以下のように引数名(props):型名(ButtonProps)のように定義すると受け取ることができ、props.widthのように受け取ったプロパティを参照することができます。

const CustomButton = (props: ButtonProps) => {
  <button style={{ width: props.width }} {...props}>
      {props.children}
    </button>
};

...props

…props部分は、スプレッド構文を使ってすべてのプロパティをbutton要素に適用することを意味します。例えば、ButtonPropsにonClickというプロパティが含まれていれば、CustomButtonコンポーネントを使う際には、要素にonClickプロパティが含まれることになります。

スプレッド演算子（Spread Operator）は、配列やオブジェクトの展開や結合を行うための演算子です。JavaScriptやTypeScriptで広く使われています。

例

const obj1 = { foo: 1, bar: 2 };

const combinedObj = { …obj1 };
console.log(combinedObj); // { foo: 1, bar: 2 }

children

childrenは、コンポーネントが囲まれた要素の間に配置された要素やテキストを表します。以下のようにCustomButtonを利用した場合はchildrenには保存が入ります。

<CustomButton width="100px" onClick={onClick}>
  保存
</CustomButton>

ぺんぎん

hebiじぃありがとう！Propsを渡すためにはデータの型を定義すること、Propsの受け取り方をなんとなく理解できた気がするぜ。。

hebiじぃ

慣れるまでは難しいじゃろう。ただReactはコンポーネント作成を繰り返し行っていくからすぐ慣れると思うぞ。

最後に

いかがだったでしょうか。コンポーネントは作れましたか？
フロントの実装は基本的にはコンポーネント作成がメインになってきます。

本記事を参考に編集画面コンポーネントなど色々なコンポーネントを作成してみてください。

次はホーム画面、編集画面の遷移を行うための、ルーティングについて学んでいきましょう！

Reactでコンポーネントを作ろう

コンポーネントとは

ホームコンポーネントの作成

HomePage.tsxを作成

HomePage.tsxを修正

Appコンポーネントから呼び出す

ボタンコンポーネントの作成

CustomButton.tsxを作成

CustomButton.tsxを編集

HomePageコンポーネントから呼び出す

型定義

Props(プロップス)

最後に

【CodeIgniter4】PostgreSQLに接続してデータを取得する方法

ページ全体を再読み込みすることなくAjaxでデータを取得する方法

C#でWeb API(Rest API)の作り方

React useStateを使って状態管理を行う

Reactでルーティングの実装

C#でCORSを有効にする方法