Reactのバージョン確認方法｜最新版へのアップデート手順

現在使っているReactのバージョン、把握していますか？

「最新版にアップデートしたいけど、どうやればいいの？」「アップデートで何か壊れたりしない？」

こんな風に思ったことはありませんか？

React開発では、バージョン管理はとても大切なんです。セキュリティの更新や新機能の追加、バグ修正など。定期的なアップデートで、アプリの品質と安全性を保てます。

この記事では、Reactのバージョン確認方法を紹介します。それから、安全にアップデートする手順も解説しますね。

初心者の方でも大丈夫です！具体的な手順とともに、わかりやすくお伝えします。

現在のReactバージョンを確認する方法

まずは、今使っているReactのバージョンを確認しましょう。いくつかの方法があるので、順番に見ていきますね。

package.jsonファイルで確認する

一番確実で基本的な方法です。プロジェクトのルートにあるpackage.jsonを開いてみてください。

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

ここから何がわかるのか、説明しますね。

"react": "^18.2.0"の部分を見てください。これがReactライブラリ本体のバージョンです。

"react-dom": "^18.2.0"は、DOM操作用のライブラリです。基本的にreactと同じバージョンになります。

"react-scripts": "5.0.1"は、Create React Appの場合のビルドツールです。これもバージョン管理の対象になります。

注意点がひとつあります。 ^18.2.0の^マークは、マイナーバージョンの自動更新を許可する記号なんです。つまり、実際にインストールされているバージョンとは違う場合があります。

npmコマンドで確認する

より正確なバージョンを知りたい時は、npmコマンドを使いましょう。

# 現在のプロジェクトのReactバージョン
npm list react

# react-domも一緒に確認
npm list react react-dom

# すべての依存関係を表示
npm list

実行すると、こんな感じの結果が表示されます。

$ npm list react
my-react-app@0.1.0 /Users/username/my-react-app
└── react@18.2.0

$ npm list react react-dom react-scripts
my-react-app@0.1.0 /Users/username/my-react-app
├── react@18.2.0
├── react-dom@18.2.0
└── react-scripts@5.0.1

このコマンドなら、実際にインストールされているバージョンがわかります。 package.jsonの内容と違っていることもあるので、確認してみてくださいね。

yarnを使っている場合

プロジェクトでyarnを使っている方は、こちらのコマンドです。

# yarnでのバージョン確認
yarn list --pattern react

# 特定パッケージの詳細情報
yarn info react

# アウトデートなパッケージの確認
yarn outdated

yarnは情報が見やすく表示されるので、おすすめですよ。

プログラム内でバージョンを確認

Reactアプリケーション内でも、バージョンを確認できます。開発中の動作確認に便利ですね。

import React from 'react';

function VersionChecker() {
  console.log('React Version:', React.version);
  
  return (
    <div>
      <h2>React Version Information</h2>
      <p>Current React Version: {React.version}</p>
    </div>
  );
}

このコンポーネントを使うと、画面にバージョンが表示されます。 React.versionで、現在動いているReactのバージョンがわかるんです。

ブラウザのコンソールでも確認できます。開発者ツールを開いて、コンソールにReact.versionと入力してみてください。

アップデート前の準備

「いきなりアップデートして大丈夫？」心配になりますよね。

安全にアップデートするために、事前準備をしっかりやりましょう。

プロジェクトのバックアップ

まずはバックアップです。何かあった時に元に戻せるよう、準備しておきましょう。

# Gitを使っている場合
git status
git add .
git commit -m "Before React update - version X.X.X"
git push origin main

Gitを使っていれば、コミットしておくだけで安心です。コミットメッセージには、アップデート前であることを書いておきましょう。

Gitを使っていない場合は、フォルダ全体をコピーしてください。

# プロジェクト全体のバックアップ
cp -r my-react-app my-react-app-backup

依存関係の確認

現在の依存関係を確認しておきます。他のライブラリとの相性も大切ですからね。

# 現在の依存関係を詳しく確認
npm list --depth=1

# セキュリティ監査
npm audit

# 古いパッケージの確認
npm outdated

npm auditは、セキュリティの問題があるパッケージを教えてくれます。アップデートのついでに、セキュリティも確認しておきましょう。

互換性の確認

React 18のような大きなアップデートでは、他のライブラリとの互換性を確認しましょう。

よく使われるライブラリの互換性をチェックしてください。

react-router-dom
redux / @reduxjs/toolkit
styled-components
material-ui / mui
antd

各ライブラリの公式サイトで、React 18対応状況を確認できます。「○○ React 18 互換性」で検索してみてくださいね。

テスト用ブランチの作成

大きなアップデートの場合は、テスト用のブランチを作ることをおすすめします。

