React習得への道2

こんにちは！ジュンです！

今回も勉強したことをアウトプットしていきます。

今回はReactの環境を構築します。

流れとしては下記です。

・Node.jsのインストール

・Viteでのプロジェクト作成

・Reactと必要なパッケージのインストール

Reactでは、ブラウザだけで実行できない作業をNode.jsという実行環境で行う。

① Node.js上で動作するnpm（パッケージ管理ツール）を使用するため

ReactではReact本体や開発を助けるツールやライブラリなどたくさんの外部ツールを使う。

パッケージ管理ツールとは、それらをインストール、バージョン管理、更新を行ってくれるもの。

② Node.js上で動作するViteを使用するため

Viteとは、Reactなどのモダンなフロントエンド開発でよく使われるビルドツール。

ビルドツールとは、複数のプログラムや設定ファイルをまとめて、1つのWebアプリとして動かせる形にするためのツールのこと。

▪️プロジェクト（アプリのひな型）を作成できる

Reactアプリを作るために必要な

をまとめて自動生成してくれる。

▪️開発サーバーを起動できる

Viteには、開発用のサーバーが組み込まれている。

コードを保存するとブラウザが自動で更新され変更内容をすぐ確認できるため、作りながら動作を確認できる環境を用意できる。

▪️本番用にビルドしてくれる

ビルドとは、不要なコードを削除したり、ファイルを最適化することで、本番公開に適した、軽くて速く動く状態にすることである。

Viteは上記のビルドを自動で行い、開発中に書いた複数のファイル（JavaScriptや設定ファイルなど）を整理・変換し、本番公開用の1つのアプリとしてまとめるためのツールである。

では実際にReactのプロジェクトを立ち上げてみる。

①まずはNode.jsをインストールする。

そして、node -v のコマンドを実行しインストールしたNode.jsのバージョンを確認する。

さらに、npm -v のコマンドを実行しパッケージ管理ツールが使えるかも確認する。

②プロジェクトの作成場所を指定する。

ホーム画面に作成する場合は　cd ~/Desktop のコマンドで大丈夫。

③プロジェクトを作成する。

npm create vite@latest プロジェクト名のコマンドを実行する。

Ok to proceed? (y)　が出たらyで大丈夫。

Select a framework:　が出たらReactを選択する。

Select a variant:　がでたらJavaScriptを選択する。

Use rolldown-vite (Experimental)?:　がでたらNoを選択する。

Install with npm and start now?　がでたらYesを選択する。

control+Cを押して開発サーバーを停止して、cd プロジェクト名でフォルダに入る。

npm install を実行し、必要なパッケージをインストールする。

npm run dev を実行し開発サーバーを起動する。