今まで JQuery -> Vue と生きてきたので、Reactなんてわからん！
とも言ってられない世の中なので、ちょうど勉強を始めたところ。
公式の Learn React がとても分かりやすくて、読むだけで理解が進みます。
で、学んだ知識を実験したいので React 環境の立ち上げかたをメモしておきます。
簡単な環境の立ち上げ方
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 あてるのめんどくさいからね。
- @tailwind base;
+ /* @tailwind base; */
@tailwind components;
@tailwind utilities;
...
実験用のページを作るには、app/test/page.tsx を作る。
Next の App Router とやらが、ディレクトリ構成と 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
"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
import stylistic from '@stylistic/eslint-plugin';
...
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
+ {
+ plugins: { '@stylistic': stylistic },
+ },
+ stylistic.configs['recommended-flat']
];
...
これだけの設定で、いい感じにフォーマットされます！
昔はいろんなプラグインを集めてて、ゲームの煮詰まった mod フォルダみたいになってたのに、良い時代だぁ～。
細かいルールは公式サイトを参照のこと。
この設定ができないと、開発始められないよね！
おわり。