グローバルな定数をJavaScriptで作りたかった

いきさつ

Railsでモデルに定義した定数をコントローラーのどのアクションからでも呼び出せるような・・・
そんなことをJavaScriptでもやりたかった。

Railsだと（やりたいこと）

モデル

# user.rb
MY_NAME = 'Kyohei'

def piyo
  p MY_NAME
  # => 'Kyohei'
end

コントローラー

# users_controller
def hoge
  p MY_NAME
  # => 'Kyohei'
end

def huga
  p MY_NAME
  # => 'Kyohei'
end

どのメソッド（アクション）からも呼べるし、application_controllerに書いたら本当にどこからでも呼べそうな勢い。

JavaScriptだと

document.getElementById("hoge").onclick = () => {
  const MyName = 'Kyohei'
  console.log(MyName)
  // => 'Kyohei'
};

document.getElementById("huga").onclick = () => {
  console.log(MyName)
  // => 当然エラー
};

こんな時、別々の関数で同じ定数が使えたらなーと思ったのです。
もちろん定義は一回でやりたい。

やったこと

こちらの記事を参考にさせていただきました。
Object.definePropertyを使用します。

定数を作る関数を書く

まずは共通で使える関数を置くファイルを用意します。
ここではutil.jsとします。

// util.js
export const define = (name, value) => {
  Object.defineProperty(window, name, {
    value: value,
    writable: false
  });

渡ってきたnameでvalueをwindowに格納します。
また writeable: falseとすることで書き込みを不可にしています。

関数を呼び出す

タイミングはいろいろあると思いますが、
今回は画面が表示されたら定数を定義します。
先ほどのutil.jsをimportし、window.onload内でdefineを使います。

import { define } from './util';

// 画面が表示されたら定数として定義する
window.onload = () =>{
  define('MyName', 'Kyohei')
};

document.getElementById("hoge").onclick = () => {
  console.log(MyName)
  // => 'Kyohei'
};

document.getElementById("huga").onclick = () => {
  console.log(MyName)
  // => 'Kyohei'
};

画面表示時にグローバル変数windowにMyNameを定義したので
どこからでも呼び出せるようになりました。

あとがき

そもそもフレームワーク(Rails)と言語(js)で比較していることがおかしいかもしれませんが、
つまりはこういうことがやりたかったというお話でした。
いつでもグローバルな定数作れてすっきりです。