ViteでReactの開発環境を爆速で構築する手順

本記事では、近年フロント界隈で話題のビルドツールViteを使用してReactの開発環境を爆速で構築する手順について解説しています。

Reactの学習におすすめ書籍

モダンJavaScriptの基本から始める　React実践の教科書

総合評価

( 5 )

メリット

• JavaScriptの基礎から始めてReactの機能を一通り学べる
• 実務で必要となる知識を意識しながら学習を進められる
• 現場のシチュエーションベースのストーリーで技術解説

モダンJavaScriptの基本から始める　React実践の教科書 （最新ReactHooks対応） [ じゃけぇ（岡田　拓巳） ]

楽天ブックス

¥2,860 （2024/09/04 14:01時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

STEP1 Node.jsのインストール

まず、始めにViteを使用するためにNode.jsをインストールする必要があります。

こちらのNode.js公式ページにアクセスし、LTS(推奨版)と記載されているものをインストールします。

node.jsをインストールしたら下記のコマンドを実行して正しくインストールができているか確認します。

npm -v

コマンドを実行してバージョン(例：6.13.4)が返ってきたら正しくインストールがされています。

以上で、Node.jsのインストールが完了です。

STEP2 ViteでReactの開発環境を整える

続いて、Viteのプロジェクトを作成するため下記のコマンドを実行します。

npm create vite@latest

@latestは、Viteの最新版を利用することを表します。

コマンドを実行すると、プロジェクト名や使用するフレームワークを求められます。

これでVite+React(TypeScript)のプロジェクトが作成されました。

STEP3 ローカルサーバーを起動してブラウザで確認する

最後に作成したプロジェクトをローカルサーバーで起動してブラウザで確認しましょう。

cdコマンドで作成したプロジェクト(ディレクトリ)に移動します。※プロジェクト名は各自置き換えてください。

cd プロジェクト名

作成したプロジェクトには、node_modulesがないので下記のコマンドでインストールします。

npm i

最後にpackage.jsonのscriptsに登録されているdevコマンドを使用してローカルサーバーを立ち上げ、返されたURLをブラウザで確認してみましょう。

npm run dev
> Local:   http://127.0.0.1:5173/

ViteとReactのロゴがセットで表示されていればOKです。