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

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

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

本のキャプチャ

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

本のキャプチャ

作りながら学ぶ jQuery デザインの教科書
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
SBクリエイティブ
発売日:
2014/5/22

本書は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本です。

本のキャプチャ

作りながら学ぶ jQuery デザインの教科書
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
SBクリエイティブ
発売日:
2014/5/22

献本の御礼

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

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

sponsors

top of page

©2018 coliss