本記事では、近年フロント界隈で話題のビルドツールViteを使用してReactの開発環境を爆速で構築する手順について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
| 著者 | 岡田 拓巳 |
|---|---|
| 発売日 | 2021/9/17 |
| ページ数 | 272ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (152件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
STEP1 Node.jsのインストール
まず、始めにViteを使用するためにNode.jsをインストールする必要があります。
こちらのNode.js公式ページにアクセスし、LTS(推奨版)と記載されているものをインストールします。
- LTS(Long Time Support)：長期間サポートされている
- Current：Node.jsの開発者が新しく追加された機能を試す環境
node.jsをインストールしたら下記のコマンドを実行して正しくインストールができているか確認します。
npm -vコマンドを実行してバージョン(例：6.13.4)が返ってきたら正しくインストールがされています。
以上で、Node.jsのインストールが完了です。
STEP2 ViteでReactの開発環境を整える
続いて、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のロゴがセットで表示されていればOKです。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
