Shimを学ぶTweetこんにちは、@yoheiMuneです。今日は、モジュール開発をする上で便利なRequireJSで、良く利用するオプション(Config)をブログに書きたいと思います。RequireJSとはrequire.jsとは、JavaScriptでモジュール分割した開発を簡単に行うことをサポートしてくれるフレームワークです。MVCなどの機能分割したファイルを、各ページ必要に応じて読み込むような実装を簡単に行うことができます。require.jsに関する記事もありますので、ご参考になれば幸いです。JavaScriptをモジュール分割して開発できるRequireJSに入門RequireJSをより便利に利用するオプションrequireJSはそれ自体でも大変便利な代物ですが、オプションを指定することでより便利に使うことができます。以下のように、オプションを設定できます。requireメソッドを呼ぶ前に、require.configメソッドでオプションを指定する。requireメソッドで文kつされたモジュールを読み込みます。);</script>requireメソッドを呼ぶ前に、require.config関数を使ってオプションをオブジェクト形式で指定できます。オプションは様々ありますが、今回はその中で良く利用する、「baseUrl」と「shim」と「paths」をブログに書きたいと思います。今回する紹介する内容の出元は、以下の記事です。詳細な情報は、以下リンクをご参照ください。#ConfigBaseUrlオプションBaseUrlを指定することで、requireメソッドやdefineメソッドでJSモジュールを読み込む際の、ベースパスを指定することが可能です。#Configでは、以下のように説明されています。baseUrl.勝手に意訳すると以下のようになりますでしょうか。BaseUrlは、すべてのモジュールを探すためのベースのパスとなります。上記例の"my/module"を探す場合、"/another/path/my/module.js"を探します。BaseUrlは、プレーンな.jsファイルをロードする際には適用されません。上記例のa.jsとb.jsは、HTMLページと同じディレクトリから探されます。BaseUrlが指定されていない場合は、HTMLページのロケーションがBaseUrlとして使われます。data-main属性が付与されている場合は、data-main属性に指定されたパスがBaseUrlに利用されます。JSを配置しているディレクトリをbaseUrlとして指定すると便利そうです。Pathsオプション続いて、pathsオプションです。これはモジュール指定のパスの解釈を保管する機能です。保守性があがりそうなオプションです。#Configでは、以下のように説明されています。path.またまた勝手に意訳すると、以下の感じでしょうか。パスマッピングは、baseUrl以下で直接見つけられないモジュールの名前解決を行います。pathsは、"/"やプロトコル(http://など)から始まらないパスの場合、baseUrlからの相対パスとして解釈されます。上記例では、"some/module"を読み込む際に、"/another/path/some/v1.0/module.js"として読み込みます。pathに指定するパスには、拡張子(.js)を付与するべきではありません。拡張子は、名前解決の際に自動的に付与されます。これは初期リリースとかでは使わないかも知れませんが、半年とか何年とか保守している際に、機能のバージョンアップとかの管理で使うと便利そうだなぁと思いました。ここの設定を変えればプロジェクト全体で使うJSファイルを切り替えられるのは魅力的。Shimオプション最後にShimオプションです。これはよく使う機能で、requireJSと関係ないモジュールの依存関係を定義することができます。backbone.jsを使いたい場合にjQueryとunderscore.jsを先に読み込む場合、backbone.jsとjQueryとunderscore.jsの依存関係をShimオプションで定義します。2.1.0以上のバージョンが必要です。#Configでは、以下のように説明されています。value.具体的な使い方は、以下の感じです。backboneの順に読み込んでくれて、JSエラーが発生しないようになります。簡単に、以下のように指定することもできるようです。}});上記の実装は、jquery.colorizeモジュールは、jqueryモジュールに依存することを指定しています。backboneやそれから派生するライブラリ)を使いたい場合には、使うと便利なオプションです。requireJSで本格的に開発するなら、おおよそ使うオプションかもしれません。その他のオプション上記以外にも以下のオプションがRequireJSに存在します。urlArgsなどurlArgsは、開発初期でサーバーのキャッシュ設定がない場合に、キャッシュバスターとしてタイムスタンプを付与するなどの使い方が便利です。#Configからご確認ください。最後にrequireJSは自分の周りでもよく使われている便利なライブラリ。今後もお世話になることが多いかなぁと思います。今後ともより便利に利用できるように画策して、ブログにも記事を書いていきたいと思います。最後までご覧頂きましてありがとうございました。UIWebViewでHTML,CSS,JSなどをキャッシュさせない方法もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。