jQuery 仕事の現場でサッと使える! デザイン教科書

実務で使えるjQuery

Webデザインを扱う方にとってはjQueryの知識は必須です。そんなjQueryについてサンプルを通した詳しい解説がわかりやすく載っているので、なんとなくの理解のままjQueryを使ってしまっている方にはまさにおすすめの1冊です。

吉本 集 (著), ロクナナワークショップ (監修)
出版社: 技術評論社 (2015/4/21)、出典:出版社HP

はじめに

本書の概要

本書は、jQueryを使用したサンプルコードを解説しながらjQueryの知識が身に付くような構成となっています。サンプルコードはすべて実務で使用できるレベルのサンプルです。そのため、jQueryの知識はもちろんですが、自身でゼロからコードを組み立てられるスキルも身に付けることができるようになっています。
私は現在も受託開発をメインに活動しておりますが、jQueryの基礎的知識だけでは、実務レベルのコードを書くことはできません。また、プログラム経験が少ない方がjQueryのサンプル集をまとめた書籍を手に取ってもjQueryを理解することは難しいと思います。本書は、プログラム経験の少ない方が、jQueryの知識を身に付け、実務レベルのコードを書くことができるまでになるような構成にしています。

残念ながらページ数が限られていますので、もしかするとjQueryの基礎的な知識の説明に関しては充分ではないかもしれません。jQueryが持っている機能はたくさんありますので、1冊の書籍の中ですべてを解説することができませんが、短期間で基礎的な知識を身に付けようとせず、まずは実務レベルのコードを書くことができるようなってから、jQueryが持っている機能をマスターするという流れが良いのではないかと思います。

先ほどから「実務レベルのコード」という言葉を何度か使っていますが、jQueryのコードだけではこの「実務レベルのコード」には達することができません。jQueryは、JavaScriptのライブラリです。コードを組み立てるには、JavaScriptの必要最低限の知識が必要になってきます。本来であれば、同時にJavaScriptについても触れたいところではあるのですが、ページ数が限られているため割愛しています。たとえば、If文やfor文、そしてswitch文などがサンブルコードに出てきます。また、コラムで少し触れていますが、変数や関数、引数などの用語も出てきます。本書はこれらのJavaScriptの知識が身に付いているという前提で本書はスタートしています。もしこれらの知識が身に付いていないようであれば、他の書籍やインターネットで調べていただければと思います。

本書の構成

本書は、CHAPTER1~10で構成しています。サンプルコードを基に解説するのはCHAPTER3からです。まずCHAPTER1では、jQueryを覚えるための基礎的な知識が身に付く内容となっています。とくにインストールに関しては、ローカル環境でjQueryが動作できるようにしましょう。サンプルではファイル構成の都合上、すべてネットワーク経由でjQueryファイルを参照していますが、実務では直接jQueryを配信しているURLを指定することはありません。
CHAPTER2では、jQueryで使用する用語や基本的な機能・操作について解説しています。もしすでにjQueryを触ったことがあり、基本的な知識が身に付いている方は、CHAPTER1、2に関しては、飛ばしてしまって問題ありません。

CHAPTER3からがサンプルコードを基に解説する構成になります。構成として、「ポイント」「サンプルコード」「コード解説」の順になっています。まず、「ポイント」では、そのサンプルコードで使用しているjQueryの機能について触れています。とくに、jQueryの関数やメソッド、プロパティそしてイベントについてです。サンプルコードではできるだけ多くのjQueryの機能を使用するようにコードを記述していますが、すべてではありません。本書に載っていないjQueryの機能もまだまだたくさんありますので、jQueryに慣れてきたタイミングで、自身で調べてみるとよいかと思います。

次に「サンプルコード」ですが、基本的にjQueryのコードをメインに載せています。そのためサンプルコードで使用しているCSSやHTMLのコードに関しては省略させていただいているケースが多いです。それらも確認したい場合は、直接サンブルのファイルを開いて確認していただければと思います。
最後に「コードの解説」ですが、jQueryの使い方に関してはもちろんですが、どのようにコードが組み立てられ、どのような処理になっているかを含め解説するようにしています。前にも書きましたが「実務レベルのコード」を書くためには、この部分がとても重要です。「コードの解説」をしっかり理解し、自身で応用できるようになりましょう。

2015年3月
吉本集

吉本 集 (著), ロクナナワークショップ (監修)
出版社: 技術評論社 (2015/4/21)、出典:出版社HP

本書の使い方

SECTION
各CHAPTERごとのSECTION番号です。本書では、たとえばCHAPTER7のSECTION03の場合、7-03といった表記を使用しています。
サンプルファイル
サンプルファイルの該当フォルダーを示しています。プラグインを使用している場合は、そのダウンロードURLを紹介しています
ポイント
その節で使用しているjQueryサンプルのポイントとなる事項を解説しています

サンプルコード
jQueryサンプルのサンプルコードです。必要に応じて、HTMLやCSSのサンプルコードも掲載しています
コード解説
サンプルコードの解説です。

CONTENTS

はじめに
本書の使い方
サンプルファイルのダウンロード

CHAPTER1 jQueryについて
1-01 jQueryとは
1-02 jQueryのインストール
1-03 jQueryのバージョンによる違い
1-04 jQueryの基本構文

CHAPTER2 jQueryを使うための基礎知識
2-01セレクタとは
2-02セレクタの選択
2-03関数とメソッド
2-04 HTMLの操作
2-05 CSSの操作
2-06イベントとは
2-07 readyイベントについて
コラム プリミティブ型とオブジェクト型.

