Help us understand the problem. What is going on with this article?

jQueryを使うべきところ 〜 JSおくのほそ道 #009

More than 5 years have passed since last update.

「jQueryいつ使うの!?」
「今でしょ・・・?」

こんにちはほそ道です。
というわけで今回からjQueryに取り組みます。

ですが、いきなり飛びつかない!
まずはライブラリを疑うところからはじめていきたいと思います。

昨今、とりあえずサイトにjQuery入れとけ的なアプローチだったり
ネイティブJSで書ける処理をわざわざjQueryで書いているような開発者を目にする事があります。
あえて始めに言わせていただきたい!

JSライブラリを使う事のメリット/デメリットを強く意識しましょう!
ライブラリ使う前にネイティブJS書けるようになりましょう!

目次はこちら

jQueryとは?

スクリーンショット 2014-06-02 10.06.29.png

いつものごとく公式ページから拝借・意訳します。

  • 高速・軽量・リッチなJavaScriptライブラリ。
  • 様々なブラウザ環境で簡単なAPIからイベントハンドリングやアニメーションやAjaxがうまいこと実現できる。
  • 多彩かつ拡張的で100万人以上ののJavaScript記述の世界をを変えた。

ほほぅ。高速という謳い文句は非常に気になりますが、他のライブラリとの比較でしょうね。

学習や調査の際には下記のオフィシャルリンクが使えるかと思います。

バージョン1系と2系の違い

現在の最新バージョンは2系が2.1.1、1系が1.11.1となります。
ブラウザサポートページにサポート環境情報が載っております。

  • 2系はレガシーブラウザIE6〜8をサポートしない。IE6〜8にサポートするなら1系を使用する。
  • Node.js、ブラウザエクステンション、その他ブラウザ以外の環境では2系での仕様をサポートしている。

なるほど、まぁBtoCサイトなどは1系を使う事になるのでしょうね。

ネイティブコードとの比較した際のメリット/デメリット

下記の様なメリット/デメリットを意識する事はとっても大事です。

  • メリット

    • 記述量が減らせる(事が多い)
    • クロスブラウザ対応を意識せずに書ける
    • 拡張プラグインを使う事で少ない記述でリッチな処理が実現出来る
  • デメリット

    • 高速を謳っているが、ネイティブJSとの比較では相当遅い
    • 裏側でどんな処理が行われているかを概ね理解していないと副作用が怖い
    • ネイティブJSが解らないのにjQueryでググったコードのコピペを繰り返すエンジニアの増殖

パフォーマンス検証

jQueryを使う事でどれくらい遅くなってしまうのかいろいろ検証してみました。
フェアになるよう3回ほど実行して平均的な値を記述してます。

jQueryロードのパフォーマンス

まずはロード時間の計測から。
ローカルファイルのjQueryを呼び出します。

  1.11.1 2.1.1 1.11.1(min) 2.1.1(min)
FireFox 30ms 25ms 20ms 23ms
Chrome 55ms 50ms 33ms 40ms

勿論ネイティブJS使う場合はこのロード時間は0です。
読み込みのみで、実行は何もしなかった状態ですが仮に20回読み出すと1秒かかる訳で、
結構な時間がかかっている事が解ります。
やはりミニファイされた状態の方がパフォーマンスは良いですね。

セレクタ処理のパフォーマンス

今度はjQueryとネイティブコードの処理を比較します。
DOM要素を相当回取り出してみます。ブラウザはChromeを使用します。
ネイティブ側はdocument.getElementById('hosomichi')を実行し、
jQuery側は$('#hosomichi')を実行します。

  1万回 10万回 100万回 1000万回
ネイティブ 3ms 13ms 70ms 580ms
jQuery 30ms 270ms 2800ms 27000ms

圧倒的な差がつくことがわかりましたね!
「いやいや、こんな反復しないよ!」というご意見もあるかと思いますが
ほそ道は色々な処理の塵はきっちり積もると思ってます。
ちなみに以前、ほそ道の携わったプロジェクトではサイト表示の遅さにメンバーが頭を抱えており
ネイティブコードで書き直すよう伝えただけで後でめちゃ感謝された事がありました。。

まとめ

というわけで、変にjQueryを用いる事で
jQueryを採用するときは下記の要素あたりを天秤にかけて最低限の判断は行う事が必要となるでしょう。

  • サイトパフォーマンス
    • 多量の反復処理が走る可能性はないか?
    • ただでさえ画像等で重いページだったりしないか?
  • 開発者スキル
    • 必要な部分のみにjQueryコードを採用できる?
    • デザイナーが設定したjQueryをチューニング出来る?
  • プラグインの選別
    • パフォーマンスは悪くない?
    • カスタマイズできそう?(やりたい事に対して「惜しい」プラグインは多いです)

今回は以上です。
次回はソースコードと格闘をする準備編として、
Grunt管理されたjQueryを扱うというTIPS的なものを紹介します。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away