Reactで作るコンポーネントをTypescriptで実装するための準備

Reactは、ユーザインタフェースを作るためのJavaScriptライブラリです。Facebookの開発したフレームワークで、最近、特許問題で炎上していましたが無事解決されました。

そして、TypeScriptはWeb開発者であればすでに知っていると思います。静的型付けとオブジェクト指向を表現できるJavaScriptのスーパーセットです。

TypeScriptは、今やWebアプリケーション開発の標準になりつつあります。UIの実装フレームワークには、React以外にAngularがありますが、僕はシンプルなReactが良さげだと思っています。(実際はReactはViewのみなのでフレームワークというほどではありません。)

システム開発で画面コンポーネントを部品化し、それを再利用できるようになるまで理解していきたいなと思っています。

勉強する環境が必要なので、まずは、Reactで作るコンポーネントをTypescriptで実装する方法をまとめました。

参考にしたサイトはReactではなくTypescriptのハンドブックです。

Reactに加えてどんな内容をまとめたか

▶ Node.jsのnpmでReact+TypeScriptに必要なパッケージ管理
▶ webpackのローダーでReact+TypeScriptをJavaScriptへトランスパイル
▶ webpackでJavaScriptをバンドル

npmでプロジェクトフォルダを作る

適当なプロジェクトフォルダを作ります。

$ mkdir react-typescript
$ cd !$

これから、このフォルダの下にソースなど作っていきます。

npmで必要なパッケージをインストールする

Node.jsのnpmのパッケージ管理ツールでReact+TypeScriptの開発で必要なパッケージをインストールしていきます。

初期化

まずは、初期化してpackage.jsonを作成します。すべてデフォルトでよいので、「-y」を指定します。

$ npm init -y

トランスパイル・バンドル用のwebpackをインストール

まず、webpackをインストールします。
開発で必要なだけなので「–save-dev」です。「webpack-cli」はwebpackのコマンドラインインターフェースで、あとでコンパイルで使います。

$ npm install webpack webpack-cli --save-dev

React関連をインストール

次に、React関連のパッケージをインストールします。
「@types/*」はReactのライブラリの宣言ファイルです。ライブラリは実行時にも必要なので「–save」です。

$ npm install react react-dom @types/react @types/react-dom --save

TypeScript関連をインストール

最後にTypeScript関連のパッケージをインストールします。
「awesome-typescript-loader」はTypeScriptからJavaScriptへのトランスパイル用のローダーで、webpackから使います。
「source-map-loader」はTypeScriptのソースをデバッグできるかのように見せるためのソースマップを作るローダーで、これもwebpackから使います。どれも開発時に必要なだけなので「–save-dev」です。

$ npm install typescript awesome-typescript-loader source-map-loader --save-dev

webpackの設定 webpack.config.js を作成

webpackは、JavaScriptだけでなく、CSSや画像などのモジュールをバンドル(まとめる)ツールです。その他にもローダーと呼ばれる拡張ツールがたくさんあり、コンパイル時に様々な定形処理を追加できます。

今回は、React+TypeScriptなので、下記の2つを処理させます。

  1. ローダーでReact+TypeScriptをJavaScriptへトランスパイル
  2. 関連するJavaScriptをバンドル

「webpack.config.js」という名前で次のように設定します。説明はコメントを読んでください。コメントの[番号]は上記2つの設定箇所です。

module.exports = {
    // エントリーポイントで、このファイルでimportしているものを芋づる式にバンドルする。
    entry: "./src/index.tsx",
    // バンドル後のJavaScriptファイルの出力先。
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // デバッグ用のソースマップを出力する。
    devtool: "source-map",

    resolve: {
        // [1]TypeScript用の「.ts」と[2]React+TypeScript用の「.tsx」をimportの解決先に追加する。
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // [1][2] 「.tsx」にローダー「awesome-typescript-loader」を適用する。
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // 全「.js」にローダー「source-map-loader」を適用する。
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // 「react」と「react-dom」は、別のファイルとして読み込むのでバンドル対象から除外する。
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

TypeScriptの設定 tsconfig.json

webpackのローダー「awesome-typescript-loader」は「tsconfig.json」に従ってTypeScriptとReactをトランスパイルします。

設定は下記の通りです。

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

コードを書く

トランスパイルの設定ができたので、早速コードを書きます。

作成するのは次の3つです。

  1. ブラウザアクセス用のHTMLファイルで、バンドル後のbundle.jsを読み込む
  2. エントリポイントのTypeScriptファイルで、React形式で作成したコンポーネントを描画する
  3. React形式のコンポーネントのTypeScriptファイルで、htmlのタグを作る

1.HTMLファイル ./index.html

  • npmでインストールしたreactとreact-domのJavaScriptライブラリを読み込む。
  • トランスパイル、バンドル後のbundle.jsを読み込む。

これだけのシンプルなHTMLファイルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>

2.エントリーポイント ./src/index.ts

div#exampleに3.コンポーネントを描画するだけです。

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

3.コンポーネント ./src/components/Hello.tsx

シンプルなコンポーネントです。

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}

トランスパイル、バンドル

ビルド(トランスパイル、バンドル)は、npmでインストールした「webpack-cli」のCLIです。

$ npx webpack

ビルドできたら、ブラウザでindex.htmlへアクセスすれば「Hello from TypeScript and React!」が表示されるはずです。

ソース修正をすぐ反映したい(自動ビルド)場合は、下記のようにwatchで監視すればよいです。

$ npx webpack -w

まとめ

Reactで作るコンポーネントをTypescriptで実装する方法をまとめました。

これで、Reactでのコンポーネントの作り方を、どんどん検証していけるようになりました。