【Next】React環境の立ち上げ方（Auto ESLint with Stylistic の設定付き）

今まで JQuery -> Vue と生きてきたので、Reactなんてわからん！
とも言ってられない世の中なので、ちょうど勉強を始めたところ。

公式の Learn React がとても分かりやすくて、読むだけで理解が進みます。

https://react.dev/learn

で、学んだ知識を実験したいので React 環境の立ち上げかたをメモしておきます。


## 簡単な環境の立ち上げ方

React と言いながら、`Next` を推奨されたので、こちらで勉強。

https://react.dev/learn/creating-a-react-app

```bash
$ node -v
v22.13.1

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@15.1.7
Ok to proceed? (y) y

✔ What is your project named? … test-react
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

$ cd test-react
$ npm run dev
```

http://localhost:3000/

できた！かこいい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/4ea4d191-d231-4b18-a3c9-0552f264c3ea.png)

Next テンプレには tailwindcss が入っていて、リセットCSSが効いてしまってる。
なので一旦無効にする。いちいち CSS あてるのめんどくさいからね。

```diff_css:app/globals.css
- @tailwind base;
+ /* @tailwind base; */
  @tailwind components;
  @tailwind utilities;
  ...
```

実験用のページを作るには、`app/test/page.tsx` を作る。
Next の App Router とやらが、ディレクトリ構成と `page.tsx` を基準にルーティングを組んでくれるらしい。

https://nextjs.org/docs/app/getting-started/layouts-and-pages

```tsx:app/example/page.tsx
function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
```

そして http://localhost:3000/example にアクセスすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/3aaf8641-15bc-4fd6-af0d-0178290f275a.png)

いいね


## おわりに

今自分が作りたいものが Vue だとちょっと大変で、React に手を出そうという。

`t3-stack` とやらで遊びたいけど、なんにも読めなかったので React から順番に学んでいくぞ！



## 【追記】Auto ESLint with Stylistic 設定

next は標準で `eslint` が搭載されてるみたい。

```bash
$ npm run lint
```

https://nextjs.org/docs/app/api-reference/cli/next#next-lint-options

これを使って、ファイル保存時に自動的に lint と format を実行するようにしたい。
要するに `vite-plugin-eslint` の fix オプション！

https://www.npmjs.com/package/vite-plugin-eslint

> 調べる限り、VSCodeから `FixOnSave` をやる手法は出てくるが、スクリプトにて実行する手法が無かった...
> そして、NextにはNuxtみたいな実行時フックが無いみたい :sob:
> （やっぱね、ライブラリにはフックをつけまくるべきだと思うの）
>
> VSCode でできるじゃんって言われるけど、コードに環境依存のもの仕込むのは嫌なのよね。

なので（個人的に）懐かしい `nodemon` を使って自作しました。

### Auto-fix

```bash
$ npm install -D nodemon npm-run-all
```

```diff_json:package.json
    "scripts": {
      "dev": "next dev --turbopack",
      "build": "next build",
      "start": "next start",
      "lint": "next lint",
+     "watch-fix": "nodemon --watch pages --watch app --watch components --watch lib --watch src --ext js,jsx,ts,tsx --exec \"npm run lint -- --fix\"",
+     "watch": "npm-run-all --parallel dev watch-fix"
    },
```

この状況で dev に代わり `npm run watch` を実行すればOK！
dev コマンドと並行して、lint-fix が走ります！

```bash
$ npm run watch

> test-react@0.1.0 watch
> npm-run-all --parallel dev watch-fix

> test-react@0.1.0 watch-fix
> nodemon --watch pages --watch app --watch components --watch lib --watch src --ext js,jsx,ts,tsx,css --exec "npm run lint -- --fix"

> test-react@0.1.0 dev
> next dev --turbopack

[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): pages app/**/* components lib src
[nodemon] watching extensions: js,jsx,ts,tsx,css
[nodemon] starting `npm run lint -- --fix`

> test-react@0.1.0 lint
> next lint --fix

   ▲ Next.js 15.1.7 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://10.255.255.254:3000

 ✓ Starting...
 ✓ Ready in 660ms
✔ No ESLint warnings or errors
[nodemon] clean exit - waiting for changes before restart
```

### Stylistic 

そしてコード整形。

世の中には Biome とやらが流行ってますが、まだ最適解じゃないかなぁ～と思い eslint を使ってコード整形を合わせて実行します。
そんな時に便利なのが `ESLint Stylistic` ！めちゃおすすめ！

https://eslint.style/

```bash
$ npm install -D @stylistic/eslint-plugin
```

```diff_javascript:eslint.config.mjs
  import stylistic from '@stylistic/eslint-plugin';

  ...
  const eslintConfig = [
    ...compat.extends("next/core-web-vitals", "next/typescript"),
+   {
+     plugins: { '@stylistic': stylistic },
+   },
+   stylistic.configs['recommended-flat']
  ];

  ...
```

これだけの設定で、いい感じにフォーマットされます！
昔はいろんなプラグインを集めてて、ゲームの煮詰まった mod フォルダみたいになってたのに、良い時代だぁ～。

細かいルールは公式サイトを参照のこと。

この設定ができないと、開発始められないよね！
おわり。