【2025年最新版】フレームワーク使用が推奨らしいが素のReactを使ってみる with Vite

## これは何?

個人的に素のReactを使おうと思ったのですが，どうやら[公式ドキュメント](https://ja.react.dev/learn/start-a-new-react-project)によると素のReactを使うよりもフレームワークを使うことが推奨らしいです。

> React だけで新しいアプリやウェブサイトを作りたい場合は、コミュニティで人気のある React フレームワークから、ひとつを選ぶことをおすすめします。
> フレームワークなしで React を使うことも可能ですが、ほとんどのアプリやサイトにおいては、コード分割、ルーティング、データ取得、HTML 生成といった問題に対処するための開発が必要であることが分かっています。これらは React に限らずあらゆる UI ライブラリに共通の問題です。
> フレームワークを使ってスタートすることで React での開発を素早く立ち上げ、後で実質的に独自フレームワークのようなものを作ってしまわずに済むようになるでしょう。

ですが，自分が初めてReactを使うので素のReactを触っておきたいなという気持ちがあり，素のReactのセットアップをしました。

本記事では素のReactの環境構築でやったことを書いておきます。

---

## 素のReactのセットアップする方法

### 疑問: create-react-appは非推奨らしいがこれを使わずにプロジェクトを作ってみればよいのでは?

create-react-appが非推奨になった話が気になる方は以下を参照してください。

https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f

そこで，`create-react-app`コマンドを使わずにreactプロジェクトを作ればよいのでは?と思い，試してみました(結論から言うとダメそうです)。

[公式ドキュメント](https://ja.react.dev/learn/typescript)のForkを押すとcode sandboxが開くのでこれを雛形としてセットアップしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/8cf818af-e851-4484-11ee-465d0e2a264a.png)

動作自体は問題なくしますが，`npm audit`を実行するとhighの脆弱性が6つ残っています

```shell
npm audit
# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of resolve-url-loader
          node_modules/react-scripts

postcss  <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force
```

問題のありそうな
- nth-check
- postcss
のバージョンを最新にすることを試みますがうまくいかず。

```shell
rm package-lock.json
rm -rf node_modules
npm install nth-check@latest
npm install postcss@latest
```

上記のライブラリが`react-scripts`に依存していることが原因のようです。
(一応，react-scripts`も最新にしてみましたがダメそう)

> This package includes scripts and configuration used by Create React App. [react-scripts - npm](https://www.npmjs.com/package/react-scripts)より

と記載があり，`react-scripts`は`create-react-app`で使用するスクリプトのようです。
このため，`create-react-app`を使わなくても`react-scripts`を使う時点で非推奨であることには代わりがないです。

### Viteを使ってみる

[フレームワークなしで React を使うことは可能？](https://ja.react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework)を見ると，フレームワークを使わない場合の選択肢はViteやParcelのようです。

そこでviteを試してみます。

[Vite Getting Started](https://vite.dev/guide/)に沿って進めます。

react-tsを指定し，React，TypeScript + SWCを選択しました。

```shell
npm create vite@latest frontend2 -- -- template react-ts

> npx
> create-vite frontend2 -- template react-ts

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

 Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

```

:::note info
> SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, Trip.com, and more.
> SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers. [SWC](https://swc.rs/)より

SWCとはRustベースのTypeScriptからJavaScriptへの変換を高速にするRust製のツールらしい。
:::

```shell
ls
eslint.config.js  package-lock.json  tsconfig.app.json
index.html        public/            tsconfig.json
node_modules/     README.md          tsconfig.node.json
package.json      src/               vite.config.ts
```

とりあえず，雛形はできました。

tsconfigがやたらたくさんあるのが気になりましたが，以下のようにしてTSのルールを定めているだけでした。
- tsconfig.jsonはtsconfig.node.jsonとtsconfig.app.jsonのパスを指定しているだけ。
- tsconfig.app.jsonはsrc/配下が対象
- tsconfig.node.jsonはnode_modules/配下が対象

```shell
npm audit
found 0 vulnerabilities
```

脆弱性も`react-script`を使っている時と比べて0になりました。

---