git checkout -b react-update-test
git push -u origin react-update-test

このブランチでアップデートを試してみましょう。問題なければ、メインブランチにマージします。

安全で確実な方法ですよ。

Reactのアップデート手順

それでは、実際のアップデート作業に入りましょう。段階的に進めていくので、安心してくださいね。

マイナーアップデート（18.1.0 → 18.2.0）

まずは、比較的安全なマイナーアップデートから。破壊的変更がないので、安心して実行できます。

# 1. 現在のバージョン確認
npm list react react-dom

# 2. マイナーアップデートの実行
npm update react react-dom

# 3. テストの実行
npm test

# 4. 開発サーバーの起動確認
npm start

npm updateコマンドが便利です。 package.jsonの範囲内で、自動的に最新版にアップデートしてくれます。

特定のバージョンを指定したい場合は、こちらです。

npm install react@18.2.0 react-dom@18.2.0

アップデート後は、必ずテストを実行しましょう。問題がないことを確認してから、次に進んでくださいね。

メジャーアップデート（17.x → 18.x）

メジャーアップデートは慎重に進めましょう。破壊的変更が含まれる可能性があります。

# 1. React 18への更新
npm install react@18 react-dom@18

# 2. React Scriptsの更新（Create React Appの場合）
npm install react-scripts@5

# 3. TypeScriptを使っている場合
npm install @types/react@18 @types/react-dom@18

# 4. 関連パッケージの更新
npm install @testing-library/react@13

# 5. 依存関係の解決
npm install

メジャーアップデートでは、関連パッケージも更新が必要になることが多いです。 TypeScriptの型定義やテストライブラリなど、忘れずに更新しましょう。

Create React Appのアップデート

Create React Appで作成したプロジェクトの場合、react-scriptsも更新します。

# react-scriptsのアップデート
npm install react-scripts@latest

# Create React App自体の情報確認
npx create-react-app --info

react-scriptsは、ビルドやテストを担当する重要なパッケージです。 Reactのバージョンと合わせて、更新しておきましょう。

React 18特有のアップデート作業

React 18にアップデートする場合、特別な作業が必要になります。新しいAPIに変更されているからなんです。

createRootへの移行

一番重要な変更がこれです。 ReactDOM.renderからcreateRootに変更されました。

従来の書き方（React 17以前）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

新しい書き方（React 18）：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

変更点を説明しますね。

まず、react-dom/clientからcreateRootをインポートします。次に、createRootでルート要素を作成します。最後に、作成したルートのrenderメソッドでアプリを表示します。

この変更により、React 18の新機能が使えるようになります。

src/index.jsの完全な移行例

実際のファイル全体だと、こんな感じになります。

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// React 18のcreateRootを使用
const container = document.getElementById('root');
const root = createRoot(container);

// StrictModeの使用（React 18の新機能をテストするため）
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// パフォーマンス測定
reportWebVitals();

StrictModeも一緒に使うことをおすすめします。 React 18の新機能が正しく動作しているか、チェックしてくれますよ。

Automatic Batchingの恩恵

React 18では、Automatic Batchingという新機能があります。複数の状態更新を自動的にまとめて、パフォーマンスを向上させてくれます。

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  // React 18では、これらの更新が自動的にバッチ化される
  function handleClick() {
    setCount(c => c + 1);
    setFlag(f => !f);
    // React 18: 1回のレンダリングで両方更新
    // React 17: 2回のレンダリング
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Flag: {flag.toString()}</p>
      <button onClick={handleClick}>更新</button>
    </div>
  );
}

これまでは、同期的な更新でしかバッチ化されませんでした。 React 18では、Promise や setTimeout 内でもバッチ化されます。

パフォーマンスが向上するので、嬉しい変更ですね。

よくあるトラブルと解決方法

アップデート時に発生しやすい問題と、その解決方法をご紹介します。「エラーが出た！」という時も、落ち着いて対処しましょう。

エラー1: "ReactDOM.render is no longer supported"

React 18にアップデートした後、よく見かけるエラーです。

原因: React 18でAPIが変更されたため 解決策: createRootに移行する

// 変更前（エラーが出る）
ReactDOM.render(<App />, document.getElementById('root'));

// 変更後（正しい書き方）
const root = createRoot(document.getElementById('root'));
root.render(<App />);

先ほど説明した移行作業を行えば、解決します。

エラー2: "Cannot read property 'version' of undefined"

react-scriptsのバージョン不整合で起こることが多いエラーです。

解決策: 依存関係のクリーンインストール

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

node_modulesを削除して、きれいにインストールし直します。時間はかかりますが、確実な方法ですよ。

エラー3: パッケージ競合の解決

