■ページ見本

---

---

---

【JavaScriptコーディング ベストプラクティス】

はじめに

■1［基礎］
1.1｜JavaScriptの歩み
1.1.1｜Google Mapsの登場によって大きく変わったJavaScriptの存在意義
1.1.2｜JavaScriptの現在
1.2｜開発効率をアップさせるライブラリ／フレームワーク
1.2.1｜さまざまなライブラリの登場「Prototype.js」
1.2.2｜デザイナーにも使いやすい「jQuery」
1.2.3｜大規模開発に適した「Dojo Toolkit 」
1.2.4｜イントラネットに適した「ExtJS」
1.3｜ブラウザのエンジン
1.3.1｜IEと他ブラウザとの動作の違いという課題
1.4｜開発効率アップに欠かせないデバッガ
1.4.1｜デバッガのサポート以前
1.4.2｜Firebug
1.5｜高速化と開発効率
1.5.1｜ユーザーと開発者のすれ違い
1.5.2｜「処理速度」と「体感速度」を使い分ける

■2［クロスブラウザ］
2.1｜クロスブラウザ対応の意義
2.1.1｜対応ブラウザの選定
2.1.2｜プログレッシブエンハンスメント
2.2｜クロスブラウザ対応のパターン
2.2.1｜ブラウザごとの実装差異
2.2.2｜ブラウザの実装不備
2.2.3｜ブラウザやデバイスの性能差
2.3｜JavaScriptライブラリの活用
2.4｜jQueryによるクロスブラウザ対応
2.4.1｜$.browser
2.4.2｜$.support
2.5｜クロスブラウザに対応する確認環境

■3［開発効率］
3.1｜読みやすくメンテナンスしやすいコードを書くために
3.1.1｜まず最初にすべきこと─「ルールを決める」
3.2｜ルールの分類
3.2.1｜コードの整形に関するもの（スタイル）
3.2.2｜命名規則に関するもの
3.2.3｜言語・構文等に関するもの
3.2.4｜禁止または注意事項
3.3｜コードの共通化と再利用
3.3.1 ｜再利用可能なコードを外部ファイルにする
3.3.2｜ライブラリ化
3.3.3｜「車輪の再発明」
3.3.4｜ライブラリの動向に注意する

■4［高速化］
4.1｜実行速度の計測方法について
4.2｜高速化のためのベンチマークコレクション
4.2.1｜中身のないオブジェクト生成
4.2.2｜中身のあるオブジェクト生成（1）
4.2.3｜中身のあるオブジェクト生成（2）
4.2.4｜JavaScriptの関数定義
4.2.5｜中身のない配列生成
4.2.6｜中身のある配列生成
4.2.7｜プロトタイプの追加とプロパティの追加
4.2.8｜リテラルの生成
4.2.9｜HTMLの書き出し
4.2.10｜文字列の数値変換
4.2.11｜文字列の検索
4.2.12｜等価演算子
4.2.13｜論理演算子におけるtrueとfalse（1）
4.2.14｜論理演算子におけるtrueとfalse（2）
4.2.15｜繰り返し文
4.2.16｜分岐
4.2.17｜ループ内tryとループ外try
4.2.18｜スコープにおける処理の実行
4.2.19｜スコープ内外の変数へのアクセス速度
4.2.20｜「new Date()」と「new Date」
4.2.21｜WebSocketとAjaxの通信速度
4.2.22｜localStorageへのデータ保存
4.2.23｜localStorageからのデータの読み込み
4.3｜通信の最適化による高速化
4.3.1｜HTTPによるリソースダウンロード方式
4.3.2｜高速化を実現するページ記述法
4.3.3｜コンテンツ圧縮による高速化
4.3.4｜JavaScriptダウンロードに関する高速化手法
4.3.5｜JavaScriptサイズの最適化
4.3.6｜CSSスプライト
4.3.7｜CSSスプライトの作成方法
4.3.8｜キャッシュの活用
4.3.9｜Ajaxでのキャッシュの活用
4.3.10｜CDN（コンテンツデリバリネットワーク）
4.3.11｜HTML5関連技術を活用した最新の通信高速化
4.3.12｜WebSocketを用いた画像ダウンロード時間の短縮
4.4｜jQueryセレクタの高速化
4.4.1｜jQueryセレクタを高速化する方法
4.4.2｜jQueryオブジェクトをキャッシュする
4.4.3｜メソッドチェーンを活用する
4.4.4｜id属性を活用する
4.4.5｜classセレクタに要素名を付ける
4.4.6｜シンプルなセレクタになるように心がける
4.4.7｜:firstではなく:first-childを利用する
4.4.8｜findメソッドを活用する
4.4.9｜Traversingメソッドを活用する

