「jQueryの使い方を知りたい」
「jQueryを正しく書いたはずなのに動かない」
「jQueryって必要？」
こんな悩みにお答えします｡
jQueryの使い方(書き方)には3種類あり､jQueryは直接HTMLに書いた要素の場合と､jQueryで追加された要素の場合で書き方を変える必要があります｡
jQueryをこれから学ぶべきかどうかは､今後､どのような仕事をしていきたいかによって変わってきまが､ローカルビジネス案件ならまだ必要､大手IT企業などの自社開発では不要だと思います｡
この記事では､以下について解説しています｡
- jQueryのイベントの書き方
- 2021年､いまでもjQueryは必要か？
記事を読み終えると､jQueryの使い方､今後jQueryが必要か？がわかります｡
jQueryのイベントの書き方
jQueryのイベントはたくさんあるので､使うことが多い「click」を例に解説していきます｡
WordPressの場合は､「$」のところを「jQuery」と書き換えてください｡
【WordPress】jQueryの導入手順（読み込み、使い方）【JavaScript】
「jQuery」のはじめかたについて知りたいですか？この記事では「jQuery」の使い方（読み込み、書き方、チェック方法）について解説しています。あわせて、WordPressでの使い方についても解説します。ぜひご覧ください。
clickイベントを使う
いちばん基本的な書き方でいちばん最初に覚える書き方です｡
かんたんで単純な動作をさせたい場合は､この書き方でパッと書くことができます｡
$("button").click(function(){
alert("test");
});
上記の場合､以下のように読みます｡
「●●を◎◎したら､✕✕する」というパターンになります｡
- ●● … $("button") を
- ◎◎ … .click したら
- ✕✕ … (function(){ alert("test"); }); する
See the Pen jQuery clickイベント by hashi84 (@hashi84) on CodePen.
onイベントでclickを使う
jQuery1.7で使えるようになったイベントです｡
バージョンが古い場合使えません｡(古いバージョンでは「bind」です｡)
かなり古いサイトの修正時にうまく動作しない場合､jQueryのバージョンを確認してみましょう｡
onイベントにすることによって､複数のイベントをひとつの記述に書くことができます｡
button要素で複数のイベントが難しいのでinput要素にしてみます｡
$("button").on("click",function(){
alert("test");
});
See the Pen jQuery onイベント click by hashi84 (@hashi84) on CodePen.
documentにonイベントでclickを使う
jQueryを使うとHTMLに書かれていない要素を追加するなど動的な操作ができます｡
clickイベントでは動的に追加された要素を操作することができません｡
そのため､以下のようにdocument要素に
$(document).on("click","button",function(){
alert("test");
});
See the Pen jQuery document onイベント click by hashi84 (@hashi84) on CodePen.
2021年､いまでもjQueryは必要か？
Web上で発信している人の中には「これからjQueryを学ぶ必要はない」といわれる人もいます｡
結局､今現在と今後どうしていきたいか？にもよります｡
地方の中小の制作会社への就職(社員､パート､アルバイト)､フリーランスとして下請けで仕事をもらうなどの場合は必要です｡
jQuery無しで指示通りの動作をさせている場合でも､制作会社で修正できないため「jQueryを使ってください」といわれたこともありました｡
これは「jQueryを使ったプログラムならできます」という会社の場合です｡
完全にデザインの会社で「プログラムはまったくできない」という場合は､自分のできる技術を自由に使って制作することができます｡
- 制作会社(元請け)が､新しい技術に対応できていない
- 数年前に制作されたWebサイトの修正作業などができない
- 古いブラウザに対応しないとけないことがある
反対に東京などの大手のIT企業､自社開発をしている会社への就職､転職を目指している場合は必要ないのかもしれません｡
(実際に経験していないのでネットで見聞きしている情報のかぎりです｡)
まとめ
jQueryのイベントの書き方について解説しました｡
clickのイベントの場合､
- clickイベントを使うと､かんたんに書けて古いjQueryバージョンに対応できる
- onイベント､clickを使うと､複数のイベントをまとめて書ける
- document要素に､onイベントを使うと､動的に追加された要素にも対応できる
- jQueryを学ぶべきかどうかは､今後どうしていきたいかによる
- jQueryは､ローカルビジネス案件ならまだ必要､大手IT企業の自社開発などでは不要
jQueryがなんらかの理由で動かないときは､この単純な理由の可能性もあります｡
いちど見直してみてください｡
