【サンプル有】React＋TypeScript - 開発環境構築からWebページ公開までの手順を紹介

本記事では、Reactの開発環境をパソコン上に構築して、簡単なWebページを作成するまでの手順について順を追って説明していきます。

スキルアップ

2022/10/24 UP

Reactは、Meta社（旧Facebook社）によるオープンソースプロジェクトの一つです。ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリとして、国内・海外を問わず広く利用されています。Reactの特徴や、開発の進め方について知りたいという人は多いのではないでしょうか。

そこで本記事では、Reactの開発環境をパソコン上に構築して、簡単なWebページを作成するまでの手順について順を追って説明していきます。人気のプログラミング言語であるTypeScriptを開発に用いる方法としましたので、ぜひReactを体験してみてください。

なお、TypeScriptの入門編については、こちらの記事をご覧ください。
【入門】TypeScriptとは？言語の特徴やJavaScriptとの違いを解説

Reactとは

まずは、Reactがどのようなライブラリなのかについて知ることからはじめましょう。今回紹介する手順で必要となるTypeScriptやNode.jsとの関係性についても、併せて説明していきます。

Reactの3つの特徴

Reactのおもな特徴としては、次の3点が挙げられます。

・Declarative：「宣言的なView」により、インタラクティブなユーザーインターフェースを作りやすい

・Component-Based：まず「コンポーネント」を作り、それらを組み合わせることで複雑なページも構築できる

・Learn Once, Write Anywhere：既存のソースコードを書き換えることなく、ほかの技術と組み合わせられる

「ほかの技術と組み合わせられる」という特徴は、Reactが広く採用されている理由の一つといえるでしょう。例えば、ブラウザ側だけでなくWebサーバー上で動作させたり、「React Native」と呼ばれる技術と組み合わせてスマートフォン向けアプリを構築したりすることが可能です。

Reactの開発言語としてTypeScriptを選択する利点

TypeScriptは、JavaScriptが「型」を扱う仕組み（type system）を充実させたような言語です。TypeScriptを用いれば開発者は任意の型を追加したり、将来のJavaScript向けに計画されている機能を先取りで利用したりできるようになります。

TypeScriptのプログラムはコンパイラでJavaScriptに変換されるため、最終的にはブラウザ上でも動作させることが可能です。JavaScriptの代わりに用いることで、ソースコードの品質や開発スピードの向上が見込めるプログラミング言語だといえるでしょう。

Reactは「JavaScriptライブラリ」であるため、TypeScriptの使用は必須ではありません。しかし、TypeScriptを併用すれば、開発作業を効率的に進めやすくなるなどの効果が見込めます。ある程度の規模があるWebアプリを開発するのであれば、TypeScriptを導入するメリットは大きいでしょう。

Reactの環境構築にはNode.jsがおすすめ

Node.jsは、JavaScriptの実行環境の一つです。WebサービスにおけるサーバーサイドのシステムをJavaScriptで稼働させたい場合などに、幅広く利用されています。

最終的にReactを動作させる際には、ブラウザがJavaScriptの実行環境となるためNode.jsは必要ありません。一方、Reactの開発環境にはNode.jsが用いられることが多くなっています。開発用サーバーをローカルで稼働させることが可能なため、デバッグ作業などを効率良く進められるからです。

また、TypeScriptのコンパイラもNode.jsで動作する仕組みになっています。Reactの開発環境を構築するには、Node.jsを利用するのが合理的だといえるでしょう。このあと紹介する手順も、Node.jsがインストールされたパソコン上にReactの開発環境を構築していく流れになっています。

React＋TypeScriptの開発環境を構築しよう

ここからは、TypeScriptでReactのWebページを作る手順について説明していきます。まずは、開発環境を構築しましょう。

事前準備として、パソコンにNode.jsをインストールしておく必要があります。Node.jsの公式サイトからインストーラーをダウンロードのうえ、インストールを完了させておいてください。

また、この先の手順ではコマンドラインからの操作を行なう場面が出てきます。ディレクトリの移動やコマンドの実行などの基本操作を知っていると、構築作業を進めやすいでしょう。

Reactの開発用ディレクトリを作成する

Node.jsを用いてReactの開発環境を構築するのは、特定のディレクトリ（フォルダ）を開発用として設定するということです。開発プロジェクト（開発予定のWebサイト）ごとにディレクトリを1つ指定して、開発用ディレクトリにします。そのためには、「Create React App」というツールを使うのがおすすめです。

