【Rails6】環境変数をjsファイルで読み込む方法

環境

macOS: Big Sur Ver11.2.2
Rails: 6.0.0
Ruby: 2.6.5
Webpacker 4.3.0

やりたいこと

Google MapのAPIを使ってRailsアプリに地図を表示したところまでは良かったが、コンソールで発行したAPIキーを環境変数に入れ忘れていた。
そこで、今回は google_map.js というJavaScriptのファイル内で環境変数を設定することにしたい。

※ググったところ、gemを入れて .env というファイルを作ってそこに環境変数を記述するという方法もあるみたい。興味があればググってみてください。

手順

①ターミナルで環境変数を設定

% vim ~/.zshrc

vimの操作画面が出たら「i」を押すと編集モードになる（画面下部に「insert」と表示が出る）
編集モードになったら以下のように環境変数（名前は自由）を設定する。

export GOOGLE_MAPS_API_KEY='Googleコンソールで発行したAPIキー'

記述したら、escキーを押すと編集モードから離脱するので、離脱を確認したら「:wq」を打って保存して終了しよう。
通常のターミナルの画面に戻ったら、

% source ~/.zshrc

と入力し、環境変数を実行。

②Railsファイルの設定

以下のファイルを新しく生成し、中身を記述します。
[ ]内の変数がさっき設定した環境変数名と同名になっています。

config/initializers/webpacker.rb

Webpacker::Compiler.env["GOOGLE_MAPS_API_KEY"] = ENV["GOOGLE_MAPS_API_KEY"]

最後に、JavaScriptのファイルに実際に環境変数を読み込む記述をします(3行目です)。
変数展開してURLの中に環境変数を入れているのでバッククオートでURLを囲っているので注意！

// Create the script tag, set the appropriate attributes
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}&callback=initMap`;
script.async = true;

// Append the 'script' element to 'head'
document.head.appendChild(script);

// Attach your callback function to the `window` object
window.initMap = function () {
  // マップの表示領域を取得
  const target = document.getElementById('map');
  // ジオコーディングのインスタンスの生成
  const geocoder = new google.maps.Geocoder();
  // 店舗詳細ページのテキストから住所を取得
  const address = document.getElementById('address').innerText;

  // 引数に取得した住所と関数を渡し、Google MapsAPIジオコーディングサービスにアクセス
  // 関数内のif文は返ってきたレスポンスに対する処理
  geocoder.geocode({ address: address }, function (results, status) {
    if (results[0] && status === "OK") {
      // 地図の作成
      const map = new google.maps.Map(target, {
        center: results[0].geometry.location,
        zoom: 16,
      })

      // 地図内にマーカーの設置
      const marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
      });
    } else {
      alert("失敗しました： " + status);
    }
  });
};

これで生の環境変数を書いたときと同様、きちんとGoogle Mapが表示されているはず！
お疲れさまでした！