Create React App で生成される React アプリを最小構成にする

heroImage

1. はじめに

Create React App は，Facebook 社が開発している React アプリの生成ツールです。Create React App を用いることで React アプリのテンプレートを手軽に生成することが出来るので，モックアップやテスト用の React アプリを生成する際に重宝しています。しかし，デフォルトで生成される React アプリは，不要な CSS ファイルや JavaScript ファイルが含まれています。そこで，本記事では React アプリが起動する最小構成にブラッシュアップする手順について記述します。

本記事内で行っている作業は，以下の環境下で実行したものです。以降，これらのツールはインストール済みの前提で記述していますが，インストール手順は割愛しているので，ご了承下さい。

2. テンプレートの生成

Create React App の README.md に従って，React アプリのテンプレートを任意のフォルダ内に生成します。tree コマンドを用いて確認すると，正常に React アプリのテンプレートが生成されていることが確認できます。

Terminal window
1
$ npx create-react-app my-app
2
$ ls
3
my-app
4
$ cd my-app
5
$ tree -L 2
6
.
7
├── README.md
8
├── node_modules
9
│   ├── @babel
10
│   ├── @bcoe
11
│   ├── @cnakazawa
12
│   ├── (割愛)
13
│   ├── yaml
14
│   ├── yargs
15
│   └── yargs-parser
16
├── package.json
17
├── public
18
│   ├── favicon.ico
19
│   ├── index.html
20
│   ├── logo192.png
21
│   ├── logo512.png
22
│   ├── manifest.json
23
│   └── robots.txt
24
├── src
25
│   ├── App.css
26
│   ├── App.js
27
│   ├── App.test.js
28
│   ├── index.css
29
│   ├── index.js
30
│   ├── logo.svg
31
│   ├── reportWebVitals.js
32
│   └── setupTests.js
33
└── yarn.lock

3. 不要なファイルの削除

第 2 章で生成したファイルの中から，不要なファイルを削除します。具体的には，nodemodules フォルダ内のモジュール*，_package.json*，public フォルダ内の index.html，src フォルダ内の App.js と index.js 以外は，不要なため削除します。

Terminal window
1
$ tree -L 2
2
├── README.md
3
├── node_modules # 必要
4
│   ├── @babel
5
│   ├── @bcoe
6
│   ├── @cnakazawa
7
│   ├── (割愛)
8
│   ├── yaml
9
│   ├── yargs
10
│   └── yargs-parser
11
├── package.json # 必要
12
├── public
13
│   ├── favicon.ico
14
│   ├── index.html # 必要
15
│   ├── logo192.png
16
│   ├── logo512.png
17
│   ├── manifest.json
18
│   └── robots.txt
19
├── src
20
│   ├── App.css
21
│   ├── App.js # 必要
22
│   ├── App.test.js
23
│   ├── index.css
24
│   ├── index.js # 必要
25
│   ├── logo.svg
26
│   ├── reportWebVitals.js
27
│   └── setupTests.js
28
└── yarn.lock
Terminal window
1
$ tree -L 2
2
.
3
├── node_modules
4
│   ├── @babel
5
│   ├── @bcoe
6
│   ├── @cnakazawa
7
│   ├── (割愛)
8
│   ├── yaml
9
│   ├── yargs
10
│   └── yargs-parser
11
├── package.json
12
├── public
13
│   └── index.html
14
└── src
15
　   ├── App.js
16
　   └── index.js

4. ファイル内の修正

第 3 章では，不要なファイルを削除しました。しかし，現状では削除したファイルを参照しているファイルが存在するため，コンパイルエラーが発生し起動することが出来ません。そこで，参照箇所が存在する App.js と index.js のソースコードを改変していきます。index.html にも参照箇所が存在していますが，改変しなくても起動することが出来るため割愛します。

1
import logo from './logo.svg';
2
import './App.css';
3


4
function App() {
5
  return (
6
    <div className="App">
7
      <header className="App-header">
8
        <img src={logo} className="App-logo" alt="logo" />
9
        <p>
10
          Edit <code>src/App.js</code> and save to reload.
11
        </p>
12
        <a
13
          className="App-link"
14
          href="https://reactjs.org"
15
          target="_blank"
16
          rel="noopener noreferrer"
17
        >
18
          Learn React
19
        </a>
20
      </header>
21
    </div>
22
  );
23
}
24


25
export default App;
26


27
⬇
28


29
function App() {
30
  return (
31
    <div className="App">
32
      Hello, world!
33
    </div>
34
  );
35
}
36


37
export default App;
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import './index.css';
4
import App from './App';
5
import reportWebVitals from './reportWebVitals';
6


7
ReactDOM.render(
8
  <React.StrictMode>
9
    <App />
10
  </React.StrictMode>,
11
  document.getElementById('root')
12
);
13


14
// If you want to start measuring performance in your app, pass a function
15
// to log results (for example: reportWebVitals(console.log))
16
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17
reportWebVitals();
18


19
⬇
20


21
import React from 'react';
22
import ReactDOM from 'react-dom';
23
import App from './App';
24


25
ReactDOM.render(
26
  <React.StrictMode>
27
    <App />
28
  </React.StrictMode>,
29
  document.getElementById('root')
30
);

5. 動作確認

ターミナル上で npm start を入力し，ブラウザ上に “Hello, world!” が表示されれば成功です。参照箇所が残っている場合は，コンパイル時にエラーが表示されます。その場合は，第 4 章の手順を再度実行してください。

React App

6. おわりに

ここまで，Create React App で生成した React アプリを最小構成にブラッシュアップする手順について記述してきました。サイズは，172.1MB から 171.5MB と 0.6MB しか削減することは出来ませんでしたが，public フォルダ内と src フォルダ内はスッキリすることが出来ました。