eye-catch-150111
前振り

昨年まで非同期ローダーは、yepnope.jsを利用していました。しかしながら諸事情により、JSの非同期・遅延/モジュールローダーとして立場を確立しつつあるrequire.jsへ変更しました。スムーズな導入ができるように入り口として使いたいだろうなぁと思うポイントに絞ってメモを残しておきたいと思います。

初めてrequire.jsを利用する方へ諸情報を。

まず、require.jsの印象をあげるとしたら

  • javascriptの非同期・遅延ローダーで有名。
  • モジュールのローダーでもあるので、管理が楽。
  • commonJSという標準仕様でその先に夢の世界が。

そんなところでしょうか。初めの頃は、王道だから安心(ドキュメントがいっぱいある)な非同期ローダーと思えばズレはないのではないでしょうか。

そして、require.jsは幅広い環境下で動く。

IE6でも動作可能なので、IE8以降の対応が多い日本のサイトでは大概動作可能というすぐれものです。とても便利なJSローダーなのですが、プログラマーを中心とした説明が多く、小規模なサイト制作を中心とした方向けの日本語ドキュメントが少ないです。
なので、require.jsを小〜中規模サイトをメインで行なう方には少々ラーニングコストが高くなっています。(そんな気がするだけかもしれませんが。)

ということで、コノドキュメントヨメダイジョウブダヨということです。

大まかには下記のページ構成で説明。

  1. とにかく動かしてみよう。(←今回はここ)
  2. HTMLが<script>タグだらけに・・・require.jsでまとめたい。
  3. jQueryのプラグインを、require.jsで動かしたい。
  4. bodyのクラス名で呼び出すプラグインを変えたい。

早速ですが、とにかく動かしてみようと思います。

今回は、require.jsを利用してアラートを表示する「alert.js」を呼び出してみることにします。分かりやすいようにサンプル1 – Amitenをご用意しました。

かなりシンプルなので下手な説明を見るよりサンプルのソースをご覧いただいたほうが早いかもしれません。汗

1.require.jsをダウンロードして任意の場所に格納

require.jsファイルをこちらからダウンロードします。requireJSのダウンロードページ内のrequire.js 2.1.15「with comments」ボタンを押すとデーターがダウンロードされます。ダウンロードしたrequire.jsファイルを任意の場所に格納してください。

サンプルでは「js」フォルダーを作って格納しています。

2.htmlのどっかにrequire.jsを呼び出す記述をする。

どっかといいましたかが、挿入箇所は基本2択です。headタグないので呼び出すか、/bodyタグ直前で呼び出す事になるかと思います。サンプルでは分かりやすいようにheadタグに入れていますが、最近は、/bodyタグの直前で呼び出す記述が多いかと思います。
下記を自身で作られたディレクトリ構成にしたがって書き換えた上でコピペしてください。

3.alert.jsをrequire.jsを利用して呼び出す。

require.jsのを利用して、アラートが出るスクリプトが書かれたalert.jsを呼び出します。今回は、アラートが出るだけのシンプルなファイルですが、本来はjqueryのプラグインや、各実行スクリプトがまとめられたファイルを呼び出します。

注意点は、ファイルを呼び出すときは、拡張子[.js]を消すこと

こんだけ!複数呼び出したいときはいくつかやり方がりますがrequire(["js/jsファイル名"]);を繰り返しかけばいいでしょう。
しかし残念ながら、これだけでは非同期ローダー/モジュールローダーとしての役割の欠片も使えてません。

次回の、HTMLが<script>タグだらけに・・・require.jsでまとめたい。で、require(["js/jsファイル名"]);の記述を纏めてひとつのファイルにしてしまう方法をお伝えいたします。


2015/2/10更新 – 文章が読みづらかったのでリライトしました…が、まだ読みづらい気がするなぁ。

page
1 / 1