ウェブ制作においてはJavaScriptのフレームワークがたくさん登場してきていますので、最近ではjQueryを使うケースも徐々に減ってきているのではないでしょうか。そんな場合にはjQueryのメソッドをネイティブのJavaScriptで実現する必要が出てきます。そこで今回はよく使うjQueryのメソッドをネイティブのJavaScriptで実現する場合のコードを見ていきたいと思います。  

DOM要素の取得

javaScriptでページ上にあるHTML要素を操作する場合にはDOMを使うことになります。特にjQueryではこのDOMの操作が簡単にできるというのも強みではないでしょうか。実際にネイティブのJavaScriptでDOMを操作する場合は少し面倒になりますね。 【jQuery】

// id属性
$("#hoge")

// class属性
$(".hoge")

// HTML要素
$("body")

  jQueryを使う場合にはCSSのセレクタ指定のように対象となる要素を指定できるのでかなりコンパクトに記述できます。対してネイティブのJavaScriptでは要素をどのような情報で取得するかでメソッドが下記のように変わってきます。 【JavaScript】

// id属性
document.getElementById('hoge');

// class属性
document.getElementsByClassName('.hoge');
もしくは
document.querySelectorAll('.hoge');

// HTML要素
document.getElementsByTagName('body');

  基本的には単一の要素を取得する場合には「getElementById()」を、複数の要素の場合には「querySelectorAll()」を使うことが多いでしょうか。  

イベントリスナの設定・削除：on() / off()

こちらもJavaScriptでよく使うイベントの設定ですが、jQueryの場合には「on()」メソッドで簡単に設定することができます。また第一引数にはイベントの種類を設定しますが、複数設定することも可能です。イベントリスナの解除も同じように「off()」メソッドで定義できます。 【jQuery】

$("#hoge").on('click', function(){
});
$("#hoge").off('click', function(){
});

  ネイティブのJavaScirptでは「addEventListener()」もしくは「removeEventListener()」のメソッドを使います。第一引数にはイベントの種類を、第二引数にコールバック関数を設定します。このコールバック関数に引数を入れることでイベントオブジェクトも取得できます。ちなみにjQueryのon()、off()メソッドと異なり、イベントの種類は1つだけしか設定できません。複数設定する場合にはforEachなどでイベントの種類ごとに繰り返す必要がありますね。 【JavaScript】

// on()
const element = document.getElementById('hoge');
element.addEventListener('click', () => {
});

// off()
const element = document.getElementById('hoge');
element.removeEventListener('click', () => {
});

  また、「DOMContentLoaded」のイベントの場合には、jQueryでは「ready()」メソッドを使うことになるのですが、その場合にはこのように省略することができます。ネイティブのJavaScirptと比較するとかなり短いですね。 【jQuery】

$(function(){
});

【JavaScript】

document.addEventListener('DOMContentLoaded', () => {
});

   

表示非表示の切り替え：hide() / show()

こちらもjQueryでよく使う機能の1つである、要素の表示非表示を切り替えるメソッド「hide()」と「show()」です。これは単純にCSSで表示と非表示を切り替えているだけになるので、ネイティブのJavaScirptでもスタイルの操作を変えるだけでOKです。 【jQuery】

$("#hoge").hide();
$("#hoge").show();

  ネイティブではdisplayプロパティの値を調整できるので、inline-blockやflexとして表示させることも可能ですね。 【JavaScript】

// hide()
const element = document.getElementById('hoge');
element.style.display = 'none';
});

// show()
const element = document.getElementById('hoge');
element.style.display = 'block';
});

   

class属性の操作：addClass() / removeClass() / toggleClass()

同じくよく使う機能の各種class操作のメソッドです。イベントと組み合わせて使うことが多いこのメソッドでは、classの追加・削除・切り替えのメソッドが用意されています。引数には対象となるclass名を文字列としていれる形になります。 【jQuery】

$("#hoge").addClass('fuga');
$("#target").removeClass('fuga');
$("#target").toggleClass('fuga');

  ネイティブのJavaScriptでは専用のメソッドはありませんが、それぞれ「classList」のプロパティでメソッドを実行するかたちになります。使い方はjQueryの時とよく似ているので覚えやすいのではないでしょうか。 【JavaScript】

// addClass()
const element = document.getElementById('hoge');
element.classList.add('fuga')
});

// removeClass()
const element = document.getElementById('hoge');
element.classList.remove('fuga')
});

// toggleClass()
const element = document.getElementById('hoge');
element.classList.toggle('fuga')
});

   

配列要素の操作：each()

複数要素の場合には、配列型となるデータですが、それを扱うメソッドである「each()」も登場頻度が高いのではないでしょうか。複数要素にイベントを設定する場合などに見られます。 【jQuery】

$(".hoge").each(function(index){
});

  ネイティブのJavaScirptでは配列操作のメソッドである「forEach()」を使うことで代替させることができます。querySelectorAll()で取得した要素はNodeList型となっているので、そのままforEach()のメソッドで処理を行うことができます。 【JavaScript】

const elements = document.querySelectorAll('.hoge');
elements.forEach((item, index) => {
});

  上記以外にも「for in」「for of」「for文」なども使うことができます。詳しくはこちらの記事「JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】」でまとめていますのでご参考に。  

HTML・テキスト取得と設定：html() / text()

新たなHTML要素やテキストコンテンツを作成する場合に使う「html()」や「text()」のメソッドもよく見かけるような印象がありますね。両方とも設定する文字列をそれぞれのメソッドの引数に指定します。引数が空の場合には、メソッドを実行している要素を取得するだけになります。 【jQuery】

$("#hoge").html('<p>このHTML要素を設定します</p>');
$("#hoge").text('このテキストを設定します');

  ネイティブのJavaScriptでは、HTML要素の場合には「innerHTML」を、テキストコンテンツの場合には「textContent」のプロパティを使います。そのプロパティに対してそれぞれ設定する文字列を代入するという形になっています。こちらも代入しない場合には対象の要素から取得するだけになります。 【JavaScript】

// html()
const element = document.getElementById('hoge');
element.innerHTML = '<p>このHTML要素を設定します</p>';

// text()
const element = document.getElementById('hoge');
element.textContent = 'このテキストを設定します';

 

---

  これ以外にもまだまだjQueryでよく使われるメソッドはたくさんあるのですが、また別記事にてまとめていきたいと思います。jQueryからそのほかのフレームワークに移行する場合、このメソッドを再現するにはどうしたらいいのか？というシーンによく出くわしますが、普段からよく使うメソッドに関しては是非覚えておきたいところですね。