スライドショー

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


jQueryで難しいと感じるのはどこだろう
ポイントを抑えて効率よくjQueryを勉強したい
セレクタやイベント処理などのコツを知りたい

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

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

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

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

jQueryの導入

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

ライブラリとは?

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

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

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

  • DOM操作の簡易化
  • クロスブラウザ対応
  • アニメーションの簡易化
  • Ajaxによる非同期通信の簡易化
  • プラグインによる機能拡張

このように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/[email protected]/dist/jquery.min.js

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





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

jQueryの基本

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

基本の型を覚えよう

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

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

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

  • 対象のHTMLはどれか?
  • どんな処理をしたいのか?

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

$(対象の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のセレクタ操作を完全理解するコツまとめ!
更新日 : 2019年5月9日

イベント処理について

この章では、ダイナミックな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()によるイベント処理の使い方まとめ!
更新日 : 2019年7月11日

まとめ

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

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

  • jQueryの中身はただのJavaScriptプログラムである
  • 基本パターンとして対象要素と実行したい処理の2種類を覚える
  • イベント処理はon()メソッドでほとんどのケースを対応できる

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説