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

» 2013年11月26日 18時00分公開

[中村修太，クラスメソッド株式会社]

前のページへ 1|2 　　　　　　

「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を聴きながらプログラミングするのが大好きです。

スケーラブルで関数型でオブジェクト指向なScala入門
Scalaの特徴を紹介し、基本構文や関数、クラスなど、Scalaの基本的な機能について解説する入門連載
Javaの常識を変えるPlay framework入門
サーブレット／JSPを基にする重厚長大なJavaのWeb開発のイメージを変える軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載

前のページへ 1|2 　　　　　　

SpecialPR