スライドショー

初心者がjQueryをホームページに導入するときの学習サンプルまとめ


jQueryってどうやってホームページに組み込んだらいいの?
jQueryを使いこなすコツを知りたい
HTMLをjQueryで制御できるようになりたい

jQueryを使うとホームページのさまざまなHTMLを自在に制御できるようになるわけですが、一体どこから勉強を始めたら良いのか迷う人も少なくありません。

出来ることがたくさんあり過ぎて、逆に何をしたら良いのか分からなくなってしまうわけです。しかしながら、ほんの少しだけコツを掴めば初心者でも簡単に使いこなすことができます。

そこで、この記事では初心者でも今日からjQueryをホームページに導入して活用できる方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

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

jQueryの導入

この章では、jQueryをホームページに組み込むための基礎知識について見ていきましょう。主に、導入方法とプラグインについて学んでいきます。

WebページにjQueryを組み込んでみよう

jQueryの中身はごく普通のJavaScriptプログラムなので、特別なソフトウェアなどは不要ですぐにブラウザで利用することができます。

そのため、HTML内にscriptタグを利用してjQueryのファイルを指定する方法が一般的です。


jQueryのファイルは公式サイトから無料でダウンロードできますが、以下のURLを利用することでもホームページに組み込むことができます。

//Google CDN
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

//jsDelivr CDN
https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js

//CDNJS CDN
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

上記いずれかのURLをscriptタグで読み込めば良いわけです。

ちなみに、【jQuery.js】と【jQuery.min.js】の違いですが、minが付与されているファイルは圧縮版という意味で、改行やコメントなどがすべて削除されたソースコードになります。

逆にminが付与されていないファイルは非圧縮版になり、開発中のプロジェクトでよく使われています。理由として、非圧縮版は何らかのエラーが発生した時にjQueryのどの箇所が原因なのかを発見しやすいからです。

プラグインを導入するには?

jQueryの大きな特徴として、プラグインによる拡張が挙げられます。

つまり、jQueryでは提供されていない機能でもプラグインを自作することで、機能を強化することができるわけです。

プラグインはすでに膨大な種類が提供されており、いずれもホームページを魅力的でダイナミックなものに変えてくれる便利なものばかりです。このようなプラグインを組み込みたい場合ですが、基本的にはjQueryを組み込む場合とほぼ同じです。

例えば、スライダー機能を強化してくれるSlickというjQueryプラグインを導入する場合を見てみましょう。

//jQueryの本体ファイル


//jQueryプラグインのファイル

注意が必要なのは、最初にjQueryの本体ファイルを読み込まなければいけないという点です。当然ですが、プラグインはjQueryをベースに作られているので先に読み込んでおかないとエラーになってしまいます。

また、プラグインによってはJSファイルだけでなく、CSSファイルも読み込んでおく場合もあるので必ず公式サイトのドキュメントを読むようにしておきましょう。

jQueryの必須知識

この章では、jQueryを使いこなすためのコツを見ていきましょう。主に、重要なポイントであるセレクタとイベント処理について学んでいきます。

セレクタでDOMを制御する

セレクタはjQueryの特徴とも言える概念ですが、これはCSSのセレクタとほとんど同じように扱うことが可能です。

まず、jQueryの記述方法として以下のパターンがあります。

$( セレクタ ).関数

基本的にjQueryは上記のように【セレクタ】と【関数】という組み合わせで構成されており、ほとんどの処理をこの2つで実行できるように設計されています。

セレクタの役割としては、どのHTML要素を対象にするか?ということを明確にします。

例えば、h1要素のテキストを動的に変更したい場合は次のように記述します。

$('h1').text('こんにちは');

この例では、セレクタとしてh1要素を指定していますね。

もちろん、CSSのセレクタ指定のようにIDやClass属性値なども利用することができます。このセレクタを活用することで、jQueryではHTMLのさまざまな箇所を制御することができるわけです。

セレクタについての基本から応用までをさらに深堀したい場合は、次の記事で体系的にまとめているので参考にしてみてください!

これで完璧!jQueryのセレクタ操作を完全理解するコツまとめ!
更新日 : 2019年5月9日

イベント処理とは?

ホームページを訪問してきたユーザーが、何らかのアクションを行った時に任意の処理を実行することができます。

