[JavaScript] 最近のjQueryとの付き合い方いろいろ

こんにちは、@yoheiMuneです。
今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。

Special Thanks to https://flic.kr/p/92J4Qt

目次

利用者としての付き合い方

最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。

jQueryを使う理由

最近感じるjQueryを使うメリットは、以下のようなことがあります。

• 何かサクッと作るときはやっぱり便利。
• $.DeferredでPromiseコーディングができるところ。Promiseのライブラリを入れなくても使えちゃうのは便利です。
• イベントのデリゲート。$('xxx').on('click', 'yyy', fn)の代替実装は未だに色々と苦労します。
• 新規参画者のスキルは低い場合にも、jQueryがあればある程度の品質とスピードを保って実装が進められる。

jQueryを使わない理由

逆にこれ嫌だなーと思うのは以下のようなところです。

• JSファイルが重たい。
• $.addClassや$.cssなど必要最低限だけ自分で作っちゃえば、jQuery無くても十分に実装できる。
• $.ajaxは便利だけど、通信周りは案件全体で共通のProxy処理を行うことが多いので、あまりそのままでは使わない（使わせたくない）。

ファイルサイズについてはjQueryのカスタムビルドすれば良いじゃんと思うかもしれないですが、あれが使えないこれが使えない、とプロジェクト全体に（そして未来に渡って）周知するのはなかなか骨が折れます。

その他

あと（発注側からすれば大迷惑ですが）、jQueryを使ってしまうとよく分からないバグに出会うことも少なくなり、実装担当者のスキルアップの機会も減ってしまうなーと思う今日この頃です。

サクッと何か作るにはぜひ選択したい技術ですが、jQueryを使わない選択肢もありだなーと最近は感じています。

傍観者としての付き合い方

jQueryはGithubで開発されていますが、最近はそのレポジトリをウォッチしています。 具体的に言うとレポジトリをウォッチして、イシューやプルリクが登録/更新されたらメールを受け取るようにしています（他のいくつかのレポジトリもウォッチしています）。

さすがはjQueryのレポジトリ、とても活発に議論が行われています。 ほとんどの内容はスルーしていますが、時々気になるものを読んでみてなんとなく分かった気になるのを趣味として楽しんでいます。

投稿されている内容は、エッジケース（重箱の隅をつつくような問題）であったり、テストコードの改善、READMEの改善だったりします。 様々な現場で使われてそこで発生した問題が報告されるって、本当に素晴らしい環境だなと思いました。オープンイノベーションですね。

そしてプルリクエストがあった場合にも、少しでもコードスタイルが違ったり、適切にテストケースが追加/修正されていない場合には指摘されていて、とても良く品質管理されていていいなーと感銘を受けます。Webだけどテストケースがきっちりとあるのって素敵ですね。

今日はたくさんあるIssueやPullRequestの中で、気になったものをいくつか紹介させていただきます。

#1919 css/hiddenVisibleSelectors "../selector" dependency should be "../selector-sizzle"

css/hiddenVisibleSelectors depends on "../selector-sizzle", not just "../selector".
If "../selector" points to "./selector-native" then css/hiddenVisibleSelectors doesn't work so it needs to explicitly depend on Sizzle.

これはcss/hiddenVisibleSelectorsのファイルの依存先が"../selector"じゃなくて"../selector-sizzle"という指摘です。 最終的には「今のままでいいんだよ」という結論になっていますが、そんなところまで気にするのかーと思ったイシューでした。

#1506 jQuery.parseHTML: Mitigate XSS vulnerability

Scripts passed in event attributes are executed in parseHTML immediately, without any possibility for the user to intervene:
jQuery.parseHTML('<img src=x onerror=alert(1)>');

To mitigate this vulnerability document.implementation.createHTMLDocument() should be used as standard context instead of document. Now the user has to set a different context deliberately for this issue to occur.

これは要素内のonerrorなどのイベント属性にスクリプトが仕込まれていると、parseHTMLをしたら強制的に動いてXSS脆弱性があるよ、というイシューでした。 これもほぉほぉと思うエッジケースですが、なんやかんや議論された結果、828a718のコミットで解決したようです。マイルストーンが3.0.0になっているのでそこで反映されるのかな。

#1894 $.when, $.progress and already resolved deferred

This code :

$.when($.Deferred().notify(1).resolve(), 
$.Deferred().notify(2).resolve(), 
$.Deferred().notify(3).resolve())
.progress(function() {
    console.log(arguments);
});

displays "[1,2,undefined]".
I would expect to have "[1,2,3]" as a result because this behavior with the last notify does not appear to be described in the documentation. If any of the deferred objects is not already resolved, the display is "[1,2,3]".

これもなかなかのエッジケースですね。最初はこれで正しいんだよーって言われていましたが、途中でいや問題だよ、ということになり最終的には修正されました。プルリクを送った時点ではスタイルガイドから少しずれていた点が指摘されたりと、色々とチェックされているなーと思った次第でした。


こんな感じでとりとめもなく色々な問題が上がっては、対応されたり議論されたりしています。 自分はそんなにjQueryで込み入ったことをしないのでなかなかこんな問題にはぶち当たらないのですが、ぶち当たった時にはぜひともイシュー登録してみてください。

他のアドベントカレンダー

今回の記事も含め、以下の記事を2014年アドベントカレンダーとして執筆しました。 気になる記事がありましたら幸いです。

- [CSS] Object Oriented CSSを学んで綺麗なコードを書く

- [MongoDB] フロントエンドエンジニアにオススメなデータベース、MongoDBに入門

- [MongoDB] フロントエンドエンジニアにもできるMongoDBを使ったログ分析

- [JavaScript] 最近のjQueryとの付き合い方いろいろ

- [フロントエンド] スキャフォールド機能を提供するYEOMANに入門する

最後に

以上今日はとりとめもなくjQueryのお話でした。 jQueryなど気になるライブラリをウォッチすると時々楽しい情報がゲットできるので、気になった方はやってみてください。

さてjQuery Advent Calendar 2014の15日目の記事は終了です。次はだれかなー。

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！