MdNCORPORATION

JavaScriptコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために

JavaScriptコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために

小松健作、高橋登史朗、西畑一馬、古籏一浩 共著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2011-02-21
仕様 B5変型判/240pP
ISBN 978-4-8443-6179-4
2004年のAjaxの登場以降、Webサービスの提供に欠くことのできなくなったJavaScript。サービスの成否を分けるのがレスポンスのスピードとそれらの開発効率です。本書は、HTML/JavaScriptの高速化と開発効率双方のベストプラクティスを、技術に精通した執筆陣が徹底的に検証・解説。クロスブラウザやデバッグ、スマートフォン、HTML5、CSS3など最新の話題にも言及した、JavaScript上級者に贈る現場のテクニック集の決定版です!


■ページ見本






目次

【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ライブラリのインストール

ダウンロードデータ

JavaScriptコーディング ベストプラクティス
サンプルデータダウンロード


このたびは、「JavaScriptコーディング ベストプラクティス」をご購入いただきまして、誠にありがとうございます。


●以下に本書に掲載したJavaScriptなどのサンプルデータを用意しましたのでご利用ください。

samplecode.zip(1.1MB)


●また本書の中で筆者が用意したベンチマークや動作などの検証サイトへのリンクも用意しました。以下のリンクからご利用ください。

◆第4章 P.075「高速化のためのベンチマークコレクション」(高橋登史朗氏提供)
https://jsgt.org/mdn/2010/table.php?hoge=hogeratta

◆第4章 P.114「圧縮の有無による速度の比較」(小松健作氏提供、以下同)
https://komasshu.com/mdn/samples/deflate/test.html

・同 P.118「jQuery UIのライブラリを全て個別のファイルでダウンロードした場合のロード時間」
https://komasshu.com/mdnhayashi/samples/lotsofjss/index.html

・同 P.118「jQuery UIのライブラリをミニマイズされた1個のファイルでダウンロードした場合のロード時間」
https://komasshu.com/mdn/samples/lotsofjss.min/index.html

・同 P.122「CSSスプライトのサンプルサイト」
https://komasshu.com/mdn/samples/css_splite/test-s.html

・同 P.124「CSSスプライトのサンプルサイト」
https://komasshu.com/mdn/samples/css_splite/test.html

・同 P.127「Ajaxでのキャッシュ活用のサンプルページ」
https://komasshu.com/mdn/samples/xhrexpires/test.html

・同 P.128「PHPでキャッシュをオフにした場合のサンプルサイト」
https://komasshu.com/mdn/samples/xhrexpires/test_noexp.html

・同 P.128「jQueryでキャッシュをオフにした場合のサンプルサイト」
https://komasshu.com/samples/xhrexpires/test_nocache.html

・同 P.131「キャッシュマニフェストを用いない場合のHTMLサンプル」
https://komasshu.com/mdn/samples/css_splite_wo_ac/test.html

・同 P.131「キャッシュマニフェストを用いた場合のHTMLサンプル」
https://komasshu.com/mdn/samples/css_splite_with_ac/test.html

・同 P.134「Server-Sent Eventsのサンプルサイト」
https://komasshu.com/mdn/samples/serversentevent/test.html

・同 P.135「WebSocketを使ったWebアプリケーションの高速化のサンプルサイト
https://komasshu.com/mdn/samples/wsgesture/test.html

・同 P.139「WebSocketでダウンロードするサンプルコード」
https://komasshu.com/mdn/samples/wspipeline/test-ws.html

・同 P.139「HTTPを用いた場合のサンプルコード」
https://komasshu.com/mdn/samples/wspipeline/test-http.html

◆第7章 P.205「border-radius」(小松健作氏提供、以下同)
https://komasshu.com/mdn/css3/samples/0.icon_logo/border-radius.html

・同 P.207「四隅の径を個別に設定したborder-radius」
https://komasshu.com/mdn/css3/samples/0.icon_logo/border-radius2.html

・同 P.209「CSS3 box-shadow」
https://komasshu.com/mdn/css3/samples/0.icon_logo/box-shadow.html

・同 P.210「CSS3 text-shadow」
https://komasshu.com/mdn/css3/samples/0.icon_logo/text-shadow.html

・同 P.214「CSS3のアニメーション機能を利用したサンプルサイト」
https://komasshu.com/mdn/css3/samples/1.animation/anim_webkit.html

・同 P.215~223「transform/opacity/transition/CSS3 animation/CSS3 3Dの各サンプル」
https://komasshu.com/mdn/css3/samples/1.animation/sample.html

上記以外の本書に掲載されているWebサイトの閲覧については、大変お手数ですが、本書記載のURLをご自身で入力のうえご利用ください。



【ダウンロード・サイト閲覧にあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

ダウンロードファイルを解凍すると、サンプルデータ(テキストデータ)がCHAPTERごとにノンブル(ページ数)の名前で収録されています(1ページに複数掲載の場合は、上から順に並んでいます)。Windows、Macそれぞれのテキストエディタを使ってご利用ください。

サンプルデータには「readme.txt」が同梱されていますので、ご使用の前に必ずお読みください。

※当サイトからダウンロードできるサンプルデータおよびリンクされたWebサイトを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただし「jQuery」等の一般に公開されているJavaScriptライブラリについては、各ライブラリのライセンス条件に従います。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトの著作権は、それぞれの制作者に帰属します。

※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工しているため、ダウンロードしたサンプルデータとは異なる場合があります。

※サンプルのなかには、Webサーバの機能を利用するなどの理由から、ローカル環境上では正常に動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

お詫びと訂正

『JavaScript コーディング ベストプラクティス』

お詫びと訂正のお知らせ



このたびは『JavaScript コーディング ベストプラクティス』をご購入いただきまして、誠にありがとうございました。

本書の100〜101ページ「4.2.18|スコープにおける処理の実行」の「パフォーマンス比較表」の内容に誤りがございました。
訂正した該当ページのPDFファイルを用意させていただきましたので、ご利用いただけますようお願い申し上げます。



訂正PDFのダウンロード(PDFファイル:512KB)
100-101.pdf

このたびはご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