CHAPTER3アニメーション
3-01【アニメーション】フェードイン/フェードアウト
3-02【アニメーション】スライド(座標移動)
3-03【アニメーション】コマアニメーション
3-04【メインビジュアル】画像の自動切り替え
3-05【メインビジュアル】サムネイル画像のクリックによる画像の切り替え
3-06【メインビジュアル】ボタンのクリックによる画像の切り替え
3-07【メインビジュアル】複数機能による画像の切り替え
コラム 変数について.

CHAPTER4メニュー
4-01【メニュー】アコーディオンメニュー
4-02【メニュー】プルダウンメニュー
4-03【メニュー】エレベーターメニュー
4-04【マウスオーバー】画像の切り替え
4-05【マウスオーバー】画像のアルファ(透明度)の変更
4-06【マウスオーバー】2枚の画像をクロスフェードで切り替え
コラム 関数について

CHAPTER5フォーム
5-01【フォーム】テキストやテキストエリアの未入力チェック
5-02【フォーム】正規表現による入力フォーマットチェック
5-03【フォーム】テキストやテキストエリアのリアルタイム入力チェック
5-04【フォーム】チェックボックスやセレクトの未入力チェック
5-05【フォーム】submitボタンの制御
5-06【フォーム】入力内容をCookieに保存
5-07【フォーム】プレースホルダ
コラム オブジェクトについて

CHAPTER6テキスト
6-01【テキスト】テキストティッカー
6-02【テキスト】自動カーニング
6-03【テキスト】タイピング風に1文字ずつ表示
6-04【テキスト】シャッフル表示
コラム セレクタについて

CHAPTER7画像表示
7-01【画像表示】大量の画像の読み込み
7-02【画像表示】画像の読み込み中にローディング画像を配置
7-03【画像表示】画像の読み込み中にローディングバーを配置
7-04【画像表示】ローディングバーにパーセンテージを表示
7-05【画像表示】画像の外部読み込み(JSON形式)
7-06【画像表示】画像の外部読み込み(XML形式)
7-07【画像表示読み込みが完了した画像から順に表示
コラム jQueryのプラグインについて1

CHAPTER8モーダルウィンドウ
8-01【モーダルウィンドウ】画像の表示
8-02【モーダルウィンドウ】画像の切り替え
8-03【モーダルウィンドウ】画像のグループ化
8-04【モーダルウィンドウ】iframeを使用した外部HTMLの埋め込み
8-05【モーダルウィンドウ】同ファイル内のHTML要素を表示
コラム jQueryのプラグインについて2

CHAPTER9レスポンシブ
9-01【スライドショー】レスポンシブ対応されたスライドショー
9-02【スライドショー】フリックによる画像スライド機能を追加したスライドショー
コラム jQueryのプラグインについて3

CHAPTER10外部サービスとの連携
10-01【Facebook】タイムラインの写真を読み込む
10-02【Facebook】モーダルウィンドウを追加する
10-03【YouTube】プレーヤーの埋め込み
10-04【YouTube】再生する動画を切り替える
コラム さらなるスキルアップのために

索引

吉本 集 (著), ロクナナワークショップ (監修)
出版社: 技術評論社 (2015/4/21)、出典:出版社HP

免責事項

※本書をお読みになる前に
・本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた運用は、必ずお客様自身の責任と判断によって行ってください。ソフトウェアの操作や掲載されているプログラム等の実行結果など、これらの情報の運用の結果について、技術評論社および著者、サービス提供者はいかなる責任も負いません。
・本書記載の情報は、2015年3月現在のものを掲載しています。ご利用時には変更されている場合もあります。ソフトウェア等はバージョンアップされる場合があり、本書での説明とは機能内容や画面図などが異なってしまうこともあり得ます。本書ご購入の前に、必ずバージョン番号をご確認ください。
・以上の注意事項をご承諾いただいた上で、本書をご利用願います。これらの注意事項をお読みいただかずに、お問い合わせいただいても、技術評論社および著者、サービス提供者は対処しかねます。あらかじめご承知おきください。
・本文中の会社名、製品名は各社の登録商標です。

サンプルファイルのダウンロード

本書で紹介しているサンブルプログラムは、以下のサポートサイトよりダウンロードできます。
○サポートサイト
http://gihyo.jp/book/2015/978-4-7741-7273-6/support

ダウンロードしたファイルはZIP形式で圧縮されていますので、展開してから使用してください。展開すると各CHAPTER(章)ごとのフォルダーが表示され、それぞれの中には各SECTION(節)ごとのフォルダーがあります。その中にあるindex.htmlファイルをWebブラウザで開くと、サンプルプログラムの動作を確認することができます。
サンプルプログラムは、インターネットに接続されたInternetExplorer8~11、Google Chrome、Safari7、Firefoxにて動作を確認していますが、7-05、7-06、10-03、10-04のサンプルプログラムは、Webサーバー上でないと正しく動作しません。Webサーバー上にアップロードするか、Apacheなどのローカルサーバー上にて動作確認することをお勧めします。

また、CHAPTER10のFacebookやYouTubeのAPIを使用したサンプルプログラムについては、サービス提供側の仕様変更により将来的に正しく動作しなくなることも考えられます。あらかじめご了承ください。

jQueryのサンプルファイルを確認したい場合はjsフォルダの中のmain.jsファイルを、CSSのサンプルファイルを確認したい場合はCSSフォルダの中のstyles.cssファイルをエディタなどで開いて確認してください。なお、一部のindex.htmlファイルおよびstyles.cssファイルは、本書では掲載を省いていることがあります。サンプルファイルでご確認ください。

吉本 集 (著), ロクナナワークショップ (監修)
出版社: 技術評論社 (2015/4/21)、出典:出版社HP