jQuery 標準デザイン講座

作って身につく・仕組みがわかる 30 レッスン!

本書は、HTML と CSS の知識はあっても JavaScript や jQuery には触れたことがない初心者を対象にした、Web 制作向けの jQuery 学習書です。全 30LESSON を通して、jQuery の基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQuery のしくみと使い方を学んでいきます。

各 LESSON は、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成。メニューやナビゲーション、UI パーツなど、Web サイトでよく使われているサンプル作例を自分で作りながら、「使える」知識がきちんと身につきます。

サンプル作例は小さなパーツから始めて、少しずつ複合的なパーツを作っていく難度順なので、プログラミングになじみのない初心者でも挫折せずに進められます。Web 制作者を目指す人や、スキルアップしたい Web デザイナーのための jQuery 教科書としておすすめの 1 冊です!

Introduction レッスンを始める前に

Chapter01 jQuery の基礎知識
LESSON01 jQuery の概要
LESSON02 jQuery の導入

Chapter 02 jQuery の文法
LESSON03 jQuery の文法
LESSON04 JavaScript の基本

Chapter 03 jQuery のサンプル制作: Level 1
LESSON05 トグルメニュー
LESSON06 アラートボックス
LESSON07 ビューアー
LESSON08 タブ

Chapter 04 jQuery のサンプル制作: Level 2
LESSON09 ドロップダウンメニュー
LESSON10 フローティングメニュー
LESSON11 lightBox 風モーダルウインドウ
LESSON12 画像のキャプション表示
LESSON13 ツールチップ

Chapter 05 jQuery のサンプル制作: Level 3
LESSON14 ボックスの高さを合わせる
LESSON15 文字サイズの変更
LESSON16 パララックス効果
LESSON17 フィルタリング
LESSON18 テーブルセルのハイライト
LESSON19 アコーディオンパネル
LESSON20 スムーススクロール

Chapter 06 jQuery のサンプル制作: Level 4
LESSON21 バナーのランダム表示
LESSON22 フォームのバリデーション
LESSON23 スライドメニュー
LESSON24 スクロールによるヘッダーのリサイズ
LESSON25 ブラウザ上部に固定されるヘッダー
LESSON26 メニューのハイライト

Chapter 07 jQuery のサンプル制作: Level 5
LESSON27 スライドショー (横スクロール)
LESSON28 スライドショー (フェードイン / アウト)
LESSON29 画像のズーム
LESSON30 カウントアップゲーム

［補講］ プラグインの利用
索引

HTML と CSS でページは組めるものの、JavaScript や jQuery には触れたことがない人が、メニューやスライドショーのような動く部品を自分の手で作れるようになるための学習書が『jQuery 標準デザイン講座』 (神田 幸恵 著、翔泳社、2015 年 12 月刊) です。版元の叢書「標準デザイン講座」の一冊で、副題は「「使える」知識が身につく!」です。全 30 のレッスンは、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成され、版元は Web 制作者を目指す人やスキルアップしたい Web デザイナーに向けた jQuery の教科書と位置づけています。

全 7 章、jQuery の基礎知識から Level 5 の作例まで

本文は「Introduction レッスンを始める前に」で始まり、Chapter01「jQuery の基礎知識」で jQuery の概要と導入を、Chapter 02「jQuery の文法」で jQuery の文法と JavaScript の基本を扱います。Chapter 03 から Chapter 07 までは「jQuery のサンプル制作」が Level 1 から Level 5 まで続く構成で、トグルメニュー、アラートボックス、ビューアー、タブといった小さな部品から始まり、ドロップダウンメニューや lightBox 風のモーダルウインドウ、ツールチップへ進みます。中盤ではボックスの高さ合わせ、文字サイズの変更、パララックス効果、フィルタリング、アコーディオンパネル、スムーススクロールを作り、終盤ではフォームのバリデーション、スクロールに応じたヘッダーのリサイズや固定、メニューのハイライト、2 種類のスライドショー、画像のズームを経て、最後の LESSON30 はカウントアップゲームです。巻末には「［補講］ プラグインの利用」と索引が付きます。版元の紹介文が述べるとおり、作例は小さなパーツから複合的なパーツへと難度順に並んでいます。

セレクター、イベント、アニメーションという jQuery の考え方

jQuery は、ページ上の要素を CSS と同じ書き方のセレクターで選び、その要素にイベントの処理や表示の変化をまとめて加えるための JavaScript のライブラリです。たとえば「このボタンがクリックされたら、隣のメニューを開閉する」という処理は、要素を選ぶ、イベントを待つ、見た目を変えるという 3 つの段に分けて考えられ、jQuery はどの段も短い記述で書けるようにしました。CSS のセレクターを書き慣れた人にとって入口が低いのはこのためで、メソッドを続けて書くメソッドチェーンや、フェードやスライドの表示効果を 1 行で呼べる仕組みも、動きを試しながら覚える学び方と相性が良い点です。一方で、ブラウザーの標準の機能が拡充されるにつれ、要素の選択やクラスの付け外し、通信といった処理の多くは jQuery を使わずに書けるようになっており、本書で身につけた「要素を選んで、イベントに応じて状態を変える」という考え方は、ライブラリを使わない JavaScript にもそのまま持ち込めます。

2015 年刊の jQuery 入門として合う人、合わない人

本書は 2015 年の刊行で、紙面はその時点の jQuery とブラウザーの環境を前提にしています。jQuery を使った既存のサイトやテーマを保守する人、配布されているプラグインを組み込んで手直しする機会がある人には、作例ごとに仕組みを追える構成がそのまま役立ちます。反対に、React や Vue のようなコンポーネントを単位にした開発の手法や、型を使って大きなコードを保守する方法を学びたい人には、目的が合いません。そうした段階に進むときは、JavaScript と TypeScript の本の選び方 を参考に次の一冊を選ぶと、学ぶ順序を組み立てやすくなります。また、HTML と CSS の知識が前提なので、マークアップに不安がある場合は、Web デザインの本の選び方 から入門書を先に一冊済ませておくと、実習のコードを読むのが楽になります。

HTML と CSS で静的なページを作れるようになり、次はサイトに動きを付けたいと考えている Web デザイナーやコーダーにとって、本書は 30 の作例を順に作りながら、メニューやスライドショーの仕組みを部品単位で理解できる一冊です。講義で考え方をつかみ、実習で同じ部品を自分の手で組み立てることを繰り返していけば、配布されたコードをただ貼り付けるのではなく、必要に応じて書き換えられるようになります。