■5［デバッグ］
5.1｜デバッグの意義
5.1.1｜デバッガを利用したデバッグ
5.1.2｜各ブラウザで使用できるデバッガ
5.1.3｜デバッガの基本的な使い方
5.1.4｜プログラムからデバッガを利用する
5.2｜Firebugを利用したデバッグ
5.2.1｜Ajaxデバッグ
5.2.2｜JSONPの確認
5.2.3｜パフォーマンスの測定
5.2.4｜条件を指定してブレークポイントを設定
5.2.5｜イベントの監視
5.3｜Web Inspectorでデバッグ
5.4｜Web Workersでのデバッグ手法
5.4.1｜エラーのデバッグコンソールへの出力
5.4.2｜throwを使う方法
5.4.3｜postMessage()を使う方法
5.5｜Chromeのデバッグ
5.6｜JSLintでコードバリデーション
5.6.1｜グローバル変数
5.6.2｜セミコロン
5.6.3｜改行
5.6.4｜コンマ
5.6.5｜不要なブロック
5.6.6｜ブロックの利用
5.6.7｜式文
5.6.8｜for in文
5.6.9｜switch文
5.6.10｜var宣言
5.6.11｜with文
5.6.12｜代入演算子「=」
5.6.13｜比較演算子「==」と「!=」
5.6.14｜ラベル
5.6.15｜実行されないコード
5.6.16｜混乱する「+」と「-」
5.6.17｜「++」と「--」
5.6.18｜ビット演算子
5.6.19｜evalは“邪悪”である（eval is evil）
5.6.20｜void
5.6.21｜正規表現
5.6.22｜コンストラクタとnew
5.6.23｜安全でない文字
5.6.24｜HTML
5.6.25｜CSS
5.6.26｜JSLintを利用する際の注意点
5.7｜Aptana Studio
5.8｜Adobe Dreamweaverでデザイナーと連携する

■6［最適化］
6.1｜特定環境への最適化の意義
6.2｜Adobe AIRでの業務アプリ
6.2.1｜Adobe AIRのインストールと開発
6.3｜iPhone対応／iPad対応／Android対応
6.3.1｜開発環境の構築
6.3.2｜iPhoneシミュレータ
6.3.3｜Androidシミュレータ
6.3.4｜スマートフォン対応時の注意点
6.3.5｜スマートフォン向けのイベント実装
6.4｜jQuery Mobileによるスマートフォン対応
6.4.1｜jQuery Mobileの利用方法
6.5｜最新ブラウザで利用できる最新技術

■7［CSSの活用］
7.1｜アイコン、ロゴの作成
7.1.1｜border-radiusプロパティ
7.1.2｜gradient
7.1.3｜box-shadowプロパティ
7.1.4｜text-shadowプロパティ
7.1.5｜WebFont
7.2｜アニメーション機能
7.2.1｜transformプロパティ
7.2.2｜opacityプロパティ
7.2.3｜transitionプロパティ
7.3｜その他
7.3.1｜CSS3 generator
7.3.2｜CSS3 animation
7.3.3｜CSS3 3D

■付録1［JavaScriptの動作に関する注意点］
HTML5：ビデオ＆オーディオ
HTML5：Web Workers
HTML5：Geolocation&Web Strage
CSS3

■付録2［WebSocket サンプルコード］
node.jsおよびWebSocketライブラリのインストール