【TypeScript×React】環境構築から関数コンポーネントや簡易的アプリ開発まで解説！

2024年2月28日2024年2月29日

本記事では、非常に簡易的なアプリ開発をもとに関数コンポーネントについて解説します。

それぞれTypeScriptとReactを利用して実施していきます。

TypeScriptとReactの相性について

TypeScriptは「JavaScript + 静的型付け」といった型を付与したプログラミング言語になります。

TypeScriptは以下の特徴を持っています。

TypeScriptの特徴

TypeScriptはJavaScriptと互換性が高い
TypeScriptは型定義ができる（コンパイルによる型チェック）

JavaScriptに静的型付けが付与されているため、TypeScriptの特徴を利用したままフレームワークであるReactが活用できます。

そのため、TypeScriptのコードに対する堅牢性を保持したままReactを使えるので、非常に相性が良いです。

TypeScriptとReactによる開発環境構築方法

まだ何も開発環境の準備ができていない場合は、以下の環境構築から実施しましょう。

TypeScriptの特徴

Node.jsのインストール
TypeScriptのインストール
VSCodeのインストール

TypeScriptを利用するために、Node.jsのインストールが必要になります。

基本的に、最新版をインストールすれば問題ありません。

各種必要なインストーラーの実施方法を詳しく知りたい人は、「【TypeScript】インストール方法や開発環境構築を徹底解説！」を一読ください。

TypeScript×Reactによる関数コンポーネント

Reactでアプリケーションを作成する際、基本的にコンポーネントといった部品・パーツを作ります。

関数コンポーネントは、関数で定義されたコンポーネントを指します。

本記事では、簡易的な画面表示のみのアプリ開発を例に挙げて以下のフォルダ構成で進めます。

sample
├─public
│ ├─index.html
│ └─（Create React Appの場合にその他ファイル）
├─src
│ ├─componets
│ │ └─App.tsx（解説箇所）
│ └─index.tsx（解説箇所）
└─package.json等

上記のフォルダ構成の中で、index.tsxとcomponentsフォルダ内にあるApp.tsxの2つのファイルをメインに解説します。

サンプルアプリの実装 – index.tsx

ここでは、index.htmlに対して最終的にデータを渡すindex.tsxの中身を確認していきます。

import { render } from "react-dom";

const App = () => {
    return (
        <div>
          <h1>こんにちは！</h1>
          <p>調子はどうですか？</p>
        </div>
    );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

import文にてreact-domライブラリからrenderモジュール、componentsフォルダ内のApp.tsxから関数コンポーネントであるAppを呼び出しています。

また、rootElementにてinidex.html内のid=”root”である<div>タグを取得しています。

renderは、第1引数に「render対象」、第2引数に「render箇所」を設定します。

また、第1引数に<App />がありますが、Reactでは関数名をHTMLタグで囲みコンポーネント（HTMLのまとまり）として扱えます。

そのため、ここでは「index.html内のid=”root”である<div>タグに対してApp関数で処理したものを返す」といった流れになります。

ただ、このままではindex.tsx内に膨大な画面要素に関するコードが増え続けてしまいます。

そこで、コンポーネント化を実施することでメイン処理と画面要素を分離し、開発時のファイル管理を効率化させます。

画面要素に対する関数コンポーネント化

上述したindex.tsxでのApp関数は、サンプルアプリにとって画面要素のコードになります。

そのため、画面要素となるApp関数をコンポーネント化するため、componentsフォルダのApp.tsxに移植します。

import { FC } from "react";

export const App: FC = () => {
  return (
    <div>
      <h1>こんにちは！</h1>
      <p>調子はどうですか？</p>
    </div>
  );
};

上記コードのように、App.tsxによって画面要素をコンポーネント化できました。

また、FC（FunctionComponentの略）のように、関数コンポーネント自体に型定義することもTypeScriptの特徴です。

import { render } from 'react-dom';
import { App } from './components/App';

const rootElement = document.getElementById("root");
render(<App />, rootElement);

変更箇所として、import文にてconponentsフォルダ内のApp.tsxからAppを呼び出しています。

最も基本的な使い方として例を出しましたが、関数コンポーネントを利用することで以下のメリットがあります。

TypeScriptの特徴