jQuery割と理解したから一通り使えるようになるコツまとめ（Rails）

RailsでWEBアプリを作ってます。Ruby on Railsの経験値は9月でちょうど1年くらいです。
なんか割と色々な機能を作れるようになったのでちょっとまとめていきます。
こんな機能はどうやって作るの？みたいなのがあればコメントください。考えます。

jQueryとは？

公式：[https://jquery.com/:title]

この記事を見ていたら特に必要ないとは思いますが、一応Wikipediaから引用

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

出典：[https://ja.wikipedia.org/wiki/JQuery:title]

割と使う方法

jqueryでDOM要素を取得して、その時々のアクションによってDOM要素を操作したり、クラスを付けたり消したり、ajaxによって非同期処理を行なったりできる。
（DOM要素？なんだそれ？って人は「DOM要素　とは？」とかでぐぐると出ると思います。）

例えばこんなの↓

[https://watablogtravel.com/document-object-model/:title]

 $(document).on('change', '[name^="company[purchases_attributes]["][name$="][product_code]"]', function(){
    var supplier_product_code = $(this).nearest('[name^="company[purchases_attributes]"][name$="[supplier_product_code]"]');

    $.ajax({
      url: '/suppliers/purchases/get_supplier_product_code',
      type: "GET",
      dataType: "json",
      headers: { 'X-CSRF-Token': token },
      data: { "product_code": $(this).val(), "supplier_product_code": supplier_product_code.val() },
      success: function (data) {
        supplier_product_code.val(data.supplier_product_code);
        supplier_product_code.trigger('change');
      },
      error: function () {
        supplier_product_code.val("");
        supplier_product_code.trigger('change');
      }
    });
  })

1、2行目のこの部分、個人的に便利だなぁと思ったのが、DOM要素を前方一致、後方一致それと"かつ"（&&）条件で取得できる。

２行目のように書くことでnameがcompany[purchases_attributes]から始まるもの、かつ、nameが[supplier_product_code]で終わるもの

javascript
$(this).nearest('[name^="company[purchases_attributes]"][name$="[supplier_product_code]"]');

の前方一致、後方一致を同時に使用している。

なので、例えばname^="company[purchases_attributes][123456][supplier_product_code]など123456などの部分がidなど動的に変化する要素でもまとめて取得することができる。

それに加えて、nearestを使用することで取得されたDOMと一番近くのマッチするDOM要素を取得できる。

よく使う使い方は、一覧画面でチェックされた項目のステータスをajaxで一括に変更する。というようなもの。

一覧画面の一括操作はajaxの方がformでやるよりもやりやすい。

すごくわかりやすいテーブルがあったので引用させていただきます

[name]	name属性の要素を取得
[name=value]	nameという名前の値がvalueである属性を取得。完全一致
[name^=value]	nameという名前の値がvalueで始まる属性を取得。前方一致
[name$=value]	nameという名前の値がvalueで終わる属性を取得。後方一致
[name*=value]	nameという名前の値にvalueという文字列がある属性を取得。部分一致
[name~=value]	nameという名前の値がスペースで区切られたており、1つがvalueである属性を取得。
[name\	=value]

出典：
[https://code-schools.com/javascript-dom-match/:title]

Rubyのcontrollerからjavascript側にJSONを渡す。

ajaxによってJSからRuby側に変数を引き渡すことができるのは知っていたが、逆はできないのかなぁ？

と思っていたら、まぁやっぱりできるよね。

やり方：
reder json:をcontrollerに書いて、jsonデータをjavascript側に返す。

def get_supplier_product_code 
      if params.key?(:product_code)
        params[:supplier_product_code] = Product.find_by(code: params[:product_code]).supplier_product_code
      end
      render json: {supplier_product_code: params[:supplier_product_code]}.to_json
    end

render json: {supplier_product_code: params[:supplier_product_code]}.to_json
と書くことでajax通信した側にJSONデータを返すことができる。

JSONの取得方法は

$.ajax({
      url: '/suppliers/purchases/get_supplier_product_code',
      type: "GET",
      dataType: "json",
      headers: { 'X-CSRF-Token': token },
      data: { "product_code": $(this).val(), "supplier_product_code": supplier_product_code.val() },
      success: function (data) {
        supplier_product_code.val(data.supplier_product_code);
        supplier_product_code.trigger('change');
      },
      error: function () {
        supplier_product_code.val("");
        supplier_product_code.trigger('change');
      }
    });

上にも書いたが、successの後にdata.supplier_product_codeとすることでそのJSONの変数を取得することができる。

あとは、好きなようにJS側とRuby on Rails側でよしなにデータを書き換えてあげれば良い。

以上。