React18がリリースされたので、開発環境をゼロから構築してみる。【後編】


https://qiita.com/kztmk_media_pep/items/1a5da1e989a0da5bc215

からの続きです。


## Babel.jsのインストール
Babel.js とは、Babel.js のトップページの例にあるように、モダン JS(ES2015 移行のJavaScript) を未対応の古いブラウザでも解釈できるような JavaScript に変換してくれるトランスコンパイラ (変換器) です。

古いブラウザに未対応やElectron向けの場合は不要です。

インストール方法は、[Babel.jsのSetup](https://babeljs.io/setup#installation)で、[Webpack]を選択すると表示されます。

1. Webpackを選択
1. npm install --save-dev babel-loader @babel/core
1. webpack.config.common.jsへ追加するコード
1. babel.config.jsonファイルの作成
1. npm install @babel/preset-env --save-dev
1. babel.config.jsonファイルへコードの追加

で、完了します。


[webpack.config.common.js]
```javascript
// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.export = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};
```

[babel.config.json]
```
{
  "presets": ["@babel/preset-env"]
}
```

### babelの動作確認

webpackでHtmlWebpackPluginを導入しましたので、テンプレートになる「src/index.html」を作成します。

webpackがindex.htmlを出力フォルダに自動で書き出すため、出力先フォルダにあるファイルを編集することがなくなります。

webpack設定ファイル作成時にプロジェクトフォルダに作成された「index.html」をsrcフォルダに移動するだけでも良いです。

[src/index.html]
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
    </body>
    
</html>
```

[src/index.js]の編集
JavaScriptの[テンプレートリテラル (テンプレート文字列) - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)を使って確認します。

```javascript
import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  // Lodash, now imported by this script
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  const message = `<br />${myName}の口グセなのか？<br />${words}`;
  element.innerHTML = _.join(['webpack', '動いてるお〜'], ' ') + message;
  return element;
}

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

```shell
npm run start
```

![webpack01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4849/88f33320-79b2-7779-998b-615fda13d20c.png)

と表示され、以下のように古いブラウザが理解できるように変換されています。

![webpack02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4849/288145be-590f-d2c8-b2c2-e83b541411b1.png)

ここまでの内容は、以下で取得できます。

```shell
git clone -b 05_babel-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git
```


## React18のインストール

Reactは古いブラウザでは動作しないため、babelで変換する必要があります。(古いブラウザを切り捨てる場合は不要)

### babel/preset-reactのインストール

[babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)にあるように
```shell
npm install --save-dev @babel/preset-react
```
で、インストールします。

[babel.config.json]の編集
```json
{
  "presets":  [["@babel/preset-env"], ["@babel/preset-react"]]
}
```

### React18のインストール
React を使うためにインストールするパッケージは、
* react(react 本体)
* react-dom(DOM へのエントリポイント、React の描画を提供)
の 2 つです。

```shell
npm install react react-dom
```
[package.json]
```json
  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
```
のように、React18がインストールできました。

### Reactの動作確認

Reactのエントリーポイントを「src/index.html」へ追加します。

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
        <div id="root"></div>
    </body>
    
</html>
```

[webpack.config.common.js]
変更点は、

* babel-loaderで、拡張子を(js,jsx)が読み込まれるようにする
* resolveの拡張子に「jsx」を追加する。

[index.js]
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root')
);
```

[App.jsx]
```javascript
import React from 'react';
import _ from 'lodash';


const App = () => {
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  return (
    <div>
      {_.join(['webpack', '動いてるお〜'], ' ')}
      <br />
      {myName}の口グセなのか？
      <br />
      {words}
    </div>
  );
};

export default App;
```

```shell
npm run start
```

これで問題無く表示されました。


ここまでの内容は、以下で取得できます。

```shell
git clone -b 06_react-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git
```


## Typescriptのインストール

TypeScriptの導入手順は、[本家](https://ja.reactjs.org/docs/static-type-checking.html#typescript)にあるよう以下の手順で行います。

* TypeScript をプロジェクトの dependency に入れる。
* TypeScript のコンパイラの設定を行う。
* TypeScript 用のファイル拡張子を使用する。
* 使用するライブラリの型定義をインストールする。

### TypeScriptをプロジェクトのdependencyに入れる。

```shell
npm install -D typescript
```

で、インストールできます。

記事執筆時点の2022年4月15日では、4.6.3がインストールされました。


### TypeScriptのコンパイラの設定

TypeScriptのコンパイラ設定ファイル「tsconfig.json」を作成します。webpack-cliが作成した「tsconfig.json」がある場合は削除してください。

```shell
npx tcx --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json
```

で、「tsconfig.json」が作成されました。

コメントアウトされているものは、既定です。

[コンパイラのオプション](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)を確認することもできます。

TypeScript開発元のMicrosoft社のReactのお勧めは、[こちら](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json)になります。

[tsconfig.json]お勧めを考慮して
```json
{
  "compilerOptions": {
    "target": "es2016",        
    "lib": ["es6", "dom"],
    "jsx": "react",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "public",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
}
```

[webpack.config.common.js]
entryポイントを「index.tsx」へ変更し、ts-loaderが先に読み込まれるように変更します。

```javascript
// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports= {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", "jsx"],
  },
};
```

### TypeScript 用のファイル拡張子を使用する

* index.js ---> index.jsx
* App.jsx ---> index.tsx

### 使用するライブラリの型定義をインストールする

package.jsonのdependenciesを確認すると、「lodash」,
「React」、「React-dom」パッケージがインストールされていますので、「node.js」の型定義を追加してインストールします。


```shell
npm install -D @types/lodash @types/node @types/react @types/react-dom 
```



これでTypeScriptのインストールが完了しました。

```shell
npm run start
```

で、動作確認します。


ここまでの内容は、以下で取得できます。

```shell
git clone -b  07_typescript https://github.com/yaruo-react-redux/yaruo-start-template-react18.git
```


## eslint、prettireのインストールと設定

#### eslint
eslintは、決められたルールから外れたコードを指摘、修正してくれる優れものです。

#### prettier
prettierは、コードをフォーマットしてくれる優れものです。


これらも導入すると開発環境が完成したと言えるでしょう。

「eslint」「prettier」のインストール方法や詳しい設定方法は、以下の書籍にあります。


https://techbookfest.org/product/4616093891035136?productVariantID=4899714673672192


[←中編](https://qiita.com/kztmk_media_pep/items/1a5da1e989a0da5bc215)　　　　　　　[終編→](https://qiita.com/kztmk_media_pep/items/e8df1adfce57045d00a5)