Vueの年

Vueを触り始めたのは2017年末だと記憶していますが、今年一年はほとんどVueでしか開発をしない、Vueの年であったと言えます。Happy Vue Yearってわけですね。HAHAHA

Vueは流行っているか

個人的なプロジェクトでは勿論の事、新規プロジェクトで自分で技術選択が出来ると知るや即Vueをねじ込むといった、ややもすればエゴとも言える姿勢で臨んでいると、別方向から大変ありがたいことにVueプロジェクトの話が降ってきたりしました。

これがシンクロニシティと言われる物なのか、それとも単純にVueが流行っているという事なのかはわかりかねますが、おかげさまではじめは拙かったVueの扱いも手に馴染んで参りました。（一方で相変わらずReactは苦手意識があります。）この導入のし易さがVueの魅力のひとつでありましょう。

Vueの何が良い？

Vueと言えばまずは学習コストの低さがよく挙げられますが、低いと言っても、Vueの書き方やデータバインディングの仕組みや癖など、学ばなければならない事は決して少なくはありません。恐らく競合であり先輩であるReactと比較した上で、そのように評価されているのだと思っています。

それ以上に個人的に推したい点は、コンポーネントデザインという時流に非常にマッチしているという事です。Vueには「単一ファイルコンポーネント」という仕組みがあり、コンポーネントを構成するHTML・JavaScript・CSSを単一のファイルに、コンポーネント毎に書いていけます。

単一ファイルコンポーネントの例 :

（公式のサンプルコードをちょっといじっただけの物です。）

コンポーネントの構成要素が1ファイルでカプセル化される事で管理が容易になると同時に、プロジェクトのディレクトリ構成に頭を悩ませる時間を大きく削ってくれることでしょう。また、ファイルの構成がHTMLの構成にほぼほぼ則っているので、初学者にとっても取っつきやすいのではないでしょうか。

ちょっと脇道にそれますが、「単一ファイルコンポーネント」は “Single File Component” 略して “SFC” と呼ばれる事があります。しかしながら、わたしの年代ではSFCといえばスーパーファミコンですし、わたしの地元ではSFCといえば慶応大学湘南藤沢キャンパスですので、この略称には些か抵抗を感じざるをえません。（極めて個人的な感想です）

SVG+Vue+TypeScript に感じるノスタルジー

もう少しVueの話です。今年の前半にVueでグラフを描画する案件に携わり、描画部分でSVGを使ったのですが、そこでちょっとしたノスタルジーを感じました。また、同じく後半にVueをTypeScriptで書くプロジェクトがあったのですが、そこでも同じ種の感覚が彷彿とされました。

それは、ActionScript3のMovieClipです。以前の記事（時間を計測する装置について考えてみる） でも軽く取り上げた話ですが、SVGベースのコンポーネントはMovieClipクラスで部品を作る感覚と非常に類似しています。そこでさらにTypeScriptで const val: SomeClass = new SomeClass() の様な型指定をしはじめると、それはもう完全にソレです。

懐かしさを感じると同時に、インラインSVGベースのコンポーネントに表現の可能性を感じたので、今後積極的に使っていきたいという気持ちになりました。勿論、セマンティックの許す範囲内で。

メンターの年

今年の中盤から12月までにかけて、在る方の技術的なメンターを務めさせていただく機会がありました。松風のサイト で掲載されている様に、以前から個人として教育事業に興味があり、それが小さいながらも実を結んだ形となりました。

Web制作講座としてではなく、明確な目標を達成する為のアドバイスを中心とする、いわゆる「メンター」であったため、カリキュラムなどはなく、都度必要に応じて資料を作成して説明などをしつつ、なんとか年内に目標を達成する事ができました。

生徒さんが抱く疑問点にレスポンシブに対応する事に難しさを覚えつつ、初学者がどこで躓くのかという経験が得られた事、どのタイミングでどの知識が必要になってくるのかという「先読み」の知見が得られた事が収穫であったと言えます。

それはそれとして

松風のサイト の情報は古く、未だに横浜市は山手で活動している事になっていますが、現在の拠点は藤沢市です。医者の不養生と言うか灯台下暗しと言うか、2019年早めのリニューアルに向け目下準備中です。

リモートワークの年

2018年はリモートワークでプロジェクトに参画する事が多かった年でした。最も感じたのは、物理的な距離はリモートワークと言えど重要な要素であるという事です。

