React

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

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

Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書

本書情報
著者岡田 拓巳
発売日2021/9/17
ページ数272ページ
Kindle版
レビュー
(Amazon)
(152件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

STEP1 Node.jsのインストール

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

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

Node.jsインストール
Node.jsインストール
LTSとCurrentの違い
  • LTS(Long Time Support):長期間サポートされている
  • Current:Node.jsの開発者が新しく追加された機能を試す環境

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

npm -v

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

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

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

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

npm create vite@latest

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

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

npm create vite@latestコマンド実行後の設定・選択項目画面
設定・選択項目
  • Project name:作成するプロジェクト名(ディレクトリ)を入力してください。入力しないままEnterを押下すると、デフォルトの「vite-project」がプロジェクト名になります。
  • Select a framework:使用するフレームワークを選択します。Reactを選択してください。
  • Select a variant:JavaScript or TypeScriptを選択します。TypeScriptを使用しない人はJavaScriptを選択し、TypeScriptを使用する人はTypeScriptを選択してください。

これで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のブラウザ画面

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村