React + Rails + AWS Fargate の構成を実現したい - 02 フロントエンド環境構築編(Docker + React + TypeScript + ESLint + Prettier + VSCode)

# 目次

- [目次](#目次)
- [概要](#概要)
- [本記事のゴール](#本記事のゴール)
  - [DockerによるNext.js + TypeScriptの導入](#dockerによるnextjs--typescriptの導入)
  - [リンター・フォーマッターの設定](#リンターフォーマッターの設定)
    - [エラー内容1: .eslintrc.jsonでstandardをロードできない](#エラー内容1-eslintrcjsonでstandardをロードできない)
    - [解決策1:.eslintrc.jsonからstandardを除外する](#解決策1eslintrcjsonからstandardを除外する)
    - [エラー内容2: @typescript-eslint/eslint-pluginモジュールが見つからない](#エラー内容2-typescript-eslinteslint-pluginモジュールが見つからない)
    - [解決策2: @typescript-eslint/eslint-pluginを npm installする](#解決策2-typescript-eslinteslint-pluginを-npm-installする)
    - [エラー内容3: npm run lint時にWarningなどが出る](#エラー内容3-npm-run-lint時にwarningなどが出る)
    - [解決策3:](#解決策3)
    - [エラー内容4: VSCodeでファイル保存時にリンター・フォーマッターが効かない](#エラー内容4-vscodeでファイル保存時にリンターフォーマッターが効かない)
    - [解決策4: VSCodeの設定を見直す](#解決策4-vscodeの設定を見直す)
  - [成果](#成果)
    - [サンプルアプリの起動確認](#サンプルアプリの起動確認)
    - [リンター・フォーマッターの設定確認](#リンターフォーマッターの設定確認)

# 概要

https://qiita.com/memomaruRey/items/746f9cff0ceefe8b6157

# 本記事のゴール
以下を参考にフロントエンド環境構築(Docker + React + TypeScript + ESLint + Prettier + VSCode)を行う。

https://zenn.dev/temple_c_tech/articles/setup-next-on-docker

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/3d96ffb691dc7f0a2025

以下つまづいた点をメモする。

## DockerによるNext.js + TypeScriptの導入

```Dockerfile
FROM node:lts-buster-slim

WORKDIR /app/src

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

ADD . /app
```

```docker-compose.yml
  frontend:
    container_name: front
    build: ./frontend/
    image: frontend
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000
    command: "npm run dev"
    networks:
      app_net:
        ipv4_address: "172.20.0.4"
```

```sh
docker-compose build

docker-compose run --rm frontend sh -c 'npx create-next-app src --typescript'

docker-compose up
```

## リンター・フォーマッターの設定

以下記事を参考に設定
https://zenn.dev/temple_c_tech/articles/setup-next-on-docker

### エラー内容1: .eslintrc.jsonでstandardをロードできない

```bash
npm run lint

> src@0.1.0 lint
> next lint

Failed to load config "standard" to extend from.
```

### 解決策1:.eslintrc.jsonからstandardを除外する

```diff_json
  "extends": [
    "plugin:react/recommended",
-   "standard",
    "prettier" // eslintとprettierの衝突回避
  ],
```

### エラー内容2: @typescript-eslint/eslint-pluginモジュールが見つからない

```bash
npm run lint

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/eslint-plugin'
```

### 解決策2: @typescript-eslint/eslint-pluginを npm installする

```bash
docker-compose run --rm frontend npm i --save-dev @typescript-eslint/eslint-plugin
```

### エラー内容3: npm run lint時にWarningなどが出る
```bash
npm run lint
・・・
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
```

### 解決策3: 
Next.jsではデフォルトでLintが入っているが、それを使っていないことが原因。
.eslintrc.jsonで以下を追加
```diff_json
  "extends": [
    "plugin:react/recommended",
    "prettier",
+   "next/core-web-vitals"
  ],
```
参考
https://github.com/vercel/next.js/discussions/28485

### エラー内容4: VSCodeでファイル保存時にリンター・フォーマッターが効かない

### 解決策4: VSCodeの設定を見直す
以下などを参考にVSCodeの設定を見直す
https://applingo.tokyo/article/1867

## 成果
### サンプルアプリの起動確認

localhost:3000にアクセスし、サンプルアプリが表示できることを確認

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882682/e8b8f81b-fef2-0f92-42a6-a990995bdc9b.png)

### リンター・フォーマッターの設定確認
ファイル保存時にリンター・フォーマッターが効いていることを確認

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882682/05f36094-604c-b201-f8e6-d4830c5b88bb.gif)