Reactプロジェクトを作成する際のCLIツール比較

React.js とは

一応書いておきます。

React.js とは、JavaScript のフロントエンドフレームワークで、「リアクト」と読みます。

公式サイト

最近社名が Facebook から Meta に変わった会社とかが中心になって開発しているフレームワークです。

wikipedia にはライブラリと書いてありますが、僕はフレームワークだと思ってます。

細かい話は色々ありますが、世界的に見るとフロントエンドフレームワークでは 1 番名前を聞くと思います。

React.js と Vue の違いについて

弊社では Vue(2 系)が社内開発ではメインで使われていますので Vue はご存じという想定で Vue と React の違いについて少し触れておきたいと思います。

項目	React	Vue
テンプレート	JSX 記法	HTML ベース
データバインディング	単方向性	双方向性
TypeScript との相性	◯	△
学習コスト	高い	比較的低い
公式ドキュメント	○	○
スケーラビリティ	大規模へのスケールも可	中小規模が良い
市場	世界中	アジア圏で人気
将来性	mata によるバックアップ	コミュニティベース

一般的には Vue の方が初心者に優しく日本国内でよく使われていた印象です。(Vue3 世代から React 増えた気がする)

中小規模の開発なら Vue 使うのが結構楽ということもあるんだと思います。

今でも Vue の開発速度はすばらしいです。すぐみんな触れるようになるので！

最終的にはどちらでも同じことができるので設計の問題になってきます。
そうなんだ～程度でいいと思います。

始めてみよう

まずはやってみることが大事だと思うので簡単に React のプロジェクトを始める方法を記載しておきます。

Vue3 の vite(ヴィート)があるように React にも create-react-app という CLI 機能があります。

vite でも React のプロジェクトがはじめられるので今回は 2 パターンでやってみたいと思います。

ちなみにもうどちらも TypeScript で開発する前提で解説したいと思います。

チーム開発においては TypeScript で少しでも不具合を防げた方が最終的な品質に対するメリットが大きいと感じているからです。

create-react-app

基本構文

npx create-react-app {プロジェクト名} --template typescript

# プロジェクト作成
npx create-react-app hello-react --template typescript

# フォルダ移動
cd hello-react

# 起動
npm start

自動でブラウザが起動して「http://localhost:3000/ 」に画面が表示されれば OK です。

vite

基本構文(node 7 以降)

※2 つのダッシュが必要

npm create vite@latest (アプリ名) -- --template (テンプレート名)

# プロジェクト作成
npm create vite@latest vite-hello-react -- --template react-ts

# フォルダに移動
cd vite-hello-react

# パッケージインストール(自分でやらないと駄目みたい)
npm i

# 起動(自動でブラウザは起動しませんでした)
npm run dev

結果としてはカウンター的なものが表示されます。

CLI 結果比較

フォルダ構成

create-react-app の方が若干設定ファイルが多いですが、両方そこまでの差はありませんでした。

create-react-app

📦hello-react
 ┣ 📂.git
 ┣ 📂node_modules
 ┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo192.png
 ┃ ┣ 📜logo512.png
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.test.tsx
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜react-app-env.d.ts
 ┃ ┣ 📜reportWebVitals.ts
 ┃ ┗ 📜setupTests.ts
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜tsconfig.json

vite

📦vite-hello-react
 ┣ 📂public
 ┃ ┗ 📜vite.svg
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜react.svg
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.gitignore
 ┣ 📜index.html
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts

package.json 内部

create-react-app の方が始めから色々準備してくれている感じです。
ただすべてが dependencies にいるのはあんまり素敵ではないですね。

vite はビックリするぐらい何もない。シンプルな感じです。
ただ dependencies と devDependencies が分かれているのが create-react-app より好印象でした。

CRA package.json

package.json

{
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.23",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

vite package.json

package.json

{
  "name": "vite-hello-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}