環境変数を使って他の人にも使いやすいプログラムにする！
記事IT・テクノロジー
環境変数を使って他の人にも使いやすいプログラムにする！
前回はハードコーディングの話を紹介しましたが、開発者以外が既に作成されたプログラムを再利用する際、プログラムの設定を変更したい場合があります。ブログサービスの例では、提供するブログのタイトルなどを変えたい場合があります。そのような事を考えると、そうした変更がやりやすいプログラムにしておくと、再利用する場合に使いやすいプログラムになります。その際に利用できるのが「環境変数（Environment variable）」です。この記事では、Vite を利用して作成した Vue のプロジェクトで環境変数を利用する例を紹介します。
どんな場合に環境変数を使うか？
これまで紹介してきた、Vue を利用してブログサービスを提供するプログラムを考えてみます。 今までタイトルを入れていませんでしたが、例えばブログのタイトルなどに利用すると便利です。
一番簡単にプログラムを書く場合、プログラムに直接、「タイトル」を埋め込んで仕舞えば良いことになります。
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vueを利用したブログサービスの作り方",
};
},
};
</script>
のように記述すれば、タイトルを表示する事が可能です。
しかし、この場合は、このタイトルを変更する場合には、「プログラムの変更」が必要になります。 プログラムを再利用したりしない場合には、これでも大きな問題ではありませんが、例えば同じプログラムを別のブログサービスでも利用することを考えた場合はちょっと不便です。
そうした場合には、「環境変数」という仕組みを使うと便利です。
環境変数の使い方
この記事では、Vite を使って Vue のプロジェクトを作成した場合について紹介します。
（＊）Vue CLI などを使って Vue のプロジェクトを作成している場合はやり方が違います。
Vite を使って Vue のプロジェクトを作成した場合には、プロジェクトのフォルダに「_.env_」というフォルダを作成します。そのファイルの中に環境変数を設定します。
.envの例です。
VITE_SAMPLE=Vueを利用したブログサービスの作り方
の「_VITE_SAMPLE_」という環境変数を設定します。
Vue の部品側では、以下のようにコードを変更します。
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: import.meta.env.VITE_SAMPLE,
};
},
};
</script>
これで最初に紹介した書き方と同じ表示をさせる事ができます。 ポイントは、「import.meta.env.VITESAMPLE」で、環境変数「_VITE_SAMPLE」を呼び出すことができます。
別の名前に変更する場合には、*.env*の設定を変更します。このように、利用形態によって変更される事が想定される値を .envにまとめておけば、この設定を変更するだけで、プログラムの本体には触れずに変更が可能になります。
Vite を使ってプロジェクトを作成した場合には、環境変数の最初に「_VITE__」をつけておく必要があります。これがついていないと上手く機能しません。
環境変数を利用する場合の注意
環境変数を利用する場合には、ちょっとした注意が必要です。 例えば、上の例では、*.envファイルに環境変数が設定されていないと、タイトルの部分が何も表示されなくなってしまいます。 表示されなくても問題がない場合にはそれでも良い事になりますが、値がないとプログラムがきちんとした動作をしない場合もあるので、必ず.env*で設定するようにするか、プログラム側でデフォルトの値を決めておく必要があります。
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
const DEFAULT_TITLE = "ブログ";
const TITLE = import.meta.env.VITE_SAMPLE
? import.meta.env.VITE_SAMPLE
: DEFAULT_TITLE;
export default {
data() {
return {
title: TITLE,
};
},
};
</script>
のように書いておくと、環境変数が設定されていない場合は、DEFAULT_TITLEの値を使ってプログラムが表示するようにすることができます。
const TITLE = import.meta.env.VITE_SAMPLE
? import.meta.env.VITE_SAMPLE
: DEFAULT_TITLE;
の部分がポイントです。
その他の環境変数の利用方法
そのほかにも、環境変数を利用すると便利な点があります。 今回紹介している、Vue を利用したブログサービスの例では、Firebase を利用して投稿に利用する Markdown 形式のファイルからメタデータを取り出して、Firestore に保存することで、効率よく表示を行えるようにしています。また、投稿データは、Firebase のストレージに保存しています。
既に紹介している通り、こうした Firebase の機能を使うには、Firebase のプロジェクト情報をプログラムに教えてあげる必要があります。この Firebase のプロジェクト情報も、利用者が違う場合別のものになります。こうした情報もプログラムに直接埋め込むのではなく、環境変数を利用すると変更が簡単になります。
特に、GitHub などを使ってプログラムを公開する場合などは、この環境変数のファイルを「.gitignore」で指定しておけば、GitHub のレポジトリには入れないようにする事が可能なので、セキュリティ上の問題も少なくなります。こうした事は、ちょっとした事ですが GitHub でコードを公開する場合には考えた方が良い情報になります。
まとめ
この記事で紹介したように、環境変数を利用すると、プログラムとプログラムの設定部分を分けることが可能になります。プログラムのコードを公開したり、他の人が利用する事を想定した場合には、環境変数を利用することで、他人とは共有したくない情報を別にすることが可能になります。
インターネットでコードを共有することも多いので、環境変数を上手に使うことはとても大切ですし、共有したプログラムを他の人が利用する場合にもプログラムに手を加える必要がないので便利です。
ただし、どのような環境変数が設定可能なのかをきちんとドキュメントにしておかないと、環境変数が設定されないケースもあるので、ドキュメントの作成も重要になります。また、プログラム側でも環境変数が設定されない場合も想定してプログラムを作成しておく事が重要です。
