Download - jQuery 004 012 mkj(02) - jQuery最高の教科書｜株式会 …jquery.shiftbrain.co.jp/pdf/shiftbrain-jquery-sample.pdfしていますが、その一方で、執筆期間中はjQuery

3

はじめに

　数年前であれば Flashを使用して表現していたインタラクティブな演出やアニメーションが、ここ最近は Flashに対応していないスマートフォンやタブレットなどの多様化に伴って、そのほとんどが JavaScriptで表現されるようになりました。　このような大きな潮流の中で注目を集めているのが「jQuery」です。複雑なコードになりがちな JavaScriptを手軽に扱うことのできる jQueryは、今ではWebクリエイターにとって必要不可欠な存在になっています。それにより、関連書籍も多数存在していますが、反面そのほとんどは開発者が一人で執筆しているため、プログラムを深く理解していることが前提の解説となっているものが多く、日常的にプログラミングを行っていないデザイナーにとってはとっつきにくい内容になっているものが多いのが現状です。

　そこで本書では「プログラム経験の少ないデザイナーでも容易に理解できる構成」を第一の目標として執筆を行いました。技術的な側面の解説やプログラミング手法、jQueryの詳細解説については、現場の第一線で日々業務を行っている経験豊富なプロフェッショナルの開発者が執筆を担当していますが、その一方で、執筆期間中は jQueryの知識が全くないデザイナーや、プログラミング未経験者を執筆チームに加えることで、これから jQueryを学ぶ人が「どこにつまづき」、「何に疑問を抱くのか」を常に検証し、そしてブラッシュアップしていきました。こういった日々の作業によって、確かな技術書として、より多くの人にとって最良の書籍となることを目指しました。この点は本書の強みの 1つです。　また、Webデザイン関連の書籍においては、学習過程で使用するサンプルのクオリティも非常に大切だと考えています。そのため本書では、ただ単に解説を補足するような単純すぎるサンプルの掲載を避け、多くの人が「作ってみたい」、「仕事でも使えそうだ」と感じるようなサンプルであることを目指しました。本書内で使用するサンプルはすべて、第一線で活躍するアートディレクター監修の元、現場で多くのプロモーションサイトを制作しているインタラクションデザイナーが制作しています。ぜひ、実際に手を動かしてこれらのサンプルを制作し、jQueryをより深く習得していただけると嬉しいです。　今後、世の中のデジタル化が進むことは間違いありません。そして、その社会を作っていくうえで重要な役割を担うのは、みなさんをはじめとするクリエイター達です。本書が、みなさんがこれから制作していくであろうサイトや作品の一助となり、新しい表現がWeb上に登場することを心より祈っています。

　最後に、通常の案件業務がありながらも、社内をマネジメントしてくれた仲村くん、素晴らしいサンプルを作ってくれた許くん、奥村さん、そして、執筆を担当した、安友さん、丈さん、鈴木慶太郎くん、本当にお疲れさまでした。そして執筆チームの面倒を丁寧にみてくださった SBクリエイティブの岡本晋吾さん、そして、何よりこの本を手に取ってくれた読者の方に感謝いたします。

2013年 11月株式会社シフトブレイン代表取締役　加藤琢磨

4 5

Contents

● コードの解説��39

● サンプルコードを書き替えてみよう！� ��40

Column 数値と文字列の違いに注意する��42

● jQuery の最も基本的な構文の解説��42

● HTML の準備が整うのを待つ仕組み��46

● ここまでのまとめ� ��48

Column css() メソッドに関する追加説明��49

02-03　 STEP 2 タイミングをコントロールしてみよう� ��51



● メソッドチェーンとは��57


02-04　 STEP 3 アニメーションさせてみよう� ��59



● その他の主な引数� ��62

Column さまざまなイージング��64

● animate() メソッドの仕様に関する注意点��66


Chapte

r

03 jQueryの基本的な書き方� 69

03-01　データを格納するさまざまな入れ物��70

● オブジェクトとは� ��70

● 変数とは��71

● 配列とは��75

● 特殊な入れ物「this」��77

03-02　特定の機能をまとめる「関数」� ��82● 関数とは��82

● 用意されている関数とオリジナルの関数��83

● 関数の作り方��83

● 関数の呼び出し方� ��84

● 無名関数��85

Column 無名関数を変数に格納する��86

本書のサンプルデータ��2

Chapte

r

01 jQueryの基礎知識と本書の特徴� 13

01-01　jQuery の基礎知識��14

