application.jsの記述が原因でjQueryUIが動かなかった話
前置き
作成中のTodoアプリケーションで、タスクのドラッグ＆ドロップで並び順を自由に替えられるようにしよう！ということで
こちらの記事を参考に実装を進めていたんですが、手順を完了してもドラッグ＆ドロップが動かない……
application.jsファイルへの記述が足らなかったことが原因でした。
今回はこのapplication.jsファイルの役割とjQueryを動かすのに必要な記述をまとめていきます。
前提
そもそもこのapplication.js、ひいてはassetsディレクトリって一体何なの？ということなんですが、
アセットパイプライン（Asset Pipeline)というRailsの機能の一部分であります。
アセットパイプラインについてはRailsチュートリアル第4版の5.2.1、 Rails初学者がつまずきやすい「アセットパイプライン」が分かりやすいです。
要するに
①CSS、JavaScript、画像など、HTMLを装飾する要素を専用のディレクトリにまとめることで開発をしやすくし
②実際にアプリケーションが動作するときにはそれらのファイルがアセットパイプラインの機能によって効率的にまとまり、ファイルサイズを最小化してくれるのでサイトの読み込み時間も短くなる
という便利な仕組みです
application.js って何？
アセットパイプラインではCSS、JavaScript、画像などの「アセット」はapp/assetsディレクトリ配下にあるそれぞれのフォルダに置きます。
JavaScriptsとstylesheetsフォルダにはそれぞれapplication.js / application.scssというファイルがあります。
このファイルの役割は
このRailsアプリケーションでは、このJavaScript/CSSを使うよ～
という宣言をすることです。
この宣言（ディレクティブ）によってアセットパイプラインのSprocketsという機能がファイルを読み込んで効率的にまとめてくれます。
application.jsの中身
今回はこのapplication.jsファイルの記述を間違えていたのでjQueryUIを利用した並び替えがうまく動きませんでした。
かなり長い時間を取られてしまったので、このファイルの中身についてまとめておきます。
(説明を簡略化するため、jQueryUIの動作に関するもののみ記述しています)
// //= require rails-ujs //= require jquery //= require turbolinks //= require jquery-ui/widgets/sortable //= require_tree .
最終的にこんな感じできちんと動作しました。一つ一つの記述を解説していきます。
(//= はSprocketsに対してどのJavaScriptを使うかという宣言のやり方です )
//= require rails-ujs
RailsでJavaScriptを使えるようにする
//= require jquery_ujsという記述はrails5.1から不要になったようです
//= require jquery
jQueryを読み込む
//= require turbolinks
ページ遷移をAjaxに置き換え、高速化する。Rails4から標準装備になった。
//= require jquery-ui/widgets/sortable
jQueryUIのsortable機能を使えるようにする
//= require_tree .
app/assets/javascripts以下の全てのjsファイルを読み込む
(これによってtable_sort.js.coffeeが読み込まれる)
注意点
実装したjQueryの機能がページ遷移後に動かなくなる場合、Rails5以降は以下の記事にあるような処理が必要です！
