本シリーズは、jQueryの書き方を勉強し、その結果をまとめたものになる。
今回から、早速jQueryを書き始めていこう。
まだそこまで色々やるわけではないが、今回の内容は今後の下地になる非常に重要な部分だ。
それぞれで何をしているか、一個一個確実に理解しながら進めていこう。
前回の内容の復習
前回は初回ということもあり、そもそもjQueryとは何なのかという部分を軽く解説した。
結局はJavaScriptで、書く場所はJavaScriptであるというのと、使う際には大元となるjQueryのファイルを読み込む必要があることを覚えておいてもらえれば十分だろう。
また、その時に読み込むファイルもしっかり確認しておいてほしい。
以下がその記事だ。
今回のサンプルページ
では、早速本編へ…進む前に、まずは今回のサンプルページを紹介しておこう。
ページリンクはこちらで、ソースは以下の4つ。
- jquery
- course-02.html
- js
- jquery-02.js
- css
- style.css
- style-02.css
…前回の説明から早速変わっていて申し訳ない。
ページ全体のスタイル調整のため、style.cssを用意してそれを毎回読み込むことにした。
ここは完全にcssの内容なので、詳細は解説しない。
中身へのリンクをここに貼っておくので気になった方は見て欲しい。
…気を取り直して、サンプルページの確認をしてみよう。
三つの四角があり、それぞれ中身に書いてある通りだ。
一つ目は純粋にcssだけで見た目の調整を行っている。
二つ目、三つ目にもcssでは同じ指定をしているが、二つ目はjQueryでスタイルの変更をして赤字に。
三つ目は、カーソルを乗せたり離したりすると色が変わることが確認できるはず。
メインとなる3つのファイルの中身は以下の通りだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery講座第2回サンプルページ</title>
<!-- jQuery読み込み -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 各回ごとのJavaScriptファイル読み込み -->
<script type="text/javascript" src="./js/jquery-02.js"></script>
<!-- 必要に応じてcssファイル読み込み -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/style-02.css">
</head>
<body>
<!-- ヘッダー -->
<div class="header">
<h1 id="page-title">jQuery講座第2回サンプルページ</h1>
</div>
<!-- メインコンテンツ -->
<div class="main-contents">
<div class="contents">
<p>jQuery無し</p>
<p>元のスタイルでの表示</p>
</div>
<div class="contents change-01">
<p>jQueryありその1</p>
<p>cssスタイル変更</p>
</div>
<div class="contents change-02">
<p>jQueryありその2</p>
<p>マウスカーソルを乗せた時だけ変化</p>
</div>
</div>
</body>
</html>$(function(){
/* スタイル変更 */
$(".change-01").css("color", "red");
/* マウスを乗せた時にスタイル変更 */
$(".change-02").on("mouseover", function(){
$(".change-02").css({
"color": "white",
"background-color": "black"
});
});
/* マウスを外した時にスタイル変更 */
$(".change-02").on("mouseout", function(){
$(".change-02").css({
color: "black",
backgroundColor: "white"
});
});
});.contents {
border: 1px solid black;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1rem;
}先にざっと、HTMLファイルの中身を見てみる。
見て欲しいのは<!-- メインコンテンツ -->とコメントで書いてある部分。
そこだけ抜き出すと以下の通り。
<!-- メインコンテンツ -->
<div class="main-contents">
<div class="contents">
<p>jQuery無し</p>
<p>元のスタイルでの表示</p>
</div>
<div class="contents change-01">
<p>jQueryありその1</p>
<p>cssスタイル変更</p>
</div>
<div class="contents change-02">
<p>jQueryありその2</p>
<p>マウスカーソルを乗せた時だけ変化</p>
</div>
</div>全体を一個divタグで囲んでいるが、これは見た目調整用なのであまり気にしない。
その中身、三つのdivタグがあり、このそれぞれがページの四角で囲まれている部分だ。
全てにまず同じクラス名contentsをつけ、style-02.cssで基本的な見た目調整を行っている。
そして、二つ目にはchange-01、三つ目にはchange-02というクラス名を追加でつけている。
この二つが、今回jQueryで使用するクラスになる。
こんな構造になっていることを頭に入れつつ、次に進んでいこう。
jQueryでやっていること
では、メインの内容に入っていく。
まず、上のjquery-02.jsの内容を再掲しよう。
$(function(){
/* スタイル変更 */
$(".change-01").css("color", "red");
/* マウスを乗せた時にスタイル変更 */
$(".change-02").on("mouseover", function(){
$(".change-02").css({
"color": "white",
"background-color": "black"
});
});
/* マウスを外した時にスタイル変更 */
$(".change-02").on("mouseout", function(){
$(".change-02").css({
color: "black",
backgroundColor: "white"
});
});
});先頭に何やら書かれているが、そこは後で解説するのでいったん放置しよう。
セレクタとメソッド
まず見てほしいのは以下の部分。
$(".change-01").css("color", "red");大雑把に言ってしまうと、ここでは対象となるタグを取得し、そのタグのスタイルを変更している。
まず、最初についている$(".change-01")の部分。
このように、先頭にドルマーク、直後に小括弧で文字列を囲むことで、タグを取得することができる。
その文字列は、cssで指定するセレクタと同じ書き方だ。
今回はその文字列が.change-01なので、change-01というクラス名がついたタグを取得する、という意味になる。
もちろんID名で取得するなら#ID名だし、あるタグを一括で持ってくる場合にはそのままタグ名を書けばいい。
その後ろにドットを挟んでメソッドを書くことにより、その取ってきたタグへ処理を行うことができる。
今回は、css("color", "red")という処理。
このcssメソッドは、その名の通りスタイルを変更するメソッドになる。
引数は二つで、一つ目がcssのプロパティ、二つ目がそのプロパティに設定する値となる。
これらを文字列で(ダブルクォーテーションで囲んで)指定することで、その内容が反映される、というわけだ。
改めて、cssメソッドの書き方は以下の通り。
css(プロパティ, 値);今回はcolorプロパティをredに、つまり文字色を赤に変えており、サンプルページを見てもやはり赤に変わっていることが分かるだろう。
なお、メソッドの後はセミコロンが必要なのでお忘れなく。
…と書いてきたが、これだけ見るとcssでそれを指定しておけばいいじゃん、と思われるだろう。
それはその通りで、この部分はcssメソッドの紹介のために書いたようなものだ。
で、これをどう使うかは二つ目以降の内容で分かると思う。
では、その二つ目の処理を見てみよう。
$(".change-02").on("mouseover", function(){
$(".change-02").css({
"color": "white",
"background-color": "black"
});
});ここでやっているのは、まあコメントに書いた通りだが…カーソルをそのタグの部分に置いた時にスタイルを変更する、ということをしている。
細かく見てみよう。
最初の$(".change-02")は上と同じくchange-02というクラス名がついたタグを取得。
それに対し、今度はonメソッドをくっつけている。
これは、特定の状況になったら別の処理を行う、という情報を登録するメソッドだ。
この特定の状況をイベントと呼び、一つ目の引数でどんなイベントに対する処理か(=イベントタイプ)を指定する。
具体的なイベントタイプはマウスが対象の領域に乗った時や逆に離れた時、あるいはクリックされた時など、色々ある。
今見ている部分にはmouseoverという文字列を指定しており、これはマウスが乗った時を表している。
で、二つ目の引数に実際にどんな処理を行うか、というイベントハンドラを指定してあげる。
ここには別の関数を指定したり、あるいは今回のように直接その関数の中身を記載することも可能だ。
onメソッドの書き方をまとめると以下の通り。
on(イベントタイプ, イベントハンドラ);では、イベントハンドラの中身を見てみよう。
ここに書かれているのは、上で解説したcssメソッドだ。
こうすれば、カーソルを重ねた時にcssメソッドが実行されるようになる。
つまり、その時にスタイルの変更が行われるようになり、これでcssメソッドを使う意味が分かってくるだろう。
…しかし、引数の書き方が異なっている。
先ほどは二つ引数を取り、一つ目にプロパティ、二つ目に値を指定していた。
今回は中括弧で複数の組合せを書いている。
これは複数の組を一度に指定する方法で、こう書けば一括で指定した内容全てを反映させることができる。
この場合のcssメソッドの書き方を出すと以下の通り。
css({
プロパティ: 値,
プロパティ: 値,
...
プロパティ: 値
});こんな感じで、引数全体をまず中括弧で囲む。
その後、プロパティと値のセットをコロンで挟んで記述し、それをコンマで区切って並べていく。
cssファイルではセミコロンで区切っていたので、そこは注意だ。
また、最後のコンマは不要なので、書かないようにしよう。
そして、プロパティや値はそれぞれ文字列として指定するので、ダブルクォートなどで囲んでおこう。
これらを踏まえると、今注目している部分は…
「「クラス名change-02のタグの文字色を白、背景を黒に変更する」という処理をクラス名change-02のタグにカーソルが重なったら実行する」という情報を登録する
こんなことをしているのだ。
ここまで見てきたように、jQueryではあるタグを取得し、それに対して処理を行うという内容が頻繁に出てくる。
タグを取得するのは$(セレクタ)、その後ろにドットを挟んで処理を表すメソッドを書いていく、というのが基本的な書き方になる。
是非覚えておこう。
では、最後のブロックも見てみる。
$(".change-02").on("mouseout", function(){
$(".change-02").css({
color: "black",
backgroundColor: "white"
});
});二つ目とやっていることは非常に似ており、今回もイベントハンドラを登録している。
今回はmouseoutというイベントタイプを指定しており、これは対象タグからカーソルが離れた時を表している。
その処理の中身は、文字色を黒に、背景を白に変更するというもので、要するにマウスを重ねた時の変更を元に戻していることになる。
…さて、おかしな点が見つかっただろうか。
先ほど、cssに複数のプロパティ・値の組を指定する書き方を紹介したが、その時はダブルクォーテーションなどで囲むと説明した。
しかし、今回はプロパティが囲まれていない。
実は、プロパティ限定だが、条件に従って書き直すことでダブルクォートなしで指定することが可能になる。
具体的には、ハイフンが入っているプロパティについて、そのハイフンを取り除き、直後の1文字だけ大文字にする、というもの。
二つ目、プロパティ名はbackground-colorだが、記載がbackgroundColorとなっている。
このように書き方を直すことで、ダブルクォートを省略できるようになるのだ。
もちろん、ハイフンが元々ない場合はそのまま外すだけでOK。
…と解説はしたものの、個人的にこの書き方はあまり好きではないので、これ以降は元のプロパティ名をダブルクォーテーションで囲むタイプで書くことにしよう。
まあ、そうとも書けるよくらいの認識をしておいてもらえれば大丈夫だ。
以上で、中身の解説が完了だ。
読み込みを遅らせる処理
では、先ほど飛ばした先頭を見ていこう。
見てほしい箇所以外を省略すると、以下のような感じになっている。
$(function(){
/* 処理中身 */
});これは見出しにも書いた通り、その中身を読み込むタイミングを遅らせることをしている。
具体的には、HTMLファイルが最後まで読み込まれたタイミングで中身の処理が実行される。
なぜそんなことをしているのか、処理の流れの観点から見ていこう。
まず、このjQueryを書いているのは、そもそもJavaScriptだった。
そして、JavaScriptを含むHTMLは、上から順番に読み込んで処理がされていく。
…さて、上で解説してきたように、jQueryの中でタグを取得し、それに対して処理を行っていた。
しかし、このファイルをHTMLで読み込んでいる個所は、headタグ内だ。
つまり、何もしないと処理したいタグが読み込まれる前に上の処理を行おうとしてしまう。
その時はまだchange-01やchange-02というクラス名がついたタグが読み込まれていないので、読込先がないよ、という状況になってしまう。
ではこの先頭の内容をつけるとどうなるか。
まずこの箇所の前までは、通常通り読み進めていく。
今回で言えば、jQueryの読み込みまではそのままだ。
次に、このJavaScriptファイルを読み込む。
しかし、この先頭の内容を見て、一旦読み込みを飛ばして次の内容に進んでくれる。
cssファイルを二つ読み込み、bodyタグに入り、中身を読み込んで最後まで進む。
そして、最後を読み終えた時点でここに戻ってきて、改めて処理を読み進めるのだ。
こうすれば、クラス名change-01やchange-02のタグがすでに読み込まれていて見つかるので、正しく処理される、ということになる。
これも基本的な書き方の一つなので、しっかり覚えておこう。
おわりに
今回は、セレクタとメソッドの扱い方、読み込みを後回しにする書き方を解説した。
また、具体的なメソッドはcss、onの二つを紹介した。
今後も頻出するので、是非ここで覚えておきたい。
特にcssメソッドは他のメソッドと組み合わせて使うことが多いので、是非身に付けておこう。
また、サンプルの細かい部分を色々変えて、その結果どうなるかを試してみるのもいいだろう。
イベントタイプも調べてもらえれば色々と出てくる。
それぞれ、どんなタイミングを表しているか確認してみよう。
さて、次回は変数や関数を扱う。
ただ、それぞれが何者かというのはすでにJavaScriptを書ける人からすれば当たり前だろう。
そのため、一から解説するのではなく、今回の内容と組み合わせることをメインで進めていく。
基本は軽く触れるつもりだが、不安な方はまずJavaScriptの変数や関数を復習しておいてほしい。
2021/2/12追記
次回の内容を更新した。
JavaScriptの変数や関数を組み合わせた内容だ。
やはりjQueryはJavaScriptなので、このあたりもしっかり使うことができる。
どこまでがJavaScriptで、どこからがjQueryかをしっかり区別しながら進めていこう。
コメント