RailsでJavascriptをURLに紐付ける [CoffeeScript]

概要

URLごとに発火するJSを１対１にする方法を紹介します！
いまのところ、これが一番シンプルかつ堅牢で、キャッチアップが楽かなと感じています＾＾

コード

３つのステップで実現します

1. DOMにdata-controller data-actionを追加
2. JSが読み込まれたら、DOMからコントローラ名、アクション名を取得
3. コントローラとアクションに対応する、クラスのメソッドを実行

下記のコードのProjectNameのところは、ネームスペースとして機能します、
これによって、ActiveAdmin等プラグインのJSと衝突することを回避できます
プロジェクトごとに、適切なネームスペース名に置き換えます

views/layouts/application.html.erb

html
  head
    title ProjectName
  / 1. DOMにdata-controller data-actionを追加
  body data-controller=controller.controller_name.camelize data-action=controller.action_name
    ...

assets/javascripts/application.coffee

$( ->
  # 2. JSが読み込まれたら、DOMからコントローラ名、アクション名を取得
  controller = $('body').data('controller')
  action = $('body').data('action')
  if controller && window.ProjectName[controller]
    obj = new window.ProjectName[controller]
    if action && obj[action]
      # 3. コントローラとアクションに対応する、クラスのメソッドを実行      
      obj[action]()
)

JSファイルはコントローラごとにつくり、
下記のようにクラス名とメソッド名を、コントローラ、アクション名にします

assets/javascripts/user.coffee

(@ProjectName or= {}).Users = class
  index: ->
    $ ->
      alert 'ここはProjectNameアプリケーションのUsersコントローラのindexアクション'
  new: ->
    $ ->
      alert 'ここはProjectNameアプリケーションのUsersコントローラのnewアクション'

グローバルに使うJSファイルがあるとき

assets/javascripts/shared/
などを作り、いつもどおりJSを書いていく

参考

JavaScript Namespacing with the Rails Asset Pipeline
Write maintainable JavaScript/CoffeeScript in Rails