JavaScript
Rails
jQuery
rails-ujs
jQueryDay 25

rails-ujsに見る、jQueryからの移行法

かつて、Railsのビューにはjquery-ujsというライブラリが使われていました。のちにrails-ujsとして、jQuery依存を外すことに成功しています。では、それはどのようになされたのでしょうか。

実際に見てみよう

rails-ujsnpmにあるので、jsDelivr経由で参照できます。実際に見ていってみましょう。

まずは、セレクタ類の定数としての定義があって、次に、.matchesを正規化するRails.matchesがあります。そして、DOMオブジェクトにデータを格納するRails.getData/Rails.setDataの組があります。

そして、読み進めていけばいくほど、「どこかで見たことのあるメソッド」にあふれていることがわかるかと思います。

  • セレクタからDOM要素を配列として得る、Rails.$
  • バブリングを利用して上位要素でイベントを拾う、Rails.delegate
  • CSRFトークンも追加するAjaxのユーティリティ関数、Rails.ajax
  • フォーム要素をクエリストリングに起こす、Rails.serializeElement

そして、HTMLメソッドの変更やdata-confirmへの対応などは、これらのメソッド群を通じて行っています。

必要は発明の母

明らかなように、これらはjQueryとほぼ共通するメソッドです。実際、「便利だから」jQueryに追加されたわけでしょうし、jQuery離れするにあたっても必要なものだった、というわけです。

実際、jQueryを外していくにあたって、このような「似たような動作をする関数群」は欠かせなくなります(もっとも、jQueryのアニメーションをCSS Transitionに書き換えるなど、全く違う実装にせざるを得ない場面もあるかとは思います)。

その他

rails-ujsrequireなどで入れた場合、自動で発動しないので、const Rails = require('rails-ujs')としてから、Rails.start()を行う必要があります。

また、上に挙げたRails.***メソッドはrails-ujsの外部からも使えます(特に、CSRFトークンに対応しているRails.ajaxなどは便利かと思います)。