未完成【備忘録】Babel 7系で構築するReact開発環境

# この記事について
Babel 7系とReactの開発環境構築の個人的な備忘録です。
本記事は、初心者による記事なので、多々間違いがあると思います。何か間違いございましたら、ご教示いただけると幸いです。
なお、本記事は、下記の記事を参考にまとめ記事という認識で、一読いただければと思います。
##### 参照記事
・ [React開発環境構築2018](https://qiita.com/tsin1rou/items/6e4ee70b309cc266dcc9)
・ [Babel@7で構築するReact開発環境](https://qiita.com/camcam_lemon/items/81fc9e56e7721d25508d)

# 必要なソフト
## yarn
node.jsのパッケージマネージャー npm をすごく使いやすくしたもの。

```terminal
$ npm i -g yarn
```

※ [公式ドキュメント](https://yarnpkg.com/ja/docs/install#mac-stable)はhomebrewを推奨しているとのこと。


パッケージ管理できるように、package.jsonを設定。下記コードで、ディレクトリ内に、packageを作成される。

```terminal
$ yarn init -y 
```

## ESLint 
ESLint... 難しそうなツールの名前ですが、どうやらjsを実行する前に、バグを修正してくれる便利なツールとのこと。
下記、別記事の参照です。
>ESLintとは、JavaScriptのための静的検証ツールです。コードを実行する前にバグを発見したり、括弧やスペースの使い方などのスタイルを統一する。

参照記事：[ESLint 最初も一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)

インストールコード

```terminal
$ yarn add eslint eslint-plugin-react -D
```

-Dは `devDependencies` にインストールするためのオプション

```html:フォルダ構造
project/
 ├─node_modules/ ←yarnでインストールしたライブラリが保存されています。
 │  └─...
 ├─.eslintrc.json ←new!
 ├─package.json
 └─yarn.lock ←パッケージのバージョン情報などが保存されています。

```
下記のReact用の設定をコピーし、 `.eslintrc.json`  に貼り付ける。

```json:.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console":"warn",
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}
```

## サーバーを書く
サーバーサイドをnode.jsで書く

## Expressの設定
Expressとは、Node.jsで利用できるWebアプリケーションフレームワークのこと。
このサーバーを簡単にセットアップしてくれるExpressをインストールします。

```terminal
$ yarn add express
```
詳細は、[こちらの記事](https://techacademy.jp/magazine/16119)をご覧ください。

serverフォルダ作りserver.jsを作成します。

```html:フォルダ構造
project/
...
 ├─server/ ←new!
 │  └─server.js ←new!
...
```

```js:server.js
import express from 'express';

const app = express();

//GETリクエストでルートにアクセスが会った時の動作
app.get('/',(req,res)=>{
  res.send('Hello express');
});

//3000番ポートを使ってサーバーを立ち上げ
app.listen(3000,()=>{
  console.log('app listening on 3000');
});
```

## Reactのインストール
```terminal
$ yarn add react react-dom 
```

styled-componentsもインストールします。

```terminal
$ yarn add style-components
```

※ こちらのパッケージ詳細はこちらをご覧ください。
・[これからのReactコンポーネントのスタイリングはstyle-componentsが良さそう](https://qiita.com/kiida/items/ceac662d9a8bdd960499)


## webpackのインストール
webpackのバージョン4からwebpack-cliを別途インストールする必要があります。

```terminal
$ yarn add -D webpack webpack-cli webpack-dev-server
```

ビルドする際のモジュールもインストールします。

```terminal
yarn add -D css-loader uglifyjs-webpack-plugin
```

## Babelの7系のインストール
```terminal
yarn add -D @babel/preset-env @babel/preset-react @babel/register @babel/plugin-proposal-object-rest-spread
```

次に、@babel/packageでないbabel系のパッケージをインストールします。

```terminal
yarn add -D babel-eslint babel-loader babel-plugin-istanbul babel-plugin-styled-components babel-preset-power-assert
```

## eslint, prettierをインストール
構文チェックはeslintに任せ、コードフォーマットはprettierに任せます。

```terminal
yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-ally eslint-plugin-react
```
そして、eslintの設定にprettierのルールをのせます。

```terminal
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
```

## test関連

```terminal
yarn add -D mocha power-assert enzyme enzyme-adapter-react-16 jsdom testdouble
```


# 各種設定
## Babelの設定

```js:babel.config.js
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      },
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
  ],
  "env": {
    "test": {
      "presets": ["power-assert"],
      "plugins": [
        ["istanbul", {
          "exclude": ["test/**/*.spec.js"]
        }],
        ["babel-plugin-styled-components", {
          "fileName": false
        }]
      ]
    }
  }
}
```

他参考記事：[Babel7を試してみたメモ](https://chaika.hatenablog.com/entry/2018/11/21/150000)

## eslintの設定

```html:フォルダ構造
qiita/
 ├─node_modules/ ←yarnでインストールしたライブラリが保存されています。
 │  └─...
 ├─.eslintrc.json ←new!
 ├─package.json
 └─yarn.lock ←パッケージのバージョン情報などが保存されています。

```
下記をコピーし、使用しましょう。
`.eslintrc.json`を作成して、eslintの設定を行います。

```json:.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console":"warn",
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}
```

他参考記事：[ESLint 最初の一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)