初心者でも簡単！jQueryのWeb制作術と自作プラグイン活用法

jQueryを使いこなすとWeb制作の効率化にも繋がるわけですが、最初はどのように活用すればいいのか悩むケースも少なくありません。

jQueryを使いこなす上で重要なポイントや、機能を拡張できるプラグインについてどこから勉強を始めるのが良いのでしょうか。

そこで、この記事では初心者でも今日からjQuery活用のポイントや自作プラグインの作り方について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

jQuery活用のポイント

この章では、jQueryを使いこなす上で重要な要素となる部分について見ていきましょう。主に、セレクタやイベント処理について学んでいきます。

セレクタについて

jQueryを使いこなす上でもっとも重要となるのが【セレクタ】です。

jQueryは対象となるHTML要素を指定してから、どんな処理を行うのかを記述するのが基本パターンになります。このHTML要素を指定するのがセレクタの役割であり、これによりWebページのあらゆる要素を制御できるわけです。

例えば、h1タグを指定したかったら次のように記述します。

//$( )の中にセレクタを指定する
$( セレクタ )

//h1タグをセレクタで指定する
$('h1')

基本的にはCSSのセレクタ指定とほとんど同じと考えれば理解しやすいのではないでしょうか。上記のようにHTML要素のタグ名をそのまま指定すれば良いわけです。

他にも、以下のようにさまざまなバリエーションでセレクタ指定を行うことができます。

//IDやClass属性を利用
$('#text1')

//任意の要素配下にあるHTML要素
$('div > p')

//
$('input[name="user-name"]')

このセレクタについて、基本から応用的な活用ワザを次の記事で体系的にまとめているのでぜひ参考にしてみてください！

イベント処理の使い方

イベント処理は、例えばユーザーがボタンをクリックした時や画面がスクロールした時など、何らかのアクションに応じて処理を実行できる仕組みのことです。

jQueryではこのイベント処理をon()メソッドを利用することで、簡単に実現できるように設計されています。

例えば、ボタンがクリックされた時の処理は次のように記述できます。

$('button').on('click', function() {
    
        console.log('クリックされました！');
    
})

対象となる要素にon()を実行するだけなのですが、その引数にイベント名として【click】が指定されていますよね？

これだけでクリックイベント処理となり、そのあとに続く関数を実行してくれるというわけです。

イベント名は他にもたくさん用意されており、例えば【mousedown】を利用するとマウスのボタンが押された時に任意の関数を実行できます。

$('button').on('mousedown', function() {
  console.log('マウスのボタンが押されました！');
});

【scroll】を指定すれば、画面のスクロールが始まった瞬間に関数が実行されます。

$(window).on('scroll', function() {
  console.log('画面がスクロールしました！');
});

このようなイベントの種類や効果的なプログラミング手法については、次の記事が参考になるのでぜひ一読してみてください！

jQueryプラグインの基本

この章では、jQueryの機能を大きく拡張することができるプラグインの存在について見ていきましょう。主に、プラグインの概要や実際の使い方などについて学んでいきます。

jQueryプラグインとは

jQueryは非常に多機能なライブラリなのですが、基本的にはDOMを利用したHTML / CSSの制御を簡単に行えるというのが大きな特徴になります。

そのため、画面のデザインを効果的に実装するとか、スライダーの機能を効率よく実装する…みたいな何かに特化したWebコンテンツを作る機能は提供されていません。

そこで、重要になるのがプラグインの存在です。

jQueryはプラグインを自作することが可能で、これにより本来提供されていない機能を簡単に利用できるようになるわけです。

つまり、jQuery自体はもっとも重要なコア機能だけを提供し、それ以外で必要になる専門的な機能はプラグインで代用するという方法を取っているわけですね。

プラグインの組み込み方

それでは、実際にjQueryプラグインを使いながらどのように導入していくのかを見ていきましょう。

プラグインは何でも良いのですが、例えばフォームの入力に誤りがないかバリデーション（検証）する機能を提供してくれるプラグインを使ってみましょう。

各プラグインの公式サイトには、jQueryプラグイン用のJSファイルが提供されています。このファイルをjQuery本体ファイルと一緒に読み込むだけで基本的には利用することができます。

注意点としては、あくまでプラグインなのでjQuery本体ファイルのあとに読み込まないと機能しないという点です。また、プラグインによっては一緒にCSSファイルを読み込むものもあります。

ファイルを読み込んだら準備は完了なので、あとはjQueryでプログラミングしていくだけです。この簡単な導入方法のおかげで、プラグインは現在も新しいものがどんどん誕生しているわけです。

jQueryプラグインの自作

この章では、自分でjQueryプラグインを開発するための基本的な知識について見ていきましょう。主に、プラグイン自作の仕組みや実際の作り方について学んでいきます。

プラグインの作り方

jQueryプラグインを自分で作るのは何だか難しそう…と思うかもしれませんが、その基本的な仕組み自体は簡単です。

プラグインを作るうえでポイントになるのが、標準で提供されている【$.fn】の存在です。

$.fnに続けて関数名を指定することで、それがそのままjQueryプラグインになるというのが基本的な考え方です。

$.fn.関数名 = function() { }

もう1つ、重要なポイントがあります。

それは【$】がjQueryの関数であることを保証しなければいけないという点です。実は、$というのは他のライブラリでも利用されていることがあり、そうなると$は想定した通りの動きをしないかもしれません。

そのため、jQueryプラグインを作るときには以下のようにjQuery関数をプラグインに渡してあげるのが基本です。

(function($) {

    //ここにプラグインの処理を記述する

})(jQuery);

簡単なプラグインを作ってみよう

それでは、実際に簡単なプラグインを自作してみましょう。

作るのは指定したHTML要素の文字サイズを、少しずつアニメーションさせながら大きくするというプラグインです。

プラグインの関数名はsizeChange()として、次のように設定してみましょう。

(function($) {

    $.fn.sizeChange = function() { };

})(jQuery);

この3行で、jQueryプラグインの骨組みは完成しています。

次に、プラグインの中身を書いていきましょう。と、言っても文字サイズをアニメーションさせながら大きくするだけなので次のような記述で良いでしょう。

(function($) {
  $.fn.sizeChange = function() {
 
    this.animate({fontSize: '5em'});
    
  };
})(jQuery);

関数内で利用している【this】は、このプラグインを利用した時に対象となるHTML要素のことになります。

このプラグインは外部ファイルとして保存して、通常のプラグインと同様にscriptタグから読み込むようにしましょう。

試しに、h1要素のテキストサイズを変更してみましょう。

$('h1').sizeChange();

これで、アニメーションしながら文字サイズが大きく変更されるはずです。

まとめ

今回は、jQueryでWeb開発するうえで重要なポイントやプラグインの活用方法について学習しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！