はじめてのreact　VScodeでreactの環境構築をしよう

こんにちは、蝶石です。

今回はreactの環境構築について。
皆さんreactをご存じですか？
私はなんとなく響きで「難しそう、なんかすごそう」と苦手意識を持っていました。が、ついにreactを始めることに！
実際に環境構築をしてみたので、私なりにわかりやすくreactの始め方を紹介できたらなと思います。

node.jsのインストール

すでにインストール済みの方もいらっしゃるかもしれませんが、reactで開発するためにはnode.jsが必要です。

レンタルサーバーやgithubにアップロードするなどの本番で動かす場合にはnode.jsは必要ありませんが、reactを自分のPCで動かすときには必要というイメージです。
node.jsのダウンロードはこちらからできます。https://nodejs.org/ja

node.jsのサイトを開いて「node.jsを入手」というボタンを押すと、最初に「npmをdockerを使ってダウンロードする」という場所があると思います。
この「docker」で詰まりましたが、dockerを使わなくても、その下にあるボタンからPCにダウンロードすれば大丈夫です。

dockerについては一応調べたので少し触れておくと、dockerはチーム開発をするときやPCを汚染したくない場合に便利です。ですが、個人開発では特に必須というわけではなさそうです。なお、dockerは公式サイトより

Docker Desktop は以下に対して無料です:
中小企業（従業員数250人未満かつ年間売上高1,000万ドル未満）
個人使用
教育
非営利のオープンソースプロジェクト
Docker Desktop には以下の有料サブスクリプションが必要です。
大規模組織における専門的な使用
政府機関
無料枠を超えた商用利用
Docker Desktop が含まれる有料サブスクリプション:
Docker Pro、Team、Businessサブスクリプション

とあるので、大規模に使う場合は有料版の契約が必要です。

node.jsがダウンロードできたらインストーラーでnode.jsをインストールします。
コマンドプロンプトを開き、node -vとnpm -vのコマンドを入力し、バージョンが表示されればインストールは完了です。

VScodeでreactを使う

node.jsをインストールしたら、次はVScodeを開きます。
今度はPCのコマンドプロンプトではなく、VScodeのターミナルを開きます。メニューの「ターミナル」から「新しいターミナル」を選びましょう。
ターミナルに、「npx create-react-app プロジェクト名」を入力すると、reactプロジェクトの完成です！　reactプロジェクトを作りたいときは、ターミナルでフォルダごと作ります。先にフォルダを手動で作らないよう注意してください。（蝶石はデスクトップに先にフォルダを作って、ターミナルでさらにそのフォルダの中にreactプロジェクトを作ってしまったので、この後の手順でパスが通らず躓きました泣。）

reactプロジェクトフォルダーの中にある「src」フォルダーの中身を編集して、開発します。App.jsやApp.cssを自由に編集しましょう。
ブラウザで確認するときは、プロンプトで”npm start”と入力した後、ブラウザにlocalhost:3000と入力してアクセスします。

ここでは例を載せておきます。

import './App.css';

function App() {

　alert('JavaScriptを実行');

　return (
　　<div>
      <button>ボタンです</button>
    </div>
　)
}

export default App;

これでボタンが表示されれば成功です。

buildする

ローカルで開発するときはnode.jsが必要ですが、サーバーにアップロードするときはnode.jsは不要になり、代わりにbuildという操作が必要になります。ターミナルに”pm run build”と入力すると、buildというフォルダが追加されます。サーバーにアップロードするときは、このbuildフォルダのみをアップロードします。

buildしたものを確認したいときは、”npm install -g serve　serve -s build”をターミナルに入力しましょう。するとurlが出てくるので、それにアクセスすると確認することができます。

buildした後も基本的にはbuildフォルダには触らず、src内のファイルを編集します。その後buildし直します。buildフォルダを一度削除し、もう一度buildの手順を行って作られたフォルダを使用しましょう。

おわりに

以上がreactの環境構築と基本操作です。覚えてしまえば単純かと思いますが、やっぱり最初が難しいですよね……

しかし調べながら試行錯誤するのも楽しいと思います。個人的には、dockerを初めて知りました。いつかdockerどっかで使いたいなーなんて思います（ダジャレです）。

参考

2025/12/13日閲覧

『Dockerってなんで使うの？メリットは？』
https://qiita.com/kento2000/items/ef6d961331e4ae9a69bb?utm_source=chatgpt.com

『Docker Desktop license agreement』
https://docs.docker.com/subscription/desktop-license/?utm_source=chatgpt.com

いなか de Mac『【VSCode】Reactを環境構築してHello Worldする方法』
https://inakademac.com/react-hello-world/

mokelab Tech Sheets『Reactアプリをビルドする』
https://tech.mokelab.com/web/React/build-ja.html

『Production BuildしたReactアプリをローカル環境で実行する』
https://dev.classmethod.jp/articles/run-a-production-built-react-app-in-a-local-environment/

2025/12/16閲覧

初心者からのreact入門『本番サーバーにデプロイする手順』
https://charobo.com/reactjs/deploy/?utm_source=chatgpt.com

『[REACT]REACTの始め方とNode.jsについて』
https://zenn.dev/airiswim/articles/e3f6b8b0b59096