簡単な環境の立ち上げ方

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

$ 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

できた！かこいい！

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

app/globals.css

- @tailwind base;
+ /* @tailwind base; */
  @tailwind components;
  @tailwind utilities;
  ...

実験用のページを作るには、app/test/page.tsx を作る。
Next の App Router とやらが、ディレクトリ構成と page.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 にアクセスすると

いいね

おわりに

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

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

【追記】Auto ESLint with Stylistic 設定

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

$ npm run lint

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

調べる限り、VSCodeから FixOnSave をやる手法は出てくるが、スクリプトにて実行する手法が無かった...
そして、NextにはNuxtみたいな実行時フックが無いみたい
（やっぱね、ライブラリにはフックをつけまくるべきだと思うの）

VSCode でできるじゃんって言われるけど、コードに環境依存のもの仕込むのは嫌なのよね。

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

Auto-fix

$ npm install -D nodemon npm-run-all

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 が走ります！

$ 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 ！めちゃおすすめ！

$ npm install -D @stylistic/eslint-plugin

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 フォルダみたいになってたのに、良い時代だぁ～。

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

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