前回記事「create-react-appでReactの導入とJSXの記法に触れてみる」では、create-react-appのコマンドを使って、Reactの開発環境を構築する方法をまとめていましたが、今回はwebpackを使ってTypeScriptやBabelとReactを併用しながら開発していくことができる環境を構築してみたいと思います。こうすることで、SassやPugなどのコーディングも同時に進められることができ、フロントエンドの開発環境が一括で揃えることができます。   また、今回はReactのコンポーネントファイルである、jsxやそのTypeScript版のtsxも合わせて扱えるような設定もまとめてみたいと思います。今回の開発環境のベースですが、下記の参考記事にある内容ですでに環境が整っている前提で進めています。TypeScriptやESlintの設定などは過去記事「webpackでESLintが使える環境を構築してみる」を参考にしていただければと思います。 （参考記事） ・webpackでESLintが使える環境を構築してみる ・webpackでTypeScriptの自動コンパイル環境を作成してみる ・webpackでBabelを使ったJavaScriptトランスパイルの環境構築  

webpackの環境でReactを使えるようにする

では早速webpackの環境でReactを使えるようにしていきます。まずは必要なモジュールをインストールしていきます。実際にはESlintやBabelなどのモジュールも必要になりますが、今回はそれらの環境ができている前提で進めていきますので割愛させていただきます。

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

  モジュールがインストールされると、package.jsonにも追加されているのが確認できます。ここから各種設定に進んでいきます。 【package.json】※一部抜粋

{
  .......
  "dependencies": {
    "@types/react": "^17.0.29",
    "@types/react-dom": "^17.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  .......
}

  今回は下記のような構成を想定して進めていきます。一応、TypeScriptと通常のJavaScript＋Babelの両方に対応できるような構成になっています。あとはESLintの設定ファイルなども含まれます。これまで同様、distディレクトリにはバンドル後のファイルや静的ファイルが格納され、srcディレクトリ配下にはコーディング用のソースファイルが含まれます。今回はReactでコンポーネントファイルを使ってみるので、jsxファイルなども合わせて用意しています。

/PROJECT_ROOT
  ┣ node_modules
  ┣ dist
    ┣ main.js
    ┗ index.html
  ┣ src
    ┣ es
      ┣ main.jsx
      ┗ ExampleComponent.jsx
    ┗ ts
      ┣ main.tsx
      ┗ ExampleComponent.tsx
  ┣ package.json
  ┣ package-lock.json
  ┣ .eslintrc.js
  ┣ tsconfig.eslint.json
  ┣ tsconfig.json
  ┗ webpack.config.js

  最初にwebpackの設定ファイルである「webpack.config.js」を編集していきます。すでに、TypeScriptが使える環境でESLintも機能しているところから進めていきます。（詳しくは過去記事「webpackでESLintが使える環境を構築してみる」をご参照ください）エントリーポイントですが、今回はReactを使うので拡張子が「.jsx」もしくは「.tsx」のファイルを指定しておきます。あとは各ローダーに対応させるファイルの拡張子も、これらReactのコンポーネントファイルであるjsxとtsxに対応させるように指定します。 【webpack.config.js】

const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/ts/main.tsx',
  // entry: './src/es/main.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader'
      },
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.tsx', '.jsx', '.json' ]
  },
  plugins: [
    new ESLintPlugin({
      extensions: [ '.ts', '.js', '.tsx', '.jsx' ],
      exclude: 'node_modules'
    }),
  ]
}

  また、JavaScriptのトランスパイルでBabelを通した時にコンパイルエラーが発生するケースもあります。そのような時には、下記のようにBabelのReact用のプリセットを追加で指定することで対応します。下記コマンドでまずはモジュールをインストールします。

$ npm install --save-dev @babel/preset-react

  その後、webpack.config.js内にて先ほどインストールしたプリセットを追加で指定します。 【webpack.config.js】※一部抜粋

{
  ......
  module: {
    ......
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react'
              ]
            }
          }
        ]
      },
      ......
    ]
  }
}

  続いて、TypeScriptの設定ファイルを編集していきます。前回のものとほとんど同じですが、「compilerOptions」にて「jsx」の設定に「react」と指定しておきます。こうすることで拡張子が.jsxと.tsxのファイルに対応されるようになります。 【tsconfig.json】

{
  "include": [
    "src/ts/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "sourceMap": true,
    "removeComments": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es2020"
    ],
    "experimentalDecorators": true,
    "esModuleInterop": true ,
    "moduleResolution": "node"
  }
}

  続いてESlintの設定ファイルを見ていきます。ここでもそんなに変更する箇所はないですが、「parserOptions」で「ecmaFeatures」の設定に「jsx」のオプションをtureに設定しておく必要があります。 【.eslintrc.js】※一部抜粋

{
  ......
  parserOptions: {
    ecmaFeatures: {
      'jsx': true,
    },
    'sourceType': 'module',
    'ecmaVersion': 2015
  },
  ......
}

  一旦これまでの作業で、JavaScriptでのReact（.jsxファイル）を使うことができるようになりました。実際にHTMLを下記の通り用意してコンポーネントを表示させてみたいと思います。 【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <title>example</title>
  </head>
  <body>
    <noscript>JavaScriptを有効にしてください</noscript>
    <div id="app"></div>
  </body>
</html>

  まずはエントリーポイントになるスクリプトファイルです。「react」と「react-dom」をインポートして、コンポーネントファイルも読み込んでいきます。最後にReactDOMのrender関数にて、指定した要素にマウントさせていきます。 【main.jsx】

import React from 'react';
import ReactDOM from 'react-dom';
import { ExampleComponent } from './ExampleComponent';

const App = () => {
  return (
    <>
      <ExampleComponent />
    </>
  )
};
ReactDOM.render( <App />, document.getElementById('app') );

  コンポーネント側でもこのように処理を用意しておきます。今回はとりあえずサンプルのテキストをHTMLとして出力する例としています。 【ExampleComponent.jsx】

import React from 'react';

export const ExampleComponent = () => {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  );
}

  これでwebpackをビルドしていくとHTMLにはこのように出力されているのが確認できます。webpack環境でReactが使えるようになりました。 【index.html】※一部抜粋

  ......
  <body>
    <noscript>JavaScriptを有効にしてください</noscript>
    <div id="app">
      <h1>Hello world!</h1>
    </div>
  </body>
</html>

  ただ、TypeScriptを使ってReactのコードを書いていく場合にはもう少し準備が必要です。次からその流れを見ていきたいと思います。  

TypeScriptで使うReactと.tsxファイル

Reactではjsx記法というDOMを扱う時に独特な書き方をします、そしてReactのコンポーネントファイルは「.jsx」という拡張子をつけることで明示させるというのが一般的です。そこでTypeScriptを使う場合には、この拡張子が「.tsx」に変えられます。これでTypeScriptを使ってReactのコードを書いていくことができます。ここからはその設定を先ほどの作業から追加で行なっていきます。まずはESlintの設定ファイルにて、下記のように「parserOptions」の中の「project」オプションを追加し、その値にTypeScript用のESlint設定ファイルの指定を加えていきます。ここでは対象のファイルのパスをそのまま記述します。 【.eslintrc.js】※一部抜粋

{
  ......
  parserOptions: {
    ecmaFeatures: {
      'jsx': true,
    },
    'sourceType': 'module',
    'ecmaVersion': 2015,
    project: [
      './tsconfig.eslint.json'
    ]
  },
  ......
}

  そして「tsconfig.eslint.json」という名前でファイルを作成し（過去記事「webpackでESLintが使える環境を構築してみる」をご参考ください）対象ファイルの中にReact用のコンポーネントファイルの拡張子を追加していきます。本来はTYpeScript用の「.tsx」と「.ts」だけでいいのですが、通常のJavaScriptで警告が出る場合には「.jsx」と「.js」も追加しておきます。 【tsconfig.eslint.json】

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx",
    ".eslintrc.js"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

  これで、TypeScriptでReactを使う準備が整いました。実際にエントリーポイントにReactの処理を書いていきます。下記ではReactでTypeScriptを扱うためclassベースで記述しています。これについて詳しくはまた別記事にてまとめていきたいと思います。あとは同じように必要なモジュールのインポートとコンポーネントファイルを呼び出している形になります。 【main.tsx】

import React from 'react';
import ReactDOM from 'react-dom';
import { ExampleComponent } from './ExampleComponent';

class App extends React.Component {
  render() {
    return (
      <>
        <ExampleComponent />
      </>
    )
  }
}
ReactDOM.render( <App />, document.getElementById('app') );

  呼び出されるコンポーネント側では、関数コンポーネント（React.FC）としてエクスポートされるように作成していきます。 【ExampleComponent.tsx】

import React from 'react';

const ExampleComponent: React.FC = () => {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  )
}

export default ExampleComponent;

  先ほどと同じようにHTMLを用意して実際にwebpackでビルドしてみると、きちんとReactで作成した処理がHTMLの指定要素にマウントされて描画されているのが確認できました。 【index.html】※一部抜粋

  ......
  <body>
    <noscript>JavaScriptを有効にしてください</noscript>
    <div id="app">
      <h1>Hello world!</h1>
    </div>
  </body>
</html>

 

---

  今回はwebpackを使って、TypeScriptやBabelと合わせてReactを使う環境構築についてまとめてみました。ReactはVue.jsと比べてTypeScriptとの相性がいいとされています。SPAなどのウェブアプリ以外にも静的コーディングのための開発環境として、SassやPugなども使えるようにするとなお便利になりますね。   （合わせて過去記事もどうぞ） ・webpackでESLintが使える環境を構築してみる ・webpackでStylelintが使える環境を構築してみる ・webpackで画像圧縮を自動化する環境を構築する ・webpackでBrowserSyncを使った自動リロード機能を作成してみる ・webpackでPugのコンパイル環境を作成してみる ・webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う ・webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする