create-react-appを使わないでReact環境構築してみる。

## create-react-appを使わないワケ
2021年12月初旬に、「create-react-app」を使ってプロジェクトを作成し、eslintのルールを変更しました。

```
npx eslint --init
```

で、「.eslintrc.js」を作成しルールを書き、VSCodeで指摘されることを確認しました。

ある程度コードを書いて

```
npm start
```

としたところエラーが発生しました。

原因は、「create-react-app」で使われている「eslint」がV7系で、「eslint --init」で追加されるプラグインなどが「eslint V8系」なためでした。


2021年12月14日に、webpack5、eslint8が採用した「create-react-app　V5」がリリースされ問題は解決しました。

「create-react-app」は、

- コマンド一発で環境構築できる
- テンプレートが豊富
- eslint、webpackなど全て設定済み

なのは良いのですが、少し設定を変えようと思うと今回のようにエラーが起こります。

## ゼロからReact開発環境を作成してみる

### npm init -y
プロジェクト用のディレクトリを作成します。作成したディレクトリに移動し

```
npm init -y
```

を実行します。対話形式で「package.json」を作成したい場合には「-y」なしで実行します。

### webpack
webpackは、JavaScript(TypeScript)、css(scss)、画像などをすべてJavaScriptとして扱い、ひつつのファイルにまとめてくれます。

インストールするものは、

- webpack 本体
- webpack-cli コマンドライン用
- webpack-dev-server 開発用webサーバー

です。

```
npm install -D webpack webpack-cli webpack-dev-server
```

でインストールを行います。

動作確認用に「lodash」をインストールします。

```
npm install lodash
```

プロジェクトフォルダ内に「src」、「dist」フォルダを作成し、

```javascript:src/index.js
  import _ from 'lodash';

  function component() {
    const element = document.createElement('div');
    // Lodash, now imported by this script
    element.innerHTML = _.join(['webpack', '動いてるお〜'], ' ');
    return element;
  }

  document.body.appendChild(component());
```

トップページを作成します。

```HTML:dist/indexhtml
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>Getting Started</title>
    </head>
    <body>
      <script src="main.js"></script>
    </body>
  </html>
```

動作確認します。

```
npx webpack server --open --static-directory dist --mode=development
```

既定のブラウザが起動し、index.htmlが表示されます。ブラウザのdevToolsで「main.js」を確認します。


webpackの設定ファイルを作成します。

```
npx webpack-cli init
```

対話形式で質問されますので、カーソルキーで選択してください。
これで、プロジェクトディレクトリ内に「webpack.config.js」が作成されます。

以下は、私の選択です。

 * どのタイプのJSを使いますか？　--> TypeScript(none, ES6)
 * devServerを使いますか？ --> Yes
 * バンドル用のHTMLファイルを作成しますか？ --> Yes
 * PWAサポートが必要ですか？ --> No
 * CSSは、どのタイプを使いますか？ --> SASS(none, CSS only, LESS, Stylus)
 * SASSと一緒にCSSスタイルも使いますか？　--> Yes
 * PostCSS(Node.js製のCSSを作るためのフレームワーク)を使いますか？ --> No
 * ファイル毎にCSSを別にしますか？ --> Yes
 * 設定ファイルをフォーマットするのにPrettierをインストールしますか？　--> Yes
 * パッケージマネージャーを選択してください。 --> npm
 * package.jsonがすでにありますが上書きしても良いですか？ --> No
 * README.mdがすでにありますが上書きしても良いですか？ --> No

選択が終わると、必要なパッケージがインストールされます。

本家サイトの推奨により、

- webpack.common.js 共用
- webpack.dev.js 開発用
- webpack.prod.js 製品版用

に分割します。

この時点で、package.jsonにスクリプトを登録します。

### babel

Babel.jsは、ES2015以降のJavaScriptが解釈できない古いブラウザ向けに、ES2015以前のJavaScriptに変換してくれる優れものです。

古いブラウザを切り捨てる場合は不要です。

[Babel本家セットアップ](https://babeljs.io/setup)で、webpackを選択すると、インストール方法、設定が表示されます。

### React
Reactのインストールは、

```
npm install react react-dom
```
で完了です。

### TypeScript
TypeScriptのインストールは、

```
npm install -D typescript
```

で完了です。

「webpack-cli init」を行ったときに「tsconfig.json」が作成されていますが、削除して再度作成します。

```
npx tsc --init
```

で再作成されます。

コメントアウトされているものはディフォルト設定です。

TypeScript開発元の[MicrosoftのReact推奨](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json)です。

### eslint
Eslintは、指定したコーディングルールからハズれると指摘してくれる良き指導者です。是非、導入してください。

```
npx eslint --init
```
を入力すると質問が始まります。質問と私の選択したものです。

- How would you like to use ESLint? · style
- What type of modules does your project use? · esm
- Which framework does your project use? · react
- Does your project use TypeScript? · Yes
- Where does your code run? · browser
- How would you like to define a style for your project? · guide
- Which style guide do you want to follow? · airbnb
- What format do you want your config file to be in? · JavaScript

現時点で、どのようなルールが適用されているのかは、

```
npx eslint --print-config .eslintrc.js > 出力するファイル名(例:current-rules.txt)
```

で確認できます。

ルールを変更したい場合には、「.eslintrc.js」の「rules」へ追加してください。

「.eslintrc.js内のextends」の順番に適用され、最後に「rules」が適用されます。同じルールがあった場合には、後から読み込んだもので上書きされます。


### prettier

prettierでもコーディングルールのチェックは出来ますし、eslintもフォーマッタとして使えますが、餅は餅屋へ。

```
npm install -D prettier eslint-config-prettier
```

でインストールが完了します。


## まとめ
以上で最新版のライブラリを使用したReact開発環境ができあがります。

ひとつひとつをインストールし、自分で設定ファイルをいじりながらwebpackで画像やスタイルシートを別ファイル出力するよう変更し、動作確認するとwebpackへの理解が深まります。

上記を[細かく解説したもの](https://imakita-sangyo.booth.pm/items/3621069)がありますので、興味のある方は参照してください。


また、間違いがあればコメントで指摘してください。


ここまで読んでいただき、ありがとうございます。