複数のパッケージでReactのバージョンが異なる場合に発生します。

# 依存関係の競合確認
npm ls react
npm ls react-dom

# ピア依存関係の警告解決
npm install --legacy-peer-deps

--legacy-peer-depsオプションで、古い依存関係解決を使えます。一時的な解決策として有効です。

TypeScriptエラーの対処

TypeScriptプロジェクトでは、型定義の更新でエラーが出ることがあります。

**"Property 'children' does not exist"**エラーの場合：

// 修正前
const Component: FC<Props> = ({ children }) => { ... }

// 修正後
const Component: FC<PropsWithChildren<Props>> = ({ children }) => { ... }

PropsWithChildrenを使うことで、children propの型が正しく認識されます。

ESLintエラーの対処

新しいJSX Transformを使う場合、ESLintの設定も更新が必要です。

.eslintrc の設定更新：

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

React 18では、JSXでReactのインポートが不要になりました。 ESLintの設定も、それに合わせて更新しましょう。

アップデート後の確認作業

アップデートが完了したら、しっかりと動作確認を行いましょう。「動いてるから大丈夫」と思っても、念入りにチェックすることが大切です。

基本的な動作確認

まずは、アプリケーションの基本機能をチェックします。

アプリケーションの起動確認
主要な画面の表示確認
ナビゲーションの動作確認
フォーム送信の動作確認

実際にユーザーが使う機能を、ひとつずつ確認してください。「あれ？この機能が動かない」となる前に、発見できます。

パフォーマンスの確認

React 18では、パフォーマンスが向上しているはずです。体感できるかどうか、確認してみましょう。

# ビルドサイズの確認
npm run build

# Bundle analyzer のインストール
npm install --save-dev webpack-bundle-analyzer

# ビルド後のBundle分析
npx webpack-bundle-analyzer build/static/js/*.js

Bundle analyzerを使うと、ファイルサイズが視覚的にわかります。アップデート後にサイズが変わったかどうか、確認できますよ。

テストの実行

自動テストがある場合は、必ず実行しましょう。

# 全テストの実行
npm test -- --coverage --watchAll=false

# ビルドテスト
npm run build

# 本番ビルドでの動作確認
npm install -g serve
serve -s build

テストが通らない場合は、アップデートの影響を受けている可能性があります。エラーメッセージをよく読んで、修正しましょう。

ブラウザでの確認

複数のブラウザで動作確認することも大切です。

Chrome での動作確認
Firefox での動作確認
Safari での動作確認
モバイルブラウザでの確認

特にSafariは、他のブラウザと動作が異なることがあります。 iOSユーザーも使うアプリの場合は、必ずチェックしてくださいね。

まとめ

Reactのバージョン確認とアップデート手順について、詳しく解説しました。

バージョン管理は、アプリの品質を保つために重要な作業です。セキュリティの更新、パフォーマンスの向上、新機能の活用。定期的なアップデートで、これらの恩恵を受けることができます。

特にReact 18のようなメジャーアップデートでは、新しいAPIへの対応が必要です。でも、段階的に進めることで、安全にアップデートできます。

重要なポイントをおさらいしますね。

事前のバックアップを忘れずに
段階的なアップデートで安全に進める
十分なテストで動作確認する
問題が起きても、慌てずに対処する

定期的なアップデートを習慣にして、常に最新の安定版を使いましょう。より良いReactアプリケーションを開発・運用できるはずです。

今回の手順を参考に、計画的なアップデート作業を進めてみてくださいね。きっと、スムーズにアップデートできると思います！

Reactのバージョン確認方法｜最新版へのアップデート手順

現在のReactバージョンを確認する方法

package.jsonファイルで確認する

npmコマンドで確認する

yarnを使っている場合

プログラム内でバージョンを確認

最新バージョンを確認する

npmで最新バージョンを調べる

オンラインで最新情報をチェック

バージョン番号の読み方

アップデート前の準備

プロジェクトのバックアップ

依存関係の確認

互換性の確認

テスト用ブランチの作成

Reactのアップデート手順

マイナーアップデート（18.1.0 → 18.2.0）

メジャーアップデート（17.x → 18.x）

Create React Appのアップデート

React 18特有のアップデート作業

createRootへの移行

src/index.jsの完全な移行例

Automatic Batchingの恩恵

よくあるトラブルと解決方法

エラー1: "ReactDOM.render is no longer supported"

エラー2: "Cannot read property 'version' of undefined"

エラー3: パッケージ競合の解決

TypeScriptエラーの対処

ESLintエラーの対処

アップデート後の確認作業

基本的な動作確認

パフォーマンスの確認

テストの実行

ブラウザでの確認

まとめ

関連記事

Untitled

Untitled

Untitled