jQueryを知っておく

こんにちは、wakatakeruです。

前置きは要らないという方は最初は読み飛ばしてください。

まずjQueryと聞いて何を今更？と思う人も多いかもしれません。

今から新たにjQueryをじっくりと学ぶ必要があるかと言われるとあるとは言いにくいのかなと思います。というのも今はwebサイトがPWA化(webサイトだけどアプリのようにページ遷移をあまり感じさせないサイトの事)されてきており、それには非同期通信が必須でそのためにHTMLをjQueryで書き換えるには大変で、そういう意味で今のトレンドには向いていないライブラリだからです。代わりに今はReact, Vueなどの素晴らしいフレームワークがあり、レガシーと言われるほどになってしまったjQueryは必要なくなっていってるのだとは思います。ですがweb制作の業務をしているとまだまだjQueryは現場で使われていることに気づきます。新しくweb制作を始める人や、単純に動的なページを作成したりPWAではないページを作る際にはjQueryは簡単ですし、重宝することと思います。

2018年終わりの今でもまだまだjQueryの話は聞きますし、記事でも見かけます。jQueryが今後新しく使われていくことは少ないのかもしれませんが、これからもjQueryは使われ続けていくことは間違いないと思っています。

そこで自分の知識の整理もかねて、jQueryを腰を据えて学ぶとまではいかなくても、jQueryの書き方について書きます。よく知らない方でもjQueryについて軽く知っておきたいという方には丁度いい記事かもしれません。jQueryは調べようと検索をかけたとき、上位に表示される記事であっても古いjQueryの情報もたくさんあるので、ざっくりとでも現在のjQueryに沿った書き方、使い方も確認していきましょう。

まず超ざっくりと基本的な文法を押さえておきましょう。

$('要素名').(メソッド名)

1	$('要素名').(メソッド名)

という感じで書きます。

たまに以下のようにjQueryと書かれているのを見るかもしれませんが、

jQuery(document).ready(function(){
   ... 
});

jQuery(document).ready(function(){

...

});

「jQuery = $」で、$はjQueryの省略記法です。省略記法で書くのが一般的ですが、jQueryという書き方もあるのは知っておくといいかもしれません。

それでは順にみていきます。

1. イベントの処理にはonとoffを使う

１．基本的な書き方

bind(), unbind(), live(), delegate(), undelegate ()は使わない！

イベントをjQueryオブジェクトに直接指定はしない！

$('.hoge').bind('click', fucntion(){...});

$('.hoge').unbind('click');

$('.hoge').live(...); // これはもう使用できなくなっています。

$('.parent').delegate('.child', 'click', function(){...}); 

$('.parent').undelegate('.child', ''click);

$('.hoge').click(function(){...}); // イベントを直接指定

$('.hoge').bind('click', fucntion(){...});

$('.hoge').unbind('click');

$('.hoge').live(...); // これはもう使用できなくなっています。

$('.parent').delegate('.child', 'click', function(){...});

$('.parent').undelegate('.child', ''click);

$('.hoge').click(function(){...}); // イベントを直接指定

このような書き方はやめましょう！

これらは全てon, offで統合されています。

$('.hoge').on('click', function(){...}); // bind

$('.hoge').off('click');                 // unbind

$(document).on('click', '.hoge', function(){...}) // live

$('.parent').on('cllick', 'child', function(){...}) // delegate

$('.parent').off('click', 'child', function(){...}) // undelegate

$('.hoge').on('click', function(){...}) // イベント直接指定してる

$('.hoge').on('click', function(){...}); // bind

$('.hoge').off('click'); // unbind

$(document).on('click', '.hoge', function(){...}) // live

$('.parent').on('cllick', 'child', function(){...}) // delegate

$('.parent').off('click', 'child', function(){...}) // undelegate

$('.hoge').on('click', function(){...}) // イベント直接指定してる

delegateは引数の順番が変わっているのに注意なのと、liveはdocumentにイベントをセットしている点に注意です。

このように全てがon,offで統一されているのでもし最初のような。書き方がされていれば直せるのであれば直しましょう。

bindは指定した要素に対して指定したイベントが発生したら何かする、というもので、つまり$(‘.hoge’).clickで直接指定しているのと意味は同じです。

liveもbindとほぼ同じ意味です。

delegateは.parent の中にある .child だけが指定したイベントの発生する対象となります。つまり、特定の親要素に対してイベントを設定することです（この方法をデリゲートと言います。）

ただbindとlive, delegate間には重要な違いが一つあり、bindはJavaScriptで後から追加した要素に対してはイベントが発生しないのですが、liveとdelegateは後から追加した要素にでもイベントを発生させることができます。

２．複数のイベント設定の仕方

複数のイベントで発生したときに処理をしたいとき

「スペース区切りを使う」

$('.hoge').on('click mouseover', function(){...});

1	$('.hoge').on('click mouseover', function(){...});

複数のイベントでそれぞれの処理をしたいとき

「連想配列を使う」

$('.hoge').on({
     'click': function(){...},
     'mouseover': function(){...}
});

$('.hoge').on({

'click': function(){...},

'mouseover': function(){...}

});

2. タグの属性を操作する

1．まず始めに複数回使用するなら変数化しておく

属性とは直接関係ありませんが、同じ要素を複数回利用するのであれば、いちいち$(‘.hoge’)とかくのは手間ですので、変数化しておきましょう。

const $hoge = $('.hoge'); // 以下 $hogeで使える
function add(className) {
  $hoge.addClass(className);
};
function remove(className) {
  $hoge.removeClass(className)
};

const $hoge = $('.hoge'); // 以下 $hogeで使える

function add(className) {

$hoge.addClass(className);

};

function remove(className) {

$hoge.removeClass(className)

};

2. 属性の操作はattr

属性を取得するときは「 $(“要素”).attr(“属性名”); 」
属性を変更するときは「 $(“要素”).attr(“属性名”, “変更後の値”); 」

で書きます。

$('input[type="submit"]').attr('id', 'hogehoge') //idをhogehogeに変更

1	$('input[type="submit"]').attr('id', 'hogehoge') //idをhogehogeに変更

3. ちょっと特殊な属性の操作はpropで

checkboxでcheckedにしたいというとき(またその逆)

attrでも書けますが…

$('input[type="checkbox"]').attr('checked', 'checked'); // チェック

$('input[type="checkbox"]').removeAttr('checked'); // チェック外す

$('input[type="checkbox"]').attr('checked', 'checked'); // チェック

$('input[type="checkbox"]').removeAttr('checked'); // チェック外す

propを使うと簡潔です。

$('input[type="checkbox"]').prop('checked',true); // 逆はfalse

1	$('input[type="checkbox"]').prop('checked',true); // 逆はfalse

またセレクトボックスでも

$('.selectbox').prop('selected', true);

1	$('.selectbox').prop('selected', true);

とpropを使っていきましょう。

フォーム部品に関してはこちらに凄く詳しく書いてありますので参考にしてみるといいかもしれません。

https://qiita.com/kazu56/items/36b025dac5802b76715c

4 .属性の操作の複数指定

複数の属性を一度に変更したい場合は連想配列を使います。

$('input[type="text"]').attr({
    id: 'hoge',
    name: 'contents'
  })

$('input[type="text"]').attr({

id: 'hoge',

name: 'contents'

})

ここでお気づきかもしれませんが、onのときもそうだったように複数指定したい場合は大体何のメソッドでも連想配列を使えばできます。

5. カスタム属性の操作はdata

これ意外とご存じでない方もいるようなのでぜひ知っておいてほしい便利なものなのですが、HTML5になってから全てのタグで、自分で属性の名前と値を決めることができるようになっています。これをカスタム属性と言います。

一例としてhtmlのonclickメソッドをみてみます。

