React + Typescript その１

TOPICS:

Posted By: K 2020年8月28日

はじめに

React+Typescriptでフロントエンドを作るとどんな感じなのかというところを試したので、後進のために手順とか気になったところなどをつらつらと書き残します。

Reactについて知りたい場合は、まず公式のチュートリアルを実際にやってみるのがよいでしょう。

チュートリアル：React の導入

TypeScriptについては、日本語ハンドブックなるものがあるので、これに目を通しておくとよいです。

Typescript 日本語ハンドブック

ReactのチュートリアルはJavascriptで書かれているので、ではTypeScriptでReactをやる場合ってどうなの？ というところのとっかかりになれば、というのがこの記事の目的です。

前提条件

Node.jsはあらかじめインストールされているものとします。

ちなみに、Macで試しています。
Node.jsのバージョンは以下のとおりです。

Node.js バージョン
node v12.16.2
npm / npx 6.14.4

Reactアプリ生成

まずReactの作業フォルダを作ってその中に移動します。

次にcreate-react-appコマンドでReactアプリを生成します。"sample"はアプリ名です。
--typescriptオプションでTypescriptの環境も用意されます。

$ mkdir React
$ cd React
$ npx create-react-app sample --template typescript

しばらく待つとアプリの雛形ができます。

アプリ名"sample"のフォルダができているので、そちらに移動してnpm startコマンドでサーバが起動します。

$ cd sample
$ npm start

http://localhost:3000 でReactアプリにアクセスできます。
Reactのロゴがくるくる回る画面が表示されるはずです。

React初期画面

とても簡単ですが、これで環境の準備は完了です。
以降はsrcフォルダ内のソースコードをいじってアプリを作っていきます。

Hello, world!

次に、Hello, world! と表示するだけのコンポーネントを作成します。
Reactでは"コンポーネント"と呼ばれるパーツを作って、コンポーネントを組み合わせてアプリを作ります。

srcフォルダにHelloworld.tsxを新規作成します。
内容は以下のとおりです。Helloworldコンポーネントを定義して外部で使えるようにexportしています。

Helloworld.tsx

import React from 'react';

function Helloworld() {
  return (
    <div className="Helloworld">
      Hello, world!
    </div>
  );
}

export default Helloworld;

returnしているのは JSX というJavascript拡張です。

HTMLのようですがちょっと違います。
例えば属性名がclassNameとなっています。classキーワードとの重複を避けるためでしょう。ブラウザでソースコードを表示して出力されたHTMLを確認するとclassになっていることがわかります。

次にindex.tsxを修正します。変更は以下の２点です。

  • import Helloworld from './Helloworld';を追加する
  • <App />を<Helloworld />に置き換える

ちなみにimport App from './App';は使わなくなったので削除してもかまいません。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Helloworld from './Helloworld';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Helloworld />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ここでブラウザを見てみると、"Hello, world!"とだけ表示されています。
ソースコードが更新されると自動的にブラウザもリロードされます（たまにされないこともあるみたいですが…）。

こんな風にコンポーネントを作って、組み合わせていくことでアプリを作ります。

コンポーネント

上のHelloworldコンポーネントは、以下のようにクラスとして書くこともできます。

Helloworld.tsx

import React from 'react';

class Helloworld extends React.Component {
  render() {
    return (
      <div className="Helloworld">
        Hello, world!
      </div>
    );
  }
}

export default Helloworld;

…というよりもこちらが本来の形でしょう。

先のHelloworld.tsxはこれを省略したもの、renderメソッドだけのコンポーネントならば、クラスではなくてJSXを返す関数として書くこともできる、ということです。

次回につづく

今回はここまでです。

次回はもう少しアプリっぽいものを作りながらReactとTypeScriptについてちびちびと説明していきます。