6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails] scriptタグ内でRuby/Railsのメソッドを使用する際のescape_javascriptについて

Last updated at Posted at 2020-02-14

この記事を書くきっかけ

jQueryを書いていると、scriptタグ内でRailsのメソッド(正確にはapplication_helper内のメソッド)を使用したいときがあります。
正しい書き方をしないと正確に呼び出せないため、失敗した書き方と成功した書き方をまとめます。

前提

current_userの属性によってpathを切り替えるメソッドを
def hogehoge_path_forとし、application_helper.rbに定義します。

application_helper.rb
def hogehoge_path_for
  if ...
   hoge_path
  else
   hogehoge_path
  end
end

これをとあるviewのscriptタグ内で呼び出します。
let path = hogehoge_path_forの返り値
としたいです。

失敗例1

あるview
<script>
  let path = <% hogehoge_path_for %>;
</script>

普通はこう考えるはずですが、これだと呼び出せません。

失敗例2

あるview
<script>
  let path = <% hogehoge_path_for %>;
</script>

これも呼び出せません。

失敗例3

escape_javascriptというメソッドを使用します。
なお、これはaliasとしてjの使用が許されています。

あるview
<script>
  let path = <% escape_javascript hogehoge_path_for %>;
</script>

上記は下記と同じです。

あるview
<script>
  let path = <% j hogehoge_path_for %>;
</script>

どちらも失敗します。

失敗例4

=をつけます。

あるview
<script>
  let path = <%= escape_javascript hogehoge_path_for %>;
</script>

上記は下記と同じです。

あるview
<script>
  let path = <%= j hogehoge_path_for %>;
</script>

これもどちらも失敗します。

失敗例5

=を外して、''で囲います。

あるview
<script>
  let path = '<% escape_javascript hogehoge_path_for %>';
</script>

上記は下記と同じです。

あるview
<script>
  let path = '<% j hogehoge_path_for %>';
</script>

これもどちらも失敗します。

成功例

=をつけて''で囲います!

あるview
<script>
  let path = '<%= escape_javascript hogehoge_path_for %>';
</script>

上記は下記と同じです。

あるview
<script>
  let path = '<%= j hogehoge_path_for %>';
</script>

これで無事呼び出すことができました。

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?