IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

JavaScriptで、配列を展開してメソッドに渡す方法

   

@nqounetです。

JavaScript(というか、ほぼjQuery)にも大分慣れてきた気がしてきた今日このごろですが、皆さまいかがお過ごしでしょうか?

配列は展開しなくても大丈夫だった

やりたいのは、Perlでいう、デリファレンスのようなことなのです。

ありとあらゆる知識を総動員して検索したのですが、こんなことはする必要がなかったようです。

結論としては、applyを使えばいいです。

applyを使うと、配列のままでも展開して渡したようにできるという、まるで魔法ですね。

引数のように見えるthisは特に意味は無いようで、ここはnullでも0でもなんでも良いです。

ここからは、何故こういうことをしようとしたのかをツラツラと書いていきます。

AJAX万歳

AJAXでAPIにアクセスしてデータを取得し、それに基づいてゴニョゴニョする、という処理は頻繁にあると思います。

こういった非同期な処理を書こうとすると、コールバックばかりになってしまいます。

コールバックというのは、読み込みが終わったあとの処理のことで、jQueryではAJAXのgetの処理にコールバックも一緒に渡してやると、getしてきたコンテンツを引数にして、コールバックを実行してくれます。

キャッシュ万歳

それとは別の話ですが、サーバーとの通信は時間がかかるので、AJAXの結果はキャッシュしておいて、必要なときはキャッシュから取得するように作ると思います。

しかも、読む方からはキャッシュがあるかどうかを気にせずに。

キャッシュがあった場合は、非同期ではないので、値を直接受け取ることができます。

なので、できればこういう感じで書きたいなと思うのです。

しかし、残念ながら、キャッシュがなかった場合にもこのような書き方で動作させる方法が全くわかりません。

そして、間に一つでも非同期の処理が入ると、続けての処理も普通に書くことができなくなります。

どこかでリセットしたいと思うわけです。

そこで、イベントオブジェクトを経由して、同期的な処理として書いてみることにしました。

イベントオブジェクト経由でも同じように実行する

先に書いたとおり、applyを使えば配列を展開する必要がありません。

こうするとhoge arguments:で出力される値は、initの中から呼び出したものと、eventHogeの中から呼び出したものとがおなじになります。

argumentsを使いたいからこそ、こんなにややこしいことになっているのですが、それをするだけの価値はあると思っています。

コールバック方式で書いた一つの例

イベントオブジェクト方式で書いたのが手元にないので、とりあえずコールバック方式のほうを晒しておきます。

AJAXでテンプレートファイルを取得して、それを使ってゴニョゴニョするスクリプトです。

renderの中がスッキリしない感じです。

jQuery以外に以下のライブラリを使っています。

  • pamelafox/lscache
    • ローカルストレージにキャッシュを作成してくれる便利なライブラリ
  • janl/mustache.js
    • オブジェクトを渡すだけで使えるテンプレートエンジン

動かしてみたい方はgithubにあげてありますのでお試しください。

respo

respo link

ZenBackWidget

 - 情報技術について , , ,