Vite＋TypeScriptでのReactプロジェクト作成手順 - 転職を繰り返したサラリーマンの多趣味ブログ

最近、Reactの勉強を行っています。
このブログでは、学んだことを随時まとめていこうと思います。
今回は「Reactの新しいプロジェクトをVite＋TypeScriptで始める方法」について紹介します。

1. React新規プロジェクトをVite＋TypeScriptで作成するコマンド

まず、下記コマンドをターミナルで実行します。

npm create vite@latest my-react-app -- --template react-ts

my-react-app は好きなプロジェクト名でOK
--template react-ts で「React + TypeScript」構成になる

続けて、以下のコマンドも実行します。

cd my-react-app
npm install
npm run dev

これらのコマンドはターミナルにも表示されるので安心ですね。

npm run devコマンドを実行するとターミナルに開発サーバーのURL（http://localhost:5173）が表示されます。

このURLをブラウザで開くと、Reactアプリが立ち上がります。
初期画面はこんな感じです。

Reactプロジェクトの作成は、とても簡単です。

2. npmとnpxの違い

ここでよく登場する「npm」や「npx」についても整理しておきます。

npmとは

Node.jsのパッケージ管理ツール。プロジェクトに必要なライブラリのインストールなどを担当。
例：npm install react

npxとは

npmパッケージを一時的に実行するツール。
インストールされていないパッケージでも自動的に探して、ローカルに一時的にインストールし実行。

3. npm createとnpx createの違い・使い分け

npm create は npm v6以降で使える新しい標準コマンド
npx create-xxx とほぼ同じ働きだが、npm createが今後の主流
npmのバージョンは npm -v で確認できる。6以上ならOK

調べると、上記のような違いがあるようです。

npm公式ドキュメントでもnpm createを推奨しているので、npm createコマンドを使用しておけば間違いなさそうです。
※npm createはnpm initのエイリアスとして動作

docs.npmjs.com

4. Viteって何？

Vite（ヴィート）は「超高速な開発サーバー＆ビルドツール」
React/Vue/SvelteなどのモダンなWeb開発で、今もっともよく使われている
create-react-appやwebpackよりもシンプル＆高速

とてもいいなと思ったのは、開発サーバーがとにかく速いこと！ソースを修正すると、ブラウザに即反映されます。
最初に紹介した3つのコマンドで、即座にReactアプリが立ち上がるのは本当に便利です。

npm create vite@latest my-react-app -- --template react-ts
npm install
npm run dev

5. npm installの意味

npm createの実行直後は、まだパッケージはダウンロードされていません。
npm createは、package.jsonや初期ファイル一式を自動生成するだけです。
npm installコマンドを実行することで、package.jsonの内容に従い必要なパッケージが「node_modules」フォルダにインストールされるとのことです。

6. まとめ

Vite + TypeScriptを使ったReactプロジェクトの作成は、コマンド数も少なくスピーディーでとてもおすすめです。

npmやnpxの違い、npm installの役割も押さえておくと、今後の開発がスムーズになりそうです。