MENU
プログラミング

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

hebishima.shogo

はい、hebiです。

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

あわせて読みたい
【React】とっても簡単！！Webサービスの作り方
【React】とっても簡単！！Webサービスの作り方
Contents
  1. コンポーネントとは
  2. ホームコンポーネントの作成
  3. ボタンコンポーネントの作成
  4. 型定義
  5. Props(プロップス)
  6. 最後に
スポンサーリンク

コンポーネントとは

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

ぺんぎん
ぺんぎん

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

hebiじぃ
hebiじぃ

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

ぺんぎん
ぺんぎん

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

hebiじぃ
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コンポーネントの利用方法
  1. 「import HomePage from “./components/HomePage”;」を定義することでHomePageコンポーネントを使えるようにします。
  2. <HomePage />を記述することでAppコンポーネント内でHomePagコンポーネントが表示されるようになります。
hebiじぃ
hebiじぃ

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

ぺんぎん
ぺんぎん

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

ぺんぎん
ぺんぎん

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

hebiじぃ
hebiじぃ

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

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

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

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

  1. 型定義
  2. 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じぃ
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じぃ
hebiじぃ

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

最後に

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

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

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

あわせて読みたい
Reactでルーティングの実装
Reactでルーティングの実装

最後までお読みいただきありがとうございました(^^)/

スポンサーリンク

ABOUT ME
hebi
hebi
エンジニア
フルスタックエンジニアとして活躍中。
HTML5プロフェッショナル認定Level1、Level2所持者です。

未経験の方でも簡単にプログラミングを学べるようにと情報を発信しております。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました