jQueryでの疑問が理解に変わる、スクリプトの基礎力を磨く本 -jQuery 最高の教科書
Post on:2014年1月10日
jQueryを使ったウェブページでのさまざまな表現や演出をプログラム経験の少ないウェブ制作者でも基礎からしっかりと学べる本を紹介します。
各サンプルは現役アートディレクターが監修しているので、かっこよく実用的なものばかりです。

「最高の教科書」というタイトルを見て、高度なテクニック本かなと思って読んでみましたが、jQuery, JavaScriptに初めて取り組む人にでも分かりやすく書かれたオススメの本です。
いい意味で裏切られました。
執筆は、制作会社の現役クリエイター陣!
jQueryの知識が少ないウェブ制作者やプログラム未経験者も加え、そういった人がつまずきやすいポイントや疑問を検証し、本書をブラッシュアップしたそうです。
紙面のキャプチャで、中身を少しだけご紹介。

第1章は、jQueryの基礎知識。初心者の立場からjQueryを使用するメリット・デメリット、jQueryでの制作環境を準備します。

スクリプトのデバッグ方法なども丁寧に分かりやすい解説がいいですね。

第2章では簡単なサンプルを作りながら、jQueryの基本的な仕組みや記述方法を無理なく学んでいきます。

サンプルはCSSのスタイルを変更するもので、最終的にはアニメーションを使った現場でも使いたくなるエレメントに仕上がります。

サンプルは少しずつステップアップして学んでいき、ポイントとなる箇所には詳しい解説が初心者にやさしいです。

ステップが終了すると「ここまでのまとめ」があり、きちんと理解して進めているか確認できます。

第3章ではスクリプトの基本である「変数」「関数」「制御文」「スコープ」「演算子」などについて学びます。

各項目ごとに簡潔にまとめられており、実務で役立つ基礎知識が無理なく学べます。

第4章からはここまでの基礎知識を使って、jQueryの基礎力を養うさまざまな機能や効果を実装していきます。

ボタンのさまざまなホバーエフェクト、画像に半透明のパネルでキャプションを表示、見え隠れするサイドバーなど、最近のウェブサイトでよく見かけるテクニックが満載。

実装する際のJavaScriptやCSSのコードも丁寧に解説されています。

スクリプトの詳細な説明ももちろん、より詳しい解説があります。

第5章からは、実務ですぐに役立つテクニックが満載です。

スライドショーやタブコンテンツなどの実装テクニックだけでなく、JavaScript無効時の対応などにも配慮しています。

各サンプルは単にスクリプトを解説するだけでなく、機能のフローも詳しく書かれており、スクリプトを開発する工程が理解できます。

スクリプトの構造も把握しやすい!

第6章からは、ギャラリーサイトを例にさまざまな機能を順番に実装していきます。

構造を練るにも実装にも役立つフロー図は、大切ですね。

最後の第7章ではここまでの知識をベースにして、さまざまなウェブサイトで利用できる新しいインタラクションを実装します。
jQuery 最高の教科書の目次
-
- jQueryの基礎知識と本書の特徴
- jQueryの基礎知識
- 本書の目的と構成
- jQueryの実行環境
- デバッグ方法
-
- 3ステップではじめるかんたんjQuery入門
- 体験することからはじめよう!
- Step 1:CSSのスタイルを変更してみよう
- Step 2:タイミングをコントロールしてみよう
- Step 3:アニメーションさせてみよう
-
- jQueryの基本的な書き方
- データを格納するさまざまな入れ物(変数・配列など)
- 特定の機能をまとめる「関数」
- スコープと命名規則
- 演算子
- 主な制御文
-
- 確かな基礎力を養うjQueryの基本テクニック
- さまざまなホバーエフェクトで学ぶ動きのある表現の基本
- 画像とキャプションの表現
- 丸いボタンのレイアウト
- 見え隠れするサイドバー
- タイポグラフィの表現
-
- 活用の幅を広げるjQueryの必修テクニック
- 滑らかな動きのスライドショー
- 多機能なスライドショー
- スティッキーヘッダ
- デザインが変化するスティッキーヘッダ
- 画像領域を有効活用できるタブ
- 高機能で拡張しやすいタブ
- スムーズスクロール
- 拡張性のあるスムーズスクロール
-
- 高機能なギャラリーページを作ってみよう
- ギャラリーページの全体像
- シンプルなギャラリーページの作成
- フィルタリング機能をもつギャラリーページの作成
- 選択画像の拡大機能とキャプションの追加
- マウスの移動方向によるホバーエフェクト
-
- jQueryを活用したさまざまな表現
- 画像の読み込みのプログレス表示機能
- 画像シーケンスのアニメーション
- 回転のアニメーションによるインフォグラフィック
- マウスのアニメーション
-
- 付録:jQueryリファレンス
サンプルのデータは全て、ダウンロードできます。
この本の大きな特長の一つとして、無駄なサンプルが一つもないことです。序盤にでてくる簡単なサンプルからすぐに使ってみたくなるものばかりで、それをベースに学んでいくので、モチベーションが下がらずに読み進めることができると思います。
サンプルを実際に作りながら読み進めいくことで、jQueryをより深く身につけることができるでしょう。
献本の御礼
最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors