RequireJSの基本的な使い方

js

JavaScriptのモジュールを管理するフレームワークRequireJSの基本的な使い方を紹介していきます。

RequireJSはモジュール管理フレームワークとしてはメジャーなフレームワークです。使い方もシンプルなので個人的にはオススメなフレームワークです。

[スポンサーリンク]

RequireJSを使ったサンプルソース

コンソールログに金額を表示する関数を実装していきます。
メインのJavaScript関数から金額を計算するメソッドを呼び出す機能をRequireJSを使って実装していきます。

サンプルソースのフォルダ構成

今回作成するソースは、main.jsとservice.jsとutil.jsの3つです。
main.jsがメイン処理をしていて、あとのJavaScriptは金額を計算するメソッドを定義しておきます。

require.jsはダウンロードしておいてください。

html
 ├index.html
js
 ├ lib
 │ └ require.js
 │
 ├ original
 │ └ base
 │    └ lib
 │       ├ service.js
 │       └ util.js
 │
 └ main.js

HTML

HTMLはいたってシンプルです。
メインのjsファイルと、RequireJS本体だけを定義しておきます。
メインから呼び出されるファイルの定義は不要です。

<!DOCTYPE html>
<html>
  <head>
    <script data-main="../js/main.js" src="../js/lib/require.js"></script>
  </head>
  <body>
    <p>test</p>
  </body>
</html>

main.js

メインとなるJavaScriptです。
こちらはmain.jsとします。
このソースでservice.jsに定義されている消費税を計算するメソッドを呼び出します。
この関数ではservice.jsを使っているので、require部分へserviceを定義しておきます。

require.config({
  baseUrl: "../js/",
  paths: {
      "dir": "original/base/lib"
  }
});
require(['dir/service'], function(service) {
    var result = service.sumPrice(1000);
    console.log('金額は、 ' + result + '円です。');
});

require.configへ定義されているbaseUrlは、JavaScriptのベースパスを指定しておきます。
ベースパス配下のディレクトリから実際にJSのあるディレクトリまでのパスをpathsへ指定しておくと、「"original/base/lib"」という長いパス名が「dir」のように短縮することができます。

service.js

上記から呼び出されるservice.jsです。
こちらではさらにutil.jsを呼び出して金額を計算します。
util.jsを使っているので、defineでutilを注入しておきます。

define(['dir/util'], function(util) {
    return {
        sumPrice: function(a) {
            return util.multiplied(a, 1.08);
        }
    };
});

util.js

上記から呼び出されるutil.jsです。
こちらで実際に金額を計算します。
このメソッドでは、特に別ファイルを必要としていないのでdefineへは何も指定しなくてOKです。

define(function() {
    return {
      multiplied: function(a, b) {
            return a * b;
        }
    };
});

デモ

実際に動かすことが出来ます

さいごに

昨今のフロントエンドを取り巻く環境は、JavaScriptライブラリやフレームワークがたくさんでてきておりそれらを組み合わせて使うのが一般的な開発方法になってきています。

RequireJSのようなモジュール管理ライブラリは、フロントエンド開発においては必須になってくるのでしょうね。

それでは!