14:00最近話題の新言語『CoffeeScript』をとりあげた連載「CoffeeScriptによるモダンなWebアプリケーション開発」。今回からはベストプラクティス編として、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を4回に分けて紹介します。CoffeeScriptの歴史や概要については過去の連載も参照ください。目次Page1AjaxコンテンツのルーティングSammy.jsの使い方AjaxコンテンツをGoogleの検索結果に出すPage2ブラウザの履歴を操作するPage3DOMの準備完了を待つJavaScriptとCSSの最適な読み込み順序スクリプトローダーで高速に読み込むPage4パフォーマンス向上のためのテクニックリクエスト数を減らすJavaScriptやCSSを外部ファイル化するCSSスプライトパーツのロードを遅らせる画像のサイズを削減するPage5外部JavaScriptの文字コード複数のファイルに分けるAjaxコンテンツのルーティングページ遷移を行わずにAjaxでコンテンツを部分的に読み込んでどんどん表示していくタイプのページでは、ブラウザをリロードすると、それまでユーザーに表示されていた内容がすべて振り出しに戻ってしまうことがあります。リロードしても適切なコンテンツに戻ってくるようにするには、URLの#(ハッシュ)以降の文字列を変えておき、リロードした時にその値を読んで適切なコンテンツを表示するという手法があります。この手法はIE6などの古いブラウザでも問題なく使えます。TwitterのWebサイトもこの方式を利用しており、https://twitter.com/#!/iizukanaoといったURLにアクセスした場合、最初に共通部分だけを読み込み、その後で#以降に該当するコンテンツを部分的に読み込んでいます。ページ内のリンクのほとんどはURLの#以降の変更のみで行い、ページ遷移を挟まずに必要最小限のコンテンツを取得して表示しています。このようにすると毎回コンテンツ全体を読み込むのに比べてサーバやネットワークの負荷を軽減でき、またコンテンツの表示切り替えも素早くなります。Sammy.js(MITライセンス)というライブラリを使うと、このような#を使ったコンテンツの制御が簡単にできます。Sammy.jsの使い方Sammy.jsのWebサイトから最新のライブラリをダウンロードします。Sammy.jsはjQueryに依存しているため、先にjQueryを読み込んでからSammy.jsを読み込むようにします。</body>の直前に<script>要素を置いてこれら2つのライブラリを読み込み、その後に自分のjsファイルを読み込むようにします。src="js/main.js"></script></body></html>そしてリスト2のようにURLと、そのURLが呼び出された時に実行する関数をセットで定義します。このセット1つ1つをルート(route)と呼び、URLに応じて適切なルートに振り分けることをルーティング(routing)と呼びます。ルートに#から始まる文字列を指定すると、URLの#以降に対してマッチします。'#!/'.run()AjaxコンテンツをGoogleの検索結果に出すAjaxのアプリケーションは基本的にGoogleなどの検索エンジンには登録されません。現在Googleのクローラー(注1)は一部のJavaScriptを実行してコンテンツを収集していますが、すべてのJavaScriptを完全に実行することは難しいためです。一定の決まりに従ってサイトを作ることでGoogleのクローラーにAjaxコンテンツを収集させることができる仕組みが用意されています。標準化された仕組みではなくGoogleに限定された仕組みではありますが、AjaxコンテンツをGoogleの検索結果に出すためにはこの決まりに従う必要があります。具体的には以下の手順で対応できます。注1:クローラーWebをくまなく巡回してあらゆるコンテンツを収集するプログラム。有名なものはGooglebot(グーグルボット)と呼ばれるGoogleのクローラーで、Googlebotが収集したデータは検索用のインデックスが作成されてGoogleの検索結果に登場するようになる。#の代わりに#!を使うリンク先のURLに#!が含まれていると、Googleはそのコンテンツがクロール可能なAjaxであると見なし、決められた手順でコンテンツの収集を試みます。#!はhashbang(ハッシュバング)などと呼ばれています。代替URLでコンテンツを提供するURLの#!を?_escaped_fragment_=に置き換えたURLに対してGoogleがリクエストを送ってくるので、該当するページ全体のHTMLを返すようにします。URL置換前http://www.example.com/ajax.html#!key=valueURL置換後http://www.example.com/ajax.html?_escaped_fragment_=key=valueサーバ側ではこの_escaped_fragment_を含むURLのリクエストに対して、変換前のURLであるhttp://www.example.com/ajax.html#!key=valueを訪れた時にユーザーが見るHTML全体と同じコンテンツをレスポンスとして返すようにします。するとGoogleはそれが変換前のURLに該当するコンテンツであるとして収集します。収集されたコンテンツはやがて検索結果に出てくるようになります。Googleによる日本語の解説もありますので、より詳しい情報はそちらを参照してください。ナオ)1984年東京都生まれ。高校時代に趣味でPerlやJavaを使ってプログラミングを始める。ニュースサイトの開発などを担当。その後、面白法人カヤックにてソーシャルゲームの開発などを手がける。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。