● jQuery とは��14

● jQuery の特徴と広く利用されている理由��17

Column ライブラリ、プラグイン、関数、拡張ライブラリの違い��22

01-02　本書の目的と構成��23

● 本書の目的と特徴的な解説方法��23

● 本書の構成��24

01-03　jQuery の実行環境の準備��28

● サンプルファイルのダウンロード��28

● jQuery のダウンロード��30

01-04　デバッグ方法��32

● Chrome を使用したデバッグ��32

● Safari を使用したデバッグ��33

Chapte

r

02 3ステップではじめるかんたんjQuery入門� 35

02-01　体験することからはじめよう！��36

● サンプルファイルについて��36

● 本書の解説の流れ� ��38

Column JavaScript の記述場所��38

02-02　 STEP 1 CSSのスタイルを変更してみよう��39

Contents

6 7

Contents

04-04　見え隠れするサイドバー�� 123

● サイドバーの HTML�� 123● サイドバーの CSS�� 124● サイドバーの JavaScript（jQuery）�� 125● button 要素がクリックされた際に最初に実行される処理�� 126

● if 文による分岐処理�� 126

Column toggleClass()、addClass()、removeClass() メソッド�� 128

04-05　タイポグラフィの表現�� 129

● タイポグラフィ表現の HTML�� 129● タイポグラフィ表現の CSS�� 130● タイポグラフィ表現の JavaScript（jQuery）�� 130● プラグインの使い方�� 131

Column プラグイン『jquery.typoshadow.js』の処理内容�� 132

Chapte

r

05 活用の幅を広げる�jQueryの必修テクニック� 133

05-01　 Basic 滑らかな動きのスライドショー�� 135

● スライドショーの概要�� 135

● スライドショーの処理の流れ�� 135

● スライドショーの HTML と CSS�� 136● スライドショーの JavaScript（jQuery）�� 137● 変数の準備�� 138

● スライドショーの実行�� 140

Column JavaScript が無効になっている場合を考慮する�� 143

05-02　 Advanced 多機能なスライドショー�� 144

● スライドショーの概要�� 144

● スライドショーの HTML�� 145● スライドショーの構造�� 146

● スライドショーの CSS�� 147● スライドショーの JavaScript（jQuery）�� 150● 変数の準備�� 153

● スライドの配置と、インジケーターの生成・挿入�� 154

● スライドショーを動かす各機能の概要� �� 156

03-03　スコープと命名規則��87

● スコープ��87

● 変数名と関数名の命名規則��88

Column 変数や関数（メソッド）の返り値を確認する方法��89

03-04　演算子��90

● 算術演算子��90

● 代入演算子��90

● 比較演算子��91

● 論理演算子��92

03-05　主な制御文��93

● 条件分岐＿ if 文��93

● 条件分岐＿ switch 文��95

● 繰り返し処理＿ for 文��96

Chapte

r

04 確かな基礎力を養うjQueryの基本テクニック� 99

04-01� �さまざまなホバーエフェクトで学ぶ動きのある表現の基本�� 100

● ホバーエフェクトの HTML�� 100● ホバーエフェクトの CSS�� 101● 1 行目のボタンの JavaScript（jQuery）�� 102● 2 行目のボタンの JavaScript（jQuery）�� 104● 3 行目のボタンの JavaScript（jQuery）�� 105

04-02　画像とキャプションの表現�� 109

● キャプション表現の HTML�� 109● キャプション表現の CSS（共通部分）�� 110● 1 つめの画像のキャプション表現�� 111

Column filter() メソッドと find() メソッドの違い�� 113

● 2 つめの画像のキャプション表現�� 114

● 3 つめの画像のキャプション表現�� 115

04-03　丸いボタンのレイアウト�� 118

● 丸いボタンの HTML�� 118● 丸いボタンの CSS�� 119● 丸いボタンの JavaScript（jQuery）�� 120

8 9

Contents

● jQuery UI Tabs の基本的な使い方� �� 193

● ハイライトの位置を調整する関数＿ moveHighlight() 関数�� 194

05-07　 Basic スムーズスクロール�� 196

● スムーズスクロールの仕組み�� 196

● スムーズスクロールの HTML と CSS�� 197● スムーズスクロールの JavaScript（jQuery）�� 197● クリックイベントへの処理の登録�� 198

● scrollTop プロパティを利用できる要素の検出�� 199

05-08　 Advanced 拡張性のあるスムーズスクロール�� 200

● スムーズスクロールの仕組み�� 200

