Vue CLI を使った場合の環境変数

Vue CLI を使った場合の環境変数

これまで、Vite で Vue のプロジェクトを作成した場合の環境変数の扱い方を紹介してきました。しかし、Vue のプロジェクトを作成する際に、Vue が提供している「Vue CLI」を利用している方もたくさんいらっしゃるようなので、この記事では、Vue CLI でプロジェクトを作成した際の環境変数の扱いについて紹介しておきます。

なぜやり方が違うか？

Vue の中で使う環境変数なのに、なんでやり方が違うか不思議に思われる方も多いと思います。まずは簡単になぜやり方が違うのかを簡単に説明しておきます。 npmなどのパッケージ管理アプリを利用して、Vue などのフレームワークを利用する場合には、作成したアプリを公開するためのイメージを作る仕組みが必要です。この仕組みが、Vue CLI だったり Vite というように違うの一番の理由です。

インターネットに公開する際は、作成したアプリを HTML と Javascript、そして CSS のファイルにして Web ホスティングをする Web サーバーにコピーする必要があります。開発用のサーバーの場合でも同様で、Web ブラウザでアプリを動作させるためには、基本的に Web ブラウザが扱える「形」にする必要があるためです。

その仕組みが違うので、環境変数の扱い方も違っています。

Vue CLI で環境変数を利用する場合は？

Vite でプロジェクトを作成した場合には、環境変数を「_.env_」というファイルで、最初に「VITE＿」をつけて、「VITE_XXXX」のように記述して、Javascript のプログラム側では「import.meta.env.VITE_XXXX」のように呼び出します。

Vue CLI でプロジェクトを作成した場合も、やり方自体は似ています。

＊　環境変数のファイルは基本的には同じ「_.env_」

＊　環境変数の最初（prefix）は「VUEAPP」をつける(例：VUE_APP_XXXX)

＊　Vue の Javascript で「process.env.VUE_APP_XXXX」のように呼び出す

という形で利用します。

違うのは、最初につける Prefix とプログラムからの呼び出し方が違います。

開発用と公開用で値を変えたい場合は？

ところで、環境変数の利用方法は Vue CLI でも Vite でも他に利用する方法があります。

これまで、シンプルにするために「_.env_」を使っていましたが、これを拡張した形で利用可能です。

＊　.env: 全ての場合で有効な環境変数の定義

＊　.env.local: 全ての場合で有効な環境変数の定義で git に無視されます

＊　.env.[mode]: 指定したモードのみで有効

＊　.env.[mode].local: 指定したモードのみで有効で git に無視されます

のように使い分ける事ができます。 前回の記事では、「_.env_」を使って、Git で無視するために、「_.gitignore_」に書いていましたが、「.env.local」に書くと同じ事が実現できます。Git で共有したくない情報の場合は、「_.env.local_」にしておくと、万が一「_.gitignore_」に書き忘れても共有される事はないので、使い分けるようにすると便利です。

最後の二つはモード、例えば、開発用(development)と公開用（production）で別の値を利用したい場合は、「.env.DEV」と「.env.PROD」のようにして別々の値を定義する事ができます。

これも、使い方は、Viet と Vue CLI では使い方が若干違うので注意が必要です。

詳細は、Vite や Vue CLI のドキュメントを参照してください。 イメージを作成する際にどちらのモードで作成するかを指定すると、必要に応じて環境変数の値を選んでイメージを作成してくれます。

例えば、開発用と公開用で Firebase の別のプロジェクトを利用する際などに便利です。

設定とプログラムを分ける理由

前回も紹介していますが、プログラムを利用する「設定」と「プログラム」を分けるのには理由があります。 一つは、出来るだけプログラム本体は必要がない場合は触れないというためです。特にプログラムのバージョンを管理している場合、プログラムに触ればバージョンを変える必要があります。これをきちんとやらないと、バグの修正と修正が必要なバージョンがわからなくなってしまいます。 環境変数は、変数の値をまとめてプログラムの外側で管理、返納できるようにしているので、環境変数を利用すると、プログラムのバージョン管理がシンプルになります。

もう一つは、変更箇所のミスを最小限にするためです。プログラムを書いた人はどこでその値を使っているかがわかりますが、プログラムを書いた人以外の人には、コードを読まないとその場所がわからないからです。プログラムを書いた人でも、時間が経つとどこで使っていたかを正確に記憶しておくのは難しいいのであらかじめ値の変更が想定されるような場合は、環境変数を使った方が、プログラムの管理が効率的にできます。

その場限りのプログラムの場合は、こうした配慮がなくても大きな問題ではありませんが、長期間に渡ってプログラムを管理・維持する場合には、こうした配慮はとても大切になります。

さらに、環境変数に関する詳しい設定をドキュメントとして残しておくこともとても重要です。これがないと、どんな設定が可能かとか、何が変わるのかがコードを読まないとわからない場合が多くなるからです。

まとめ

環境変数を利用すると、プログラムの本体と、プログラムの設定を別々に管理できるので、プログラムのソースコードの管理がシンプルになります。 特に、長期間にわたってプログラムを利用する場合には、不具合の修正とプログラムのバージョンをきちんと把握しておかないと、修正の適用が面倒になります。

また、直接コードを変更する場合は、完全にミスを防ぐのは難しいので、出来るだけコードに触れずに設定を変えられる仕組みを予め作っておくと、変更ミスによる不具合も減らすことが可能です。

プログラミングというと、プログラムを書くことに目が行きがちですが、プログラムの管理や設定にも目を向けると、より良いプログラムの開発ができるようになります！