遠方リモートワークの難しさ

前半は都内のクライアントであったため月次のミーティングなどは直接参加したのですが、後半は遠方のクライアントであったために月一で出張する訳にもいかず、ビデオチャットでの参加となりました。ビデオチャットでのミーティングというのは、難しい物です。その場にいないが故の喋るタイミングの測りづらさ、ほぼ均一に聞こえてくる音声は誰の発言か判断しづらく、また、こちらの音声がちゃんと届いているのかという不安もあります。

ミーティングのみならず実作業においても、実際に物理的に対面したことのない方々とコードを共にしていくというのは何とも表現しようのない難しさがあります。現場の空気が分かっているかどうかが肝なのかもしれません。

先んじて顔合わせを

難しさばかりを書き連ねてしまいましたが、年末に現地に赴いてミーティング参加と少々作業をしたところ、それまで感じていた障壁の様な物が幾分かは払拭出来たように感じました。つまり、遠方のリモートワークに参画する場合は、キックオフの段階で現地で直接話をするのが肝要なのだと思います。きっとその後に続く開発がよりスムーズに進行するでしょう。

まとめ

地元藤沢に戻って久しぶりに年間通して過ごしてみたわけですが、なかなかに面白い一年となりました。来年もまた、小さな実をひとつずつ結んでいきたいと思います。

みなさんにとって2018年はどんな年でしたか？ それでは、良いお年を。

近代以降、人は時間にしばられ、あるいは守られながら生活をするようになりました。 ここでそれが良いことだとか悪いことだとか考えるような詮無い事はしません。 今日は、私達の暮らしに欠かせない「時間」を測定する装置について考えていきたいと思います。

つまり時計である

時間を計測する装置、つまるところ「時計」と呼ばれる装置なのですが、 今あるアナログ時計のデザインに私達はあまりにも慣れ親しみすぎてしまいました。 なのでその存在からは一旦離れて、 改めて私達の生活に必要な「時間」を測る装置のデザインについて思いを馳せます。

なんでこんな事を考え始めたのか

VueでSVGベースのコンポーネントを試してみたかったからです。 ハワイの住人は非常に緩やかな時間感覚をもっていて、それは「ハワイアン・タイム」などと呼ばれるそうです。 常日頃時間に追われて生活していると、ふとそういう物に憧れをもつ事があります。 「大雑把な時間感覚で、ゆるく生きていきたい」と。

そこで、大雑把に時間を把握できるデザインの時計を考えてみようと考えました。

作ってみたサンプル達

そしてこちらが作ってみたサンプルです。 実用性等はあまり深く考えずに自由に、4種ばかり作ってみました。

• ArClock

サンプル1 : 比較的普通なそれ

普段目にするアナログ時計にかなり近いデザインです。 異なる点と言えば、針が円弧になり、時間を表す部分が12時間ではなく24時間単位、つまり1日で1周になる所です。

なぜ今あるアナログ時計が24時間ではなく12時間で1週なのかは詳しく調べていないのでわかりませんが、 12時間の方がぱっと見てより精細に時間を知ることが出来るのは確かです。 ですので、より大雑把にする為に24時間にしてみました。

サンプル2 : 波の様なそれ

このサンプルはちょっとお気に入りです。

時間部分のトータルが24時間になっているのはサンプル1と同様ですが、基点が朝の6時になっていて、右端からスタートします。 つまり、右の円弧は6時から18時までの「昼間」を表し、左の円弧は18時から翌6時までの「夜間」を表します。 右から左にしたのは、東から昇って西に沈む太陽をイメージしていたりします。

分と秒も一応なんとなく分かるようにはなっていますが、これは、あまりに動きがないとつまらないので付けたただの飾りです。 昼間/夜間のだいたい何時くらいなのかがわかれば良いというテーマの時計です。

サンプル3 : 週を意識したそれ

もっと大雑把にしてみました。一週を一つの単位として表現してみた時計（？）です。 月曜日を起点として、現在週のどの辺りなのかを大まかにあらわします。 今回作った時計（？）の中で最も動きの無い、面白みのない物となりました。

日曜日を中央に押し込んだ理由は3つあります。 1つ目は、Saturday と Sunday で “S” が続いて見づらいこと、 2つ目は、7だと360を割り切れないこと、 3つ目は、6ならばリボルバーの弾倉っぽくなるのでイメージとして採用してみようと思った次第です。 （しかし、調べたら7発装填のリボルバーも存在する様でした。 ナガンM1895 – Wikipedia ）

この7つの曜日が全て赤く染まる時、我々は月曜日の到来に恐れおののく事でしょう。

サンプル4 : 年を意識したそれ

さらに単位を大きくして、年にしてみました。 年輪をイメージしていますが、輪になってないしひとつの層は別に年じゃないでしょう？というのは野暮な突っ込みです。 むしろゼンマイをイメージしていると言った方が理解を得られるかもしれません。

このゼンマイ状の線は、現在が1年のどの辺りなのかを示しますが、 半径ではなく線分の長さであらわしている為、見た目と実際に感覚としてズレが生じるでしょう。 しかし、年始の一ヶ月よりも年末の一ヶ月の方が短く思えるのはわりと一般的な感覚のように思えます。 そんな錯覚も表現出来てしまう時計であります。

角層の塗りは60秒で終端にたどり着きます。 ちょっとした動きが欲しかったのと、ぐるぐる動いているのが楽しかったので付けてみました。

技術的な話

これらのサンプルは全てインラインSVGで作られていて、 パスは一部の物を除いてほとんど <path> の A コマンドで描画してあります。 動きはほとんど stroke-dash-array と stroke-dash-offset で実装されていて、アニメーションは全て transition です。

せっかく Vue で作ったサンプルなので <path>　の d 属性を直接書き換えてアニメーションを、とも思ったのですが、 頂点の数が変わると transition は効かないので他の方法をとりました。

SVGベースのVueコンポーネント

インラインSVGをベースにしたVueコンポーネントを今回試してみましたが、なかなか面白いものです。 <path> の描き方を理解すると大抵の物は描けますし、動的に操作する事も容易です。 例えばデータを渡してグラフを描画するコンポーネント実装などでその実力を大いに発揮しそうです。というか、まさにそういうケースで先日発揮しました。

そういった部品を実装しててふと思い出したのが ActionScript3 で作るFlashコンテンツで、非常に類似しています。 AS3でも受け取ったデータから Graphics クラスで動的に描画をするなどしていましたね。 あんなイメージです。

Netlify

Netflix とよく似ている為よくタイポしてしまいがちな Netlify にデプロイしてみました。

Netlify: All-in-one platform for automating modern web projects.
Build, deploy, and manage modern web projects

このサービスは、GitHub等のリポジトリサービスと連携して、そのリポジトリの指定したブランチにpushするだけでデプロイが完了するというお手軽なWebサーバーです。 それに加えて、様々な機能をご利用いただけます。

• ビルドコマンドをデプロイ前に実行してくれる
• Functions 機能で AWS Lambda にもデプロイできる
• Form 機能でフォームリクエストをハンドリングできる
• Let’s Encrypt によるSSL対応（独自ドメインが必要）

Lambdaと連携出来るので、開発コストはさておき大体の事は実現できそうですね。 今回はビルドコマンドの実行ぐらいしか活用していませんが、機会があればがっつり使ってみたい所存です。

まとめ

色々な時計を作ってみましたが、先に申し上げたとおり、実用出来る代物ではありません。 少なくとも、この国で今の生活をしているかぎりは…。

今年のアドベントカレンダーは、23ほどのjQuery拡張関数を連日ご紹介してまいりました。

おさらい

毎度お世話になっているjQueryで、毎回書いてしまうちょこざいな関数をつらつらとしたためて来ました。 実際の中身はjQueryの機能への依存度はさほど高くない（？）ので、少しいじれば別にjQueryと一緒に使わなくても良い物もあったりします。 強いて言えば元々そんなにjQueryは好きではありませんが、結局使うことが多いので仕方ないですね。

インデックス

23個まとめてリストにしておきます。目次のようなもの。

$.chainCase(str) :String

キャメルケースの文字列をチェインケース・スネークケースに変換する
jQuery依存度 : 無

$.classify(obj) :Function

クラスライクな関数を生成する
jQuery依存度 : 中

$.configify(obj) :Object

オブジェクトに options を設定・変更する config() メソッドを実装する
jQuery依存度 : 中

$.dig(path, obj) :Any

ドットシンタックスの文字列を渡すとそのオブジェクトを掘り起こして返す
jQuery依存度 : 無

$.escapeHTML(str) :String

HTML文字列をエスケープする
jQuery依存度 : 無

$.eventify(obj) :Object

オブジェクトにイベント管理のメソッド（on, off, trigger）を実装する
jQuery依存度 : 低-中

$.attributify(obj) :Object

オブジェクトに属性管理のメソッド .attr() を実装する
jQuery依存度 : 低

$.format(template, str, str…) :String

“%s%d” 形式のフォーマットに則って整形された文字列を返す
jQuery依存度 : 無

$.formatNumber(num) :String

数値を三桁ずつカンマで区切った文字列で返す
jQuery依存度 : 無

$.observe(callback) :Deferred

コールバック関数を渡してその返り値を監視する
jQuery依存度 : 無

$.parseQuery(str, asArray) :String

URLのサーチ文字列（”?key=value&key2=value2″ ）をパースする
jQuery依存度 : 低

$.parseURL(str) :Object

URL文字列をホスト名やサーチ文字列・ハッシュなどにパースする
jQuery依存度 : 無

$.random(start, end) :Any

範囲の間からランダムな数値を取得したり、リストの中からランダムに値を取得する
jQuery依存度 : 無

$.rebase(obj, pattern) :Object

オブジェクトに属しているメソッドをそのオブジェクトに bind する
jQuery依存度 : 低

$.render(template, data) :String|Function

単機能のテンプレート関数
jQuery依存度 : 低

$.scrollTo(dest, offset, options, selector) :void

ページあるいは要素の中身をアニメーションでスクロールする
jQuery依存度 : 高

$.fn.serializeObject() :Object

フォーム要素をシリアライズして、オブジェクトで返す
jQuery依存度 : 高

$.fn.extract(asArray) :Object|Array

非Form要素の内容をシリアライズする
jQuery依存度 : 高

$.series(callback, callback …) :Deferred

連鎖的に直列処理を実行する
jQuery依存度 : 高

$.fn.submitAsync(props) :Deferred

Form要素を非同期でsubmitする
jQuery依存度 : 高

$.times(count, callback) :void

n回処理を繰り返す
jQuery依存度 : 無

$.timing.*

User Timing API のラッパー
jQuery依存度 : 無

$.fn.transition(props, options) :jQueryObject

$.fn.animate() のようにCSS Transitionを実現する
jQuery依存度 : 高

リポジトリ

全て纏めた物をGithubのリポジトリにしてあります。ご自由にどうぞ。

jquery-tiny-extentions @ GitHub

それでは皆様、良い年末をお過ごしください。

$.fn.transition は、$.fn.animate の様にCSS Transitionを実現する関数です。

$.fn.transition(props, options)

CSS Transition によるアニメーションはJavaScriptによるアニメーションに比べてパフォーマンスが非常によく、綺麗です。 しかし一方で、非対応環境の為に .animate() を使わなければならない事が多いので、 両者で動作するように対応できる関数をしたためてみました。

使い方

// 要素を left: 100 に移動
$(".item").transition({
    left: 100
}, {
    duration: 300, // 所要時間 300ms
    delay: 100, // アニメーション開始までのディレイ 100ms
    easing: "linear" // イージング関数の指定
});

基本的な使い方は .animate() と概ね同じです。

• 第一引数 : アニメーションするスタイル
• 第二引数 : オプション

CSS Transition に対応していないレガシーな環境では $.fn.animate で代替しています。 イージング関数名として渡せるのは jQuery.easing の名前ではなく、 CSS Transition で定義されている名前です。（ease | linear | ease-in | ease-out | ease-in-out）

// 要素をアニメーション後、削除
$(".item").transition({
    opacity: 0,
    right: 500
}, {
    done: function(){
        $(this).remove();
    }
});

.animate() 同様に、オプションで done を渡して完了時の処理を実装できます。 .animate() にあるその他多数のオプションは使えません。

また、stop() とかはできません。とまりません。

コード

$.extend($.support, {
    cssTransition: ("transition" in document.createElement("i").style)
});

