（jQuery,rails）特定のview(url)でグローバル変数を定義

こんにちは！

この前個人アプリを作成しているときにjs（jquery）とgem 'gon'について少しハマったのでご紹介しようと思います

なににハマったかと言うと、特定のビューの中で使用するjsの変数をグローバル変数として指定したく、jsのグローバル変数にgem'gon'で指定した値を代入したところ、アクションの外でエラーが出てしまい、他のjsファイルの実行の妨げになってしまったのです（ちょっと何言ってるかわかりづらくてすみません）

もう詳しい方ならこの一文を見ただけで察しはついているのではと思いますが、この時の状況と解決を簡単にご紹介します

'gon'とは

railsのコントローラで定義した変数をjs内で使用できるようにしてくれるgemです
https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296

グローバル変数とは

〇〇.js

test_global = hogehoge
$(function() {
   //処理
});

このようにjsの関数の外に変数を定義すると、どこでも使える変数を定義することができます（グローバル変数）
また、関数の中であっても'var'など付けず、変数名のみで変数を指定しても、グローバル変数として定義することができます

起こったこと

〇〇.js

test_gon = gon.test_gon
$(function() {
   //この中で上記のグローバル変数を使いたい 
});

私はこんな感じでグローバル変数を定義しました
すると、このjsファイルが実行されるビューにいるとき（gonで変数を指定しているアクションを実行したとき）は問題ないのですが、それ以外のビューにいる場合エラーになってしまいます

よく考えればわかることですが、アクション外では当然gon.test_gonは定義されていないのでエラーとなるのです

えぇ・・といってもグローバル変数にしないとやりたいことが実装できない・・
と考え、ググっていたところいい条件分岐のやり方がありました

解決

〇〇.js

if(document.URL.match("/urlの文字列")) {
  //指定する文字列がURLに含まれる場合に実行する内容
  test_gon = gon.test_gon;
}

こんな感じで指定してあげると、特定のビューで使用するグローバル変数を定義してあげることができます

ちなみに

〇〇.js

if(document.URL.match("/urlの文字列|/urlの文字列")) {
  //指定する文字列がURLに含まれる場合に実行する内容
  test_gon = gon.test_gon;
}

こうやって書くと、例えば/文字列/:test_id/文字列/:gon_id/のようなurlを指定することもできます
https://haayaaa.hatenablog.com/entry/2019/02/17/144329

本当jsてなんでもできちゃうのね

ともあれ指定できてよかったです

※追記

できたと思ったのですが、ページ遷移後直後のアクションで、「NaN」が表示されてしまっていました。
原因は遷移後直後にグローバル変数が読み込まれてなかったためです・・

もし同じような現象がある方は下記で解消するかもしれません。
上記の〇〇.jsの記述に

$(document).on('turbolinks:load', function() {
  if(document.URL.match("/urlの文字列|/urlの文字列")) {
  //指定する文字列がURLに含まれる場合に実行する内容
  test_gon = gon.test_gon;
});

でこんな感じで囲うとうまくいきました。
あと、この追記を記載する前は、グローバル変数に「var」をつけて指定していましたが、turbolinksで囲う場合は「var」をつけず指定しないとローカルな変数となって別の関数の中で使用できなくなってしまいます。
もし編集前のこの記事を参考にしている方がいらっしゃいましたらすみませんでした・・

参考としてください！！