jQuery最高の教科書

いちからしっかり学べる

JQueryを使った固定ヘッダー、ページ上部への移動、スライドショーなどのコードを、手を動かしながら学ぶことができます。一からJQueryの基礎を学べるので、ネット上での独学によって断片的な知識が身に付いてしまっている人はこちらを使って基礎を学び直すとよいでしょう。

株式会社シフトブレイン (著)
出版社: SBクリエイティブ (2013/11/26)、出典:出版社HP

はじめに

数年前であればFlash を使用して表現していたインタラクティブな演出やアニメーションが、 ここ最近は Flashに対応していないスマートフォンやタブレットなどの多様化に伴って、その ほとんどが JavaScriptで表現されるようになりました。

このような大きな潮流の中で注目を集めているのが「jQuery」です。複雑なコードになりがち なJavaScriptを手軽に扱うことのできるjQueryは、今ではWebクリエイターにとって必要不 可欠な存在になっています。それにより、関連書籍も多数存在していますが、反面そのほとんど は開発者が一人で執筆しているため、プログラムを深く理解していることが前提の解説となっているものが多く、日常的にプログラミングを行っていないデザイナーにとってはとっつきにくい内容になっているものが多いのが現状です。

そこで本書では「プログラム経験の少ないデザイナーでも容易に理解できる構成」を第一の目標として執筆を行いました。技術的な側面の解説やプログラミング手法、jQueryの詳細解説については、現場の第一線で日々業務を行っている経験豊富なプロフェッショナルの開発者が執筆を担当していますが、その一方で、執筆期間中はjQueryの知識が全くないデザイナーや、プログラミング未経験者を執筆チームに加えることで、これからjQueryを学ぶ人が「どこにつまづき」、「何に疑問を抱くのか」を常に検証し、そしてブラッシュアップしていきました。こういった日々の作業によって、確かな技術書として、より多くの人にとって最良の書籍となることを目指しました。この点は本書の強みの1つです。

また、Webデザイン関連の書籍においては、学習過程で使用するサンプルのクオリティも非常に大切だと考えています。そのため本書では、ただ単に解説を補足するような単純すぎるサン ブルの掲載を避け、多くの人が「作ってみたい」、「仕事でも使えそうだ」と感じるようなサンプルであることを目指しました。本書内で使用するサンプルはすべて、第一線で活躍するアートディレクター監修の元、現場で多くのプロモーションサイトを制作しているインタラクションデザイナーが制作しています。ぜひ、実際に手を動かしてこれらのサンプルを制作し、jQueryをより深く習得していただけると嬉しいです。

今後、世の中のデジタル化が進むことは間違いありません。そして、その社会を作っていくうえで重要な役割を担うのは、みなさんをはじめとするクリエイター達です。本書が、みなさんがこれから制作していくであろうサイトや作品の一助となり、新しい表現がWeb上に登場することを心より祈っています。

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

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

株式会社シフトブレイン (著)
出版社: SBクリエイティブ (2013/11/26)、出典:出版社HP

Contents

本書のサンプルデータ

(01) jQuery の基礎知識と本書の特徴

01-01 jQuery の基礎知識
・jQueryとは
・jQuery の特徴と広く利用されている理由
[Column] ライブラリ、プラグイン、関数、拡張ライブラリの違い

01-02 本書の目的と構成
・本書の目的と特徴的な解説方法
・本書の構成

01-03 jQueryの実行環境の準備
・サンプルファイルのダウンロード
・jQueryのダウンロード

01-04 デバッグ方法
・Chromeを使用したデバッグ
・safariを使用したデバッグ

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

02-01 体験することからはじめよう!
・サンプルファイルについて
・本書の解説の流れ
[Column] JavaScriptの記述場所

02-02 《STEP1》CSS のスタイルを変更してみよう
・コードの解説
・サンブルコードを書き替えてみよう!
[Column] 数値と文字列の違いに注意する
・jQueryの最も基本的な構文の解説
・HTML の準備が整うのを待つ仕組み
・ここまでのまとめ
[Column] css()メソッドに関する追加説明

02-03 《STEP2》タイミングをコントロールしてみよう
・コードの解説
・サンブルコードを書き替えてみよう!
・メソッドチェーンとは
・ここまでのまとめ

02-04 《STEP3》アニメーションさせてみよう
・コードの解説
・サンプルコードを書き替えてみよう!
・その他の主な引数
[Column] さまざまなイージング
・animate()メソッドの仕様に関する注意点
・ここまでのまとめ

(03) jQuery の基本的な書き方

03-01 データを格納するさまざまな入れ物
•オブジェクトとは
・変数とは
・配列とは
・特殊な入れ物「this」

03-02 特定の機能をまとめる「関数」
・関数とは
・用意されている関数とオリジナルの関数
・関数の作り方
・関数の呼び出し方
・無名関数
[Column] 無名関数を変数に格納する

03-03 スコープと命名規則
・スコープ
・変数名と関数名の命名規則
[Column] 変数や関数(メソッド)の返り値を確認する方法

03-04 演算子
・算術演算子
・代入演算子
・比較演算子
・論理演算子

03-05 主な制御文
・条件分岐_if文
・繰り返し処理_for文

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

04-01 さまざまなホバーエフェクトで学ぶ
・動きのある表現の基本
・ホバーエフェクトのHTML
・ホバーエフェクトのCSS
・1行目のボタンのJavaScript(jQuery)
・2行目のボタンのJavaScript(jQuery)
・3行目のボタンのJavaScript(jQuery)

04-02 画像とキャプションの表現
・キャプション表現のHTML
・キャプション表現のCSS (共通部分)
・1つめの画像のキャプション表現
[Column] filter()メソッドとfind()メソッドの違い
・2つめの画像のキャプション表現
・3つめの画像のキャプション表現

04-03 丸いボタンのレイアウト
・丸いボタンのHTML
・丸いボタンのCSS
・丸いボタンのJavaScript (jQuery)

04-04 見え隠れするサイドバー
・サイドバーのHTML
・サイドバーのCSS
・サイドバーのJavaScript(jQuery)
・button要素がクリックされた際に最初に実行される処理
・if文による分岐処理
[Column] toggleClass(). addClass(), removeClass() XV

04-05 タイポグラフィの表現
・タイポグラフィ表現のHTML
・タイポグラフィ表現のCSS
・タイポグラフィ表現のJavaScript(jQuery)
・プラグインの使い方
[Column] プラグイン「jquery.typoshadow.js」の処理内容

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

05-01 《Basic》滑らかな動きのスライドショー
・スライドショーの概要
・スライドショーの処理の流れ
・スライドショーのHTMLとCSS
・スライドショーのJavaScript(jQuery)
・変数の準備
・スライドショーの実行
[Column] JavaScriptが無効になっている場合を考慮する

05-02 《Advanced》多機能なスライドショー
・スライドショーの概要
・スライドショーのHTML
・スライドショーの構造
・スライドショーのCSS
・スライドショーのJavaScript(jQuery)
・変数の準備
・スライドの配置と、インジケーターの生成・挿入
・スライドショーを動かす各機能の概要

05-03 《Basic》スティッキーヘッダー
・スティッキーヘッダーの概要
・処理の流れ
・スティッキーヘッダーのHTMLとCSS
・スティッキーヘッダーのJavaScript(jQuery)
・変数の準備
・ウィンドウのスクロールイベントを監視する処理
・ウィンドウのスクロールイベントを発生させる処理

05-04 《Advanced》デザインが変化するスティッキーヘッダー
・スティッキーヘッダーの概要
・スティッキーヘッダーの仕組み
・スティッキーヘッダーのHTMLとCSS
・スティッキーヘッダーのJavaScript(jQuery)
・変数の準備
・ウィンドウがスクロールされた際の処理

05-05 《Basic》画面領域を有効活用できるタブ
・タブの仕組み
・タブの HTML
・タブのCSS
・タブのJavaScript (jQuery)
・変数の準備
・タブがクリックされたときの処理

05-06 《Advanced》高機能で拡張しやすいタブ
・タブの仕組み
・jQuery UI とは
・タブのHTML
・タブのCSS
・タブのJavaScript (jQuery)
・変数の準備
・jQuery UI Tabs の基本的な使い方
・ハイライトの位置を調整する関数_moveHighlight()関数

05-07 《Basic》スムーズスクロール
・スムーズスクロールの仕組み
・スムーズスクロールのHTMLとCSS
・スムーズスクロールのJavaScript (jQuery)
・クリックイベントへの処理の登録
・scrollTop プロパティを利用できる要素の検出