$.transition = function(props, options){
    var o, transition = [];

    o = $.extend({
        duration: 400,
        delay: 0,
        easing: "ease",
        done: $.noop
    }, options);

    if(! $.support.cssTransition){
        switch(o.easing){
            case "ease": o.easing = "swing";
            case "ease-in": o.easing = "easeInSine";
            case "ease-out": o.easing = "easeOutSine";
            case "ease-in-out": o.easing = "easeInOutSine";
            default: break;
        }
        o.easing = (o.easing in $.easing) ? o.easing : "swing";

        this.stop().delay(o.delay).animate(props, {
            duration: o.duration,
            easing: o.easing,
            done: o.done
        });

        return this;
    }

    $.each(props, function(key, value){
        transition.push(
            [
                key,
                o.duration + "ms",
                o.easing,
                o.delay + "ms"
            ].join(" ")
        );
    });
    transition = transition.join(",");

    this.each(function(){
        var el = $(this),
            done = (function(e){
                o.done.call(this, e);
                $(this).css("transition", "").off("transitionend", done);
            }).bind(this);

        el.css("transition", transition)
        .on("transitionend", done)
        .css(props);

        setTimeout(function(){
            el.trigger("transitionend");
        }, o.duration + 33);
    });

    return this;
};

ベンダープレフィックス無しの “transition” を持たない環境は、使えない物とみなしています。 （面倒だったのもありますが、必要性もあまり感じなかった為）

非対応環境ではイージング関数を jQuery.easing の名前に書き換えています。 といっても、デフォルトで実装されているのは “swing” と “linear” だけなので、 jQuery.easing プラグイン も含めて、近しい物を割り当てています。 こちらも一緒に使う事で表現は豊かになりますが、なければないで、そこらへんが全部 “swing” になるだけです。

完了時の処理に “transitionend” を利用していますが、 これは実際に値が変わってトランジションが発生していないと発火しない代物なので、 時間経過と共に無理やり発火させています。 「アニメーションしないアニメーション」の完了時に何かしたい事なんてないだろうと思いますが、念のため。

$.timing は、User Timing API のラッパーです。 わずかな機能だけですが、非対応環境に擬似的に対応してみました。

User Timing API とは

User Timing APIは、Webページ上のパフォーマンスを計測するためのインターフェースです。 その役割と使い方は下記URLのエントリーで解説されています。

• User Timing API: あなたの Web アプリをもっと理解するために – HTML5 Rocks

ものすごくざっくりと使い方を紹介すると、こんな感じ。

• mark() を使って任意のタイミングでタイムスタンプを「マーク」として記録
• measure() を使って、記録したマーク間の所要時間を計測
• タイムスタンプは1/1000ミリ秒という高精度で記録される

執筆時点でのメジャーどころの対応状況は IE10+ / Edge / Firefox / Chrome / Opera 40+ となっていて、 IE9以前やSafari（iOS含）は非対応です。

$.timing

使い方

// マークを記録
$.timing.mark("foo");
$.timing.mark("bar");

// マーク間の所要時間を記録
$.timing.measure("from_foo_to_bar", "foo", "bar");

// 名前からタイムスタンプを取得
$.timing.get("from_foo_to_bar"); // => number

// 記録したマークを全て取得
$.timing.marks(); // => object

// 記録したメジャーを全て取得
$.timing.measures(); // => object

• .mark(name) でそのタイミングのタイムスタンプを記録します
• .measure(name, start, end) で、開始マークから終了マークまでの所要時間を記録します
• .get(name) で名前からマーク・メジャーの時間を数値で取得します
• .marks() / .measures() で記録したマーク・メジャーを全てオブジェクトで取得

Polyfill とは呼べないモノ

$.timing はほんの一部の機能しか実装していません。 また、擬似的に再現してみたとはいえ1/1000ミリ秒単位で計測はちょっと出来無さそうで、 Polyfillと呼ぶにはあまりに片手落ちですね。

core-js あたりでPolyfillを書いているかも？と思いましたが、 中の人が「無理デス」 とおっしゃっています。

Thanks for proposal, but it can’t be polyfilled – only little part and with serious limitations.
https://github.com/zloirock/core-js/issues/130

コード

$.timing = {
    _supported: ("performance" in window) && ("timing" in window.performance),
    _data: {},
    _start: (new Date()).getTime(),

    mark: function(name){
        if(this._supported){
            window.performance.mark(name);
        } else {
            this._data[name] = {
                type: "mark",
                startTime: (new Date()).getTime() - this._start
            };
        }
    },

    marks: function(){
        return this.getEntries("mark", "startTime");
    },

    measure: function(name, start, end){
        if(this._supported){
            window.performance.measure(name, start, end);
        } else {
            this._data[name] = {
                type: "measure",
                duration: this.get(end) - this.get(start)
            };
        }
    },

    measures: function(){
        return this.getEntries("measure", "duration");
    },

    get: function(name){
        if(this._supported){
            var items = window.performance.getEntriesByName(name);
            return items.length ? items[0].startTime : void 0;
        }
        return (name in this._data) ? this._data[name].startTime : void 0;
    },

    getEntries: function(type, key){
        var data = {};
        if(this._supported){
            window.performance.getEntriesByType(type)
            .forEach(function(item){
                data[item.name] = item[key];
            });
        } else {
            $.each(this._data, function(name, item){
                if(item.type === type){
                    data[name] = item[key];
                }
            });
        }
        return data;
    }
};

$.times() は、n回処理を繰り返してくれる関数です。

$.times(count, callback)

使い方

var str = "";

$.times(10, function(index){
    str += index;
});

console.log(str); // => "0123456789"

第一引数に繰り返したい回数を整数で、 第二引数に実行したい関数を渡します。 関数には0からはじまるインデックスが渡されます。

コード

$.times = function(count, callback){
    var i = count;
    while(i--){
        callback(count - i - 1);
    }
};

正直細かすぎたかなって思ってます。

実際にプロダクトのコードに使われる事はあまりなく、デモデータの生成やテスト等で使ったりはします。

$.fn.submitAsync() は、form要素を非同期でsubmitするための関数です。

$.fn.submitAsync(options)

使い方

<form action="/" method="post" id="demo-form"> ... </form>

<script>

$("#demo-form").submitAsync()
.then(function(){
    console.log("--送信完了--");
});

</script>

返り値は $.ajax() なので、then/done 等で結果を受け取ることができます。 引数には $.ajax() のオプションを渡すことができます。

$("#demo-form").submitAsync({
    url: "/api/foo",
    dataType: "jsonp"
})
.then(function(){ ... });

送信先のURLは通常 action 属性が使用されますが、引数のオプションで上書きする事もできます。 リクエストメソッド（”type”）も同様。

コード

$.fn.submitAsync = function(options){
    var props = $.extend({
        url: this.prop("action"),
        type: this.prop("method"),
        data: this.serializeObject()
    }, options);
    return $.ajax(props);
};

Form の属性を読んで $.ajax() するだけの簡単なお仕事ですね。なくてもまったく困りません。 尚、内部で先に紹介した $.fn.serializeObject() を使用しています。

$.series() は、連鎖的に直列処理を実行していく関数です。

$.series(callback, callback, …)

使い方

// 引数で渡した関数を順番に呼んでいきます
$.series(
    function(){
        console.log("Process: 1");
        // 数値（ミリ秒）を返すとその時間分次の処理を遅延させます
        return 1000;
    },
    function(){
        console.log("Process: 2");
        // 何も返さない（undefined）場合は `return 1;` と同じ
    },
    function(){
        // Deferredオブジェクトを返すと処理完了時に次の処理に移行します
        return $.ajax({url: "/api"}).done(function(){
            console.log("Process: 3");
        });
    },
    function(){
        // false を返すとそこで処理を中断して reject します
        return false;
    }
)
.then(
    function(){
        console.log("--処理完了--");
    },
    function(){
        console.log("--途中で処理が中断されました--");
    }
);

渡した関数が返す値によって、次の処理までの挙動が変わります。

• 数値 : 数値（ミリ秒）待機してから次の処理へ
• Deferred : resolveされてから次の処理へ
• false : 一連の処理を中断してrejectする
• undefined : 何も返さない場合は 1 を返した場合と同じ

$.series() は Deferred を返すので、完了・失敗を then() 等で受け取る事ができます。

コード

$.series = function(){
    var df = $.Deferred(),
        args = arguments,
        i = -1,
        timer = null,
        run;

    run = function(){
        var r;

        clearTimeout(timer);
        i += 1;
        if(i >= args.length){
            return df.resolve();
        }
        r = args[i]();
        if(false === r){
            df.reject();
        }
        r = (r === void 0) ? 1 : r;
        switch($.type(r)){
            case "number": timer = setTimeout(run, r); break;
            case "object":
                if($.isFunction(r.then)){
                    r.then(run ,function(){
                        df.reject();
                    });
                }
                break;
            default: break;
        }
    }

    run();

    return df;
};

Cに必要なAとBをやって、Dに必要なCをやってからDやって…というような感じに連鎖的に直列処理したい時や、 タイムラインで組んだアニメーション等が作れそうですね。

普通に Deferred 等で繋いでいっても良いんですが、コードが見づらくなってしまうので、 気持ちよく書きたいがためにうまれた関数です。

$.fn.extract() は、非Form要素の内容をシリアライズする関数です。

$.fn.extract(asArray)

使い方

<div id="demo">
    <input type="text" name="name" value="john">
    <input type="text" name="age" value="23">
</div>

<script>

$("#demo").extract();
/* => {
    name: "john",
    age: 23
} */

// 引数にtrueを渡すと配列で返します
$("#demo").extract(true);
/* => [
    { key: "name", value: "john" },
    { key: "age", value: "23" }
] */

</script>

基本的な挙動は先に紹介した $.fn.serializeObject と同じです。 オブジェクトではなく配列で受け取りたい場合は引数に true を渡します。

ちなみに、$.fn.serialize() や $.fn.serializeArray() は、非Form要素で使用しても空の文字列・配列を返します。 （後述にもありますが、それが正しいと思います）

コード

$.fn.extract = function(asArray){
    var list = [], data = {};
    this.find("input[name], select[name], textarea[name]").each(function(){
        var name = this.name;
        if(["radio", "checkbox"].indexOf(this.type) >= 0){
            return ! this.checked ? null : list.push({
                name: name,
                value: this.value
            });
        }
        if(this.nodeName === "SELECT"){
            return $(this).find("option:selected").each(function(){
                list.push({
                    name: name,
                    value: this.value
                });
            });
        }
        list.push({
            name: name,
            value: this.value
        });
    });
    if(asArray){
        return list;
    }
    list.forEach(function(item){
        if(data[item.name] !== void 0){
            if($.type(data[item.name]) !== "array"){
                data[item.name] = [data[item.name]];
            }
            data[item.name].push(item.value);
            return;
        }
        data[item.name] = item.value;
    });
    return data;
};

オブジェクトで返すのをデフォルトとしている理由は、 わたし自身が基本的にオブジェクトで受け取りたいと思っているからです。

存在意義

なお、この関数の存在意義はあまりありません。 form でマークアップすれば済む話ですし、そうすべきでしょう。 どうしてもレイアウトの都合で form の外に input を置かなければいけない場合は、 HTML5の form 属性で親となる form を指定してやれば対応可能です。

<form action="/" id="demo-form"></form>
<input type="text" name="name" value="john" form="demo-form">

<script>

$("#demo-form").serialize(); // => "name=john"

</script>

こうすれば、$.fn.serialize/serializeArray() でもシリアライズする事ができ、仕様にも則っていますね。

$.fn.serializeObject() は、フォーム要素をシリアライズして、オブジェクトで返す関数です。 jQueryには文字列で返す $.fn.serialize() や、 配列で返す $.fn.serializeArray() がありますが、そのオブジェクト版です。

$.fn.serializeObject()

使い方

<form action="/" id="demo-form">
    <input type="text" name="name" value="John">
    <input type="text" name="age" value="23">
    <input type="radio" name="gender" value="male" checked>
    <input type="radio" name="gender" value="female">
</form>

<script>

$("#demo-form").serializeObject();
/* => {
    name: "John",
    age: 23,
    gender: "male"
} */

</script>

複数選択された項目は、値が配列になります。

<form action="/" id="demo-form">
    <input type="checkbox" name="color" value="red" checked>
    <input type="checkbox" name="color" value="green">
    <input type="checkbox" name="color" value="blue" checked>
</form>

<script>

$("#demo-form").serializeObject();
/* => {
    color: ["red", "blue"]
} */

</script>

コード

$.fn.serializeObject = function(){
    var vars = {};
    this.serializeArray().forEach(function(item){
        if(item.name in vars){
            if(! $.isArray(vars[item.name])){
                vars[item.name] = [vars[item.name]];
            }
            vars[item.name].push(item.value);
            return;
        }
        vars[item.name] = item.value;
    });
    return vars;
};

$.fn.serializeArray() が返す配列を読んでオブジェクトに変えているだけです。

Formの内容を非同期でPOSTしたい時などに使えるかもしれませんが、それはまた別の関数の話。