vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

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

   

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

LINEで送る
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"
    ]
  }
}

かんたんに解説します。

sourceMap trueにすることでsourceMap(*.js.map)を出力。Chrome等でデバッグできるようになる
target 出力するJS(ECMAScript)のバーションを指定。今回はes5を指定
module es2015(ES6)を指定することでES6のモジュール管理機能を利用
jsx reactを指定してJSXの書式を利用
moduleResolution モジュール解決方法を指定。今回はnodeを指定
allowSyntheticDefaultImports trueで外部ライブラリをimport foo from 'foo'として読み込めるようにする
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
  }
}

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

mode 「development」指定でソースマップを出力、「production」指定でminify出力(※実行時に変更可)
entry トランスパイルをおこなう対象ファイル
output トランスパイル後のファイルの名前、ディレクトリの指定
module/rules/test ローダーが利用するファイルの拡張子を指定(正規表現)
module/rules/use ローダーの指定。今回はts-loaderを指定することでTypeScriptを利用できるようにする
resolve/extensions 外部ファイルをimportするさい、指定した拡張子を省略できるようになる
devServer 開発用Webサーバーの起点ディレクトリ、起動時に自動でブラウザを開く、など設定

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

サンプルファイルの設置

以下のコマンドで確認用の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を活用していきたい方の参考になれば幸いです。

LINEで送る
Pocket

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

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

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。

Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - JavaScript, React

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。