脱・コピペプログラマー〜Google Analytics 編〜

脱・コピペプログラマー～ Google Analytics 編～

コピペプログラマーとは？ • ググる → 見つけたコードをコピペ → OK. 動いた！ Google検索から望みのコードを発掘して、コピペでソースファイルを埋め尽くすこと（通称、スクラップブックコーディング
- 筆者命名）によって様々な難易度の高い処理を実現することができる。張り付けているソースを100%理解した上で使用している人はコピペプログラマとは呼ばない。なんとなく張り付けてなんとなく動いたというやっつけ仕事をする人を指す。出典）プログラマのクラスチェンジ表（草稿） http://blog.mwsoft.jp/article/29852520.html

ネットに落ちてるコードを理解してますか？ qsort [] = [] qsort (p:xs) = qsort lt
++ [p] ++ qsort gteq where lt = [x | x <- xs, x < p] gteq = [x | x <- xs, x >= p] このコードはなに？クイックにソートしてくれる奴です。速いっぽいッス。

Google Analytics は誰の担当？ KPI を見える化したいなー経営者 GA 入れてーマーケター
アッチとコッチ（現場）の境界線もっと先進的なUIにデザイナー表と裏（黒い画面の向こう）の境界線エンジニア優先順位がわかんない。。プロデューサー新機能追加！

JavaScript は誰が書く？？ビジネス検討要件定義デザイン HTML/CSS システム開発テスト経営者
プロデューサーデザイナーエンジニア JavaScript JavaScript 何となく浮き球になるフロントエンド技術 ※エンジニアはもちろん、デザイナーも理解しておいたほうが良い分野 Backbone, Angular とかメリデメ考えずに入れるとサービス品質や開発効率を下げるので注意

})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> 本題、Let’s コードリーディング

スクリプトの読み込み処理 <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;
m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> <script src="//www.google-analytics.com/analytics.js"></script> って書いたらダメなの？

スクリプト実行中のダウンロードブロック • src 属性で読み込むと実行完了までブロックされる JavaScript のあとに読み込み待ちのファイル（画像や別のスクリプトファイル）が出来てしまう ※近頃のモダンなブラウザーは賢いので、src 属性指定のべた書きであっても、実は良い感じに並列化したり実行順序を考慮してくれたりします。
※async 属性が仕様上には存在するけど、非同期になるかはブラウザの実装次第みたいです。

DOM Injection による非同期ロード • script タグを動的に document に挿入する手法 • 画像などの外部ファイルを並列ダウンロードできる
• Google 先生曰く出典）Google Analytics launches asynchronous tracking http://analytics.blogspot.jp/2009/12/google-analytics-launches-asynchronous.html ブラウザの実行順序改善によるレンダリング高速化データの収集・精度の向上 JavaScript のロード完了前の依存性によるエラーの除去

細かい話はさて置き、とりあえず速くなる！ 1章 Ajaxアプリケーションとパフォーマンス 2章応答性の高いウェブアプリケーション 3章初期ロードの分割 4章実行をブロックしないスクリプトのロード 5章非同期のスクリプトの組み合わせ 6章インラインスクリプトの適切な位置 7章効率的な JavaScriptコード
8章 Comet 9章 gzip圧縮再考 10章画像の最適化 11章主ドメインの細分化 12章ドキュメントのフラッシュ 13章 iframeの取り扱い 14章 CSSセレクタの単純化 1章ルール1：HTTPリクエストを減らす 2章ルール2：CDNを使う 3章ルール3：Expiresヘッダを設定する 4章ルール4：コンポーネントをgzipする 5章ルール5：スタイルシートは先頭に置く 6章ルール6：スクリプトは最後に置く 7章ルール7：CSS expressionの使用を控える 8章ルール8：JavaScriptとCSSは外部ファイル化する 9章ルール9：DNSルックアップを減らす 10章ルール10：JavaScriptを縮小化する 11章ルール11：リダイレクトを避ける 12章ルール12：スクリプトを重複させない 13章ルール13：ETagの設定を変更する 14章ルール14：Ajaxをキャッシュ可能にする 15章米国トップ10サイトの分析フロントエンド（HTML/CSS/JavaScript）で Web は速くなる

ベタ書き（同期） DOM Injection（非同期）

})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> 非同期にすると発生するアレ読み込みが遅れたら、どうするの？そもそも、読み込みエラーしたら・・・。どうなるの？

})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // スクリプトが読み込まれるのを待つ処理が必要？？ while (true) { if (ga) { ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); break; } } </script> ベタベタな同期処理

})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> カッコいい同期処理実は、同期処理がすでに考慮済み。

読み込み完了前の ga 関数

まとめ • JavaScript ロード中は、他のダウンロードがブロック – モダンブラウザは賢いので、うまく並列化されることも • 同期処理には、引数のキューを利用すると良さげ – Google
Analytics の ga.q の様に、配列に push しておく • 何気ないコードの中に使えるテクニックがあるよ – 何となくコピペしてしまったコードを読んでみよう

脱・コピペプログラマー〜Google Analytics 編〜

脱・コピペプログラマー〜Google Analytics 編〜

Ryo Yoneyama

More Decks by Ryo Yoneyama

Other Decks in Technology

Featured

Transcript