htmlの要素に対して何か関数で処理をしたいけど、関数には引数を渡したい！というとき、これまではHTMLにJavaScriptを書いていました(以下のコード例で、onclickにhogeというJavaScriptの関数が入ってる部分です)。

<button onclick="hoge('更新')">更新</button>//HTMLにJSが入り込んでしまう

1	<button onclick="hoge('更新')">更新</button>//HTMLにJSが入り込んでしまう

function hoge(method){
 ///
}

function hoge(method){

///

}

これをカスタム属性を使えば、html内にJavaScriptを書かなくてもよくなります。

カスタム属性の使い方は簡単でタグに

「 data-任意の名前 = “つけたい値” 」

と書くだけです。だだし扱いは文字列になるのと、名前に大文字はつけられないようになっているので複数の単語を名前にするときは-(ハイフン)などを使いましょう。

このカスタム属性の操作はもちろんattrでも可能ですが、dataというメソッドが用意されています。

<button class="submitButton" data-name="update">更新ボタン</button>

1	<button class="submitButton" data-name="update">更新ボタン</button>

このようなボタンがあった場合

const $button = $('.submitButton');

$button.on('click', function(){
     const name = $button.data("name") //dataのname属性の値を取得
     ...
});

const $button = $('.submitButton');

$button.on('click', function(){

const name = $button.data("name") //dataのname属性の値を取得

...

});

このようになります。

この例だけでは特別便利と感じることはないかもしませんが、HTMLの文章構造と動きを付けるJavaScriptが混ざることなく、役割分担が綺麗にできていて見やすくなるかと思います。。

またカスタム属性の値は配列、オブジェクトにすることも可能で、

<span class="nt"><div</span> <span class="na">id=</span><span class="s">"1"</span> <span class="na">data-array=</span><span class="s">'{"value1", "value2", "value3"]}'</span><span class="nt">></span>配列<span class="nt"></div><br /></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"2"</span> <span class="na">data-object=</span><span class="s">'{"key1":"value1","key2":"value2"}'</span><span class="nt">></span>連想配列<span class="nt"></div><br /></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"3"</span> <span class="na">data-multi-objcect=</span><span class="s">'{"key1":[1,2,3],"key2":[1,2,3,4]}'</span><span class="nt">></span>多次元配列<span class="nt"></div></span>

<div id="3" data-multi-objcect='{"key1":[1,2,3],"key2":[1,2,3,4]}'>多次元配列</div>

このようにいくつでもデータを設定できます。

データ取得時は配列またはオブジェクトとなるので個々の値をと要り出す場合は普通にJavaScriptの書き方をしてやれば取り出せます。

6. css適用はcssメソッド

$('.hoge').css('color', '#000'); // 文字の色変更

1	$('.hoge').css('color', '#000'); // 文字の色変更

cssの指定はcssファイルで完結するのが理想ですが、jQueryで書くという場合はこのようになります。

3. タグの中身を操作する

1．タグの中身を操作する方法

タグの中身をいじりたいときは基本以下のメソッドを使います

text : タグで囲まれた部分のテキストを変更する

html : タグで囲まれた部分をhtmlタグを含んだテキストに変更する

empty : タグで囲まれた部分を消去する

remove : 指定したタグ自体を消去する

val : value属性の取得または書き換えを行う

unwrap : 親要素を削除する

<a href="/hoge">テスト文字列</a>
<form>
 <input value="1" type="number">
</form>

<a href="/hoge">テスト文字列</a>

<form>

</form>

// このようなタグがあったとしたら

$(a).text("リンク"); // <a></a>内がリンクというテキストに変更される

$(a).html("<img src="hoge.jpg">"); // <a></a>内に画像が入る

$(a).empty();  // テスト文字列というのが消える。

$(a).remove(); // <a>タグ自体が消える

$(input[type=number]).val();  // 1を取得する

$(input[type=number]).val('2'); // valueの値を1から2に変更する

