遥かなる旅時、さらばjQuery

この記事はLIG Advent Calendar 2018 - Qiita の18日目の記事です。

さて、私は制作会社で働いておるのです。
jQueryとはもう５年来の友と言えます。

しかし流れの早いWEB制作の現場において、脱jQueryの流れが弊社にも押し寄せてきてます。
私はフロントエンド作業は本職ではないので、0からがっつりJavaScriptの開発を行うということは年1、2回なのですが、なんだかんだでフロントの修正作業とかを行うことがあるといった立場なのですが。
jQuery is not defined
に出会う日が格段に増えてきました。

まあ確かにね、最近は$で取得してaddClassだけして、アニメーションはCSS3でなんてパターンが非常に増えてきてまして、それバニラでよくねって状態ですよ。
いや、書けるんですよ。そりゃ調べたら俺だって書けるんですよ、一応10年も業界いいますからね。
でもパッとね、なんもみないでタイプできるほどには使えないですよ。
こりゃね、いかんとね、私じき36なんですけども、昔のプログラマ定年説ではとっくに定年を迎えてるわけなんですけども、まだね、頑張ろうというね、気概だけは捨ててないですし、ええ、コード書きたい気持ちはね、当然ありますので、ここらでちゃんとしようと思いましてね、筆をとってる次第です。

なのねで、この記事はほぼ自分用ですがね、まとめてみますわ、よく使うやつを。

なにはともあれ取得、jQueryでいう$。

これはね、いっぱいありますわ。

// idから取得できる
document.querySelector('#idname');

// classから取得できる
document.querySelector('.classname');

document.getElementByIdとかもありますが、$の変わりって意味ではこれでしょう。
当たり前ですがね、戻り値はjQueryオブジェクトではないのです。
ret.addClassしても動かないので、注意です。
Elementオブジェクト ですからね、注意です。

あとこいつ1個しか返しません、最初にヒットしたやつです。
本当の意味で$の変わりに使うならquerySelectorAllを使いましょうね。

document.querySelectorAll('.classname');

こいつはNodeListっていう配列っぽいやつ返してきます。
ret[0]とかって形で使えますし、length持ってます。
でも配列じゃないのでね、注意です。

よく使うクラスの付け替え、jQueryでいうaddClass、removeClass、hasClass

じゃあね、取得した要素に対してクラス操作どうすんのっていうね。
ここまでできたらある程度jQuery卒業できそうっていうね。

let ret = document.querySelector('.classname');
// クラスをつけてみる addClass的な
ret.classList.add("test");

// クラスがあるか確認する hasClass的な
ret.classList.contains("test"); // addの後に使うと当然のtrue

// クラスを削除する removeClass的な
ret.classList.remove("test"); // ちなみに対象のクラスがついてなかったとしても特にエラーにはならん

おや、これは思ったより簡単ですね。
いけそうな気がしてきますね。
ちなみにここに書いてあるコードは適当なサイト開いて、デバッグツールのコンソールタブでテストしてます。
便利な時代です。

じゃあアトリビュートとかは？attrに対応するやつ

クラスがいじれたらね、次によくあるやつはアトリビュートですかね。
data属性とかね、srcをレイジーな感じで動的に変更したりありますよね。

let ret = document.querySelector('.classname');

// src属性の取得 そう欲しい属性にアクセスしよう
console.log(ret.getAttribute("src"));

// 書き換えるにはこう
ret.setAttribute("src" , "https://liginc.co.jp/wp-content/themes/ligtheme/assets/images/ourservice-contents.jpg");

// data属性もこう取得
ret.getAttribute("data-src")

// 設定はこう
ret.setAttribute("data-src" , "testtest");

うん、いけそう。俺jQueryがなくてもやっていけあそう。

でもイベントが設定できないと。on的なやつ

そうイベントですね、でもこれも難しくないんです。

let ret = document.querySelector('.classname');

// イベントつけるよ！これはクリックイベント
ret.addEventListener("click" , (e) => {
    e.preventDefault();
    console.log("click!!");
});

// イベント外すよ
ret.removeEventListener("click" , "event") // 実は上でhookしみたいなやつは、これでは消せない。名前がないから

// なのでイベント付与時は名前をもっておく
ret.addEventListener('click', function clickEvent(e) {
});

// 名前さえあれば、イベントを削除できるよ
ret.removeEventListener("click" , "clickEvent");

全然いけそうなきがしてきましたね。

ajaxはどうなのよ、$.ajaxを書くには

あとはこれができれば全然いけそうですね。

// まずリクエストを作ります。
let xhr = new XMLHttpRequest();

// method,URL,非同期かどうかを指定します
xhr.open("GET", "url", true);

// ステータスが変わるためのイベントを設定
xhr.onreadystatechange = () => {
  // readyStateが4が通信完了なのでstatusをみて処理をわける
  if(xhr.readyState === 4) {
    if(xhr.status === 200) {
       // 成功した時の処理
    } else {
      // 失敗した時の処理
    }
  }
};

// 設定した情報で送信する
xhr.send();

わりとできる。しかし細かい設定するときとかは$.ajaxほしいな。

意外にjQueryにたよらなくても戦っていけそう。
これをチートシートとして、なにかあるたびに更新していけば2019年には卒業してもやっていけるようになろう。

jQueryにはレガシーなブラウザのサポートや、豊富なプラグインといった有利な点もいっぱいあるし、全然使っていくとは思うけど。jQueryがないとなんもできないってなるのは避けたいと思う。