● スムーズスクロールの HTML と CSS�� 201● スムーズスクロールの JavaScript（jQuery）�� 202

Column 任意のページ内リンクでスムーズスクロールを有効にする方法�� 202

Chapte

r

06 高機能なギャラリーページを作ってみよう！�203

06-01　ギャラリーページの全体像�� 204

● ギャラリーページの主な機能�� 204

● 本章の解説の流れ� �� 205

06-02　 Basic シンプルなギャラリーページの作成�� 206

● 動作確認に関する注意点�� 206

● 2 つの JavaScript ライブラリ�� 206

● ギャラリーページの HTML と CSS�� 208● ギャラリーページの元データの構造�� 209

● ギャラリーページの JavaScript（jQuery）�� 211● このサンプルの処理対象となる HTML 要素�� 212

● Masonry の準備�� 212

● $.getJSON() メソッドによる JSON データの取得�� 213

● $.each() メソッドによるループ処理�� 213

● HTML 文字列の生成�� 215

● Masonry による各要素のレイアウト�� 217

Column JavaScript による文字列の記述方法�� 219

06-03� Advanced �フィルタリング機能を持つギャラリーページの作成�� 220

● 任意のスライドを表示する関数＿ goToSlide() 関数�� 156

● ナビゲーションとインジケーターの状態を更新する関数＿ updateNav() 関数�� 158

● クリックイベントに処理を登録する�� 160

● タイマーの開始と一時停止＿ startTimer() 関数と stopTimer() 関数� �� 162

● スライドショーの開始�� 163

Column タイマーの仕組み� �� 164

05-03　 Basic スティッキーヘッダー�� 165

● スティッキーヘッダーの概要�� 165

● 処理の流れ�� 166

● スティッキーヘッダーの HTML と CSS�� 166● スティッキーヘッダーの JavaScript（jQuery）�� 168● 変数の準備�� 169

● ウィンドウのスクロールイベントを監視する処理�� 170

● ウィンドウのスクロールイベントを発生させる処理�� 171

05-04　 Advanced デザインが変化するスティッキーヘッダー�� 173

● スティッキーヘッダーの概要�� 173

● スティッキーヘッダーの仕組み�� 174

● スティッキーヘッダーの HTML と CSS�� 174● スティッキーヘッダーの JavaScript（jQuery）�� 176● 変数の準備�� 177

● HTML 要素の挿入�� 179

● ウィンドウがスクロールされた際の処理�� 179

05-05　 Basic 画面領域を有効活用できるタブ�� 181

● タブの仕組み�� 181

● タブの HTML�� 182● タブの CSS�� 183● タブの JavaScript（jQuery）�� 184● 変数の準備�� 185

● タブがクリックされたときの処理�� 185

05-06　 Advanced 高機能で拡張しやすいタブ�� 188

● タブの仕組み�� 188

● jQuery UI とは�� 189

● タブの HTML�� 190● タブの CSS�� 191● タブの JavaScript（jQuery）�� 192● 変数の準備�� 193

10 11

Contents

● 画像の読み込み状況の監視とプログレス表示への反映�� 255

● 画像の読み込み状況をプログレス表示に反映する＿ updateProgress()関数�� 256

● プログレス表示の終了処理�� 258

07-02　画像シーケンスのアニメーション�� 260

● 画像シーケンスのアニメーションの概要�� 260

● アニメーションの仕組み�� 261

● 画像シーケンスのアニメーションの HTML�� 261● 画像シーケンスのアニメーションの CSS� �� 262● 画像シーケンスのアニメーションの JavaScript（jQuery）�� 262● 使用する変数の準備�� 265

● マウスホイールイベントの取得�� 265

● アニメーションの開始＿ startAnimation() 関数�� 266

● アニメーションの内容＿ animateSequence() 関数�� 267

● アニメーションの終了＿ stopAnimation() 関数�� 269

● 全画面表示�� 269

07-03� �回転のアニメーションによるインフォグラフィック�� 272

● インフォグラフィックとは�� 272

● 今回のサンプルのポイント�� 273

● パイチャートの仕組み�� 273

● インフォグラフィックの HTML�� 274● インフォグラフィックの CSS�� 275● transform プロパティのアニメーション�� 277

● インフォグラフィックの JavaScript（jQuery）�� 278● 各チャートの処理－準備�� 279

● 各チャートの処理－角度の操作�� 280

07-04　マスクのアニメーション�� 284

● 今回のサンプルの仕組み�� 284

