Create React Appは役割を終えました
長らくReactの入門キットとして使われてきたCreact React App（CRA）
2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。
標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。
とりあえず試してみる
まずは現状確認のために実際にプロジェクトを作ってみます。
$ npx create-react-app cra --template typescript
Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
added 1426 packages in 11s
226 packages are looking for funding
run `npm fund` for details
Installing template dependencies using npm...
added 52 packages, and changed 2 packages in 3s
235 packages are looking for funding
run `npm fund` for details
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using npm...
removed 1 package, and audited 1478 packages in 2s
235 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Success! Created cra at /Users/nekoya/src/github.com/nekoya/ggg/cra
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd cra
npm start
Happy hacking!
うーん、
6 high severity vulnerabilities
不安になるやつが出てますね…
一時的なものかもしれないので、具体的に何がどうなっているのかを見ましょう。
$ 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@2.1.3, 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
node_modules/react-scripts
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
react-scriptsが古いwebpackに依存していて、そこからの間接依存で最終的に警告が出てそうです。
issueは立っていますが、openされて既に2年が経過しています。
打ち捨てられていないのは立派だけど、根本的な解決は簡単ではなさそうです。
セキュリティ警告は出るけど、動作自体はします。いつものやつが出てくる。
ドキュメントから落ちた経緯をたどる
新しい公式ドキュメントでCRAをViteに置き換えたPullRequestを見てみましょう。
のっけからConversation 195が表示されて大作の予感がしますが、スクロールしていくと
267 hidden itemsまじかよ。PullRequestでやる議論じゃないだろと思いながら掘り起こしていくと、今年1月に投下されたdan先生のクソデカお気持ちが埋もれていました。
ここでは
We are currently leaning towards Option 5 ("Turn Create React App into a launcher")
とCRAはランチャにしたい旨が示唆されていますが、現実はそうなっていません。実際には、
Option 3: Deprecate Create React App, suggest React frameworks
これと近しい形になっています。
いずれにせよ、このPRでのコメントの流れを見れば見るほど「CRAの時代は終わったのだなぁ」との思いが強くなってきます。
後継としてのVite
なお、先のPRでは「フレームワークだけでなく最初の一歩としてはシンプルなVite構成がCRAの後継として適切だろう」みたいな声も多く見られますが、結局のところ（少なくとも現時点では）Viteは一段下の扱いを受けています。
既存プロジェクトへの追加
では選択肢として提示されていますが、新規プロジェクトを始める時の手引き
だと
Can I use React without a framework?
をクリックしたら「どうしてもと言うなら仕方ないな」みたいな感じでViteが選択肢として提示されます。
なお3月のTweetでは、
「新規だったらフレームワーク使った方がいいでしょ」とのこと。このツリーの会話あんまり噛み合ってない感じがしてちょっと微妙…
個人的にはフレームワークを必須のものとして扱うのは、取っ付きの悪さが前面に出てしまうため得策ではないと考えています。
Viteを他の選択肢と同等に扱おうというissue
は立っていてPRも出ていますが、現時点では公式の動きはありません。
ありがとうCRA
Releasesを見ていくと、最後のリリースは去年の4月です。近年のリリース日をまとめるとこんな感じです。
5.0.1 (2022-04-12)
5.0.0 (2021-12-14)
4.0.3 (2021-02-22)
4.0.2 (2021-02-03)
4.0.1 (2020-11-23)
4.0.0 (2020-10-23)
まったくメンテされていないわけではないのか？ とも思いましたが、5.0.1のリリースに至るまでもすったんもんだがあったようです。
2021年の時点でメンテナが不足でヤバいって話が出ていました。その後、discussionに移行したようですが状況は厳しいままのようです。
やはり、改めて見てもこれは「役割を終えた」と見るのが妥当そうです。今までありがとうCreate React App。
Discussion