TypescriptでReactを学ぶ(コンポーネントとPropsについて)

はじめに

TypescriptでReactの構成や記述を説明します．今回の記事ではコンポーネントとPropsについて書いています.基本的なことを書いているので初心者向け．
コードを載せていますが，アプリを作るわけではないため，ちょっと動かしてみたいだけならCodeSandbox等のWeb上で動かしてみるといいと思います．
もし，自分のPCで動かしたいならば，下記のサイトを参考にして環境設定をしてみてください．

Node.jsをバージョン管理しながらインストールするまでの道
Reactを始める前にざっくり理解してcreate-react-appを動かす

関数コンポーネント　クラスコンポーネント

Reactはそれぞれのコンポーネントを組み合わせて構成されています．
コンポーネントは関数コンポーネントとクラスコンポーネントの２種類存在します．以前までは，クラスコンポーネントはStateを持てるが，関数コンポーネントはStateが持てない違いがあり，必要に応じて使い分けていたらしい．しかし，現在は，Hooksと呼ばれるものは導入されて，関数コンポーネントもStateを持てるようになりました．(Stateやhooksについては別の記事で説明出来たらいいな．)
このような背景やReactの設計思想などの様々な理由から，コンポーネントを作る際には関数コンポーネントで作ることが推奨されています．
今回の記事では，はじめのクラスコンポーネントの説明のためのclass.tsx以外のコンポーネントは関数コンポーネントで書いています．

関数コンポーネントのほうがいい様々な理由

関数コンポーネントはクラスとどう違うのか?
Functional Component と PureComponentの違い・使い分け
Stateless な React Component の記法をまとめてみた

index.tsx

トップレベルで呼び出されるコンポーネント．htmlファイルのrootタグに紐付けられている．このファイルではapp.tsxファイルのコンポーネントをインポートして，表示しているだけ．

index.tsx

import React from "react";
import { render } from "react-dom";

import App from './app';

render(
  <App />,
  document.getElementById('root')
);

app.tsx

class.tsxとfunction.tsxファイルのコンポーネントをインポートしてAppコンポーネントに埋め込んでいます．このようにそれぞれで作成したコンポーネントを組み合わせて構成している．

app.tsx

import React from "react";
import Hello1 from './class';
import Hello2 from './function';

const App: React.FC = () => {
  return (
    <>
    <Hello1 />
    <Hello2 />
    </>
  );
};

export default App;

class.tsx

クラスコンポーネントで作成した場合のコンポーネント．ComponentをインポートしてHelloコンポーネントに継承している．renderメソッドで中身の部分を表示している．

class.tsx

import React, { Component } from "react";
class Hello extends Component {
  render() {
    return (
      <>
        <h1> Hello World</h1>
        <div> クラスコンポーネントの場合</div>
      </>
    );
  }
}

export default Hello;

function.tsx

関数コンポーネントで作成した場合のコンポーネント．
クラスコンポーネントより記述が少なくなっているのが見て分かる．返り値としてJSXを返して描画している．

function.tsx

import React from "react";
const Hello: React.FC = () => {
  return (
    <>
      <h1> Hello World</h1>
      <div> 関数コンポーネントの場合</div>
    </>
  );
};

export default Hello;

実行画面

Props

関数における引数に対応したもの．親コンポーネントから子コンポーネントに渡すデータで，子コンポーネントから親コンポーネントに渡すことは出来ない．読み取り専用のデータ．下記では，新たにコンポーネントを作成してPropsの使い方を見ていきます．App.tsxファイルを変更し，2つのファイルを追加します．

app.tsx

props_example1.tsxとprops_example2.tsxファイルのコンポーネントをインポートしてAppコンポーネントに埋め込んでいます．それぞれデータをPropsとしてそれぞれの子コンポーネントに受け渡している．

app.tsx

import React from "react";
import Hello3 from "./props_example1";
import Hello4 from "./props_example2";

const App: React.FC = () => {
  return (
    <>
    <Hello3 name={"hoge"}/>
    <Hello4 name={"hoge"} age={500}/>
    </>
  );
};

export default App;

props_example1.tsx

これは，名前のデータを受け取り，その情報を表示するコンポーネントになります．FC<>の中にコンポーネントのPropsの型を書き，引数として{name}を受け取ります．
関数の引数は{}をつけずにnameとするとエラーになるので気をつける．理由はなんでだろう? コンポーネントの受け渡しであるPropがオブジェクト型であるためっぽい．

props_example1.tsx

import React, { FC } from "react";

const Props: FC<{ name: string }> = ({ name }) => {
  return (
    <>
      <h1> Props の受け取り </h1>
      <div> hello {name}</div>
    </>
  );
};

export default Props;

props_example2.tsx

名前と年齢のデータを受け取り表示するコンポーネント．複数のデータを受け取る場合には，インターフェース等を定義し，Propsの型を指定すればいい．

props_example2.tsx

import React, { FC } from "react";
interface profile {
  name: string;
  age: number;
}
const Props: FC<profile> = ({ name, age }) => {
  return (
    <>
      <h1> Props の受け取り </h1>
      <div>
        hello {name}, {age} 歳
      </div>
    </>
  );
};

export default Props;

実行画面

まとめ

とりあえず，Typescriptでの基本的なコンポーネントとPropsの使い方を学んだ．次は，Stateについての記事を書きたいと思います．

参考サイト

関数コンポーネントはクラスとどう違うのか?
Functional Component と PureComponentの違い・使い分け
Stateless な React Component の記法をまとめてみた
コンポーネントとProps
React on TypeScript 事始め