すべてのカテゴリ

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 のプログ

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する！前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。Firebase のプロジェクト情報Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。環境変数を利用した Firebase の初期化のコードでは、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹

環境変数を使って他の人にも使いやすいプログラムにする！前回はハードコーディングの話を紹介しましたが、開発者以外が既に作成されたプログラムを再利用する際、プログラムの設定を変更したい場合があります。ブログサービスの例では、提供するブログのタイトルなどを変えたい場合があります。そのような事を考えると、そうした変更がやりやすいプログラムにしておくと、再利用する場合に使いやすいプログラムになります。その際に利用できるのが「環境変数（Environment variable）」です。この記事では、Vite を利用して作成した Vue のプロジェクトで環境変数を利用する例を紹介します。どんな場合に環境変数を使うか？これまで紹介してきた、Vue を利用してブログサービスを提供するプログラムを考えてみます。 今までタイトルを入れていませんでしたが、例えばブログのタイトルなどに利用すると便利です。一番簡単にプログラムを書く場合、プログラムに直接、「タイトル」を埋め込んで仕舞えば良いことになります。<template>  <div>    <h1>{{ title }}</h1>  </div></template><script>export default {  data() {    return {      title: "Vueを利用したブログサービスの作り方",    };  },};</script> のように記述すれば、タイトルを表示する事が可能です。しかし、この場合は、このタイトルを

FirebaseベースのFunctionsを利用した場合の環境変数の設定方法は？Firebaseベースのファンクションを利用して、バックエンドの処理を実装する場合に環境依存の変数の値をどのように設定するかを解説しています。 環境変数を利用する理由はいくつかあります。実際のコードを特定の環境依存にしないための工夫というのが一番大きな理由です。 環境変数を利用してプログラムを管理しやすくする 環境変数を利用するとプログラムの管理がやりやすくなるという利点があります。 例えば、Webサイトを作る場合サイトのタイトルをプログラム中に直接書いてしまう方法をハードコーディングといいます。 export function Sample() {     return (         <h1>Silicon　Valley Super WareValley Super Ware</h1>         <h3>XXX-XXX-XXXX</h3>     ) } のような例です。この例ではこのようにハードコーディングしている場所が二箇所なので余り大きな問題にはなりません。しかし、他にも、住所などいろいろな情報をプログラム中にハードコーディングしている場合、別の組織のWebサイトとして転用する場合に修正が面倒になります。 少し管理しやすいように、サイトによって変わる情報の部分をまとめることができます。 const TITLE = "Silicon Valley Super Ware"; const PHONE = "xxx-xxx-xx