例えば、ボタンをクリックした時や画面をスクロールした時など、さまざまなアクションが考えられますが、これらを監視して実行できるのがイベント処理になります。

jQueryで扱えるイベントは多数ありますが、よく使われるものは以下の通りです!

イベント名内容
changeフォーム部品の状態に何らかの変化があった時に発動
click要素がクリックされた時に発動
blur / focus要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
loadドキュメントが読み込まれたあとに発動
resizeウィンドウサイズが変化した時に発動
scroll画面がスクロールした時に発動
keyup / keypressキーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedownマウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove指定の要素内でマウスが動いている時に発動
submitフォームが送信された時に発動
error何らかのJavaScriptエラーが発生した時に発動

そして、これらのイベント処理を行うのに必須とも言えるメソッドがon()になります。

例えば、ボタンがクリックされた時に任意の処理を実行するには次のように記述します。

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

この例では、on()メソッドの第1引数に【click】というイベント名を指定しています。これは、先ほど紹介した表の中にあったイベント名になります。第2引数には実行する処理をまとめた関数を指定します。この例では、コンソールログに指定した文字列を出力するという単純なものです。

このようなイベント処理を活用することで、jQueryではリッチなコンテンツを開発してホームページを魅力あるものに変えているわけです。

イベント処理についてさらに詳しい知識を学びたい方は、次の記事で豊富なサンプル事例と共に解説しているのでぜひ参考にしてみてください!

【jQuery入門】on()によるイベント処理の使い方まとめ!
更新日 : 2019年7月11日

フォームの制御

この章では、ホームページには欠かせないフォーム処理について見ていきましょう。主に、jQueryによるフォームの制御とバリデーションについて学んでいきます。

基本的なフォームのコントロール

フォーム自体はHTMLのformタグを利用して作成しますが、jQueryではユーザーが入力した値などを取得するのが一般的な使い方でしょう。

jQueryで取得した値は、サーバーへ送信したり入力に誤りがないかをチェックするなどさまざまな用途に利用することが可能で、自在にフォームを制御するための重要なポイントになります。

例えば、ユーザーが入力ボックスにどんな文字列を入れたのかを取得したい場合は次のようになります。

const result = $('input[type="text"]').val();

この例では、入力ボックスのinput要素に対してval()メソッドを利用することで、入力された文字列を変数resultに格納しています。対象となるinput要素は、もちろんID属性やname属性などで指定しても問題ありません。

また、チェックボックスのような複数選択可能なフォーム部品の値を取得するには、each()メソッドを次のように利用することができます。

$('input:checked').each(function() {

    console.log($(this).val());

});

この例では、セレクタに【input:checked】を指定していますが、これによりチェックされた要素を自動的にすべて対象要素にすることができます。そして、each()メソッドで繰り返し処理することで、選択された値を取得できるというわけです。

簡単なバリデーションの作り方

バリデーションは、フォームの入力が意図した通りに行われたかどうかをチェック(検証)することを意味しています。

これはjQueryでゼロからプログラムを組んでも良いのですが、便利なプラグインが提供されているのでこちらを利用するのが簡単です。

基本的な使い方として、例えば次のようなフォーム要素があるとします。


文字列の入力ボックスを必須項目とし、さらにメールアドレスしか入力できないというルールにしてみましょう。

基本的な記述方法は次のようになります。

$('form').validate({

    //バリデーションのルールを記述する

})

validate()の引数にオブジェクト形式でルールの設定を記述するだけで利用できます。今回の場合であれば、入力ボックスを必須項目としてメールアドレスのみの入力にします。

$('form').validate({
    rules: {
        mytext: {
            required: true,
            email: true
        }
    }
});

rulesプロパティの中にname属性(mytext)を指定して、そこに【required】【email】プロパティをtrueにするだけです。これで、このフォームのルールが設定されたので、メールアドレス以外の文字列を入力するとエラーが表示されるようになります。

バリデーションのプラグイン導入から応用的な使い方については、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【jQuery入門】validate()の使い方と独自ルールの設定方法!
更新日 : 2019年6月6日

まとめ

今回は、jQueryをホームページに組み込んで活用するためのポイントについて学習しました!

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

  • jQueryはscriptタグでファイルかCDN経由で読み込んで使う
  • セレクタとイベント処理を活用することでHTMLを制御できる
  • フォーム要素の値を取得したりバリデーションを実装できる

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。