$(input[type=number]).unwrap(); // formタグが削除される

$(a).text("リンク"); // <a></a>内がリンクというテキストに変更される

$(a).html("<img src="hoge.jpg">"); // <a></a>内に画像が入る

$(a).empty(); // テスト文字列というのが消える。

$(a).remove(); // <a>タグ自体が消える

$(input[type=number]).val(); // 1を取得する

$(input[type=number]).val('2'); // valueの値を1から2に変更する

$(input[type=number]).unwrap(); // formタグが削除される

ここでtextとhtmlによるタグの内容の変更ではなく、追加したい場合

これまでのメソッドなら以下のように書くところですが、

const $hoge = $('.hoge');$hoge.html($hoge.html() + '<b>追加文章</b>');
$hoge.html('前に追加文章<br>' + $hoge.html());

1 2	const $hoge = $('.hoge');$hoge.html($hoge.html() + '<b>追加文章</b>'); $hoge.html('前に追加文章<br>' + $hoge.html());

「append」と「prepend」を使いましょう。(上と同じ結果です。)

const $hoge = $('.hoge');
$hoge.append('<b>追加文章</b>');

$hoge.prepend('前に追加文章<br>');

const $hoge = $('.hoge');

$hoge.append('追加文章');

$hoge.prepend('前に追加文章 ');

4. その他よく使う(見る)メソッド(ready, onload等)

1．ページ読み込み時の実行

readyメソッドは、ページ読み込み時のDOM（HTML構造）の読み込みが終わったタイミングで実行されるメソッドです。用途としては、ページの読み込み中を表示するアニメーション(Now Loading的な)等に使われています。

以下のように書かれます。

$(documnet).ready(function(){
   // 何かしらの処理
});

$(documnet).ready(function(){

// 何かしらの処理

});

が、今はもうこの書き方をせずに簡単に書けるのでreadyをわざわざ使わなくてよいでしょう。

$(function(){
 // 任意の処理
});

$(function(){

// 任意の処理

});

loadメソッドはページ読み込み時のDOM(HTML構造)の読み込みが終わり、画像など関連データの他の要素も全て読み込んだあと、ページが完全に表示された後に実行するメソッドです。大きな動きのあるアニメーションなどはこれが使われていると思います。

$(window).load(function(){
  // 任意の処理
});


// 次のような書き方も可能です。

$(window).on('load', function(){
  // 任意の処理
});

$(window).load(function(){

// 任意の処理

});

// 次のような書き方も可能です。

$(window).on('load', function(){

// 任意の処理

});

これは普通にJavaScriptの話ですが、整理すると実行の手順としては、

⓵DOMの構築

⓶readyの実行

③画像や動画データなどの表示

④loadの実行

という順番になっています。

簡単にjQueryの書き方とよく使われるものを挙げてきました。今更ですが、jQueryを書くことがある際には気を付けて、jQueryの書き方を統一して使っていきたいですね。以上、参考になれば幸いです。間違いやミスがあれば気軽に指摘して頂けると嬉しいです。

※最後に、これまで書いてきましたが、この書き方が全て絶対に正しいというものではありません。非推奨となっている完全に古いメソッド以外では、場合によっては別の書き方のほうが良いの場合もあるかと思いますので適宜書きやすいと思うようにしてくださるのが良いと思います！

1. イベントの処理にはonとoffを使う

１．基本的な書き方

２．複数のイベント設定の仕方

2. タグの属性を操作する

1．まず始めに複数回使用するなら変数化しておく

2. 属性の操作はattr

3. ちょっと特殊な属性の操作はpropで

4 .属性の操作の複数指定

5. カスタム属性の操作はdata

6. css適用はcssメソッド

3. タグの中身を操作する

1．タグの中身を操作する方法

4. その他よく使う(見る)メソッド(ready, onload等)

1．ページ読み込み時の実行

コメントする コメントをキャンセル

コメントするコメントをキャンセル