jQueryが難しいと感じるのはなぜ？初心者がハマる落とし穴を徹底解説

jQueryはJavaScriptよりも簡潔に記述できるので初心者にもオススメなのですが、その反面jQuery独特の記述方法を最初に覚える必要があります。

ただし、jQueryの記述方法にはコツがあり、効率よく学習することで誰でも簡単に扱える特徴も併せ持っています。しかし、これらのコツはどのように学習していくのが良いのでしょうか？

そこで、この記事では初心者でも今日からjQueryの難しいと感じるポイントを解消するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

jQueryの導入

この章では、まず最初にjQueryの基本についておさらいをしておきましょう。主に、jQueryの概要と導入方法について学んでいきます。

ライブラリとは？

jQueryの中身はごく普通のJavaScriptで書かれたプログラムです。

主にDOM操作に特化した機能を提供しているわけですが、このような特定の機能に特化した機能を提供するプログラムをJavaScriptライブラリと呼びます。

ただ、jQueryはできることが非常に多くて、例えば以下のような機能を備えています。

このようにjQueryが持つ機能を活用すれば、Webページでやりたい処理はほとんど実現できるでしょう。

jQueryを導入する方法

jQueryを使い始めるのは簡単です。

公式サイトからファイルをダウンロードするか、以下のようなCDN経由のURLを利用することができます。

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

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

//jsDelivr
https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js

あとは、HTMLにscriptタグでjQueryのファイルを読み込めば良いのです。

これでjQueryを利用する準備が整いました。

jQueryの基本

この章では、jQueryを扱う上で重要な概念について見ていきましょう。主に、基本となる型についてとセレクタの概要について学んでいきます。

基本の型を覚えよう

jQueryを使う上でもっとも重要なのはその記述ルールを理解することです。

jQueryは誰でも簡単に扱えるように、ほとんどの記述方法を統一しています。しかも、たった2つのことを覚えるだけで理解できるほど簡単です。

その2つとは次のとおりです。

これをプログラムっぽく記述すると次のようになります。

$(対象のHTML).実行したい処理();

$( )の中に対象となるHTML要素を指定し、【.（ドット）】に続けて実行したい処理を記述するというわけです。

例えば、p要素に記述されているテキストを取得したければ次のようになります。

const text = $('p').text();

この例では、p要素を意味する$(‘p’)に続けて、テキストを取得するメソッドであるtext()を実行していますね。

このように、jQueryを覚える第一歩は基本となる型をまずは理解することになります。

セレクタの使い方を覚える

jQueryでは対象となるHTMLをCSSのセレクタを指定するように、とても柔軟な指定が可能になっているのも特徴です。このセレクタを使いこなすと、jQueryをさらに活用することができるでしょう。

まず基本として、HTMLタグをそのまま指定する方法を見てみましょう。

$('p')
$('a')
$('h1')
$('input')
$('textarea')

このように簡単な記述で指定できるわけですが、特定のHTML要素だけを指定したい場合に難しいことが分かります。例えば、p要素が10個ある場合に1つだけを特定するのは厳しいですよね。

そのため、もう少し具体的に特定の要素だけを絞るために、id属性やclass属性などがよく使われます。

$('#test')
$('.sample')

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

最後に記述した例はinput要素に付与しているname属性を利用しているのですが、このように記述することで他の属性を対象にすることも可能なわけです。

また、複数のセレクタをANDやORなどでまとめることで、さらに複雑なセレクタ指定も可能です。

//ANDによるセレクタ指定
$('.test.sample.text')

//ORによるセレクタ指定
$('#test, #sample')

ANDの場合は、複数のセレクタを連続して繋げることで実現します。上記の例だと3種類のclass属性が付与されたHTML要素だけを特定します。

ORの場合は、,（カンマ）で区切ることで複数のセレクタを指定します。上記の例だと2種類のid属性のどちらかが付与されているHTML要素を特定するというわけです。

このセレクタについての基本から活用方法を、次の記事で体系的にまとめているので参考にしてみてください。

これで完璧！jQueryのセレクタ操作を完全理解するコツまとめ！

更新日：2024年5月6日

イベント処理について

この章では、ダイナミックなWebページに欠かせないイベント処理について見ていきましょう。主に、

イベントについて知ろう

Webページにおけるイベントとはどんなことを意味するのかご存知でしょうか？

ほとんどの場合は、アクセスしたユーザー側が何らかの操作をしたタイミングで発生するのがイベントの特徴です。

例えば、以下のようなことが考えられます。

このように、ユーザー側が何らかの操作をするとイベントが発生するので、このタイミングで任意のプログラムを実行できるのがイベント処理になるのです。

そして、このさまざまなイベント処理はjQueryによってon()メソッド1つ利用するだけで、ほとんどのケースに対応できるようになっています。

基本的な型を覚えよう

イベント処理にも基本的な型が存在しており、このパターンを覚えるだけで誰でも簡単に扱えるようになっています。

その型とは次のとおりです。

対象要素.on( イベント名, 実行したい処理 )

イベント名に指定できるものとして、例えば以下のような名称があります。

イベント名	内容
click	要素がクリックされた時
change	フォーム部品の状態変化があった時
focus / blur	要素にフォーカスが当たった時 / 外れた時
load	ドキュメントが読み込まれた時
scroll	画面がスクロールした時
keypress / keyup	キーボードのキーが押された時 / 離した時
mousedown / mouseup	マウスのボタンが押された時 / 離した時
submit	フォームが送信された時
resize	ウィンドウサイズが変化した時

これらのイベント名を指定することで、さまざまなユーザー側のアクションに対して任意の処理を実行することができるわけです。

例えば、ボタン要素をクリックした時に文字列をコンソールログに出力するには次のように記述します。

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

対象要素として【button】タグを指定し、イベント名はクリック処理なので【click】を記述しています。あとは、実行したい処理として関数内にconsole.log()を記述するというわけです。

これにより、ユーザー側がボタン要素をクリックするとコンソールログに文字列が出力されます。

他にも、値渡しやデリゲートなど複雑なイベント処理について、次の記事で体系的にまとめているのでぜひ参考にしてみてください！

【jQuery入門】on()によるイベント処理の使い方まとめ！

更新日：2024年5月6日

まとめ

今回は、jQueryが難しいと感じるポイントについて学習をしました。

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

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