今回はJavaScript自体そこそこ触ったことがあるけど、Reactなどのフレームワークはあまり触ってこなかった人間が、Reactチュートリアルをやってみようと思います。

初回はReactの環境構築を行います。

使用するもの

Vite(ヴィート)

Viteとは(公式ドキュメント)

Create React App（CRA）というものもあるらしいが、既に非推奨とのため今回は使用しません。

この辺りを深掘りすると本題からズレるので、ひとまずはReactなどのフロントエンドを開発するための環境くらいの認識で進めて、詳しくはまたの機会に見てみようかなと思います。

その他

項目	内容
PC	MacBook Pro
OS	macOS Sonoma 14.2
エディタ	Cursor
バージョン管理	GitHub

インストールする

【1】 Node.js が入っているか確認

ターミナルで以下を確認

node -v
npm -v

自分は既にイントール済みだったので特にやることはなし。

$ node -v
v23.11.0

$ npm -v
10.9.2

【2】React プロジェクトを作る

任意のディレクトリで以下を実行

npm create vite@latest my-react-app

my-react-appの部分は任意の名称で大丈夫です。

インストール中に質問が出るので、以下のように答えました。

Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No

最後のrolldown-viteに関しては、「次世代のビルドエンジン(実験版)」を使用する？ということだったので、今回はNoとし通常の Vite（Rollupベース）を使用することにしました。

実際にインストールした際のログ

$ npm create vite@latest react-tutorial-log

> npx
> create-vite react-tutorial-log

│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in /Users/yuta/react-tutorial-log...
│
◇  Installing dependencies with npm...

added 156 packages, and audited 157 packages in 10s

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> react-tutorial-log@0.0.0 dev
> vite


  VITE v7.3.0  ready in 282 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

サーバーを起動する

作成したディレクトリ内に移動してnpm run devを実行する。

自分の場合は「npm create vite@latest react-tutorial-log」実行時にサーバーが起動していたので、一度サーバーを落として上記を実行しました。

⬇️実際に表示された画面

次回

実際にチュートリアルを進めます。
React学習ログ #2｜コンポーネントの作成とネスト