はじめに みなさんがこの 本 を 手 にするのは jqueryを 必 ず 習 得 したい jqueryの 基 本 を 挫 折 せずに し っかり 理 解 してスキルアップしたい jqueryを 使 っているけれど 実 は 理 解 してない などと 思 っている 方 が 多 いかと 思 います 数 年 前 まではjQueryのコードをコピー&ペーストで 使 えるく らいでよかったと 思 いますが 今 Web 制 作 に 求 められているスキルはより 高 いものになりまし た すでにあるjQueryライブラリをアレンジして サイトに 組 み 込 んだりすることはよくある ことです しかしWebデザイナーや フロントエンドエンジニアの 初 心 者 にはスクリプトに 抵 抗 がある 人 が 多 いため 簡 単 にはスキルアップできないという 実 情 も 知 っています 事 実 jqueryや JavaScriptなどを 習 得 しようと 試 みて 挫 折 した 人 はとても 多 いはずです 書 籍 を 購 入 したが 難 しくてサンプルのみに 頼 ってしまい 基 礎 を 理 解 しないで 使 用 している 方 もいまだに 見 かけます 先 ほども 述 べましたが jqueryは 使 えて 当 たり 前 と 言 っても 過 言 では ない 時 代 になりました 基 礎 から 理 解 して 自 分 でアレンジする 実 践 力 が 今 後 は 大 事 になります 1 2 3 4 5 本 書 では jqueryにかぎらず スクリプトを 覚 える 極 意 など 学 習 方 法 についても 言 及 してい ます 今 までスクリプトやjQueryが 苦 手 理 解 し 難 いと 思 っていた 方 は 本 書 の スクリプト を 覚 える 極 意 が 参 考 になると 思 います そのほかにも 入 門 として 必 要 な 情 報 は できるだけ 載 せていますのでjQueryを 始 める 前 にお 読 みいただくことをオススメします 筆 者 は 学 校 を 卒 業 してからWeb 業 界 に 入 ったわけではありません もともとは 別 業 界 で パ ソコンは28 歳 までまったく 触 ったことがなかった ので キーボードも 打 てずメールさえ 一 苦 労 でした しかし 今 では HTML/CSS/JavaScript/PHP/SQL/ など 複 数 の 言 語 も 使 えるように なり サーバやデータベースの 知 識 も 持 ち 合 わせるようになりました そして 当 時 からは 想 像 できないようなアプリケーションも1 人 で 作 成 できるレベルにまでなったのです 私 は 若 い 時 からWebを 学 んだわけではありませんでしたので とにかく 習 得 に 苦 労 しました その 苦 労 を 重 ねて 分 かったことを 踏 まえて 本 書 を 書 いています サンプルも1つの 説 明 に1つ 用 意 してありますので ブラウザ 上 で 動 作 を 確 認 しながら 学 べます サンプルコードはできるだ け 無 駄 なコードをなくしてシンプルに 見 やすくしています 本 書 は jqueryの 入 門 編 です 入 門 から 挫 折 しては 意 味 がありません 最 初 は 時 間 が 必 要 です ので 焦 らずに 読 み 進 めてください 焦 りは 理 解 の 敵 になり 理 解 を 曇 らせてしまいます 本 書 の 最 初 は 知 識 を 深 め 習 得 方 法 を 学 びます 読 み 進 めていくと サンプルを 使 って 実 際 に 覚 えていくレッスンになります そして 最 後 は jqueryライブラリの 使 用 方 法 等 を 学 んで 実 践 的 な 理 解 を 深 めます jqueryは 難 しくないので 本 書 で 基 礎 を 理 解 し jqueryに 慣 れたら 次 のステップへ 進 んでいって ください 山 崎 大 助 003
1 2 3 4 5 Contents 目 次 Chapter 1 jquery Lesson Book 準 備 編 はじめてのjQuery 011 Lesson 1 jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 012 Webページの 構 成 要 素 のおさらい 013 jqueryとは 017 jqueryでできること 018 jqueryとjavascriptの 違 い 020 デザイナーとプログラマーでのjQueryの 使 い 方 の 違 い 021 JavaScript/jQueryの 関 連 技 術 022 Lesson2 スクリプトを 覚 える 極 意 024 最 低 限 使 うものだけ 覚 えよう 025 Chapter 2 準 備 編 jqueryライブラリの 準 備 と 約 束 ごと 027 Lesson1 jqueryライブラリの 準 備 028 jquer yライブラリを 使 うための2つの 方 法 029 jqueryをダウンロードして 使 用 する 方 法 での 準 備 030 ダウンロードせずにjQueryを 利 用 する 方 法 (CDN) での 準 備 034 jquery 非 推 奨 APIの 確 認 037 Lesson2 JavaScriptの 約 束 ごと 038 新 たな 確 認 用 スクリプトの 準 備 039 JavaScriptの 読 み 込 みの 順 序 040 Lesson3 jqueryスクリプトのデバッグ 042 これから 絶 対 必 要 なスキル!デバッグツールとは? 043 デバッグツール 用 のサンプルファイル 044 Internet Explorerを 利 用 したデバッグ 方 法 044 Google Chromeブラウザを 利 用 したデバッグ 方 法 050 004
Chapter 3 基 礎 編 jqueryの 基 礎 知 識 057 Lesson1 jqueryの 実 習 に 入 る 前 に 知 っておくべきこと 058 jqueryを 使 うための 流 れを 理 解 する 059 Lesson2 jqueryの 文 法 の3つのポイント 060 jqueryで 覚 えておきたい3つの 用 語 061 どの 箇 所 に 対 して = セレクタ 061 何 をさせる = メソッド 061 どのタイミングで? = イベント 062 jq u e r yの 記 述 とコメント 062 Lesson3 jqueryの 文 法 1:セレクタ 067 要 素 と 属 性 の 指 定 068 Lesson4 jqueryの 文 法 2:メソッド 082 jqueryでcssスタイルを 追 加 変 更 する 083 H T M Lを 操 作 するメソッド 087 文 字 列 の 取 得 と 書 き 換 え htmlメソッド 087 テキストを 操 作 する textメソッド 090 値 を 操 作 する valメソッド 093 属 性 値 を 操 作 する attrメソッド 096 要 素 の 先 頭 にHTML 要 素 文 字 を 追 加 prependメソッド 100 要 素 の 後 ろにHTML 要 素 文 字 を 追 加 appendメソッド 101 要 素 の 前 にHTML 要 素 文 字 を 追 加 beforeメソッド 102 要 素 の 後 にHTML 要 素 文 字 を 追 加 afterメソッド 103 HTML 要 素 内 の 子 要 素 を 全 削 除 emptyメソッド 104 HTML 要 素 を 削 除 removeメソッド 105 メソッドチェーン 106 Lesson5 jqueryの 文 法 3:イベント 109 よく 使 われるイベント 110 最 初 に 覚 えるイベント onイベント offイベント 111 マウスから 発 生 するイベント 116 タッチ 操 作 のイベント touchstartイベント touchmoveイベント touchendfイベント 124 チェンジ イベント changeイベント 126 その 他 のイベント 130 目 次 Contents 1 2 3 4 5 005
1 2 3 4 5 Contents jquery Lesson Book Chapter 4 基 礎 編 実 践 的 なメソッドとアニメーション 139 Lesson1 実 践 的 なメソッド 140 このレッスンで 紹 介 する 便 利 なメソッド 141 表 示 されている 要 素 を 非 表 示 にする( 基 礎 ) hideメソッド 141 非 表 示 されている 要 素 を 表 示 にする( 基 礎 ) showメソッド 143 表 示 非 表 示 をclickイベントで 実 装 ( 応 用 ) showメソッド hideメソッド 145 表 示 されている 要 素 をフェードアウトする( 基 礎 ) fadeoutメソッド 146 非 表 示 されている 要 素 をフェードインする( 基 礎 ) fadeinメソッド 147 非 表 示 しているHTML 要 素 をスライドダウンで 表 示 ( 基 礎 ) slidedownメソッド 149 表 示 しているHTML 要 素 をスライドアップで 非 表 示 ( 基 礎 ) slideupメソッド 150 HTML 要 素 の 表 示 非 表 示 を 切 り 替 える( 基 礎 ) slidetoggleメソッド 152 表 示 非 表 示 をボタンで 切 り 替 える( 応 用 ) slidetoggleメソッド 154 クリックイベントを 関 数 から 直 接 実 行 する( 基 礎 ) triggerメソッド 155 Lesson2 jqueryアニメーション 158 animateメソッドを 使 用 したアニメーション( 基 礎 ) 159 a n i m a t eメソッドを 使 用 したアニメーション( 実 践 ) 163 a n i m a t eメソッドを 使 用 したアニメーション( 応 用 ) 167 Chapter 5 実 践 編 jqueryプラグイン ライブラリを 活 用 する 177 Lesson1 bxslider(スライドショー) 178 bxsliderライブラリの 設 定 179 bxsliderライブラリの 利 用 例 180 Lesson2 slidr.js(スライドショー) 184 slidr.jsライブラリの 設 定 185 slidr.jsライブラリの 利 用 例 186 006
Lesson3 ColorBox(ポップアップ) 191 ColorBoxライブラリの 設 定 192 ColorBoxライブラリの 利 用 例 1 194 ColorBoxライブラリの 利 用 例 2 198 Lesson4 liteaccordion(アコーディオン) 200 liteaccordionライブラリの 設 定 201 liteaccordionライブラリの 利 用 例 203 Lesson5 jquery Toggles(トグルボタン) 209 jquery Togglesライブラリの 設 定 210 jquery Togglesライブラリの 利 用 例 212 jquery Togglesライブラリの 利 用 例 ( 応 用 ) 215 Lesson6 responsive nav(ナビゲーション) 219 responsive navライブラリの 設 定 220 responsive navライブラリの 利 用 例 222 Lesson7 alertify.js(ダイアログ/アラート) 225 alertify.jsライブラリの 設 定 226 alertify.jsライブラリの 利 用 例 228 Lesson8 TABSLET(タブ 切 り 替 え) 233 TABSLETライブラリの 設 定 234 TABSLETライブラリの 利 用 例 (tabs_default) 235 TABSLETライブラリの 利 用 例 (tabs_active) 238 TABSLETライブラリの 利 用 例 (tabs_hover) 239 TABSLETライブラリの 利 用 例 (tabs_animate) 240 TABSLETライブラリの 利 用 例 (tabs_rotate) 241 TABSLETライブラリの 利 用 例 (tabs_controls) 242 TABSLETライブラリの 利 用 例 (before_event) 243 TABSLETライブラリの 利 用 例 (after_event) 244 TABSLETライブラリの 利 用 例 (data-toggle data-animation) 245 TABSLETのプロパティ 246 Lesson9 Intro.js(チュートリアル 表 示 ) 247 Intro.jsライブラリによるチュートリアル 表 示 248 Intro.jsライブラリの 設 定 250 Intro.jsライブラリの 利 用 例 252 Intro.jsライブラリの 動 作 の 設 定 254 目 次 Contents 1 2 3 4 5 007
1 2 3 4 5 Contents jquery Lesson Book Lesson10 Ajax( 非 同 期 通 信 )の 基 礎 知 識 257 Ajaxの 特 徴 258 Ajaxの 構 文 258 A j a x の 構 文 ( ソースコード 例 ) 260 Ajaxのサンプルプログラム 261 Ajaxのサンプルプログラムの 動 作 の 設 定 263 ブラウザでのAjax 通 信 の 確 認 265 セレクタ 索 引 268 メソッド 索 引 268 イベント 索 引 268 用 語 索 引 269 掲 載 プログラム 一 覧 270 column jqueryのライセンスは? 029 本 書 で 使 用 するjQueryのバージョン 030 jqueryバージョン1.xと2.xの 違 い 032 $(document).ready(function(){ の 短 縮 形 041 少 しでも 変 更 したら 都 度 ブラウザで 確 認 043 jqueryのファイルサイズ 066 $ と jquery の 記 述 の 違 い ( 特 にWordPressで 使 用 する 場 合 の 注 意 ) 083 onイベントの 利 用 115 イベントハンドラ 内 での thisオブジェクト とは? 123 DOMについて 136 jqueryの 対 応 ブラウザの 確 認 144 eachメソッドで 複 数 の 要 素 からデータを 取 得 175 プロパティを 追 加 する 場 合 の 注 意 199 JSONとJSONP 259 008
About Book 本 書 の 使 い 方 jquery Lesson Book 本 書 の 使 い 方 About Book 本 書 は jqueryを 初 めて 触 る jqueryを 使 っているがきちんと 理 解 していない という 読 者 を 主 な 対 象 としています ただし HTMLやCSSの 基 礎 知 識 は 持 っていることを 前 提 として いますので これからWeb 制 作 を 始 めるという 方 は HTMLやCSSの 書 籍 を 先 にお 読 みください 本 書 は 以 下 の3つパートで 構 成 されており それぞれに 章 とレッスンを 用 意 しています レッスンでは 実 際 にサンプルコードを 打 ち 込 んで Webブラウザで 実 行 して 動 作 を 確 認 できる ように 構 成 してあります 各 章 の 概 要 を 以 下 に 紹 介 します 1 2 3 4 5 準 備 編 Chapter 1 はじめてのjQuery jqueryを 始 める 前 の 基 礎 知 識 を 学 びます jqueryの 位 置 づけや 特 徴 jqureryで 何 ができるか を 理 解 します また jqueryなどのスクリプト 言 語 を 習 得 するための 極 意 も 紹 介 しました Chapter 2 jqueryライブラリの 準 備 と 約 束 ごと jqueryを 使 ったレッスンを 始 める 前 に jqueryライブラリを 準 備 し 正 しく 動 作 しているか を 確 認 します また 記 述 の 約 束 ごとや うまく 動 作 しない 場 合 の 対 処 法 (デバッグの 仕 方 )も 取 り 上 げます 基 礎 編 Chapter 3 jqueryの 基 礎 知 識 jqueryを 実 際 にサンプルコードを 使 ってレッスン 形 式 で 学 んでいきます ここではjQueryで 押 さえておく3つのポイント セレクタ メソッド イベント について 基 礎 がしっかり 身 につくように 構 成 しました Chapter 4 実 践 的 なメソッドとアニメーション 基 礎 が 身 についたところで 実 践 を 積 み 上 げていきます ここではよく 使 う 表 示 非 表 示 フィードイン フェードアウトといったメソッドや jqueryアニメーションについて 解 説 します 実 践 編 Chapter 5 jqueryプラグイン ライブラリを 活 用 する Web 制 作 の 現 場 では いちからjQueryを 記 述 するのではなく すでに 公 開 されている 便 利 な jqueryのプラグイン ライブラリを 組 み 込 んで 活 用 することがよくあります ここではそのカ スタマイズ 例 を 紹 介 します 009
1 2 3 4 5 サンプルデータのダウンロードについて 本 書 に 掲 載 しているすべてのサンプルプログラムのソースコード 画 像 などのリソースは 以 下 のWebページよりダウンロードできます 掲 載 プログラムのダウンロード http://www.socym.co.jp/book/947 上 記 のWebページより[ダウンロード]ボタンを 押 すと ダウンロード 用 のWebページに 移 動 しますので そちらよりダウンロードを 行 ってください ダウンロードされたファイル はzip 形 式 で 圧 縮 されていますので デスクトップなど 適 当 な 場 所 に 解 凍 してご 利 用 ください なお 解 凍 されたファイルにreadme.txtがある 場 合 は そちらを 必 ずご 確 認 ください サンプルプログラムは 章 およびレッスンのフォルダに 分 けて 収 録 してあります 実 行 に あたっては 事 前 の 準 備 などが 必 要 な 場 合 がありますので 本 文 の 該 当 ページをご 確 認 の 上 ご 利 用 ください ダウンロードしたサンプルプログラムでは 執 筆 時 点 の 最 新 版 であるバージョン 2.1.1 を 読 み 込 むように 設 定 していますが バージョン1.11.1でも 動 作 は 確 認 してありますので 1.x 系 でお 使 いになる 場 合 は サンプルプログラムを 書 き 換 えてご 利 用 ください 010
jquery LESSON BOOK Chapter 1 はじめての jquery Chapter 1 jquery 2 3 4 5 この 章 ではjQueryを 始 める 前 に 必 要 な 基 礎 知 識 を 学 んでい きます jqueryの 位 置 づけや 特 徴 などを 知 ることで jquery をどのように 使 っていくべきかがわかります ちょっと 遠 回 りですでに 知 っていることも 多 いかもしれませんが Web 制 作 の 経 験 が 深 い 方 は 復 習 のつもりで 読 んでみてください 逆 にWeb 制 作 は まだまだビギナーという 方 は 必 ず 読 むよ うにしてください HTMLやCSS JavaScriptがなぜ 必 要 な のか?そしてjQueryはどのような 用 途 意 味 を 持 つのかを この 章 で しっかり 理 解 していきましょう
Chapter 1 jquery 2 3 4 5 Lesson 1 Chapter 1 jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 このレッスンではjQueryを 学 ぶ 前 に 必 要 な 基 礎 知 識 を 学 んでいきます HTMLやCSSそして 関 連 技 術 に 関 し ても 知 っておく 必 要 があります また 同 じjQueryでもデザイナーが 使 うjQueryとプログラマーが 使 う jqueryでは 習 得 したい 知 識 などに 違 いがあります そのことについてもこのレッスンで 知 っておきましょう Webデザイナーに 必 要 なスキル HTML5 より 厳 密 な 文 書 構 造 を 定 義 できる! CSS3 jquery よりリッチなデザイン 表 現 を 実 現 できる! ユーザー 操 作 に 対 応 した 動 的 なページが 生 成 できる! POINT Webページの 構 成 要 素 をおさらいしておく jquery/javascriptの 位 置 づけ 特 徴 をしっかりと 把 握 しておく HTML5/CSS3/JavaScriptは Webサイトに 関 わる 人 の 必 須 知 識 jqueryは JavaScriptのライブラリの1つ デザイナーとプログラマーでは jqueryを 学 ぶ 範 囲 は 異 なる 012
Webページの 構 成 要 素 のおさらい jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 jqueryの 話 に 入 る 前 に そもそもWebページはどのような 構 成 要 素 でできているのか 確 認 してお きましょう まずはみなさんよくご 存 じの HTML と CSS ですが 簡 単 に 復 習 しておきます HTMLとは HTMLは 文 書 (コンテンツ)とその 構 造 の 作 成 を 担 当 しています インターネット 上 のWebページ を 作 成 するうえで 核 になる 言 語 が HTML です HTMLとは HyperText Markup Language の 略 ですが マークアップという 名 前 のとおり 要 素 (タ グ)と 呼 ばれるものを 使 って 文 書 の 構 造 をマークアップして 作 成 していきます たとえば HTML で 見 出 しを 付 けたい 場 合 には h1 h2 h3 h4 のように 要 素 (タグ)を 使 って h1~h6の 段 階 で 見 出 しレベルを 付 けることができます ほかにもHTMLにはたくさんの 要 素 (タグ)があり その 要 素 (タグ)を 使 用 して 文 書 と 構 造 を 組 み 上 げていきます このように 要 素 (タグ)を 付 けるだけなので HTMLはメモ 帳 などのテキストエディタがあれば 簡 単 に 書 くことができ 初 心 者 でも 習 得 しやすい 言 語 です なお HTMLでは 文 書 と 構 造 のみを 指 定 し デザイン( 装 飾 )の 役 割 はありません 装 飾 を 指 定 するのは 次 の CSS の 役 割 になります はじめての Chapter 1 jquery 2 3 4 5 要 素 (タグ) <h1> はじめての jquery</h1> リード 文 <h2>jquery の 基 礎 知 識 </h2> 本 文 1 <h3>web ページの 構 成 要 素 </h3> 本 文 2 <h1> ~ </h1> で 囲 まれた 部 分 が 一 番 大 きな 見 出 し <h2> ~ </h2> で 囲 まれた 部 分 が 二 番 目 に 大 きな 見 出 し <h3> ~ </h3> で 囲 まれた 部 分 が 三 番 目 に 大 きな 見 出 し CSSとは CSSは Cascading Style Sheets の 略 で スタイルシートとも 呼 ばれます CSSは 先 の HTML で 指 定 した 文 書 とその 構 造 に 対 して 装 飾 を 指 定 する 役 割 を 持 っています つまり Webページの レ イアウト や デザイン はCSSを 使 って 行 うことになります 逆 に CSSではHTMLのような 文 書 の 構 造 を 作 成 することはできません CSSとHTMLはいっしょに 組 み 合 わせて 使 う 言 語 ですが このように 役 割 がはっきり 分 かれているた め 記 述 方 法 もHTMLとは 異 なります 流 れとしては 先 にHTMLで 文 書 とその 構 造 を 記 述 していき それからCSSでレイアウトやデザインを 行 います そのため CSSはCSSファイル 単 体 としても 扱 えま すが HTML 内 に 記 述 して 使 用 することもできます 013
Chapter 1 jquery 2 3 4 5 CSSとHTMLの 役 割 を 分 けたことで メンテナンスがしやすくなり 作 成 後 の 変 更 も 容 易 になります HTMLを 変 更 することなく CSSの 記 述 部 分 を 修 正 するだけで レイアウトやデザインを 簡 単 に 変 更 できるのが 大 きなメリットでしょう 最 近 では PCだけでなくスマートフォンやタブレットなど 多 様 なデバイスに 対 応 するために 同 じHTMLで CSSのみをデバイスごとに 切 り 分 けて 最 適 な 表 示 を 行 うための レスポンシブWebデザイン と 呼 ばれる 手 法 も 普 及 しつつあります HTML <h1> はじめての jquery</h1> リード 文 <h2>jquery の 基 礎 知 識 </h2> 本 文 1 <h3>web ページの 構 成 要 素 </h3> 本 文 2 CSS h1{font size: 24px} h2{font size: 18px} h3{font size: 14px} はじめての jquery jquery の 基 礎 知 識 web ページの 構 成 要 素 HTML タグを 使 って CSS でデザインを 指 定 する ブラウザ JavaScriptとは Webページは これまで 紹 介 した HTML や CSS を 使 うことで 表 現 することができます た だし 基 本 的 には HTMLやCSSに 記 述 された 内 容 にそってWebページが 生 成 され リンクによって 別 な Webページに 遷 移 するということしかできません このようにHTMLとCSSだけでは 静 的 な 情 報 しか 表 示 できませんが これらにJavaScriptを 組 み 合 せ ることで Webページ 上 の 情 報 を 操 作 することができます たとえば みなさんもWebページでよく 見 かける 画 像 のスライドショー 文 字 の 大 きさを 変 える ボタン 入 力 フォーム のチェック アラート 表 示 メニューの 開 閉 ボタンなど たくさんのことがJavaScriptを 使 うとできるようにな ります JavaScriptはスクリプト 言 語 と 呼 ばれ ユーザーの 操 作 に 対 して 動 的 な 動 きを 付 加 する という 役 割 を 持 っているのです たとえば JavaScriptのプログラミングのスキルが 上 がれば ブラ 014
jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 ウザで 動 くゲームなどを 作 れたりします これまではこういった 動 的 なページには Flash プラグ インをWebブラウザに 組 み 込 んで 利 用 するといったことが 行 われていましたが 最 近 では 以 降 で 紹 介 するHTML5やCSS3の 普 及 により Flashを 使 う 機 会 は 少 なくなってきました なお JavaScriptはWebサーバに 置 かれて 実 行 されることもありますが 本 書 ではHTMLやCSSと 同 様 に Webブラウザで 実 行 されるJavaScriptを 解 説 しています HTML と CSS だけではできないことが JavaScript を 使 うと 実 現 できる! 5 秒 おきに 写 真 が 自 動 的 に 切 り 替 わる はじめての Chapter 1 jquery 2 3 4 5 このボタンが 押 されたら 本 文 の 文 字 の 大 きさが 変 わる JavaScriptは 以 前 はスクリプターやプログラマーと 呼 ばれる 人 たちだけが 扱 う 特 別 なスキルでした しかし 現 在 では Webページを 作 成 する 多 くの 人 に 必 須 のスキルとなりました Webページ 作 成 できる = HTML/CSS/JavaScript これが 今 の 時 代 のスキルセットです ただし プログラマーでなければ JavaScriptを 極 めるところ までは 必 要 ありませんが デザイナーでもJavaScriptで 何 をやっているのかが 理 解 できることが 大 事 です 新 しい 技 術 も 続 々 登 場 し 新 たな 便 利 ツールも 増 えるなど 年 々スキルレベルが 上 っているの で みなさんもスキルアップを 忘 れずにがんばっていきましょう そして 本 書 で 解 説 する jquery は JavaScript でできています 多 くのWebページでjQueryは 使 用 されており 特 に 商 用 のWebページでは 使 っていないケースのほうが 少 ないかもしれません こ のようにJavaScriptを 直 接 書 くよりも jqueryを 使 って 記 述 することが 増 えてきています 筆 者 もその 一 人 で これまではJavaScriptをずっと 書 いていましたが jqueryと 出 会 い jqueryを 使 うとシンプルで 簡 単 な 記 述 で 作 れるので 今 ではほとんどjQueryを 使 用 しています デザインやプロ グラムを 教 える 学 校 でも JavaScriptではなくjQueryから 教 えるところもあるくらいです HTML5とCSS3 Webページの 基 本 要 素 である HTML CSS については 先 に 紹 介 しましたが 最 近 はその 最 新 版 である HTML5 CSS3 を 利 用 するケースも 増 えてきましたので こちらも 紹 介 しておきましょう HTMLの 最 新 版 は HTML5 ですが その1つ 前 のHTML4から header/main/nav/footer/timeなど 要 素 が 追 加 され 意 味 付 けをさらに 明 確 にする 文 書 構 造 が 可 能 になり 使 用 できるAPI(JavaScriptなど 015
Chapter 1 jquery 2 3 4 5 で 利 用 するブラウザに 組 み 込 まれたプログラムのインターフェイス)も 増 えました 最 新 版 のHTML5ではVideoタグやAudioタグ Canvasタグなどを 使 用 することで Flash プレイヤー や Silverlight などのようなプラグインを 使 用 しなくても 動 画 や 音 声 ゲームや 画 像 のグラフィッ クの 処 理 などができるようになりました 今 後 はクライアントアプリケーションのようなものもブラ ウザ 上 で 実 行 が 可 能 になるでしょう いっぽう CSSの 最 新 版 である CSS3 は 今 までのCSSでは 不 可 能 であった 角 丸 や 背 景 のグラデ ーション テキストやボックスに 影 を 付 けたりできるなど よりリッチな 装 飾 機 能 が 追 加 されました また アニメーションに 関 しても 今 まではJavaScriptやFlashでしかできませんでしたが CSS3の 技 術 を 使 用 することで 簡 単 なアニメーションが 可 能 になりました アニメーションはFlashのタイムライ ンに 近 い 仕 様 なので Flashを 使 用 していた 方 にも 馴 染 みやすいでしょう そして 今 もっともCSS3になって 水 を 得 ているものは Media Queries(メディアクエリ)でしょう このMedia Queries(メディアクエリ)は レスポンシブWebデザインでは 必 須 の 機 能 です 最 近 はPCだけでなく スマートフォンやタブレットなど 多 様 なデバイスに 対 応 することが 求 められ ており 最 近 のWebサイト 制 作 では 必 須 の 知 識 スキルと 言 えるでしょう HTML5 と CSS3 は 最 新 のPCのブラウザや スマートフォンやタブレットのブラウザで 標 準 と なっているので JavaScript(jQuery)と 合 わせて 今 後 はこれらを 前 提 にWebサイト 制 作 を 行 ってい くことが 求 められます HTML5 header より 厳 密 な 文 書 構 造 を 定 義 でき るタグが 追 加 nav section article article canvas video } 複 雑 なグラフィック アニメーション ビデオや 音 声 も 扱 える footer 016
jqueryとは jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 jqueryはjavascriptライブラリの1つで JavaScriptでよく 使 われる 機 能 を 簡 素 化 し 簡 単 に 使 えるよ うにまとめたライブラリファイルの 名 称 です 平 たく 言 えば よく 使 うJavaScriptを 簡 単 に 使 えるようにしたもの と 言 ったほうがイメージしやすいでしょうか ライブラリという 名 前 のとおり 図 書 館 のように よく 使 う 機 能 や 便 利 な 機 能 があらかじめ 準 備 されていて これを 使 うことで 何 もないところから 作 る よりも ずっと 簡 単 に 手 間 をかけずにやりたいことが 実 現 できるようになります jquery は よく 使 う 機 能 や 便 利 な 機 能 の 集 まり はじめての Chapter 1 jquery 2 3 4 5 要 素 を 表 示 す る 要 素 を 非 表 示 に す る 要 素 を フ ェ ー ド ア ウ ト す る 要 素 を フ ェ ー ド イ ン す る 使 いたい 機 能 を 呼 び 出 す だけで JavaScript の 複 雑 なコードを 書 く 必 要 はない jqueryを 使 用 すれば 複 雑 になりがちなJavaScriptのコードを 単 純 に 見 やすく 少 量 のコードで 書 くこ とが 可 能 になります シンプルな 短 いコードでJavaScriptと 同 じ 処 理 を 実 行 できるのです 具 体 的 には jqueryを 使 用 すれば 今 まで 何 十 行 ~ 何 百 行 も 自 分 自 身 でコードを 記 述 する 必 要 があったものを 数 行 で( 短 い 処 理 で) 同 様 の 処 理 をさせることができるようになります 017
Chapter 1 jquery 2 3 4 5 jqueryでできること jqueryを 使 うことで 具 体 的 に 何 ができるのか まずはいくつか 例 を 見 ていきましょう jqueryを 使 用 すれば HTMLやCSSをインタラクティブ( 対 話 的 )に 操 作 することができます たとえば クリ ックやマウスオーバーなどブラウザ 上 で 行 った 何 かしらの 操 作 に 関 連 して 要 素 (DIVなど)を 表 示 非 表 示 やフェードイン フェードアウトなどを 簡 単 に 実 装 することができます HTMLやCSSを 操 作 できる HTMLやCSSを 操 作 して 要 素 を 追 加 変 更 削 除 したり 属 性 を 追 加 変 更 削 除 したり スタイ ルの 追 加 変 更 削 除 や ブラウザ 表 示 されている 情 報 を 変 更 することができます それは 文 字 で あったり 要 素 であったり 画 像 の 表 示 非 表 示 だったりなど 操 作 する 対 象 は 多 岐 に 渡 ります jqueryを 使 っているWebページを 見 てみましょう CSS 3.0 MAKER http://www.css3maker.com/index.html 上 記 のサイトはjQueryを 使 用 して 制 作 されています 操 作 してもらえばわかりますが HTML5と CSS3 そしてjQueryを 上 手 に 使 って CSS3のコードを 作 成 するジェネレータ(Webページ)を 制 作 し ています jqueryを 使 用 して HTMLやCSSを 操 作 することでこんなこともできるようになります 難 しい 技 術 に 見 えますが Webの 知 識 だけで 作 成 できるのです 018
アニメーションができる( 要 素 に 対 して) jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 CSS3アニメーションではなく jqueryを 使 ってアニメーションをさせることができます 要 素 の 移 動 拡 縮 スタイル 変 更 など 少 ないスクリプトを 記 述 するだけで 行 えます ただし シンプルなア ニメーションにしか 向 かないことは 認 識 しておきましょう Flashのような 複 雑 なアニメーションはで きません 例 として jqueryを 使 って 画 像 の 切 り 替 えを 実 現 しているWebサイトを 紹 介 しておきます ADAPTOR http://philparsons.co.uk/demos/box-slider/ はじめての Chapter 1 jquery 2 3 4 5 019
Chapter 1 jquery 2 3 4 5 jqueryとjavascriptの 違 い jqueryとjavascriptについては 先 に 取 り 上 げましたが もう 少 し 踏 み 込 んで jqueryとjavascriptの 違 いをみてみましょう jqueryはjavascriptよりも 簡 単 に 使 えると 何 度 も 書 きましたが 具 体 的 なイメー ジとしては 以 下 のようになります 1つの 処 理 を 書 く 場 合 -------------------------------------------------- 例 )JavaScriptで20 行 で 書 いていた 処 理 例 )jqueryでは1 行 書 けます -------------------------------------------------- スライドショー 作 る 場 合 -------------------------------------------------- 例 )JavaScriptでは1 週 間 掛 けてもできなかった 例 )jqueryではプラグインを 使 用 すれば 半 日 でできる -------------------------------------------------- 上 記 のようにJavaScriptでもjQueryでも 同 じことができるのですが jqueryを 使 用 したほうが 記 述 は とても 楽 になります 特 にjQueryには プラグイン というものがあり jqueryのほかにもjqueryと 併 用 して 読 み 込 んで 使 用 できるライブラリがたくさんあります たとえば タブ アコーディオン ス ライドショー レスポンシブ 対 応 などのプラグインを 使 用 すると さらに 多 くのことが 簡 単 にでき るようになります jqueryの 公 式 サイトでも 多 数 のプラグインが 公 開 されていますので 参 考 にしてみるとよいでしょ う なお 本 書 の 実 践 編 Chapter5でも プラグインを 利 用 した 事 例 を 取 り 上 げています 020
jquery 公 式 サイト http://plugins.jquery.com/ jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 はじめての Chapter 1 jquery 2 3 4 5 jqueryはたいへん 便 利 ですが JavaScriptでも 同 様 のことができることを 理 解 しておくとともに JavaScriptを 使 ったほうが 小 回 りが 効 くことを 忘 れてはいけません jqueryは よく 使 われる 機 能 を 簡 単 簡 潔 に 使 用 できる のがよさです つまり よく 使 われない 部 分 や 分 岐 処 理 (IF 文 など)に 関 しては 対 象 外 なわけです 対 象 外 の 部 分 を 何 とかしたい 場 合 は jqueryではなく JavaScriptで 記 述 す る 必 要 があることは 覚 えておきましょう デザイナーとプログラマーでのjQueryの 使 い 方 の 違 い jqueryはjavascriptよりも 簡 単 だとはいうものの その 応 用 範 囲 は 幅 広 いので すべてを 一 度 に 理 解 する 必 要 はありません デザイナーやプログラマーによって 主 に 習 得 しておきたい 知 識 は 異 なります ので それらを 簡 単 にまとめておきましょう なお 本 書 では デザイナーのためのjQuery を 対 象 にしています デザイナーのためのjQuery 基 本 的 には jquery をWebページ 上 で 表 示 されているものに 対 しての 操 作 にしか 使 わないケース が 多 いでしょう たとえば メニューの 開 閉 要 素 の 非 表 示 表 示 画 像 のポップアップ 表 示 がも っとも 多 いと 思 います 特 に スマートフォンサイトなどはそういった 機 能 が 多 いでしょう デザイナーの 方 は 表 面 の 操 作 を 覚 えればいいのです よく 言 えばそれだけ 覚 えることが 少 ないと 言 えます これからの 時 代 のデザイナーは 最 低 限 表 面 上 の 操 作 するためのjQueryは 必 須 であるこ とを 知 っておきましょう 021
Chapter 1 jquery 2 3 4 5 プログラマーのためのjQuery Ajax 通 信 やForm 関 連 のチェックなど データの 扱 いが 多 くなります 以 降 でも 紹 介 しますがAjaxは 外 部 のファイルの 情 報 の 読 み 込 み Formは 入 力 内 容 のチェックなどを 行 います(たとえばメールアド レスに@がないとか 郵 便 番 号 にハイフンがない など) またデザイナーの 役 割 の 部 分 も 手 助 けする 必 要 があります たとえば 条 件 によってスライドシ ョーを 非 表 示 にするなどの 場 合 には プログラマーの 対 応 が 発 生 する 可 能 性 もあるでしょう プラグ インを 読 み 込 んで スライドショーが 動 かない 場 合 の 対 応 など プログラマーの 領 域 は 多 岐 に 渡 ります プログラマーの 方 は jqueryを 全 体 的 に 修 得 する 必 要 があります また jqueryではできないことに も 対 応 するために JavaScript の 知 識 も 必 須 と 言 えるでしょう JavaScript/jQueryの 関 連 技 術 このレッスンの 最 後 に JavaScript/jQueryに 関 連 する 技 術 を2つ 紹 介 しておきます jquery mobileとは jquery mobileは jqueryで 動 作 するフレームワークです スマートフォン 向 けの 直 観 的 で 使 いやす いUIKit(UI 部 品 )として 使 用 されています jquery mobileはjqueryという 名 前 が 入 っていますが JavaScriptのようなプログラミングの 知 識 は 必 要 ありません HTMLにjQuery mobileのフレームワーク (JSファイル)を 読 み 込 み HTMLに 必 要 な 属 性 を 記 述 するだけでスマートフォンの 画 面 が 作 成 でき ます そのためデザイナーでも 使 用 方 法 さえ 知 っていれば すぐに 使 用 可 能 である 利 点 があります jquery mobile 公 式 サイト http://jquerymobile.com/ 022
Ajax 通 信 とは jqueryを 使 う 前 に 知 っておきたい 基 礎 知 識 Lesson 1 Ajaxは Googleマップ で 使 われたことで 脚 光 を 浴 びたので 名 前 はご 存 じの 方 も 多 いかもしれま せん 外 部 にあるファイルをWebページを 読 み 込 んだときではなく 何 かのイベント(clickなど)に 呼 応 して 動 作 し 読 み 込 む 機 能 です Ajaxを 使 うことで 普 通 のリンクをクリックしたときのように Webページ 画 面 が 毎 回 全 面 的 に 切 り 替 わることなく シームレスにWebページの 必 要 な 箇 所 だけを 切 り 替 えることができます 切 り 替 えるというよりは Webページの 情 報 をAjaxで 読 み 込 んで( 表 面 に 見 えないところで 読 み 込 まれる) 読 み 込 み 完 了 後 に 表 示 内 容 を 更 新 するといったほうがイメージが 伝 わると 思 います 同 一 ページ 内 でユーザーの 操 作 によって 情 報 が 変 化 するので Webページというよりは アプリ のよう な 使 い 勝 手 が 実 現 できます Googleマップ 以 外 にも Bing Maps hotmail Gmail Facebookなど 多 くのメジャーなサイトで も 使 われています 1ページ 内 でページ 更 新 が 行 われるので リンクをクリックしてページが 切 り 替 わるまで 何 もできないようなことは 避 けられます なお 本 書 の 実 践 編 Chapter5の Lesson10 では Ajaxのサンプルプログラムを 示 しながら 基 礎 的 な 知 識 を 紹 介 しています はじめての Chapter 1 jquery 2 3 4 5 Bing Maps http://www.bing.com/maps/ 023
Chapter 1 jquery 2 3 4 5 Lesson 2 スクリプトを 覚 える 極 意 Chapter 1 jqueryを 学 ぶ 意 義 はわかっていただけたかと 思 いますが デザイナーの 多 くはプログラムやスクリプトに 抵 抗 がある 方 も 多 いようです 具 体 的 にjQueryを 学 んでいく 前 に 心 構 えを 少 し 解 説 しておきたいと 思 います スクリプトが 初 めての 方 は スクリプトをすべて 覚 えるのが 理 想 のように 思 われがちです それは できる ようになるための1つの 手 段 であり すべてではありません スクリプトに 挫 折 する 方 の 多 くは 覚 えることが 多 すぎてよくわからないと 途 中 で 投 げ 出 してしまうよう です しかし 最 初 に 使 ってみる 上 で 覚 えなければいけないことは それほど 多 くないのです 心 得 最 低 限 使 うものだけ 覚 える! POINT スクリプトは すべて 覚 えようとしなければ 難 しくない 挫 折 しないためには 最 小 限 のことだけをまずは 覚 えれば 十 分 普 段 使 わない 知 識 は 勉 強 しても 忘 れてしまう まずは 簡 単 なものから 使 ってみ て 慣 れることから 始 めよう 024
最 低 限 使 うものだけ 覚 えよう スクリプトを 覚 える 極 意 Lesson 2 筆 者 は 暗 記 が 苦 手 なので 基 本 的 な 文 法 などは 理 解 しているつもりですが 以 降 のレッスンに 出 て くる 各 種 のメソッドやほかのたくさんの 関 数 は 使 う 時 までほとんど 覚 えていません 確 かに 使 用 方 法 的 なものは 一 度 使 っていたりすると 感 覚 として 残 ってはいますが ドキュメントや 本 を 見 ないときち んとしたコードを 書 いていくことはできません 筆 者 の 場 合 実 際 にスクリプトを 使 用 する 際 にはWebサイトの 情 報 や 本 を 見 て 使 い 方 を 確 認 し 実 際 に 試 してから 使 用 することがほとんどです つまりは 覚 えていることもあるにはありますが それ は 一 部 であり ほとんどは 覚 えていないのです それでもコーディングができるのは なぜでしょう か?それは 実 際 に 使 うものは 限 られており ほとんどはまれに 使 うものだからです そう 考 えれば 最 初 に 覚 えるのはよく 使 うものだけでいいでしょう つまり スクリプトを 覚 える ための 極 意 は 最 低 限 使 うものだけ 覚 える! はじめての Chapter 1 jquery 2 3 4 5 なのです いきなり 富 士 山 を 目 指 して も 途 中 で 挫 折 してしまう まずは 近 場 の 山 で 経 験 を 積 みましょう! この 考 え 方 でスクリプトに 向 き 合 えれば 間 違 いなく 挫 折 することはないでしょう 使 わないもの を 勉 強 して 一 生 懸 命 覚 えたとしても 使 わなければ 数 週 間 で 忘 れてしまいます これは 現 場 でコーデ ィングする 方 のほとんどが 筆 者 と 同 様 のことを 言 うでしょう まず 無 駄 な 知 識 を 増 やさず 使 うも のから 覚 えていきましょう 025
Chapter 1 jquery 2 3 4 5 もしすべて 完 璧 に 暗 記 することがプロフェッショナルと 感 じるなら それは 間 違 いだと 筆 者 は 思 い ます( 毎 日 スクリプトを 打 っているうちに 自 然 に 覚 えたというのは 別 ですのでいっしょにしないよ う に ) そもそもスクリプトを 書 く 目 的 はなんでしょうか?Webサイトでの 何 かしらの 目 的 を 達 成 するため のものであるはずです ならば それが 達 成 できるスキルさえ 身 につけば 最 初 は 十 分 ではないでし ょうか? 結 果 オーライとも 言 いますが 完 成 すればいいのです すべて 覚 えたよ!でも 出 来 上 がらない これではなんのための 勉 強 だったのでしょうか? スポーツでも 練 習 のための 練 習 はするな 試 合 のための 練 習 をしろ と 言 われますが まさにそ れといっしょです 勉 強 のための 勉 強 ではなく 目 的 を 達 成 するための 勉 強 をしていきましょう この 本 の 基 礎 編 では1つ1つがサンプルとして 完 結 していますので 必 要 なものだけをチョイス して 覚 えていくこともできますので 少 しずつ 必 要 なものだけを 覚 えましょう それでは 再 度 申 し 上 げます 最 低 限 使 うものだけ 覚 える! それが 習 得 の 最 短 ルートであり 挫 折 しないための 極 意 なのです! 026