「Create React App」は、事前にインストールしておく必要はありません。次のようにコマンドラインから、Node.jsのnpxコマンドで実行しましょう。

コマンド：

npx create-react-app react-practice --template typescript

最初の引数（ここでは「react-practice」）は、プロジェクト名です。コマンドを実行すると指定したプロジェクト名と同じ名前のディレクトリが作成され、開発用ディレクトリになります。

また、「--template」オプションでTypeScriptを指定している様子がわかるでしょうか。このオプションにより、Reactによる開発をTypeScriptで進められるようになります。

Reactの開発用サーバーを起動する

「Create React App」により、開発用ディレクトリからサーバーを起動できるようになりました。これは必ず使わなければならないものではありませんが、Reactを用いたコーディングやデバッグを容易にしてくれるので、積極的に活用するとよいでしょう。

サーバーは、コマンドラインで次のように開発用ディレクトリに移動（cd）したうえで、Node.jsのnpmコマンドで起動できます。

コマンド：

cd react-practice
npm start

サーバーを起動するとOSのデフォルトブラウザ（ただしmacOSの場合はChrome）が自動的に開き、サンプルページが表示されます。

このサンプルページは、実際にReactで作られたものです。開発用ディレクトリにソースコードが格納されているので、これをベースに開発をはじめるとスムーズでしょう。

なお、起動時と同じコマンドラインから「Ctrl+C」を入力すれば、サーバーは停止します。

React＋TypeScriptでWebページを作ってみよう

ここからの手順では、実際にReactを用いて簡単なWebページを作っていきます。HTMLとCSS、JavaScriptについてある程度の知識があれば、作業内容をスムーズに理解できるでしょう。

なお、TypeScriptのソースコードを編集するため、コーディングに対応したテキストエディタ（Visual Studio Codeなど）を用意してから作業にとりかかるのがおすすめです。

ReactのAppを書き換える

開発用サーバーを起動し、ブラウザ上にサンプルページが表示された状態から作業をはじめることにしましょう。サンプルページ内に、「Edit src/App.tsx and save to reload.」という一文が見えるのがわかるでしょうか。これは、「src/App.tsxを編集したら、保存すれば再読み込みできる」という意味です。

srcディレクトリの内側を覗くと、たしかにApp.tsxというファイルがあることがわかります。このソースコードはTypeScriptで書かれていますが、HTMLタグを直接記述できるよう記法が拡張されたものです。

まずは、App.tsxをテキストエディタで開いて中身を観察しておきましょう。実際にHTMLタグが記述されており、それがブラウザ上での表示内容に対応している様子が確認できます。

次に、App.tsxの内容を以下のサンプルコードのように書き換えてください。これは、見出し（h1タグ）だけの単純なページを表示するプログラムです。

サンプルコード（App.tsx）：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Reactの練習</h1>
    </div>
  );
}

export default App;

App.tsxの編集が終わったら、保存してブラウザの表示を確認します。すると、ページが自動的に再読み込みされることがわかるでしょう。

ReactのAppにコンポーネントを埋め込む

複雑なユーザーインターフェースでもコンポーネントを用いて組み立てられる点は、Reactの主要な特徴の一つです。ここでは、「MyPractice」という名前のコンポーネントを作ってみることにしましょう。

テキストエディタで新規ファイルを作成し、以下のソースコードを入力してください。入力できたら、App.tsxと同じ場所にMyPractice.tsxというファイル名で保存します。

サンプルコード（MyPractice.tsx）：

import React from 'react';

class MyPractice extends React.Component {
  render() {
    return (
      <div className="MyPractice">
        <p>コンポーネントの練習です。</p>
      </div>
    );
  }
}

export default MyPractice;

このソースコードも、App.tsxと同様TypeScriptによるプログラムです。「React.Component」をベースとして、MyPracticeという名前の新しいクラス（class）を定義している様子がわかるでしょうか。段落（pタグ）を1つ表示させるだけの、小さなクラスです。

自分で作ったコンポーネントを表示するには、ページ内に埋め込む必要があります。App.tsxを、次のように編集してみてください。

サンプルコード（App.tsx）：

import React from 'react';
import './App.css';
import MyPractice from './MyPractice';

function App() {
  return (
    <div className="App">
      <h1>Reactの練習</h1>
      <MyPractice />
    </div>
  );
}

export default App;

ここでは、まずMyPracticeをインポート（import）しています。次にコンポーネント名を、そのままHTMLタグのように書き加えました。

