React Redux アプリケーションで package.json からバージョン番号を取得する方法

2024-05-05

React Redux (create-react-app) で package.json からバージョン番号を取得する方法

このチュートリアルでは、Create React App で作成された React Redux アプリケーションにおいて、package.json ファイルからバージョン番号を取得する方法を説明します。バージョン番号は、アプリケーションのリリースを追跡したり、デバッグ情報に含めたりするのに役立ちます。

方法

package.json からバージョン番号を取得するには、以下の 2 つの方法があります。

process.env.npm_package_version を使用する

Create React App は、process.env.npm_package_version 環境変数に自動的にバージョン番号を設定します。この変数は、React コンポーネントや Redux アクションなど、アプリケーションコードの任意の場所からアクセスできます。

import React from 'react';

const App = () => {
  const version = process.env.npm_package_version;
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;

require を使用して、package.json ファイルを直接読み込み、バージョン番号プロパティにアクセスすることもできます。

import React from 'react';

const App = () => {
  const packageJson = require('./package.json');
  const version = packageJson.version;
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;

補足

アプリケーションのバージョン番号を表示する別の方法は、react-scripts start コマンドに --inspect フラグを渡すことです。これにより、ブラウザでデベロッパーツールが開き、バージョン番号を含むアプリケーションの環境変数が表示されます。

このチュートリアルで説明した方法は、Node.js、React.js、および npm を使用した他のプロジェクトにも適用できます。

以下のサンプルコードは、React Redux アプリケーションで package.json からバージョン番号を取得する方法を示しています。

import React from 'react';

const App = () => {
  const version = process.env.npm_package_version;
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;

このコードは、process.env.npm_package_version 環境変数を使用してバージョン番号を取得します。この変数は、React コンポーネントの App 関数内で直接アクセスできます。

require を使用する

import React from 'react';

const App = () => {
  const packageJson = require('./package.json');
  const version = packageJson.version;
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;

このコードは、require を使用して package.json ファイルを読み込み、version プロパティにアクセスします。バージョン番号は、React コンポーネントの App 関数内で packageJson.version として使用できます。

説明

上記のコードスニペットは、React コンポーネント App を定義します。
このコンポーネントは、<h1> タグを使用してアプリケーションの名前を表示し、p タグを使用してバージョン番号を表示します。
process.env.npm_package_version または packageJson.version によって取得されたバージョン番号は、p タグ内に表示されます。

実行方法

このコードを実行するには、以下の手順に従います。

Create React App プロジェクトを作成します。
上記のコードを App.js などのコンポーネントファイルに貼り付けます。
npm start または yarn start コマンドを実行してアプリケーションを起動します。
ブラウザでアプリケーションを開くと、バージョン番号が表示されます。

上記の例では、バージョン番号を p タグ内に直接表示しています。アプリケーションの要件に応じて、バージョン番号を別の方法で表示することもできます。
process.env.npm_package_version 環境変数は、Create React App によって自動的に設定されます。require を使用して package.json ファイルを読み込む場合は、アプリケーションを実行する前に package.json ファイルが更新されていることを確認する必要があります。

React Redux (create-react-app) で package.json からバージョン番号を取得するその他の方法

上記で紹介した 2 つの方法に加えて、package.json からバージョン番号を取得する方法は他にもいくつかあります。以下に、そのうちのいくつかを紹介します。

カスタムフックを使用して、package.json ファイルからバージョン番号を取得できます。この方法は、バージョン番号を複数のコンポーネントで使用する場合に役立ちます。

import React, { useState, useEffect } from 'react';

const useVersion = () => {
  const [version, setVersion] = useState('');

  useEffect(() => {
    fetch('./package.json')
      .then((response) => response.json())
      .then((data) => setVersion(data.version));
  }, []);

  return version;
};

const App = () => {
  const version = useVersion();
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;

このコードは、useVersion というカスタムフックを定義します。このフックは、package.json ファイルをフェッチし、バージョン番号を返します。App コンポーネントは、useVersion フックを使用してバージョン番号を取得し、p タグ内に表示します。

環境変数を使用する

npm config set コマンドを使用して、REACT_APP_VERSION という環境変数にバージョン番号を設定できます。この環境変数は、React コンポーネントや Redux アクションなど、アプリケーションコードの任意の場所からアクセスできます。

npm config set REACT_APP_VERSION=1.0.0

import React from 'react';

const App = () => {
  const version = process.env.REACT_APP_VERSION;
  return (
    <div>
      <h1>My React App</h1>
      <p>Version: {version}</p>
    </div>
  );
};

export default App;