Babel+WebpackでReact(TypeScript)の開発環境を構築しよう！

「Reactでオレオレ開発環境を作りたい」
「create-react-appを使わずにイチから環境構築をしたい」
「BabelやWebpackの設定方法を知りたい」

Reactの開発環境構築ツールといえばCRA（create-react-app）が有名ですが、イチから環境構築したいという方もいますよね。

この記事では、BabelとWebpackでReactの開発環境を構築した方法を紹介していきます。

Reactの環境構築に必要なBabelとWebpackとは

今回の環境構築では、BabelとWebpackというツールを使います。

両者ともに、現在のフロントエンド開発の環境構築のツールとして必修項目になりつつあります。

BabelはJavaScript用のコンパイラ

BabelはJavaScript用のコンパイラです。

JavaScriptの標準は毎年バージョンアップされており、公開年に応じてECMAScript（以下、ES）2015といった名称で呼ばれます。

近年ですとES2015とそれ以前で、使えるメソッドや言語仕様が大きく変わりました。

しかし、ブラウザによっては最新のJavaScriptに対応していないのです。

開発者としてはES2015以降の記述をしたいものの、ブラウザの対応を気にする必要がありました。

そこで、Babelを使ってコンパイルすることで、例えばES2015で書いたJavaScriptを、それ以前の記述に変換することができます。

いわゆる、後方互換が可能ということですね。

Webpackはバンドラー

一方、Webpackはバンドラーと呼ばれます。

バンドラーの役割は、複数のファイルを1つにまとめるというものです。

Webpackは、JavaScriptだけでなく、CSSや画像ファイルなどもまとめることができます。

複数のファイルがバンドルされることで、ファイルサイズが小さくなり、ページ表示の高速化につながります。

今回使うBabelとWebpackのバージョン

この記事では、Babel7とWebpack4のバージョンで実装しています。

また、前提としてNode.jsとnpmを入れておく必要があります。（この記事では導入方法は割愛します）

僕が設定した時のバージョンは以下です。

$ node -v
v12.16.1
$ npm -v
6.13.4

React環境構築①｜Babelを設定しよう

まずはBabelをインストールしましょう。

$ npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

Babelをインストールしただけでは意味がないので、Babelの設定ファイルとなる.babelrcを作成しましょう。

$ touch .babelrc

.babelrcはJSON形式で記述できます。

presetsというkeyに対して、設定値を入れます。

.babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"
  ]
}

presetsは後ろから順に適用されます。

この記述形式であればTypeScript→React→JavaScriptの順に変換されます。

これでBabelの導入と設定は完了です。

React環境構築②｜Webpackを設定しよう

次にWebpackの導入と設定をします。

まずはWebpackのパッケージ本体と、CLI用パッケージをインストールしましょう。

$ npm i -D webpack webpack-cli babel-loader ts-loader

Babelと同様に、Webpack用の設定ファイルを作成します。

$ touch webpack.config.js

それではwebpack.config.jsを記述してみましょう！

webpack.config.js

module.exports = {
    // 本番にデプロイするときはモード値を production に設定
    // development に設定すると元のファイルとの関連性がわかるソースマップと一緒に出力される
    mode: 'development',

    // 環境によってはsrc/index.ts
    entry: 'src/index.tsx',

    module: {
        rules: [
            {
                test: /\.tsx$/,    // 環境によっては/\.ts$/
                use: 'ts-loader', // TypeScript用のloader
            },
        ],
    },
    resolve: {
        // React × TypeScriptで使う可能性のある拡張子を全て記述
        extensions: [
            '.ts', '.js', '.tsx', '.jsx'
        ],
    },
};

React環境構築③｜TypeScriptとReactを入れよう

BabelとWebpackの設定が完了したので、TypeScritptとReactのパッケージを導入していきましょう。

$ npm i -S react react-dom
$ npm i -D typescript @types/react @types/react-dom

それでは、Reactのファイルを格納するsrcディレクトリと、エントリポイントになるindex.tsを作成しましょう。

$ mkdir src
$ touch src/index.ts

index.tsを編集していきます。

src/index.tsx

import React from 'react';
import { render } from 'react-dom'

render(
  <h1>React x TypeScript!</h1>,
  document.getElementById('root') 
)

ここまで来たらあと一歩！

次回の記事は実際にTypeScriptファイルをコンパイル＆バンドルして、Reactアプリをローカル環境で実行してみます。

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。