● マスクのアニメーションの HTML�� 285● マスクのアニメーションの CSS�� 286● animate() メソッドで CSS の clip プロパティを操作する方法�� 287

● マスクのアニメーションの JavaScript（jQuery）�� 287● マスクのアニメーション�� 290

● 今回追加する機能の概要�� 220

● 関数の分離�� 221

● Basic 版との主な違い�� 222

● ギャラリーサイトの HTML�� 223● ギャラリーサイトの CSS�� 224● ギャラリーサイトの JSON�� 225● ギャラリーを初期化する関数＿ initGallery() 関数�� 226

● アイテム群を生成し、ドキュメントに挿入する関数＿ addItems() 関数�� 228

Column 正規表現の基本�� 231

● フィルタリング機能の仕組み�� 233

● アイテムのフィルタリング機能＿ filterItems() 関数�� 234

● ラジオボタンのカスタマイズ�� 236

06-04　 Advanced 選択画像の拡大機能とキャプションの追加�� 237


● Colorbox のダウンロードと読み込み�� 238

● Colorbox の実行�� 238

06-05� Advanced �マウスの移動方向によるホバーエフェクト機能の追加�� 240


● ホバーエフェクトの HTML�� 241● ホバーエフェクトの CSS�� 242● ホバーエフェクトの JavaScript（jQuery）�� 242● オーバーレイのアニメーション＿ hoverDirection() 関数�� 243

Column 通常の関数と即時関数の違い�� 246

● マウスの方向を検出する＿ getMouseDirection() 関数�� 247

Chapte

r

07 jQueryを活用したさまざまな表現� 249

07-01　画像の読み込みのプログレス表示機能�� 251

● プログレス表示機能の概要�� 251

● プログレス表示に必要な処理�� 252

● プログレス表示の HTML と CSS�� 252● プログレス表示の JavaScript（jQuery）�� 253● 表示に必要な要素を jQuery オブジェクト化�� 254

12

Appendix jQueryリファレンス� 291

● Core －コア�� 292

● Selectors －セレクタ�� 293

● Traversing －検索�� 296

● Attributes/CSS －属性と CSS�� 298● Manipulation －操作�� 300

● Events －イベント�� 303

● Effects －エフェクト�� 304

● Ajax�� 305● Utilities －ユーティリティ�� 306

● 本書で使用している外部ファイル�� 307

● Normalize.css�� 307● Modernizr�� 308● HTML5 Shiv�� 309

索引�� 311

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

36

Chapter 02 3 ステップではじめるかんたん jQuery 入門

37

02-01　体験することからはじめよう！

　前章でも触れましたが、jQueryはとてもシンプルな JavaScriptライブラリであるため、初心者の方でも要点さえ理解すればすぐに使用できるようになります。しかしその反面、多機能でもあるため、基礎知識がない状態で膨大なリファレンスを先頭から読み進めたり、Web上に散らばっている断片的な情報を拾い読みする方法だけでは、「何をどう使えば良いのか」、「何から覚えたら良いのか」がわかりにくいという一面もあります。初心者の方が効率良く jQueryを習得するためには、適切な順番で jQuery の機能や使用方法を学んでいくことが必要です。そこで、まずは以下の 3つのステップで実際に手を動かしながら、jQueryの基礎とそれに関連する

JavaScriptの基礎を学んでいきましょう。

STEP 1 CSSのスタイルを変更してみよう

STEP 2 タイミングをコントロールしてみよう

STEP 3 アニメーションさせてみよう

　この 3つのステップではいずれもシンプルな機能しか利用しませんが、これらは jQueryにおける「見た目の表現」に関する基礎となります。そのため、読み進めていくと表現の幅が広がっていく感覚を実感できると思います。

サンプルファイルについて

　本章では、前節でダウンロードした本書のサンプルファイルのうち、［Chapter02］フォルダ内のファイルを使用します。フォルダ内の index.htmlをブラウザで開くと以下のようなシンプルなページが表示されます。

Fig index.html

　index.htmlをテキストエディタなどで開き、内容を確認しておきましょう。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Creative jQuery</title><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/main.css">

<script src="./js/vendor/jquery-1.10.2.min.js"></script><script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script><script src="./js/main.js"></script></head><body>

<header class="page-header" role="banner"> <h1>Creative jQuery Sample</h1></header>

<div class="page-main" role="main"> <div id="typo"> <div class="inner">Creative jQuery</div> </div></div>

