この記事はアピリッツの技術ブログ「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;
}
}