2024年4月初旬より前に本書を購入・ダウンロードされた方対象（React + Vite + TypeScriptの使い方）
*2024年4月7日追加情報
近日、本書『はじめてつくるReactアプリ with TypeScript』の第二版をリリースします。
現在の版にいくつかの変更を加えたものがこの第二版になりますが、現在の版を購入された後に第二版の発売を知り、再び購入しようとする方がいるかもしれないので、この追加情報で現在の版と第二版の違いを解説します。
この追加情報を読めば第二版をあらためて購入したり、読み直したりする必要はなくなります。
この件について不明点などありましたら、下記までご連絡ください。
Reactのコードに違いはありません
第二版での変更点は、create-react-appに代わってReact + Viteをスターターキット（開発ツール）に使っていることです。
この2つの違いは、JavaScriptのコードをまとめるバンドラーというものに、前者はWebpackを、後者がViteを使っているという点だけであり、どちらのツールを使っても、書くコード、つまりReactのコードはまったく同じです。
そのため、create-react-appをスターターキットとして学んだReactの知識が役立たなくなるということはないので、安心してください。
違いはフォルダ構成やコマンドといった小さなことなので、以下紹介していきます。
なお今後自分であたらしくReact開発を始めるときには、create-react-appをあえて使う必要はありません。create-react-appのメンテナンスが一年以上停止されているからです。React + Viteの使用が推奨されています。
create-react-appとReact + Viteの違い
違いは以下の点です。
― インストールコマンド
― デフォルトで入っているフォルダの中身
― ファイル名とフォルダ構成
― 起動コマンド
―build時にできるフォルダの名前
インストールコマンド
React + Viteは以下のコマンドをターミナルに打ってインストールします。
npm create vite@latest
ここで次のようなメッセージが出たら、「Yes」をあらわす「y」を入力し、「Enter」を押してください。
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y)
インストールが始まると、いくつか質問が出てくるので答えていきます。最初は開発に使うフォルダの名前です。
? Project name: › vite-project
名前は好きなものを使えるので、ここでは「react-typescript-weather-app」と入力し、「Enter」を押します。次の質問が出ます。
ここでは「React」を矢印キーで選び、「Enter」で決定してください。次の質問が出ます。
「SWC」とは開発を高速化してくれるツールですが、ここではベーシックな設定で進めたいので「TypeScript」を選んでください。「Enter」で決定します。次の表示が出たらインストールは完了です。
Finderでダウンロードフォルダを開いてみましょう。「react-typescript-weather-app」というフォルダができています。
次はこのフォルダをVS Codeで開きましょう。VS Codeを起動し、上部メニューバーの「File」から「Open...」へと進み、ダウンロードフォルダ内の「react-typescript-weather-app」を選択して開きます。
デフォルトで入っているフォルダの中身
VS Codeで「react-typescript-weather-app」フォルダを開くと、中身は次のようになっています。
複数のファイルとフォルダが入っていますが、開発で使っていくのはsrcフォルダです。srcはソース（source）の略で、その名前の通りソースコードはすべてここに入っています。src以外のフォルダとファイルも簡単に見ていきましょう。
publicには、ブラウザのタブに表示されるファビコン画像などを配置します。
srcの次にある.eslintrc.cjsは、コードチェックを行うESLintに関するファイルです。
.gitignoreはコード管理のGitで使われるファイルです。
index.htmlは、このアプリがブラウザで表示されるときのスタートポイントになるファイルです。
package.jsonには、本アプリに必要なパッケージの情報や、起動コマンドなどが書かれています。
README.mdにはReact + Viteについての情報が書いてあります。興味のある人は読んでみましょう。
tsconfig.jsonはTypeScriptのさまざまな設定を書き込むファイルです。通常はこのままデフォルトで進めて大丈夫です。
tsconfig.node.jsonも、いま見たtsconfig.jsonと同じTypeScriptの設定ファイルですが、こちらはViteが動いているNode.js環境に関係する設定ファイルになります。
vite.config.tsはViteに関する設定ファイルです。
中身を確認できたので、次は開発に必要なパッケージをインストールしましょう。create-react-appでは最初からインストールされていますが、React + Viteでは手動で行う必要があります。
画面上部メニュー「Terminal」から「New Terminal」を選ぶと、コードスクリーンの下部にターミナルが表示されます。そこに次のコマンドを打ち、「Enter」で実行してください。
npm install
このコマンドで、package.jsonファイルのdependenciesとdevDependenciesに書かれたパッケージが、すべてインストールされます。
インストール完了後、node_modulesとpackage-lock.jsonが新しく作られます。
node_modulesはインストールしたパッケージが入っているフォルダです。重要なフォルダですが、必要がない限りは中を見ることはありません。package-lock.jsonには、実際にインストールしたパッケージ情報が書いてあります。
以上がReact + Viteのフォルダの中身です。
ファイル名とフォルダ構成
create-react-appではindex.tsxというファイル名でしたが、React + Viteではmain.tsxとなっています。働きは同じです。
またindex.htmlがpublicフォルダの外にある点も、小さな違いとして挙げられます。
起動コマンド
create-react-appは次のコマンドで起動しました。
npm start
React + Viteは次の起動コマンドで起動します。
npm run dev
build時にできるフォルダの名前
アプリ公開前には下記コマンドでビルドを実行します。
npm run build
ここでできるフォルダ名が、create-react-appではbuildですが、React + Viteではdistです。distフォルダをNetlifyなどにドラッグ＆ドロップするとアプリが公開されます。
以上が現在の版と、近日リリース予定の第二版との違いです。これ以外の箇所において基本的な内容に違いはないので、あらためて第二版を購入したり、読み直したりする必要はありません。
この件について不明点などありましたら、下記までご連絡ください。
三好アキ