<footer class="page-footer" role="contentinfo"> <small class="copyright">COPYRIGHT © <a href="http://www.shiftbrain.co.jp" target="_blank"> SHIFTBRAIN Inc.</a> </small></footer>

</body></html>

html サンプルファイルのHTML� index.html

●❶

●❷

　head要素内で複数の CSSファイルを読み込んでいますが❶、normalize.cssはクロスブラウザ対応のためのファイルです。このファイルについては P.307を参照してください。本章を読み進めるうえでは特に詳細を把握しておく必要はありません。　また、3つの JavaScriptファイルを読み込んでいますが❷、これらのうち、本章でみなさんが使用するのは main.jsのみです＊1。main.jsは、みなさんが本書を読み進めながらプログラムを記述していくために用意した空のファイルです（何も記述されていません）。

＊１ main.jsよりも先に（上部で）読み込んでいる2つのファイルは、jQueryのファイルとjQueryの拡張ライブラリである「jQuery�UI」です。jQueryUI については、これを使用するタイミングで別途説明します。

体験することからはじめよう！01Cha

pter 0

2

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

38


39

02-02　CSSのスタイルを変更してみよう

本章の解説の流れ

　本章では、基本的に以下の流れで解説を進めていきます。

（１）main.jsをエディタで編集する

（２）編集後にブラウザで開き、動作確認を行う

　書籍を読むだけ、サンプルを見るだけではなかなか身につきません。そのため、本章のmain.jsは、あえて空っぽの状態でスタートします。入力するのが面倒だと感じる方もいるかもしれませんがそれがプログラムというものです。きちんと技術を身につけるためにも、実際に手を動かしてプログラムを書いていくことをお勧めします。それでははじめましょう！

本章のサンプルについては、IE8 などの古いブラウザではサポートされていない CSS プロパティが一部に含まれています。そのため、動作を確認する際はなるべく新しいブラウザを使用してください。なお、5章以降で解説するサンプルでは一部の古いブラウザにも対応しています。

本章のサンプルファイルの対応ブラウザPoint!

Column

JavaScript の記述場所

　JavaScript は、HTML内に直接記述する方法と外部ファイルに記述して読み込む方法がありますが、本書では外部ファイル（main.js）に記述して読み込む方法を採用しています。　HTMLに記述する方法は手軽ではあるのですが、HTMLと JavaScript が 1 つのファイルにまとまってしまうため、Webサイトが複雑になればなるほど、管理性や更新性が損なわれてしまいます。現在では外部ファイルに記述して読み込む方法が一般的に採用されています。　なお、外部ファイルに記述して読み込む方法の場合は、js ファイルの読み込む順番に注意が必要です。上記では、jQuery の js ファイルを先に読み込んでから、main.jsを読み込んでいるのがわかると思います。このように、先に jQuery を読み込んでおかないと、main.js

のプログラムから jQuery を使用することはできません（エラーになります）。

　まずは、jQueryを使用して CSSのスタイルを変更してみます。　main.jsをエディタで開き、以下のコードを追加してください。この段階ではコードの意味を理解する必要はありません。後で詳しく解説します。

$(function(){ $('#typo').css('color', '#ebc000');});

JavaScript CSSのスタイルの変更（#typoの要素の変更）� main.js

　上記のコードを追加したら main.jsを保存して、ブラウザをリロードします。すると下図のように #typoの要素の文字色が変わります＊1。

Fig 「Creative�jQuery」と書かれた箇所の変更

コードの解説

　それでは先ほど追加したコードの内容を見ていきましょう。理解しやすいようにコードを以下の 2つのパートに分けます。