ファイルを保存し、ブラウザでの表示を確認すると、コンポーネントとして定義した段落が埋め込まれたことがわかります。

Reactのコンポーネントでonclickイベントを処理する

インタラクティブなユーザーインターフェースを作りやすい点も、Reactの便利なところです。そこで、「MyPractice」コンポーネントを、ユーザー操作に反応するように改造してみましょう。ここでは、「ボタンを押すとメッセージが切り替わる」という機能を作ることとします。

そのような場合に便利なのが、Reactの「state」と呼ばれる仕組みです。再びMyPractice.tsxをテキストエディタで開き、次のように編集してみてください。

サンプルコード（MyPractice.tsx）：

import React from 'react';

interface MyPracticeState {
  message: string;
};

class MyPractice extends React.Component<{}, MyPracticeState> {
  constructor(props: {}) {
    super(props);

    this.state = {
      message: "ボタンを押してください。"
    };
  }

  handleClick() {
    this.setState( {
      message: "ボタンが押されました！"
    });
  }

  render() {
    return (
      <div className="MyPractice">
        <p>{ this.state.message }</p>
        <button onClick={() => this.handleClick()}>ボタン</button>
      </div>
    );
  }
}

export default MyPractice;

冒頭近くに「MyPracticeState」という記述があるのがわかるでしょうか。これは、コンポーネントがとる状態（state）の形式を指定するためのものです。

コンポーネントのクラス内では、次のようにプログラミングされています。これにより、ボタンが押される前後で状態が切り替わる仕組みです。

・コンストラクタ（constructor）では、初期状態のメッセージを格納しておく

・イベントハンドラ（handleClick）で、ボタンが押された状態のメッセージに更新する

また、HTML部分がテンプレートとして機能している様子もわかるでしょう。stateの内容を中カッコで囲むようにして埋め込むことで、現在の状態に対応したメッセージを表示させています。

Reactのコンポーネントにpropsで引数を渡す

ここまでで作成した「MyPractice」コンポーネントのソースコードには、表示するメッセージが直接記述されています。これを引数として指定できるようにすれば、より汎用性の高いコンポーネントになるでしょう。

そのような場合には、Reactの「props」と呼ばれる仕組みが使われます。次のように、MyPractice.tsxを改造しましょう。

サンプルコード（MyPractice.tsx）：

import React from 'react';

interface MyPracticeProps {
  initialMessage: string;
  clickedMessage: string;
  buttonLabel: string;
};

interface MyPracticeState {
  message: string;
};

class MyPractice extends React.Component<MyPracticeProps, MyPracticeState> {
  constructor(props: MyPracticeProps) {
    super(props);

    this.state = {
      message: this.props.initialMessage
    };
  }

  handleClick() {
    this.setState( {
      message: this.props.clickedMessage
    });
  }

  render() {
    return (
      <div className="MyPractice">
        <p>{ this.state.message }</p>
        <button onClick={() => this.handleClick()}>{ this.props.buttonLabel }</button>
      </div>
    );
  }
}

export default MyPractice;

冒頭に「MyPracticeProps」という記述が追加されたのがわかるでしょうか。ここで、コンポーネントが保持できるプロパティ（props）の形式を指定しています。今回は、以下の3つを保持することとしました。

・初期状態のメッセージ（initialMessage）

・ボタンが押された状態のメッセージ（clickedMessage）

・ボタンのラベル（buttonLabel）

そのうえでコンストラクタとイベントハンドラ、およびHTMLタグのそれぞれで、受け取ったプロパティを用いるように変更しています。

コンポーネントを使う側であるApp.tsxの変更方法については、次のサンプルコードを確認してください。

サンプルコード（App.tsx）：

import React from 'react';
import './App.css';
import MyPractice from './MyPractice';

function App() {
  return (
    <div className="App">
      <h1>Reactの練習</h1>
      <MyPractice
        initialMessage="ボタンを押してください。"
        clickedMessage="ボタンが押されました！"
        buttonLabel="ボタン"
      />
      <MyPractice
        initialMessage="スイッチを押して！"
        clickedMessage="スイッチが押された！"
        buttonLabel="スイッチ"
      />
    </div>
  );
}

export default App;

このように、コンポーネントに渡すプロパティはHTMLタグの属性のように書けば指定できます。また、同じコンポーネントでもプロパティを変えながら、ページ内に複数埋め込むことが可能です。