自称ミニマリスト、フロントエンドのザワです。こんにちは。
今まで私はjQueryとマイメン的な感じで共に修羅場をくぐり抜けてきました。しかし、ミニマリストという性格上シンプルなものに惹かれるもので、断捨離したい衝動に駆られる時期がやって来ます。一大決心の末、jQueryにグッバイを告げ、JavaScriptとマイメン的な感じでコンビを組むことにしました。真夏のメモリー。
さて、今回は、jQueryで今まで私が記述していたものがどのように変わったのか、jQueryをよく使用するケースを例にとって、JavaScriptと比較していきたいと思います。
DOM取得編
jQueryを使用する主なメリットといえば、DOMの取得でしょう。idやclassから取得したり、findメソッドやclosestメソッドなど、DOMをトラバース（DOMを横断して移動するイメージ）して簡単に目的のDOMを取得することが出来ます。
jQueryでidやclassから要素を取得する方法はこんな感じでしたね。
//idから取得
$('#sample');
//classから取得
$('.sample');JavaScriptではどうでしょう？ 私は食わず嫌いで難しいというイメージが刷り込まれていたのですが、慣れてしまえば無問題でした。
DOM取得の記述例が、こちら。
//idから要素を取得
document.getElementById('sample');
//classから要素を取得
document.getElementsByClassName('sample');
もっとjQueryライクな書き方を好む方であれば、こちらはどうでしょうか。
//idから取得
document.querySelector('#sample');
//classから取得
document.querySelector('.sample');
querySelectorは単体の要素を取得します。配列で取得したい場合はquerySelectorAllを使用します。
document.querySelectorAll('.sample');どうですか？ 簡単でしょう？ 極論を言えば、querySelectorとquerySelectorAllさえあれば生きていけるんじゃないかと思っちゃいます。前述したclosestメソッドも実はJavaScriptには用意されています。IEは未サポートなので、使いたい方はpolyfillをチェックですね。
イベント編
お次はイベントです。jQueryでclickイベントで何かしらしようとする時はこんな感じでした。
$('#sample').click(()=>{
console.log('オラオラオラオラァ！');
});
JavaScriptで書いてみましょう！
document.querySelector('#sample').addEventListener('click', ()=>{
console.log('無駄無駄無駄無駄ァ！');
});どうですか？ 想像していたより簡単でしょう？ どんどんいきましょう！
classの追加・削除編
勢いに乗って、classの追加・削除をしてみます。jQueryではこうでした。
//class追加
$('#sample').addClass('is-hungry')
//class削除
$('#sample').removeClass('is-hungry');
JavaScriptではこうなります。
//class追加
document.querySelector('#sample').classList.add('is-hungry');
//class削除
document.querySelector('#sample').classList.remove('is-hungry');CSSアニメーションの発火など、classを付け替える機会はよくあると思います。jQueryを使わずとも、このように簡単に処理できるんです。ただし、jQueryのように同じクラスを持つ複数要素への一括追加や削除はできません。そこはfor文で気合十分ブンブン回しましょう。
なぜJavaScriptだけで書こうと思ったのか？
デキる男感が出るから。それもあります。しかし、それだけではありません。DOMの取得スピードの観点からであったり、ブラウザシェアの遷移により、jQueryを使わずともやりたいことが実現しやすい世の中になったことも理由としてあります。
今後jQueryは使わない？
使うでしょう。好きだから。未練がましいから。しかし、それだけではありません。案件によってはスピードが求められたり、jQuery依存のプラグインを使用したかったりと、またコンビを組む日は来るでしょう。
まとめ
今回は、JSを自在に操ることのできる匠ではなく、私のように「jQuery無しでは生きていけない！」と思い込みがちなjQueryワールドの住人が、外の世界を見るきっかけになってもらえたらという想いで書きました。新しい世界のような、原点に戻ったような、不思議な感覚ですが、刺激になったことは間違いありません。
今後も、よりよいソースコードを求めて、ミニマリストらしく、断捨離していきたいと思います。
それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
