【初めてのフロントエンド】Vue.js、React.jsの開発環境構築

2025年5月9日 2025年5月9日

remy_world

Ubuntu22.04を使って開発環境を構築しています。初めにVSCodeとnode.jsはインストールしておいてください。未だな方は初めてのプログラミング学習をご参照ください。

使用環境

OS: Ubuntu22.04
node : v22.13.1
npm : v11.3.0

初めてフロントエンドとして有名なReact.js やVue.jsを学習するときに、プロジェクト作成方法に何通りかあって、迷ってしまうことはありませんか？どの方法で作成するかで、最初にインストールされるモジュールが異なりますので、初学者向に少し整理しておきたいと思います。初学者には簡単・高速なviteががお勧めです。

Vue.js環境

Vue.js

npm create vue@latest
機能を選択できる(※ここではJSXとRouterにしました))

npm create vue@latest

Need to install the following packages:
create-vue@3.16.4
Ok to proceed? (y)  # ← Enterを押す
> npx
> create-vue
┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  vue-todos-app  #  ← ここでプロジェクト名を入力
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  JSX Support, Router (SPA development)  # ← 機能を選択(※JSXとRouterにした))

Scaffolding project in /home/tatsumi/viteでvuejsを始める/vue-todos-app...
│
└  Done. Now run:  # 実行方法
   cd vue-todos-app
   npm install
   npm run dev

| Optional: Initialize Git in your project directory with:
   git init && git add -A && git commit -m "initial commit"

npm create vite@latest

npm create vite@latest    
Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) 　  # ← Enterを押す

> npx
> create-vite           # ← create-vite パッケージを、一時的にダウンロード
│
◇  Project name:
│  vue-todos-app2　　#  ← ここでプロジェクト名を入力
│
◇  Select a framework:　# ←フレームワークを 一つ選択
│  Vue
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in /home/tatsumi/viteでvuejsを始める/vue-todos-app2...
│
└  Done. Now run:

  cd vue-todos-app2
  npm install
  npm run dev

React.js環境

npm create vue@latest同様、npm create react@latest も動作するはずですが、私の環境では何らかの原因でうまく動作しませんでした。
代わりに⇨npx create-react-app <project name>で実行しています。(方法2)
こちらはnode_modulesも同時にインストールしますので、時間がかかります。

React.js

npm create vite@latest

#  方法1
 npm create vite@latest   # ( 23.9 kB⇨合計サイズ 63.9 MB)

> npx
> create-vite     # ← create-vite パッケージを、一時的にダウンロード
│
◇  Project name:
│  vite-todos-app    #  ← ここでプロジェクト名を入力
│
◇  Select a framework:
│  React       # ←フレームワークを 一つ選択
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in /home/tatsumi/viteでReactを復習する/vite-todos-app...
│
└  Done. Now run:

  cd vite-todos-app
  npm install
  npm run dev

npx create-react-app <project name>

#  方法2
npx create-react-app react-todo-app2   

Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) 

create-react-app is deprecated.

You can find a list of up-to-date React frameworks on react.dev
For more info see:https://react.dev/link/cra

This error message will only be shown once per install.

Creating a new React app in /home/tatsumi/viteでReactを復習する/react-todo-app2.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1323 packages in 2m

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

Initialized a git repository.

Installing template dependencies using npm...

added 18 packages, and changed 1 package in 6s

268 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1341 packages in 3s

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

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react-todo-app2 at /home/tatsumi/viteでReactを復習する/react-todo-app2
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-todo-app2
  npm start

Happy hacking!