本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScript/jQueryを利用するWebプログラマ必携の逆引き集」です。
JavaScriptの基本構文や関数、スコープといった基礎的な知識から、オブジェクト指向、基本オブジェクト、ページ操作、エフェクト&インタラクション、jQuery/jQuery UI/jQuery MobileによるUI開発、CoffeeScriptなどの定石・応用テクニックまで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。
JavaScript/jQueryをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScript/jQueryをもっと活用したい方などにおすすめの一冊です。
はじめに
紙面の構成
動作確認環境
サンプルプログラムの入手先
第1章 基本構文
1.1 JavaScriptの基本
001 HTMLページにJavaScriptのコードを組み込みたい
002 JavaScriptの基本文法を理解したい
003 JavaScriptのコードにコメントを書きたい
004 コメントから手軽に仕様書を作成したい
005 JavaScriptの危険な構文を取り除きたい
006 JavaScriptのコードを圧縮したい
007 変数を利用したい
008 文字列を出力したい
009 文字列の中で改行やタブを含ませたい
010 数値型の値を表現したい
011 真偽値を表わしたい
012 配列を作成したい
013 連想配列を作成したい
1.2 型変換と型判定
014 データ型を変換したい
015 データ型をより簡易に変換したい
016 変数のデータ型を判定したい
1.3 演算子
017 i++と++iの違いを知りたい
018 「0.1 *3」が0.30000000000000004になる理由を知りたい
019 基本型と参照型の違いを知りたい(代入と比較)
020 ==と===の違いを知りたい
021 論理演算で式が無視される場合を知りたい
1.4 制御構文
022 条件によって処理を分岐したい
023 変数の値によって処理を振り分けたい
024 条件によって処理を繰り返し実行したい
025 指定の回数だけ処理を繰り返したい
026 オブジェクトのプロパティを順に列挙したい
027 ループを途中で中断/スキップしたい
第2章 関数とオブジェクト指向
2.1 関数
028 ユーザー定義関数を定義したい
029 引数のデフォルト値を設定したい
030 必須の引数をチェックしたい
031 名前付き引数を受け取りたい
032 可変長引数の関数を定義したい
033 関数を引数として渡したい
2.2 スコープ
034 ローカル変数の範囲を知りたい
035 「変数の巻き上げ」とはなにか知りたい
036 すべての変数をローカルスコープに押し込めたい
2.3 オブジェクト指向
037 クラスを定義したい
038 クラスにメソッドを追加したい
039 クラスに静的メンバを追加したい
040 クラスを継承したい
041 外部からアクセスできないプロパティ/メソッドを定義したい
042 オブジェクトの型を判定したい
043 クラス名の衝突を回避したい
044 階層を持った名前空間を定義したい
第3章 基本オブジェクト
3.1 数学
045 小数点以下の数値を丸めたい
046 任意の桁数で小数点数を丸めたい
047 n進数を求めたい
048 乱数を求めたい
049 絶対値、べき乗、平方根などの数学演算を実行したい
3.2 文字列
050 文字列長を取得したい
051 大文字/小文字を変換したい
052 文字列から空白を除去したい
053 文字列から部分文字列を取り出したい
054 特定の文字列を検索したい
3.3 正規表現
055 正規表現を利用したい
056 正規表現で文字列のマッチングをチェックしたい
057 正規表現で文字列を検索したい
058 正規表現で複数行にわたる文字列を検索したい
059 正規表現での検索結果をより詳細に取得したい
060 正規表現で文字列を置換したい
061 正規表現で文字列を分割したい
3.4 配列
062 配列の要素を追加/削除したい
063 配列に配列を連結したい
064 ハッシュ/オブジェクト同士をマージしたい
065 配列のサイズを取得したい
066 配列の要素を結合したい
067 配列の一部を抜き出したい
068 配列の内容を置き換えたい
069 配列の要素を並べ替えたい
070 配列/オブジェクトの内容を順に処理したい
071 配列の要素を順番に加工したい
072 配列の内容を特定の条件で絞り込みたい
073 配列の中身を検索したい
3.5 日付
074 日付/時刻情報を扱いたい
075 日付/時刻情報を個別に設定したい
076 日付/時刻要素を取得したい
077 日付文字列からタイムスタンプ値を取得したい
078 日付/時刻値を文字列に変換したい
079 日付/時刻値を加算/減算したい
080 日付/時刻値の差を求めたい
3.6 ブラウザ操作
081 一定時間の後で処理を実行したい
082 一定時間おきに処理を実行したい
083 ページを移動したい
084 履歴に現在のページの状態を保存したい
085 文字列をURIエスケープしたい
086 オブジェクト⇔JSON文字列を相互変換したい
第4章 ページ操作
4.1 jQueryの基本
087 jQueryを導入したい
088 以前作成したアプリをjQueryの最新バージョンに対応させたい
089 HTMLページから特定の要素を検索したい
090 文書のロードが完了してからコードを実行したい
4.2 スタイルの操作
091 要素のスタイルを変更したい
092 スタイルクラスを設定/除外したい
093 スタイルクラスを簡単に着脱したい
094 要素の高さ/幅を取得/設定したい
4.3 属性/テキストの操作
095 スクロール位置を取得/設定したい
096 要素の属性を取得/設定したい
097 フォーム要素の値を取得/設定したい
098 要素配下のテキストを取得/設定したい
099 要素のプロパティを取得/設定したい
4.4 トラバーシングとフィルタリング
100 親子/兄弟要素の間を行き来したい
101 現在の要素を基点に、別の要素を検索したい
102 要素セットの内容を特定の条件で絞り込みたい
4.5 要素の操作
103 新たに作成した要素を挿入したい
104 既存の要素を移動したい
105 既存の要素を別の要素で置き換えたい
106 既存の要素を削除したい
107 要素の中身を破棄したい
4.6 イベント処理
108 イベントの発生に応じて処理を実行したい
109 jQuery標準のイベントを理解したい
110 要素にマウスが出入りしたタイミングで処理を実行したい
111 初回のクリック時に処理を実行したい
112 jQuery標準以外のイベントを捕捉したい
113 まだない要素にイベントリスナーを登録したい
114 複数のイベントリスナーをまとめて設定したい
115 イベントリスナーを破棄したい
116 イベント発生時のマウス情報を取得したい
117 イベント発生時のキー情報を取得したい
118 イベントリスナーにパラメータを渡したい
119 JavaScriptを「控えめ」にしたい
120 イベント処理をキャンセルしたい
第5章 エフェクト&インタラクション
5.1 基本エフェクト
121 アニメーション効果を実装したい
122 アニメーションの終了時に処理を実行したい
123 独自のアニメーション効果を実装したい
124 スタイルクラスの適用/除外時にアニメーションを実行したい
125 別のスタイルに徐々に切り替えたい
126 表示/非表示時にさまざまなアニメーションを適用したい
127 要素にさまざまなエフェクトを適用したい
128 移動するようなアニメーションを表現したい
129 アニメーションの変化の度合いを指定したい
130 アニメーションを無効化したい
5.2 インタラクション
131 画像の表示サイズをドラッグ操作で変更したい
132 テキスト領域をリサイズしたい
133 ドラッグ&ドロップで要素を並べ替えたい
134 並べ替え対象の要素を制限したい
135 ソート可能リストでドロップ場所を目立たせたい
136 ドラッグによる複数同時選択に対応したリストを作成したい
137 要素をドラッグ&ドロップ可能にしたい
138 ドロップ可能な要素を限定したい
139 jQuery UIを利用せずにドラッグ&ドロップ機能を実装したい
140 他のアプリからテキストをドラッグ&ドロップしたい
141 ファイルをブラウザにドラッグしたい
第6章 UI開発—パネル/メニュー/データ表現編
6.1 jQuery UIの基本
142 jQuery UIを利用したい
143 jQuery UIのテーマをカスタマイズしたい
144 jQuery UI標準のアイコンセットを利用したい
145 ウィジェットの表示位置を細かく制御したい
146 ウィジェットに適用するエフェクトをカスタマイズしたい
6.2 リスト/パネル
147 アコーディオンパネルを実装したい
148 タブパネルを実装したい
149 タブパネルでコンテンツを外部ファイル化したい
150 ダイアログボックスを実装したい
151 ダイアログの内容を外部ファイルから取得したい
152 ツールチップを実装したい
153 ツールチップの表示内容をカスタマイズしたい
6.3 メニュー
154 リッチなメニューを実装したい
155 コンテキストメニューを作成したい
6.4 データ表現
156 画像/動画などをズーム表示したい
157 ソート/ページング対応のグリッド表を作成したい
158 折れ線グラフを描画したい
159 棒グラフを描画したい
160 円グラフを描画したい
161 散布図を描画したい
162 バブルチャートを描画したい
163 二軸グラフを描画したい
第7章 UI開発—入力補助/テンプレートエンジン/ Canvas編
7.1 入力補助
164 オートコンプリート機能付きのテキストボックスを実装したい
165 入力候補の検索ルールをカスタマイズしたい
166 候補リストの追加情報をページに反映したい
167 候補リストをデータベースから取得したい
168 日付選択ボックスを実装したい
169 日付選択ボックスの日付形式をカスタマイズしたい
170 日付選択ボックスで入力可能な日付範囲を指定したい
171 ボタンクリックでカレンダーをポップアップしたい
172 数値入力ボックスを実装したい
173 現在の地域設定に応じた数値を表示したい
174 スライダーを実装したい
175 範囲スライダーや縦置きスライダーを設置したい
176 ボタン/リンク/ラジオボタン/チェックボックスをリッチな見栄えに整形したい
177 定型的な入力値の検証機能を実装したい
178 独自の検証ルールを実装したい
179 ウィザード形式のフォームを実装したい
180 ファイルアップローダーを実装したい
7.2 テンプレートエンジン
181 レイアウトとロジックとを分離したい
182 テンプレートで条件分岐や繰り返し処理を実装したい
183 テンプレート内のデータを加工したい
184 カスタムのタグを生成したい
7.3 Canvas
185 プラグインレスで図形を描画したい
186 キャンバスに矩形を描画したい
187 キャンバスに直線を描画したい
188 多角形を描画したい
189 図形の描画スタイルを設定したい
190 キャンバスの描画色にグラデーション効果を適用したい
191 円や円弧を描画したい
192 ベジェ曲線を描画したい
193 キャンバスにテキストを描画したい
194 キャンバスに画像を埋め込みたい
195 特定の領域に沿って画像を切りぬきたい
196 画像を縦/横方向に繰り返し貼り付けたい
197 画像を拡大/回転/移動/変形したい
198 キャンバスの内容をData URL形式で出力したい
第8章 アプリ開発
8.1 Ajax
199 非同期通信で取得したコンテンツをページに反映したい
200 非同期通信の結果をJavaScriptで処理したい
201 JSON形式のWeb APIにアクセスしたい
202 Ajax通信の細かなオプションを設定したい
203 非同期通信の開始/完了/エラー時の共通処理を定義したい
8.2 位置情報
204 現在の位置情報を取得したい
205 位置取得時にエラー処理や取得オプションを設定したい
206 定期的に位置情報を取得したい
8.3 Web Storage&クッキー
207 クッキーを手軽に操作したい
208 ブラウザに大きなデータを保存したい
209 ストレージにオブジェクトを出し入れしたい
210 ストレージの内容をすべて参照したい
211 ストレージの内容を削除したい
8.4 音声/動画の再生
212 音声ファイルを再生したい
213 動画ファイルを再生したい
214 音声/動画ファイルを複数ブラウザに対応したい
215 音声/動画ファイルをスクリプトから再生したい
216 音声/動画の音量や再生スピードを調整したい
8.5 ファイル操作
217 ローカルファイルの情報を取得したい
218 テキストファイルを読み込みたい
219 バイナリファイルを読み込みたい
8.6 その他
220 アプリをオフラインで利用したい
221 一部のファイルをキャッシュから除外したい
222 バックグラウンドでJavaScriptのコードを実行したい(ワーカー編)
223 バックグラウンドでJavaScriptのコードを実行したい(起動編)
224 ウィンドウ/フレーム間でメッセージを交換したい
第9章 スマホ開発
9.1 jQuery Mobileの基本
225 jQuery Mobileを利用したい
226 jQuery Mobileで基本的なページを作成したい
227 jQuery Mobileページのデザインを変更したい
228 ThemeRollerでテーマを自作したい
9.2 フォーム
229 jQuery Mobileページで入力フォームを定義したい
230 jQuery Mobileページでボタンを表示したい
231 アイコン付きのボタンを作成したい
232 さまざまなテキスト入力ボックスを設置したい
233 テキストボックスに独自の機能を付与したい
234 ラジオボタン/チェックボックスを作成したい
235 オンオフのボタンを作成したい
236 選択メニューを作成したい
237 スライダーを作成したい
238 特定のフォーム要素に対してウィジェットを解除したい
9.3 ハイパーリンク
239 jQuery Mobileページにリンクボタンを設置したい
240 ページの遷移エフェクトを変更したい
241 ページ遷移を高速化したい
242 ローディングメッセージを表示したい
9.4 ポップアップ/パネル
243 ポップアップウィンドウを表示したい
244 ダイアログボックスを表示したい
245 Lightbox風の画像ポップアップを作成したい
246 スライドパネルを表示したい
247 開閉可能なパネルを作成したい
248 アコーディオンパネルを作成したい
9.5 リスト/テーブル
249 ネイティブアプリ・ライクなリストを作成したい
250 階層化リストを作成したい
251 リスト項目に小見出し/カウントバブル/アイコン画像を付与したい
252 リスト項目をグループ化したい
253 レスポンシブなテーブルを作成したい(Reflow)
254 レスポンシブなテーブルを作成したい(Column toggle)
255 リストやテーブルの内容を動的に絞り込みたい
256 表示テキスト以外でリスト/テーブルの内容を絞り込みたい
257 Filterableウィジェットによる検索ルールをカスタマイズしたい
9.6 ヘッダー/フッター
258 ヘッダー/フッターにボタンを配置したい
259 ヘッダー/フッターの表示を制御したい
260 ナビゲーションバーを設置したい
9.7 レイアウト
261 グリッドレイアウトを作成したい
262 レスポンシブなグリッドレイアウトを作成したい
9.8 その他
263 jQuery Mobileの動作パラメータを設定したい
264 ページロード/移動のタイミングで処理を実行したい
265 ユーザーの操作によって任意の処理を実行したい
第10章 CoffeeScript
10.1 CoffeeScriptの基本
266 CoffeeScriptを利用したい
267 CoffeeScriptの基本文法を理解したい
268 CoffeeScriptで変数を宣言したい
269 文字列に変数を埋め込みたい
270 複数行の文字列をスマートに表現したい
271 CoffeeScriptで配列/ハッシュを利用したい
272 連続した数値配列をスマートに生成したい
10.2 演算子/制御構文
273 CoffeeScriptの演算子を理解したい
274 変数の存在をチェックしたい
275 関数、オブジェクトの存在をチェックしたい
276 条件に応じて処理を分岐したい
277 否定の条件式をわかりやすく表現したい
278 式の値によって処理を分岐したい
279 条件によって処理を繰り返したい
280 配列の要素を順番に処理したい
281 ハッシュの内容を順に処理したい
282 指定された回数だけ処理を繰り返したい
10.3 関数
283 CoffeeScriptで関数を定義したい
284 引数にデフォルト値を設定したい
285 可変長引数の関数を定義したい
10.4 オブジェクト指向
286 CoffeeScriptでクラスを定義したい
287 CoffeeScriptで静的なメンバを定義したい
288 あるクラスを元に新たなクラスを定義したい
289 CoffeeScriptでクラスライブラリを作成したい
290 CoffeeScriptでthisコンテキストを保存したい