【Rails】RailsのJavaScriptをクラス分け【JavaScript】

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

RailsでJavaScriptを読み込んでいるかと思いますがクラス分けをしていないではないでしょうか。 そんな時の参考になればと思います。

なぜクラス分けした方がいいのか。

アセッツパイプラインでjsやcssを結合して高速化してくれますがjsを一括で読み込んでしまうため、アクションによってjsの機能を切り替える必要があるためです。

機能を切り替えないとどんなことが起こるのか。

products.coffee

$ ->
  $('.name').css('font-size', '10px')

categories.coffee

$ ->
  $('.name').css('font-size', '20px')

この場合には読み込まれた順番によって.nameのフォントサイズが変わってしまいます。

クラス分けの手順

各コントローラ各アクション毎にクラスをnewするようにします。

1. app/views/layouts/application.slim

= javascript_include_tag 'application', 'data-turbolinks-track' => true
      .
      .
      .
body data-controller="#{controller.controller_name}" data-action="#{controller.action_name}"

2. app/assets/javascripts/application.coffee

#= require_tree .

3. app/assets/javascripts/js_loader.coffee

$ ->
  new JsLoader

class JsLoader
  constructor: ->
    @initialize_script_classes()

  initialize_script_classes: ->
    controller_name = $('body').data('controller')
    action_name = $('body').data('action')
    page_name = "#{contoller_name}:#{action_name}"

    switch page_name
      when 'products:index', 'products:show'
        new Product
      when 'categories:new', 'categories:create',  'categories:edit',  'categories:update'
        new Category
      .
      .
      .

4. app/assets/javascripts/products.coffee

class @Product
  constructor: ->
    @initialize_select_box()

  initialize_select_box: ->
    $('select').click ->
      .
      .
      .

これでクラス分け完了。

ついでにCSSも分ける

各コントローラ各アクション毎にstyleを切り替えられるようにします。

1. app/views/layouts/application.slim

= javascript_include_tag 'application', 'data-turbolinks-track' => true
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
      .
      .
      .
body id="#{controller.controller_name}-#{controller.action_name}" data-controller="#{controller.controller_name}" data-action="#{controller.action_name}"

2. app/assets/stylesheets/application.scss

@import 'products';
@import 'categories';
.
.
.

3. app/assets/stylesheets/products.scss

#products-index {
  p {
    color: red;
  }
}

#products-show {
  p {
    color: blue;
  }
}