Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?