バージョン情報(package.json中のversion + コミットハッシュ)をReact.jsアプリで利用できるようにしよう

  • ReactJS
  • 小ネタ

Webアプリケーションに限らず、様々なソフトウェアはバージョニングされています。エラーレポートや機能レビュー時など、開発者にとっては重要な情報の1つです。

今回は、React.jsのアプリ(creare-react-app, CRA)でビルド時にpackage.jsongitのコミットハッシュ(短縮版)からバージョン情報を作成してアプリ側で出力する方法を紹介したいと思います。

単純にpackage.jsonに記載しているversionだけでもよいのですが、コミットハッシュ情報があるとどの時点のコミットでビルドされたものかを把握し易いため、ここでは含めるケースを取り扱います。

今回は1.2.3.{コミットハッシュ}というバージョン表記をアプリ側で参照できるようにしてみたいと思います。

※ 1.2.3の部分は仮です。package.jsonversionの内容と読み替えていただければと思います。

現在のコミットハッシュを取得

以下のコマンドを実行すると、現在のコミット(HEAD)のコミットハッシュ(短縮版)が出力されます。

--shortオプションをつけない場合は短縮版でないコミットハッシュが得られますが、バージョンにつける場合は短縮版で十分です。そうでないと結構長めの文字列になってしまいます。😅

git rev-parse --short HEAD

package.jsonのversionを取得

アプリ側でpackage.jsonをインポートする方法もありますが、それはしたくないので別の方法で実現します。

スクリプト実行時に利用できる環境変数というものがあり、そこから取得します。試しに次のコマンドをご自身のプロジェクトで実行してみましょう。

npx -c 'echo $npm_package_version'

バージョンは標準出力されましたか?

これはnpm_package_versionという変数を出力しています。この変数はpackage.jsonversionに相当します。

これを使えば良さそうですね 👍

余談① スクリプト実行時に利用できる環境変数一覧

次のコマンドで一覧が見れます。

yarn run env
npm run env

余談② dotenvファイルで環境変数を参照

.envファイル中で環境変数を参照することができます。例を次に示します。

REACT_APPプレフィックスについては、次のドキュメントを参照してください。

📖 Adding Custom Environment Variables

REACT_APP_PACKAGE_VERSION="$npm_package_version"
REACT_APP_PACKAGE_NAME="$npm_package_name"

アプリ側(JavaScript)では次のようにして利用できます。ここでは例としてコンソール出力しています。

console.log(process.env.REACT_APP_PACKAGE_VERSION);
console.log(process.env.REACT_APP_PACKAGE_NAME);

バージョン情報をアプリ側で参照

いくつか余談をはさみましたが、本題に戻ります。

繰り返しになりますが、今回は{package.json中のversion}.{短縮版コミットハッシュ}の表記のバージョン情報をアプリ側で参照できるようにします。

やり方は簡単で、ビルドコマンド実行時に環境変数を加えれば良いです。package.json中のscriptsを次のようにします。

※ 要所だけ抜粋しています。

{
  "name": "sample-project",
  "version": "1.0.8",
  "scripts": {
    "start": "REACT_APP_VERSION=\"$npm_package_version.`git rev-parse --short HEAD`\" react-scripts start",
    "build": "REACT_APP_VERSION=\"$npm_package_version.`git rev-parse --short HEAD`\" react-scripts build",
}

あとは、アプリ側(JavaScript)で次のような感じで利用できます。

process.env.REACT_APP_VERSION

/**
  * 例えば...
  * - package.jsonのversionの内容が「1.0.8」
  * - コミットハッシュが「abc1234」
  * のときは、環境変数の内容は「1.0.8.abc1234」になる。
  */

参照できるようになったバージョン情報は、フッターあたりにこっそり表示しておくか、エラーレポート、またはトラッキング情報に含める等して利用しましょう。

おわりに

今回はCRAアプリの場合で紹介しましたが、Next.jsのプロジェクトでも似たような流れでできると思います。

以上簡単な紹介でしたが、ご参考になりましたら幸いです。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