05-08 《Advanced》拡張性のあるスムーズスクロール
・スムーズスクロールの仕組み
・スムーズスクロールのHTMLとCSS
・スムーズスクロールのJavaScript(jQuery)
[Column] 任意のページ内リンクでスムーズスクロールを有効にする方法

(06) 高機能なギャラリーページを作ってみよう!

06-01 ギャラリーページの全体像
・ギャラリーページの主な機能
・本章の解説の流れ

06-02 《Basic》シンプルなギャラリーページの作成
・動作確認に関する注意点
・2つのJavaScriptライブラリ
・ギャラリーページのHTMLとCSS
・ギャラリーページの元データの構造
・ギャラリーページのJavaScript(jQuery)
・このサンプルの処理対象となるHTML 要素
・Masonry の準備
・$.getJSON()メソッドによるJSON データの取得
・$.each()メソッドによるループ処理
・HTML文字列の生成
・Masonryによる各要素のレイアウト
[Column] JavaScriptによる文字列の記述方法

06-03 《Advanced》フィルタリング機能を持つギャラリーページの作成
・今回追加する機能の概要
・関数の分離
・Basic版との主な違い
・ギャラリーサイトのHTML
・ギャラリーサイトのCSS
・ギャラリーサイトのJSON
・ギャラリーを初期化する関数_initGallery()関数
・アイテム群を生成し、ドキュメントに挿入する関数_additems() 関数
[Column] 正規表現の基本
・フィルタリング機能の仕組み
・アイテムのフィルタリング機能_filterItems()関数
・ラジオボタンのカスタマイズ

06-04 《Advanced》選択画像の拡大機能とキャプションの追加
・今回追加する機能の概要
・Colorboxのダウンロードと読み込み
・Colorboxの実行

06-05 《Advanced》マウスの移動方向によるホバーエフェクト機能の追加
・今回追加する機能の概要
・ホバーエフェクトのHTML
・ホバーエフェクトのCSS
・ホバーエフェクトのJavaScript(jQuery)
・オーバーレイのアニメーション_hoverDirection関数
[Column] 通常の関数と即時関数の違い
・マウスの方向を検出する_getMouseDirection)関数

(07) jQueryを活用したさまざまな表現
07-01 画像の読み込みのプログレス表示機能
・プログレス表示機能の概要
・プログレス表示に必要な処理
・プログレス表示のHTMLとCSS
・プログレス表示のJavaScript(jQuery)
・表示に必要な要素をjQueryオブジェクト化
・画像の読み込み状況の監視とプログレス表示への反映
・画像の読み込み状況をプログレス表示に反映する_updateProgress()関数
・プログレス表示の終了処理

07-02 画像シーケンスのアニメーション
・画像シーケンスのアニメーションの概要
・アニメーションの仕組み
・画像シーケンスのアニメーションのHTML
・画像シーケンスのアニメーションのCSS
・画像シーケンスのアニメーションのJavaScript (jQuery)
・使用する変数の準備
・マウスホイールイベントの取得
・アニメーションの開始_startAnimation()関数
・アニメーションの内容_animateSequence()関数
・アニメーションの終了_stopAnimation()関数
・全画面表示

07-03 回転のアニメーションによる
・インフォグラフィック
・インフォグラフィックとは
・今回のサンプルのポイント
・パイチャートの仕組み
・インフォグラフィックのHTML
・インフォグラフィックのCSS
・transformプロパティのアニメーション
・インフォグラフィックのJavaScript(jQuery)
・各チャートの処理-準備
・各チャートの処理-角度の操作

07-04 マスクのアニメーション
・今回のサンプルの仕組み
・マスクのアニメーションのHTML
・マスクのアニメーションのCSS
・animate()メソッドで CSSのclipプロパティを操作する方法
・マスクのアニメーションのJavaScript(jQuery)
・マスクのアニメーション

Appendix jQueryリファレンス
・Core-コア
・Selectors-セレクタ
・Traversing-検索
・Attributes/CSS-属性とCSS
・Manipulation-操作
・Events-イベント
・Effects-エフェクト
・Ajax
・Utilities-ユーティリティ
・本書で使用している外部ファイル
・Normalize.css
・Modernizr
・HTML5 Shiv

索引

株式会社シフトブレイン (著)
出版社: SBクリエイティブ (2013/11/26)、出典:出版社HP