create-react-appを学習用に使うことについて（補足情報／2024年1月）
本書ではcreate-react-appをReact開発を行う上でのベースとして使っています。
しかし実は昨年の春を最後に、create-react-appのメンテナンスは止まっている状態です。
そのためcreate-react-appを使って学習をすることに不安や疑問を感じる読者もいるかと思い、この補足情報を追加しています。
先に結論を書くと、本書の学習を進める上ではこのままcreate-react-appを使い続けて問題ありません。
その理由は、本書の目的が最新のReact（あるいはReact + TypeScript）を学ぶ点にあり、それはcreate-react-appであっても達成できる、むしろ他の方法よりもReactだけに集中して学ぶことができるからです。
以下、少し説明をしていきます。時間に余裕のある方はお読みください。
（*なお2024年1月現在のReactの最新版は、2022年3月リリースのバージョン18で、create-react-appにもこのReactバージョン18が使われています。）
目次
1 ― create-react-appのメンテナンスが停止された理由
2 ― create-react-appの代わりのもの
3 ― 学習用としてのcreate-react-app
4 ― 本書の方針
5 ― 「React + Vite」について
6 ― 「React + Vite」のインストール方法
7 ― 「React + Vite」のbuild方法
8 ― build時のエラーについて（「はじめてつくるReactアプリ with TypeScript」）
create-react-appのメンテナンスが停止された理由
Reactはさまざまなテクノロジーが組み合わさって動いているテクノロジーです。
そのため初心者にとっては、「React開発を始める」というスタート地点に至るまでのセットアップに大きな困難がありました。
そこでReactの開発チームが用意したのが、複雑な設定をすでに済ませてあるcreate-react-appです。
これによってReact開発をすぐに始められるようになり、2016年のリリース以来、多くのアプリがcreate-react-appをベースに開発されてきました。
しかしリリースから5年以上経過し、その間にJavaScriptやReactの周辺テクノロジーも大きく発展したため、create-react-appをウェブアプリ開発のベースとして使うことが最適とはいえない状況になってきています。
「様々な設定を事前に済ましてある分、柔軟性が低い」、「npm startやnpm run buildの完了に時間がかる」といったことが、create-react-appの問題点として開発者からよく指摘されてきたことです。
そのため2023年の春ごろ、Reactの公式サイトからcreate-react-appの記述は削除されました。
create-react-appの代わりのもの
現在のReact公式サイトでは、従来までのcreate-react-appに代わって、Next.js、Gatsby、Remixなどの「Reactフレームワーク」というものをReact開発のベースとして使うよう推奨しています。
その理由として、「React開発を進めていると、どこかの時点でかならず複雑な機能が必要となる。『Reactフレームワーク』にはそれらの機能がデフォルトで入っているので、余計な手間がかからない」と公式サイトは説明しています。
これはその通りで、React開発を進める上で必要最小限の機能しか入っていないcreate-react-appに比べ、Next.jsやRemixなどの『Reactフレームワーク』には、ルーティング（ページ設定）やデータ取得などを行う便利な機能が最初から入っており、長期的な視点で見ると利便性は高いといえるでしょう。
学習用としてのcreate-react-app
しかし、これまでReactに触れたことがない初心者や、「これからReactを勉強したい」と思っているビギナーの視点に立つと、このような開発上の長期的なメリットがかならずしもプラスになるわけではありません。
Next.jsやRemixは「全部入り」で便利な分、学ぶことも多く、ビギナーの人には「ReactにプラスしてNext.jsも勉強しなければいけない」という学習上の負荷が増してしまうからです。
その点create-react-appでは、デフォルトで入っている機能が最小限な分React自体の学習に集中でき、「React勉強用」としては現時点（2024年1月）においても使用するメリットはまだ大きいといえます。
本書を読む読者の主要な関心は、ツールの種類（create-react-appやNext.js）ではなく、「Reactについて知りたい」という点にあると思います。その点、Next.jsで書くReactも、create-react-appで書くReactもまったく同じものなので、create-react-appを使って学んだReactの知識が役立たないということはありません。
本書の方針
以上、create-react-appを学習用として使うメリットを書いてきましたが、create-react-appの今後の行方は不明です。メンテナンスも2023年春以降停止されています。
私は読者の方に実務でも使える知識を身につけてもらいたいと考えているので、「学習用」と「実務用」といった形でツールを分けるのは、本来は避けたいのですが、現時点（2024年1月）では、シンプルなcreate-react-appの後継ツールが公式サイトでは発表されていない状況のため、当面の間はcreate-react-appを使った解説は書き直さずにいる予定です。（そのために、このような「補足」という形で情報を追加しています）。
しかしそれでは、読者の方が本書で学習を終えたあと、実務アプリを開発したいとなったときに困ることが予想されます。本書ではNext.jsやGatsbyといったツールの解説はしていないからです。
そこで以下、Reactのコミュニティでcreate-react-appの代わりと目されているツール、「React + Vite」について紹介します。
「React + Vite」について
「React + Vite」はここ一年ほど大きな注目を集めているツールです。
「React + Vite」とcreate-react-appの最大の違いは、JavaScriptファイルをまとめるために使われているテクノロジーにあります。
Reactには大量のJavaScriptファイルが使われていますが、ブラウザ上でJavaScriptを実行する前に、それらを一度まとめてあげる必要があります。
この大量のファイルを束ねるプロセスを「バンドル」と呼び、create-react-appではWebpackというものが使われています。
バンドルを行うテクノロジーにはWebpack以外にも複数あり、その一つがViteです。そしてこのViteを、Webpackの代わりに使ったものが「React + Vite」と呼ばれ、昨年ごろから日本をふくむ世界中で広く注目を集めています（React公式サイトでも言及されています）。
Viteはバンドルのプロセスが高速なので、Webpackを使っているcreate-react-appと比べ、ファイルの変更をブラウザに反映させるまでの時間差や、build実行時の待ち時間が短縮されるメリットがあります。
以下、「React + Vite」のインストール方法と、本書に関係するcreate-react-appとの違いを紹介していきます。
「React + Vite」のインストール方法
ターミナル上で、「React + Vite」をインストールしたいフォルダに移動します。ここでは「ダウンロード」フォルダにいるものとします。
そして次のコマンドをターミナルに打ち、「Enter」で実行してください。
npm create vite@latest
質問がいくつか出てくるので回答していきます。最初はこのアプリの名前で、これがフォルダの名前に使われます。
? Project name: › vite-project
名前は好きなもので構わないので、ここでは「first-react-app」と打って「Enter」を押しましょう。すると次の質問が出ます。
Reactを使った開発をしたいので、キーボードの矢印キーで「React」を選び、「Enter」で決定します。次は、JavaScriptとTypeScriptのどちらを言語として使うかを決める質問が出ます。
「SWC」とは開発時のプロセスを高速化するものです。「+ SWC」と書かれているものを選んでも選ばなくてもどちらでも構いません。ここでは「JavaScript」を選び「Enter」を押します。TypeScript開発の場合は「TypeScript」、あるいは「TypeScript + SWC」を選びましょう。
次のような表示が出たらセットアップが完了です。
ダウンロードフォルダを見ると、「first-react-app」フォルダが出来ています。
これをVS Codeで開きましょう。次のようなファイルとフォルダが入っています。
create-react-appとの主な違いは次の点です。
― 拡張子が.jsではなく.jsxになっている
― ファイル名がindex.jsの代わりにmain.jsxとなっている
― index.htmlがpublicフォルダの外に置かれている
― Viteの設定ファイルvite.config.jsがある
― 起動コマンドがnpm startではなくnpm run devになっている
― 必要なパッケージがインストールされていない
最後の点に関して、create-react-appではインストール時に必要なパッケージも一緒にインストールされますが、「React + Vite」では手動でインストールする必要があります。なので、VS Code上でターミナルを開き、次のコマンドで必要なパッケージをインストールしましょう。
npm install
すると、インストールしたパッケージに関するフォルダ／ファイルの入るnode_modulesが自動で作成されます。
これでnpm run devを実行すると、「React + Vite」が起動しますが、その前に不要なフォルダとファイルを削除しましょう。
srcフォルダを開き、その中のassetsフォルダ、index.cssを削除します。publicフォルダ内のvite.svgも削除しましょう。次のようになります。
次にApp.cssを開いてください。コードがすでに書かれているので、これを次のようにすべて消します。
次にApp.jsxを開いたら、ここでも書かれているコードをすべて消し、次のように書いてください。
（なお拡張子が.jsxとなっているのは、Reactに使われるファイルが正確にはJSXと呼ばれるものだからです。開発現場によってはReactファイルには.jsx、JavaScriptファイルには.jsを使うという風に、Reactファイルを明示する場合があります。Viteでは.jsxの使用が推奨されているので、ここでも.jsxを使っていきます。）
// App.jsx
import './App.css';
function App() {
return (
<div>
<h1>こんにちは</h1>
</div>
);
}
export default App;
クリーンアップの最後がmain.jsxです。開いて次のコードを削除しましょう。
// main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // 削除
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode> // 削除
<App />
</React.StrictMode>, // 削除
)
次のようになります。
// main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
)
上部メニュー「File」の「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存してください。
以上でクリーンアップが完了して、「React + Vite」開発をはじめる地ならしができました。
ターミナルでnpm run devを実行すると、次のように表示されます。
create-react-appと比べ、立ち上がりが非常に速いことに気がつくと思います。指定されているhttp://localhost:5173を開いてみましょう。次のように表示されます。
「React + Vite」のbuild方法
開発が完了し、オンラインで公開するときにはbuildを行います。次のbuildコマンドをターミナルに打ち「Enter」で実行しましょう。「React + Vite」では非常に短い時間でbuildが完了します。
npm run build
distというフォルダができます。
これはcreate-react-appのbuild後に作られるbuildフォルダと同じものなので、このdistをNetlifyにアップロードすると、アプリがオンラインに公開されます。
build時のエラーについて（「はじめてつくるReactアプリ with TypeScript」）
『はじめてつくるReactアプリ with TypeScript』においてnpm run buildコマンドを実行すると、次のようなエラーの出る場合があります。
この場合は下のように、errをアンダースコアの_で置き換えてください。
// App.jsx
.catch(_ => alert("エラーが発生しました。ページをリロードして、もう一度トライしてください。"))