『Webpack + React + TypeScript』の導入方法・初期設定

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。本記事では、『Webpack + React + TypeScriptの導入方法・初期設定』について解説しています。

同じ構成でTypeScriptではなく「Babel」を用いて環境構築をおこなう場合は、以下の過去記事を参考にしてください。

『Webpack + Babel + React』の導入・初期設定

こんにちは、okutani(@okutani_t)です。本記事では「Webpack4 + Babel7 ...

2019-07-11 02:40

また、本記事ではnpmではなくyarnを使って導入しています。MacではHomebrewを使って以下のコマンドでyarnが導入できます（参考MacにHomebrewを導入する方法＆使い方まとめ | vdeep）。

$ brew install yarn

ちなみに、補足ですが「create-react-app」コマンドを使うと簡単に「React + TypeScript」の環境を構築できます。

$ npx create-react-app my-react-ts-app --typescript

「$ yarn run start」で確認できます。お手軽に「React + TypeScript」を試したい場合は上記のコマンドを利用してみてください。ただし、本記事では「create-react-app」は利用せず、すべて手動で導入しています。

今回の記事で利用したサンプルコードは以下のリポジトリに公開しています。参考にしてください。

LINKokutani-t/webpack-react-typescript-sample

それでは、実際に『Webpack + React + TypeScript』の導入方法からみていきましょう。

参考最新版TypeScript+webpack 4の環境構築まとめ（React, Vue.js, Three.jsのサンプル付き） – ICS MEDIA

スポンサーリンク

前準備

前準備として、てきとうにプロジェクトを作成。

$ mkdir myapp
$ cd myapp

以下のコマンドを実行してpackage.jsonを作成します。

$ yarn init -y

これで前準備が整いました。

Webpackの導入

以下のコマンドでWebpackを導入します。

$ yarn add webpack webpack-cli --dev

これでWebpackが導入されました。「--dev」をつけることで、開発時にのみ利用するようにします。

TypeScriptの導入

以下のコマンドでTypeScriptを導入します。

$ yarn add typescript ts-loader --dev

「ts-loader」を導入することで、WebpackでTypeScriptを扱えるようになります。

Reactの追加

以下のコマンドでReactを導入。

$ yarn add react react-dom @types/react @types/react-dom

「@types/react」「@types/react-dom」はそれぞれTypeScriptでReactで利用するさいの型定義ファイルです。「TypeScriptでReactを利用するさいに必要」、ぐらいに捉えてください。

webpack-dev-serverの導入

開発用に「webpack-dev-server」を導入します。

$ yarn add webpack-dev-server --dev

これで開発用サーバーが利用できて便利です。のちほど利用します。

.gitignoreの追加

Gitでプロジェクトを管理している場合は、以下のコマンドで.gitignoreを設置しておきましょう。

$ echo node_modules > .gitignore

これで、Git管理下からnode_modulesが外れました。

package.jsonの編集

package.jsonの編集をおこない、ビルドや開発サーバーの起動を簡易的におこなえるように設定します。

まずは、作成されたpackage.jsonを確認してみます。

{
  "name": "webpack-react-typescript-sample",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:okutani-t/webpack-react-typescript-sample.git",
  "author": "okutani-t",
  "license": "MIT",
  "devDependencies": {
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

上記に「scripts」を追加して、ビルドや実行を簡易的におこなえるようにします。

{
  "name": "webpack-react-typescript-sample",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:okutani-t/webpack-react-typescript-sample.git",
  "author": "okutani-t",
  "license": "MIT",
  "devDependencies": {
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  },
  "scripts": { // ここから以下追加
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "webpack --mode production"
  }
}

“scripts”行の上にカンマ（,）を忘れずに付けてください。これで、以下のコマンドで開発用サーバー、ビルドがそれぞれおこなえます。

// 開発サーバー立ち上げ
$ yarn run start
// ビルド
$ yarn run build

上記コマンドはのちほど利用します。

次にtsconfig.jsonを設置します。

tsconfig.jsonの作成

TypeScriptの設定ファイルである「tsconfig.json」を以下の内容で作成します。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2019",
      "dom"
    ]
  }
}

かんたんに解説します。

次にwebpack.config.jsを作成していきます。

webpack.config.jsの作成

「webpack.config.js」を以下の内容で作成します。

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  devServer: {
    contentBase: "dist",
    open: true
  }
}

設定内容は以下のとおりです。

これで一通りのツールを使う準備が整いました。サンプルコードを用意して実行してみましょう。

サンプルファイルの設置

以下のコマンドで確認用のjsファイルを設置してみます。

$ mkdir src
$ touch src/index.tsx
$ touch src/Hello.tsx

「src/index.tsx」を以下のとおり記述してみました。

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

class App extends React.Component {
  render() {
    return (
      <>
        <h1>Hello <Hello name='React' /> + <Hello name='TypeScript' />!</h1>
      </>
    )
  }
}

ReactDOM.render(<App/>, document.querySelector('#app'))

次に「src/Hello.tsx」を以下のとおり実装。

import React from 'react'

interface HelloProps {
  name: string,
}

interface State {}

class Hello extends React.Component<HelloProps, State> {
  render() {
    return (
      <span>
        {this.props.name}
      </span>
    )
  }
}

export default Hello

次に、テンプレートとなる「dist/index.html」を設置。

$ mkdir dist
$ touch dist/index.html

以下のとおり記述しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Webpack React TypeScript Sample</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="main.js"></script>
  </body>
</html>

これで確認用のサンプルファイルが設置できました。

確認

以下のコマンドを実行して「webpack-dev-server」を実行します。

$ yarn run start

「http://localhost:8080」にアクセスします（上記コマンドを実行すると自動でブラウザが開きます）。

特にエラーなく表示できました。

ビルドしたい場合は「$ yarn run build」でdistにmain.jsが出力されます。確認してみてください。

まとめ

本記事では「Webpack + React + TypeScriptの導入」について解説しました。

TypeScriptを利用することでかんたんに型を定義することができ、エディターでも補完が利くようになって便利です。

これからReactとTypeScriptを活用していきたい方の参考になれば幸いです。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

利用するツールが多くてすこし理解しづらいですが、一つひとつ手順をゆっくり追っていくといいですね。これからTypeScriptと仲良くしていこうと思います

Web開発のお仕事を募集しています