jQueryでプラグインを単に使うだけでなく、実務で役立つスキルを身につけたい人にオススメの本 -jQuery デザインの教科書

jQueryはプラグインが豊富にあり、非常に便利で、確かに簡単です。しかし、自分にあったプラグインが見つからなかったり、カスタマイズする必要があったり、場合によってはプラグインに合わせてページを作り直したりといったこともあります。

jQueryを学ぶ際にプラグインから一旦離れ、実務で役立つスキルを確実に身につけたい人にオススメの本を紹介します。

本書のスクリプトは2014年現在あちこちで見かけるレスポンシブ対応のさまざまなUIをシンプルなコードで実装しており、単なる書籍サンプルにとどまらない高いクオリティで実用的なものとなっています。
jQueryとちょっと真剣に向き合いたいなと思った時、手にとってみてください。

本書はjQueryに初めて挑戦するウェブ制作者向けの入門書で、HTML/CSSはひと通り書けるけどスクリプトはちょっと自信ない、実用的なスクリプトの書き方をマスターしたい、という人にオススメの本です。
昨日発売したばかりで、書店にもそろそろ並んでいると思います。

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

一番の特徴は、既存のプラグインから一旦離れ、ゼロから作ることにこだわり、自分仕様のスクリプトを作成することにあります。
本書のチュートリアルで作成していくスクリプトは汎用性が高く、次のプロジェクトですぐに利用でるような実用的なものばかりです。

チュートリアルの進め方は、半完成のページに必要なスクリプトを組み込んでいくという学習形式で、実サイトでも利用できる本格的なウェブページを作成していきます。実際に制作する時と同じフローで取り組むことができ、応用する時にもイメージが沸きやすいと思います。

第1章ではjQueryを使うとどんなことができるのか、簡単なスクリプトを記述しながら学びます。jQueryはもうバリバリ使ってるよ、という人もおさらいを兼ねて目を通しておくとよいでしょう。

第2章からさっそくUIをつくります。最初はごく基本的なスクリプトで、ナビゲーション、タブ、ギャラリーなどを作ります。これらは簡単にカスタマイズできるので、応用範囲が非常に広いです。

まず完成イメージと仕様を把握し、実装の流れを押さえてから、コードを書き進めていきます。
チュートリアルのファイルは全てダウンロードでき、完成したコードだけでなく、作業用のファイルも揃っているのが嬉しいですね。

各チュートリアルは2-4ステップで構成されており、必要な機能を段階的に組み込んでいきます。例えば、Step 1はクリックで表示・非表示を切り替え、Step 2はその際のアニメーションを加え、Step 3はアニメーションの演出を調整、といった感じです。
ステップごとの完成例もダウンロードファイルに含まれています。途中で挫折する心配もないですね。

完成したら、各ブラウザで動作・表示の確認を行います。

カスタマイズ時のポイントやコードの更に掘り下げた説明も充実しています。

第3章ではアニメーションを組み合わせたUIで、スライドショーやアコーディオンなどを実装します。複数のUI部品を組み合わせても確実に動作する手法を学びます。

第4章ではページ全体を制御するもので、モーダルウインドウやスクロールを組み合わせたインタラクションを使ったUIを実装します。

第5章はデータからページを生成し、データをフィルタリングしたり、データからタグを生成します。
最後の第6章ではカルーセルを例に、作成したスクリプトをプラグイン化し、再利用できるようにします。

jQuery デザインの教科書の目次

1. jQueryの基本

   HTML/CSS/JavaScript、そしてjQueryの関係

   開発ツールを使ってみよう

   JavaScriptの動作を実感する

   jQueryの特徴

   jQueryの基本的な処理の流れと記述パターン

   jQueryトレーニング（その1） -jQueryを読み込む

   jQueryトレーニング（その2） -スクリプトを試しに書いてみる

   jQueryトレーニング（その3） -要素を取得する

   jQueryトレーニング（その4） -イベントハンドラを設定する

   jQueryトレーニング（その5） -トラバースで要素を取得する

   jQueryトレーニング（その6） -要素を操作する

2. ページのデザインに役立つUIを作成する

   開閉するボックス

   レスポンシブなナビゲーション

   コンテンツを切り換えるタブ

   簡易的なイメージギャラリー

3. 動きのあるコンテンツを作成する

   アコーディオン

   ドロップダウンメニュー

   CSSを操作するアニメーション

   連続アニメーション

   高度なアニメーションテクニック

   スライドショー

   Ajaxの基礎

4. Webページ全体を制御する

   モーダルウインドウ

   ウインドウ上端で固定するグローバルナビゲーション

   指定位置で固定するサイドバー

   スクロールするページ内リンク

   スクロールしてページトップへ戻るリンク

   スクロール位置に合わせたリンクのハイライト

5. データからページを生成する

   JSONデータの取得

   データからテーブルを生成

   データによるアイコン画像の切り換え

   データのフィルタ処理

6. カルーセルを作成する

   カルーセルを作成する

   大きな画像を表示する

   カルーセルのプラグインを作成する

   プリロードのプラグインを作成する

   プラグインを別ファイルにする

jQueryのプラグインを単に使うだけではない、スクリプトの動きのポイント、使い勝手・見た目をカスタマイズできるスキルを身につけることはフロントエンジニアには非常に重要です。
ゼロからつくる楽しさにこだわったjQuery本です。

献本の御礼

最後に、献本いただいたご担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス