CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編（2）

CoffeeScriptによるモダンなWebアプリケーション開発 第8回

外部JavaScriptの文字コード

　外部JavaScriptの文字コードは可能な限りUTF-8に統一しましょう。HTMLの文字コードがシフトJISであっても、UTF-8の外部JavaScriptを問題なく読み込むことができます。外部JavaScriptの中に\uXXXX形式（注2）にエスケープされていない日本語が含まれていると文字化けする可能性があります。そのような場合に文字化けを防ぐには、HTMLの<script>で読み込む際にcharset属性を指定するか、あるいは外部JavaScriptのサーバレスポンスのContent-Typeヘッダにcharsetを含めることで文字コードをブラウザに伝えるようにします。可能なら両方とも行なっておきましょう。

　<script>で読み込む際にcharset属性を指定するには次のように記述します。

<script charset="utf-8" src="script.js"></script>

　一方、サーバ側でContent-Typeを指定する際は、JavaScriptファイルに対して次のようなレスポンスヘッダを追加します。

Content-Type: application/javascript; charset=utf-8

　ファイルの中身がJSONの場合はapplication/javascriptの代わりにapplication/jsonを指定します。

Content-Type: application/json; charset=utf-8

　サーバでContent-Typeヘッダを設定するには様々な方法がありますが、Apache 2.xの.htaccessで拡張子jsに対してContent-Typeを設定するには次のように記述します。

AddType 'application/javascript; charset=utf-8' js

注2：\uXXXX形式

　ソースファイルの文字コードに関係なく任意のUnicode文字を埋め込むための記述方法。次のURLのツールを使うと手動で確認できる。http://0xcc.net/jsescape/

複数のファイルに分ける

　プログラムが大規模になるにつれ、1つのファイルに延々とプログラムを書き連ねるよりも、機能ごとにファイルを分けるなど適切な単位でソースファイルを分割した方が見通しがよくなります。Node.jsではrequire()によって他のモジュールを動的にロードできますが、ブラウザにはrequire()の仕組みはありません。

　ブラウザでもrequire()のようなモジュールのロード方式を使えるようにしようという試みがあり、その一つがRequireJSというライブラリです。RequireJSではAMD（Asynchronous Module Definition）という非同期にモジュールをロードするための定義方式を採用していますが、これは現時点ではあまり良い選択肢ではありません。その理由は、他の多くのライブラリがAMDに対応しておらず（注3）、モジュールを作る時にはすべてのソースコードにdefine()を追加しなければならないなど、AMDに対応させるためのコストが大きいわりに得られる効果はそう大きくはないからです。

　また、RequireJSではrequire()が呼ばれる度にサーバにファイルをリクエストするため、モジュールの数が増えれば増えるほど通信が多くなりロード時間が長くなります。これに対処するためRequireJSにはオプティマイザが用意されており、複数のファイルを結合して1つのファイルにまとめることができます。しかしこのビルド処理が必要となる以上、従来通り単純にJavaScriptファイルを結合するのと手間はあまり変わりません。

注3

　Underscore.jsは、バージョン1.2.1でAMDに対応したものの、バージョン1.3.0からAMD対応を外した。AMDに対応したことによる副作用が大きかったのが理由とされている。

　次回も引き続き、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を紹介します。