Create React Appを使わずにReactアプリの環境構築を行う方法まとめ

Create React App で React の環境構築を行う方法という記事を書いたので、今回は Create React App を使わずに一から環境構築を行う方法についてまとめました。

この記事は以下の構成になっています。

必要なパッケージ・ツール
完成系のディレクトリとファイルの構造
環境構築の流れ

必要なパッケージ・ツール

必要なパッケージ・ツールは以下の通り。

Node.js
npm か yarn
react
react-dom
webpack
webpack-cli
webpack-dev-server
babel-loader
@babel/core
@babel/preset-env
@babel/preset-react
html-webpack-plugin
jest
@testing-library/react
@testing-library/jest-dom

完成形のディレクトリとファイルの構造

完成系のディレクトリとファイルの構造は以下のようになる。

my-react-app/
├── dist/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── index.js
├── .babelrc
├── package.json
├── package-lock.json
└── webpack.config.js

環境構築の流れ

Create React App なしで行う React の環境構築は以下の流れ。

React をインストール
Webpack をインストール
Babel をインストール
html-webpack-plugin をインストール
Jest と Testing Library をインストール
Webpack の設定
Babel の設定
index.html の作成
エントリーポイントの作成
ルートコンポーネントの作成
npm scripts の作成
開発サーバーの起動

最終的には Hello World を表示するアプリを作る。

1. React をインストール

React を使うためには React のコアライブラリであるreactと、React をブラウザの DOM にレンダリングするためのライブラリであるreact-domをインストールする。

npm i react react-dom

2. Webpack をインストール

JavaScript のモジュールバンドラーである Webpack をインストールする。

モジュールバンドラーは簡単に言えば、複数の JavaScript を 1 つにまとめる（バンドル）ツール。

Webpack は JavaScript のバンドル以外にも、設定によって CSS や画像のバンドル、開発サーバーの起動、ソースマップの生成なども行ってくれる。

Webpack をインストールするには、Webpack 本体であるwebpack、Webpack をコマンドラインから操作できるようにするためのwebpack-cli、開発サーバーであるwebpack-dev-serverのパッケージをインストールする。

npm i -D webpack webpack-cli webpack-dev-server

Webpack は開発環境で使うので-Dを指定する。

3. Babel をインストール

JavaScript の新しい記法を古いブラウザでも対応させるために古い記法に変換するツールである Babel をインストールする。

React で Babel を使うには Webpack で Babel を使うためのbabel-loader、Babel のコアライブラリである@babel/core、最新の JavaScript をサポートするための@babel/preset-env、JSX を JavaScript に変換するための@babel/preset-reactをインストールする必要がある。

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

4. html-webpack-plugin をインストール

html-webpack-plugin はバンドルされた JavaScript ファイルを自動で HTML に挿入してくれる Webpack 用のプラグイン。

npm i -D html-webpack-plugin

5. Jest と Testing Library をインストール

React でテストを行う際は JavaScript のテスティングフレームワークである Jest と、コンポーネントのテストに使う Testing Library を使う。

Jest と Testing Library を使うにはjest、@testing-library/react、Jest と組み合わせて使うテストユーティリティである@testing-library/jest-domのパッケージが必要。

npm i -D jest @testing-library/react @testing-library/jest-dom

6. Webpack の設定

React アプリの環境構築は Webpack の設定がメインとなる。

Webpack の設定はプロジェクトのルートにwebpack.config.jsを作って行う。

設定は以下のようにする。

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js', // エントリーポイント
  output: {
    path: path.resolve(__dirname, 'dist'), // 出力先
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 拡張子が.jsまたは.jsxのファイルを対象にする
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // Babelでトランスパイル
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 拡張子省略時に解決する拡張子
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTMLテンプレート
    }),
  ],
  devServer: {
    static: './dist', // 開発サーバーのルート
    hot: true, // ホットリローディング
    open: true, // サーバーを起動と同時にブラウザを開く
  },
}

ここでは以下の設定を行なっている。

エントリーポイントの設定
出力先の設定
モジュールの設定
拡張子の解決
追加のプラグイン
開発サーバーの設定

エントリーポイントの設定

以下の部分で、エントリーポイントを./src/index.jsとしている。

エントリーポイントとは、Webpack が最初に処理するファイルで、アプリの起点となり、依存するファイルを全てバンドルする。

entry: './src/index.js',

出力先の設定

以下の部分で、バンドルした JavaScript を出力するディレクトリをdistとし、出力するファイルの名前をbundle.jsとしている。

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
},

モジュールの設定

以下の部分で、拡張子が.jsまたは.jsxのファイルを Babel でトランスパイルするように設定している。

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },
  ],
},

moduleはrules配列の中で、特定のファイルタイプに対する処理を定義する項目。

testで対象のファイルを指定し、excludeで処理の対象から外すようにしている。

useではどのようにファイルを処理するかを指定し、ここではbabel-loaderを使うことで、Babel でトランスパイルを行う。

Babel の他にも CSS や画像などのバンドルを設定したい場合はrulesの要素を増やして記述する。

拡張子の解決

以下の部分で、importを使う際に拡張子を省略できるように設定している。

resolve: {
  extensions: ['.js', '.jsx'],
},

ここでは.jsと.jsxが対象。

追加のプラグイン

以下の部分で、html-webpack-pluginを使用して、バンドルされた JavaScript ファイルを HTML に挿入するように設定している。

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html', // HTMLテンプレート
  }),
],

開発サーバーの設定

以下の部分で、開発サーバーの設定をしている。

devServer: {
  static: './dist',
  hot: true,
  open: true
},

staticはサーバーのルートディレクトリを指定する。ここではバンドルされた結果である./distを指定している。

hotはtrueとすることでホットリローディングを有効にしている。ホットリローディングによってファイルを変更したときに自動で変更が反映されるようにする。

openはtrueとすることでサーバー起動時に自動でブラウザを開くようにしている。

7. Babel の設定

Babel の設定はプロジェクトのルートに.babelrcを作成して行う。.babelrcは JSON 形式で記述する。

.babelrc

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

presetsは複数のプラグインをまとめたもので、配列の形で指定し、後に書いたものが先に読み込まれる。

ここでは@babel/preset-react→@babel/preset-envの順で読み込まれる。

8. index.html の作成

HTML ファイルを作成する。React では HTML の内容を JavaScript によって更新するので、HTML ファイルは 1 つだけでいい。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

bodyの中の<div id="root"></div>を React 側と紐づけて、この中にコンポーネントが表示されるようにする。

9. エントリーポイントの作成

webpack.config.jsで設定した通り、エントリーポイントを./src/index.jsとする。

index.jsは以下のようにする。

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

react-domからReactDOMをインポートして、ルートコンポーネントである App コンポーネントをブラウザの DOM にレンダリングするようにしている。ここではid属性がrootの要素にレンダリングする。

10. ルートコンポーネントの作成

Create React App 同様 App コンポーネントをルートコンポーネントとして作成する。

App.jsxは以下のようにする。

App.jsx

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  )
}

export default App

App コンポーネントの中身はHello, World!と表示するだけ。実際にアプリを作っていく場合は、この App コンポーネントの中で他のコンポーネントを読み込んでいく。

11. npm scripts の作成

package.jsonのscriptsで開発サーバーを起動するコマンドと、本番環境用のビルドを行うコマンドと、テストを行うコマンドを登録する。

package.json

{
  // 省略
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
  // 省略
}

12. 開発サーバーを起動

npm-scripts で設定したコマンドを使って、開発環境のローカルサーバーを起動する。

npm start

自動でブラウザが開かれ、Hello Worldと表示されていれば環境構築が成功。