【小学生でも分かる！】5分でjQueryが書けるようになる方法

2018/05/28 2019/10/23

こんにちは。

パラレルクリエイターのナナシロです。

今回は、Webサイト制作でコーディングをするみなさんへ向けた記事です。

とりわけ、

HTMLとCSSはだいたい分かったけど……
Webデザイナーだけどコーディングも覚えたい
jQueryやってみたけど心折れそう……（泣）

という方。

うわー！それ自分です！！

って思いました？笑

そんなあなたに朗報です。

今から、HTMLやCSSすらやったことのない小学生にでも分かるように、jQueryを習得するコツをご紹介します！

この記事を読み終わる頃には、もうあなたはjQueryでちょっとした動きは作れるようになっています。

jQueryを覚えるコツは、

️何を（例：ボタンを）
どうすると（例：クリックすると）
どうなる（例：アラートが出る）

を抑えることです。

なお、jQueryの導入の仕方については今回の記事では触れません。

あくまでjQueryをどう記述するかについて書いていきます。

また、とにかく分かりやすくするために、様々な記述の仕方がある中で、実用性の高いものだけをピンポイントでご紹介しています。

他の人の書いたコードをきちんと読めるようになりたい方や、より幅広い書き方を学びたい方は、この記事をきっかけにぜひ勉強してみてください。

jQueryの文法ををざっくり理解しよう！
何を
どうすると
どうなる
まとめ

1 １、jQueryの文法ををざっくり理解しよう！
2 ２、何を
3 ３、どうすると
4 ４、どうなる
5 まとめ

１、jQueryの文法ををざっくり理解しよう！

ではまず、jQueryで書かれたコードを見てみましょうか。

$(".btn01").on("click",function(){
  alert();
});

$(".btn01").on("click",function(){

alert();

});

この時点で、「おおう……」とうなってしまう人もいるかと思いますが、慌てるなかれ。

プログラミング言語は、英語や日本語と同じで「言語」なので、きちんと文法があります。

その文法の癖を覚えてしまえば、あとは実際にググりながら書いていくことができます。

さて。

よーく見ると、実はこのjQueryの記述、こういう文法になっています。

$("何を").on("どうすると",function(){
  どうなる
});

$("何を").on("どうすると",function(){

どうなる

});

なので、この文法に従ってさっきのjQueryの記述を日本語の文章で書き下すと、

「『.btn01』を、『click』すると、『alert();』する」

ということですね。

では、まず一番最初の「何を」から見ていきましょう。

２、何を

jQueryはイベントを設定するために用いられる言語（正確には、Javascriptのライブラリ）です。

イベントを設定する対象が必要です。

その対象を指定するときは、$(“”)、もしくは$(”)の間に、セレクタ（対象先）を挟む形で記述します。

代表的なセレクタの種類について以下で列挙しておきます。

タグ名

例えば、HTMLで、

<h2>〜<h2>
<p>〜</p>
<p>〜</p>

<h2>〜<h2>
<p>〜</p>
<p>〜</p>

<h2>〜<h2>
<p>〜</p>
<p>〜</p>

と書かれていて、この中のすべてのh2タグにイベントを設定したいとします。

そのときは、jQueryで

$("h2")

$("h2")

と書くと、すべてのh2タグにイベントを設定することができます。

#id名

例えば、HTMLで、

<div id="content-box">
〜
〜
〜
</div>

〜

</div>

と書かれていたとき、jQueryで

$("#content-box")

1	$("#content-box")

と書くことで、content-boxというid名の要素にイベントを設定することができます。

.class名

idとは、#か.かの違いだけですが、HTMLで、

<div class="btn-area">
〜
〜
〜
</div>

〜

</div>

と書かれていたとき、jQueryで

$(".btn-area")

1	$(".btn-area")

と書くことで、btn-areaというclass名の要素にイベントを設定することができます。

というわけで、基本的にはCSSのセレクタと一緒です。

なので、

$(".btn-area .btn")

$(".content-box > a")

$("h2 + p")

$("li:last-of-type")

$(".btn-area .btn")

$(".content-box > a")

$("h2 + p")

$("li:last-of-type")

などももちろんOK！

中級者向けに一点だけ注意。

擬似要素（:before、:after）に関しては、jQueryでセレクタに指定してもイベントを設定することができません！

これ結構やってしまいがちなので注意しましょう。

documentとwindow

さて、ここまでは完全にCSSと同じように指定できるという話をしてきましたが、実はjQueryで「何を」の部分に使える特殊なものがあります。

documentとwindowです。

documentは、「html部分」を指します。

windowは、「画面（ページ）全体」を指します。

え？何が違うの？

と思うかもしれませんが、この違いが分かっていないとjQueryが書けないというわけではないので、今回は説明を割愛しますね。

windowやdocumentは、後ほど「どうすると」の章でちょこっと触れます。

すでにお気付きだと思いますが、documentとwindowは、クォーテーションマークで囲う必要がありません。

（例）

×　$(“document”)

○　$(document)

気を付けましょう。

３、どうすると

さて、イベントを設定する先については、ここまででバッチリかと思います。

次は、何のアクションをとるとイベントが発生するのか、イベント発生の条件を設定していきましょう。

アクションにもいろいろありますよね。

画面をロードする
クリックする
タップする
スクロールする
画面のサイズを変える

などなど。

今回はその中でもよく出てくるものをご紹介しようと思います。

load：ページを読み込み終えると

ページが読み込み終わったタイミングでイベントを起こすことができます。

loadについては、「何を」にあたるものが「ページを」になるので、

必ず$(window)とセットで使います。

なので、

$("window").on("load",function(){
  //ページを読み込み終えたら実行するイベント内容
});

$("window").on("load",function(){

//ページを読み込み終えたら実行するイベント内容

});

と書きます。

なお、loadはあくまで、ページを”読み込み終わった後”です。

つまり、画像や動画などのデータがすべて表示されたタイミングで、イベントが実行されます。

しかし、

画像とか読み終わる前にイベントを実行したい！

ということもよくあるかと思います。

そんなときは、HTML部分だけ読み込み終えたタイミングでイベントを実行する方法があります。

これまで紹介してきた文法ルールとちょっとだけ違いますが、

$(document).ready(function(){
  //HTML部分だけ読み込み終えたら実行するイベント内容
});

$(document).ready(function(){

//HTML部分だけ読み込み終えたら実行するイベント内容

});

という書き方で、実現できます。

両者の違いはこんな感じですね。

resize：画面のサイズを変えるたびに

レスポンシブサイトを作りたい人がほぼ確実に使うのがこちら「resize」。

デバイスが変わったり、ウィンドウを狭めたりして、そのWebサイトの表示している画面サイズが変わったときにイベントを実行します。

resizeもloadと同様に、「何を」にあたるものが「画面（のサイズ）を」になるので、必ず$(window)とセットで使います。

書くとこんな感じ。

$("window").on("resize",function(){
  //画面のサイズを変えるたびに実行するイベント内容
});

$("window").on("resize",function(){

//画面のサイズを変えるたびに実行するイベント内容

});

ただ、resizeについては一つだけ注意事項があります！

それは、画面のサイズを”変えるたび”にイベントが実行されることです。

scroll：スクロールするたびに

scrollもloadやresizeと同様に、「何を」にあたるものが「画面を」になるので、必ず$(window)とセットで使います。

書くとこんな感じ。

$("window").on("scroll",function(){
  //スクロールするたびに実行するイベント内容
});

$("window").on("scroll",function(){

//スクロールするたびに実行するイベント内容

});

そして、resizeと同様に、”スクロールするたび”にイベントが実行されることも注意です。

click：クリックすると

ここまで全部$(window)でしたが（笑）、ここでようやく「何を」が活かせるものが出てきました。

「click」です。

例えば、btn01というclass名がついた要素をクリックする場合、

$(".btn01").on("click",function(){
  //btn01というclassがついた要素をクリックすると実行するイベント内容
});

$(".btn01").on("click",function(){

//btn01というclassがついた要素をクリックすると実行するイベント内容

});

こんな感じで書きます。

４、どうなる

ここまで読んで、「何を」「どうすると」までは設定できるようになりましたね！

というわけで、最後は「どうなる」を設定していきます。

最後なので、「何を」「どうすると」とセットで、jQueryでのイベント設定の完成形をイメージしてやっていきましょう。

例えば今、

「btn01というclass名のボタンを押すと、red-boxというclass名の四角いブロックが青くなる」

というイベントを作りたいとします。

完成形のイメージはこんな感じですね。

さぁ、ではまずはjQueryで実現したい内容を「何を」「どうすると」「どうなる」で分解してみましょう。

何を：btn01というclass名のボタンを
どうすると：押すと
どうなる：red-boxというclass名の四角いブロックが青くなる

はい、こんな具合ですね。

そうしたら、まずは「何を」「どうすると」をさくっと設定しちゃいましょう。

$(".btn01").on("click",function(){

});

$(".btn01").on("click",function(){

});

……はい、こんな感じ。

押す＝clickですね。

では、

「red-boxというclass名の四角いブロックが青くなる」

の部分を書いていきましょう。

実はこの「どうなる」の部分も、

「何が／を」「どうなる／どうする」

と分解できます。

何が／何を：red-boxというclass名の四角いブロックが
どうなる／どうする：青くなる

はい、OKですね〜。

で。

背景色を青く変えるとき、CSSでは「background-color: blue;」と書きますが、

jQueryで書くときは、「css(“backgroundColor”,”blue”);」と書きます。

CSSの「background-color」プロパティを「blue」に設定しますよ〜、という指示ですね。

たぶん、

「jQueryだと『background-color』じゃなくて『backgroundColor』って書くの……？」

と、不安になっている方がいると思いますが、今回はあくまでjQueryの基礎の基礎を学ぶ記事です。

あまりくわしく説明していると記事が長くなりすぎてしまうので、今回はさくっと進めますね。

気になる方は、自分でググッて調べてみてください！

というわけで、「どうなる」の部分をjQueryで書くとこんな風になります。

$(".red-box").css("backgroundColor","blue");

1	$(".red-box").css("backgroundColor","blue");

……さて。

ついに「何を」「どうすると」「どうなる」がすべて出揃いましたね……。

では、いざ合体。

$(".btn01").on("click",function(){
  $(".red-box").css("backgroundColor","blue");
});

$(".btn01").on("click",function(){

$(".red-box").css("backgroundColor","blue");

});

……実際どんな動きをするのか、見てみましょう。

（ループするgifアニメーションです。）

パーフェクト！

まとめ

さて、今回は5分でjQueryが書けるようになる方法について学んできました。

ただこれは基礎の基礎に過ぎません。

もっと様々な書き方がありますし、スライダーなどのjQueryプラグインはこういった文法を組み合わせた、より複雑な作りになっています。

（また、今回は説明していない「関数」という概念が理解できていないと、jQueryプラグインを読んだり書いたりするレベルまではいけません。）

なので、ぜひこの記事を、jQueryを学ぶきっかけにしてもらえたら嬉しいと思います。