10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-24

かつて、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などは便利かと思います)。

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?