連載

2013年11月26日

Play2（＋JavaScript）アプリを高速化、最適化する4つのテクニック：Scala＋Play 2.0でWebアプリ開発入門（10）（2/2 ページ）

2.0からScalaに対応したWebアプリ開発の人気軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載。今回は、EHCacheを使うキャッシュ機構、非同期HTTP通信、Google Closure Compilerを使うJavaScriptの最適化、RequireJSを使うJavaScript依存関係の解決方法について解説します。

[中村修太，クラスメソッド株式会社] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

「Google Closure Compiler」でJavaScriptの最適化

　Play2では、Google Closure Compilerを使用してJavaScriptの最適化（minify）を行えます。

「Google Closure Compiler」とは

　「Google Closure Compiler」とは、JavaScriptの取得／実行を高速化するためのツールで、JavaScriptをより効率の良いJavaScriptへコンパイルします。

Play2におけるGoogle Closure Compilerの使い方

　Play2のapp/assetsのディレクトリ以下にあるjsファイルはGoogle Closure Compilerによってパースされ、最適化されます。簡単なjsファイルを用意し、動作を見てみましょう。

　まずは、conf/routesに今回使用するサンプル用コントローラを登録します。

GET     /jsSample         controllers.JsController.index()

　controllersパッケージにJsController.scalaファイルを作成し、下記のように記述します。これは、後述するjs.scala.htmlテンプレートに渡すだけです。

package controllers
import play.api._
import play.api.mvc._
object JsController extends Controller {
  def index = Action {
    Ok(views.html.js())
  }
}

　app/assets/javascriptsにjsSample.jsファイルを作成します。テンプレートから使用されるjsファイルです。

function(){
  function hello() {
    alert("hello");
  }
  hello();
}();

　最後に、viewsディレクトリにjs.scala.htmlを作成します。ここでは、routes.Assetsを使用し、「jsSample.min.js」を指定していることを確認してください。

@main("javascript sample") {
    
  <h1>JavaScript Sample</h1>
  <script src="@routes.Assets.at("javascripts/jsSample.min.js")"></script>
}

最適化された結果を実行

　これでサンプルの準備は完了です。Playコンソールからアプリを起動し、「http://localhost:9000/jsSample」にアクセスしてみてください。jsファイルに記述した通り、アラートが表示されます。

　また、直接「http://localhost:9000/assets/javascripts/jsSample.min.js」にアクセスしてみると、最適化された結果のjsファイルを見ることができます。

「RequireJS」でJavaScriptの依存関係を解決

　Play2では、RequireJSを使用してJavaScriptを管理できます。

RequireJSとは

　「RequireJS」とは、クライアントサイドでのJavaScriptの依存性解決をしてくれるライブラリで、単一のjsファイルとして提供されています。

RequireJS

　クライアントサイドでの使用に最適化されていますが、requirejsモジュールをインストールすればnode.js環境でも使用可能です。RequireJSを使用することで、コードの処理速度および品質の向上に役立ちます。

　例えば、下記のようにjsファイルで記述すれば、common-aとcommon-bに依存した、common-cに定義された関数を使用できます。

require(
  [
    'lib/common-a'
    ,'lib/common-b'
  ],
  function(){
    /* 
     * lib/common-a.js,lib/common-b.jsが読み込まれていることが保証されている
     */
    require(
    [
      'lib/common-c' // lib/common-a.js,lib/common-b.jsに依存しているライブラリ
    ],
    function(commonC){
      /*
       * lib/common-a.js,lib/common-b.js,lib/common-c.jsが
       * 読み込まれていることが保証されている
       */
      commonC.somethingFunc();//common-c.jsに定義されている関数を使用
    });
  }
);

　Play2では、RequireJsはデフォルトで有効なので、public/javascriptsディレクトリにjsファイルを配置すれば、すぐに使用できます。

Play2におけるRequireJSの使い方

　先ほどのjsSample.jsを少し修正してRequireJSを使用する形にしてみましょう。

　まずは、「assets/javascripts/libs」にsampleHelper.jsを作成します。これは、メインモジュールから呼ばれるライブラリ用ファイルになります。

define(function() {
    return {
      hello: function() {
        alert("hello");
      }
    }
});

　define関数を使用し、先ほどのサンプルでも使ったhello関数を定義します。次にjsのエントリポイントととなるassets/javascriptsにjsSample.jsを作成しましょう。

　require関数で先ほど定義したsampleHelperモジュールをロードします。第2引数のコールバックではsampleHelperで定義された関数を使用できます。

require(["libs/sampleHelper"],function(lib) {
  lib.hello();
});

　なお、Play2でRequireJSを使用するに当たって、RequireJSで指定するモジュールのパスは、app/assets/javascriptsからの相対パスである必要があります。

jsファイルを作成したら、最後にapp/views/js.scala.htmlを修正します。

ヘルパー関数を使用し、require.jsとjsSample.jsをロードします。

@main("javascript sample") {
    
    <h1>JavaScript Sample</h1>
    @helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, 
      module = routes.Assets.at("javascripts/jsSample.js").url)
}

RequireJSを使った結果を実行して確認

　ここまでソースの修正ができたら、「http://localhost:9000/jsSample」にアクセスしてみてください。先ほどと同じようにアラートが表示されます。エントリポイントのjsからライブラリ用モジュールがロードされて使用されているのが分かりますね。

詳細は公式ドキュメントで

　なお、これらの公式ドキュメントは下記にあります。併せて、ご確認ください。

ある程度の規模のアプリならば、効果は大きい

　さて、今回はPlay2の持つ便利な、キャッシュや非同期通信、JavaScriptに関する「Google Closure Compiler」「ReuireJS」連携機能を紹介しました。ある程度の規模のアプリならば、効果が大きいと思いますので、採用を検討してみてください。

　クライアントサイドにもいろいろと便利な機能が用意されていますね。次回もPlay2の持ついろいろな機能を紹介する予定です。

「Scala＋Play 2.0でWebアプリ開発入門」バックナンバー

著者プロフィール

中村修太（なかむらしゅうた）

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。