$(function(){ //2つめのパートが記述されている});

JavaScript 1つめのパート� main.js

＊１ #typoの要素が変化しない場合は、記述ミスをしている可能性があります。ブラウザの開発者ツールを起動してコンソールを確認してみましょう（P.32）。

CSSのスタイルを変更してみよう02Cha

pter 0

2

STEP 1

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

40


41


$('#typo').css('color', '#ebc000');


　1つめのパートのコードの意味は後で説明します（⇒ P.46）＊2。ここでは 2つめのパートを見てください。CSSをご存じの方であれば、コードの細かい意味はわからなくても、どのような処理をしているのか想像できたのではないでしょうか。このコードの内容は以下の通りです。

$('セレクタ').css('プロパティ ', '値');

Fig スタイルを変更するコードの内容

要素説明

セレクタここにはCSSと同じセレクタを指定できる。サポートされていないものも多少あるが、特定の要素を指定するのに困ることはない

プロパティ CSSのプロパティを指定する

値プロパティに設定する値を指定する

Table 書き換え可能な箇所

　つまり、このコードは「“セレクタ”に該当する要素のCSSの“プロパティ”を“値”に変更する」という処理を行います。そうです、CSSの知識をそのまま使用できるのです＊3。世の中のインタラクティブな動きのあるWebサイトは、基本的にはこのように「JavaScriptで CSSを随時書き替える」ことで実現されています＊4。このコードはそのほんの入口ですが、とても重要です。

サンプルコードを書き替えてみよう！

　本章のサンプルは HTMLの要素が少ないため、あまりいろいろな実験はできませんが、ここで実際に以下のような感じでセレクタやプロパティ、値を自由に書き替えてみてください。

HTML内の各要素を jQueryで操作できることがわかります。

$(function(){ $('#typo .inner').css('transform', 'rotate(10deg)');});

JavaScript 変更例①� main.js

＊2 1 つめのパートのコードにはコメントアウトが含まれています。//以降の文字列は行末までコメントアウトされます。複数行のコメントアウトはCSSと同じ /* 《コメント》 */です。

＊3 jQuery では、該当する各要素の style 属性の情報を書き換えることでCSSを適用します。そのため、CSSで「!important」を使用している項目は、その設定が優先されるので注意してください。

＊4 Flash や CSS3、canvas などによる表現は除きます。

　上記のコードを保存してブラウザをリロードすると以下のようになります。

Fig 変更例①の表示

　このように、CSS3プロパティである transformプロパティの rotate()関数も問題なく使用できます＊5。　もう 1つ例を見てみましょう。

$(function(){ $('.page-main > div:nth-child(1) .inner').css('opacity', 0.5);});

JavaScript 変更例②�� main.js

　上記では無意味に長いセレクタで［変更例①］と同じ #typo .innerを選択しています。ご覧の通り、jQueryは古いブラウザでは使えない :nth-child()などの CSS3セレクタにも対応しています。ここでは opacity（要素の不透明度）を 0.5（50%）に指定しています＊6。上記のコードを保存してブラウザをリロードすると以下のようになります。

Fig 変更例②の表示

＊5 transformプロパティには通常はベンダープレフィックスが必要ですが（執筆時点）、プロパティのベンダープレフィックスは jQuery が自動的に付加してくれます。ただし、「値」にベンダープレフィックスが必要な場合は付加した文字列を渡す必要があります。

＊6 IE8 以下では、opacity（不透明度）の指定方法が異なりますが、jQuery が自動的に差異を吸収してくれるので統一的に「opacity」と 0〜 1の数値で指定できます。

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

42


43


Column

数値と文字列の違いに注意する

　上記でいくつかの指定例を示しましたが、値の指定方法が 2通りあることに気づいたでしょうか。最初の例では「css('color', '#ebc000')」のように値を「'」（シングルクォーテーション）で囲っていますが、2つめの例では「css('opacity', 0.5)」のように直接数値を指定しています。これらの見た目はそれほど変わりませんが、プログラム的には大きく異なるので注意してください。　jQuery では「'」や「"」には以下のような役割があります。

重要「'」（シングルクォーテーション）または「"」（ダブルクォーテーション）で囲まれた箇所は文字列として認識されます。そのため文字列以外、例えば数値を指定する場合は「'」や「"」で囲まずに値を指定することが必要です。

　JavaScript はとても寛容なプログラム言語なので、数値を指定すべき箇所に「'」を記述して指定しても（文字列を指定しても）自動的に数値に変換して処理してくれる場合があるので、必ずしもエラーになるわけではありませんが、エラーになる場合もあるので、なるべく上記のルールを守り、数値を指定すべきところには数値を指定し、文字列を指定すべきところには文字列を指定するように心がけてください。

jQueryの最も基本的な構文の解説

　CSSのスタイルを変更する方法が何となくわかった所で、コードの内容をもう少し掘り下げて見ていきます。ここからは少しボリュームがありますが、少しずつ理解を深めていきましょう。　まずは先ほどパート分けした 2つめのパートを使用して、jQuery の基本的な構文と考え方を解説します。

$('#typo').css('color', '#ebc000');


　これを jQuery的に解釈すると「$('#typo')というモノ（命令の対象）に対して、css

('color', '#ebc000')という命令を指示している（命令の内容）」と捉えることができます。なぜこのような解釈になるのでしょうか。1つずつ見ていきましょう。

命令の内容：jQuery メソッドと引数

　まずは命令の内容の部分を見てみます。

css('color', '#ebc000');

JavaScript 命令の内容� main.js

　コードの解説で触れた通り、css()では「()」（カッコ）の中に記述した 'color'が CSSのプロパティ、'#ebc000'がそのプロパティの値に相当し、「CSS の color プロパティに#ebc000を指定せよ」という命令であることがわかります。　この css()という命令は、JavaScriptに定義されている命令ではなく、jQuery独自の命令です。jQueryの jsファイルの中に css()という命令が定義されており、その命令を main.js

から利用しています。このような jQuery独自の命令のことを「jQuery メソッド」と呼びます（以降は「メソッド」と記述します）。　また、css()の「()」の中に記述した CSSプロパティや値のように、メソッドに引き渡されるデータを「引数」と呼びます＊7。　まずは、上記のコードが jQuery のメソッド（css()）と 2つの引数（'color', '#222'）で構成されているということを把握しておいてください。

.css('color', '#222');

jQueryメソッド 2つの引数

Fig スタイルを変更するコードの内容

命令の対象：$() 関数と jQuery オブジェクト

　さてここで css()というメソッドの「命令の対象」になっているのは「id="typo" が指定されているHTML要素」ですが、jQueryでは HTML要素に対して直接 css()メソッドを実行することはできません。メソッドを使用するためには、jQuery独自の形式で命令の対象を指定することが必要です。それが以下の部分になります。

$('#typo')

JavaScript 命令の対象部分� main.js

＊7 メソッドに引数を指定することを「引数を渡す」といい、メソッドを実行することを「メソッドを呼ぶ（呼び出す）」といいます。

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

44


45


　$()と CSSのセレクタ（上記では '#typo'）の関係は、先述した css()メソッドと引数（CSS

プロパティおよび値）の関係と同じです。セレクタは $()の引数として渡されています。

$('#typo');

関数 1つの引数

Fig 命令対象の内容

　$()は「HTML要素をもとにして jQuery 独自の要素を生成する」という機能を持っている関数です。HTML要素を指定する方法として、CSSのセレクタを指定できます。この $()関数によって jQueryの形式に変換された要素のことを「jQuery オブジェクト」と呼びます。

　$()と css()は、引数を伴うという意味では類似していますが、$()はメソッドとはいわず、「関数」といいます。この辺りが少しややこしいのですが、現時点では、命令文の前に「.」（ドット）がついているものは「メソッド」、ついていないものは「関数」だと理解しておいてください。

メソッドと関数Point!

　今回使用したコードを用いて解説すると、「$('#typo')」の指定によって index.html内の全 HTMLのうち、以下の赤字の箇所の要素のみが jQueryオブジェクトに変換されます❶。このことから「$('#typo')」に続いて指定されているメソッドは、この jQueryオブジェクトに対して実行されると理解できます。

　他の例を挙げると、例えば「$('h1')」を指定した場合は、以下の要素が jQueryオブジェクトに変換され、これが命令の対象になります❷。

//省略<body>


<div class="page-main" role="main">//省略

html jQuery オブジェクトとして変換される要素（コード内の赤字の箇所）� index.html

●❷

$( )

要素 F

要素 E

要素 D

要素 C

要素 A

要素 B

HTMLファイル jsファイル

要素 B

jQueryオブジェクト

変更

$( )要素 E

jQueryオブジェクト

変更

Fig HTML要素と jQuery オブジェクトの関係

　また、処理の流れも基本的に以下の通りです。

（１）$()関数で命令の対象となるHTML要素を jQuery オブジェクトに変換し、

（２）その jQuery オブジェクトに対してメソッドを呼び出して変更を加える

　jQueryには、css()メソッド以外にも、たくさんのメソッドが用意されていますが、どのメソッドの場合でもこの流れは変わりません。これが jQueryの基本です。ここで登場した各用語の関係は次の図のように表されます。これらが jQueryにおいて最も重要な登場人物になりますので、しっかりと関係性を把握しておいてください。

//省略<body>


<div class="page-main" role="main"> <div id="typo"> <div class="inner">Creative jQuery</div> </div></div>

<footer class="page-footer" role="contentinfo"> <small class="copyright">COPYRIGHT © <a href="http://www.shiftbrain.co.jp" target="_blank"> SHIFTBRAIN Inc.</a> </small>

html jQuery オブジェクトとして変換される要素（コード内の赤字の箇所）� index.html

●❶

</footer>

</body>//省略

Chapter

01

Chapter

02

Chapter

03

Chapter

04

Chapter

06

Chapter

05

Chapter

07

Appendix

46


47


$( )HTML要素 . メソッド引数1 引数2(' ',' ')

jQueryオブジェクト変更する命令

Fig 主な登場人物の関係図

「.」（ドット）と「;」（セミコロン）の役割

　今回解説に使用しているコードでは、$()関数（jQueryオブジェクト）に続けて css()メソッドが指定されていました。この関数とメソッドの間にある「.」（ドット）には jQuery オブジェクトと jQuery メソッドをつなぐ役割があります。　また、行末の「;」（セミコロン）は、JavaScriptの「文」の終わりを表す記号です。日本語の文における「。」にあたるものです。いくつかの例外もあるのですが、現時点では JavaScript の 1つの命令が終わったら「;」をつけると覚えておいてください。

$( )HTML要素 . メソッド引数1 引数2(' ',' ')；

jQueryオブジェクトとメソッドをつなぐ役割

JavaScriptの処理が終わったことを示す役割

Fig 「.」（ドット）と「;」（セミコロン）の役割

HTMLの準備が整うのを待つ仕組み

　さて、後に回していたサンプルコードの 1つめのパートについて解説します。

$(function(){ //2つめのパートが記述されている});


　このコードの役割を確認するために、1つめのパートだけを削除した状態でブラウザをリロードしてみてください。するとスクリプトが動作していないことが確認できるはずです。なぜこうなってしまうのでしょうか。これには HTMLの構造が関係しています。　もう一度サンプルの index.htmlのコードを見てみましょう。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Creative jQuery</title><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/main.css">

<script src="./js/vendor/jquery-1.10.2.min.js"></script><script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script><script src="./js/main.js"></script></head><body>

//省略

</body></html>

html サンプルのHTML� index.html

●❶

　ブラウザは基本的に、HTMLを「コードが記述された順番通り」に処理していきます。つまりブラウザは、1 行目にある <!DOCTYPE html> から順に、html 要素、head 要素、<meta

charset="UTF-8">…という順で認識していきます。　そして、このブラウザの処理が <script src="./js/main.js"></script>の部分に到達すると、ブラウザは main.jsを読み込みます❶。そして、main.jsの読み込みが完了するとその内容をすぐに実行します。　この際、main.jsにはその後に続く HTMLの要素を操作する命令が書かれています。しかしブラウザはこの時点ではまだ head要素の途中までしか認識していないため（それ以降の要素はまだ認識していないため）、処理を実行することができません。　この問題を解決するための仕組みが、1つめのパートにあります。以下のように $(function

(){　});を記述すると、ブラウザはその中に記述された処理をいったん予約状態にしておき、

HTMLを最後まで読み込んだ時点でそれらを実行するようになります。

$(function(){ //HTMLがロードした後に実行する処理});

JavaScript ブラウザがHTMLを最後まで読み込むのを待つための仕組み

　jQueryを利用したプログラムでは、最初に HTMLの要素を選択することがとても多いため、ほぼすべてのコードが上記のような構成になります。本書でもすべてのサンプルにこのコードが記述されています。

48


ここまでのまとめ

　ここでいったんこれまでの解説を振り返ってみます。これまでの解説で以下のことを学びました。これらの内容はすべて jQueryの最も基本的な項目であり、いずれもとても重要です。現時点では概要的な内容しか解説していない箇所もありますが、しっかりと理解してから次に進んでください。

● jQuery で CSSのスタイルを変更する方法

● 数値と文字列の違い

● jQuery メソッドや $()関数、jQuery オブジェクトの概要と関係性

●「.」（ドット）と「;」（セミコロン）の役割

● HTMLの準備が整うのを待つ仕組み

　これらについてきちんと理解できているか振り返ってみてください。なお、次項の解説も上記と同様に以下の流れで学習していきます。

（１）main.js にサンプルコードを記述する

（２）ブラウザで index.html の表示内容を確認する

（３）記述したサンプルコードの解説

（４）コードを自由に書き替えてみる

（５）ブラウザで index.html の表示内容を確認する

（６）サンプルコードを使用した jQuery の基本解説

Download - jQuery 004 012 mkj(02) - jQuery最高の教科書｜株式会 …jquery.shiftbrain.co.jp/pdf/shiftbrain-jquery-sample.pdfしていますが、その一方で、執筆期間中はjQuery

Top Related