no-image

JavaScript

jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

Selectorは、jQueryの代わりに使用することができるマイクロJavaScriptライブラリです。ほぼ5KBの重さでjQueryと比較すると非常に軽量なものとなります。本JSライブラリの目的は、jQueryを置き換えるために使用できるライブラリを構築することです。

具体的には、ライブラリのファイルサイズを縮小し、縮小されたzipファイルを5KB未満に抑え、同時にjQuery機能のサポートも行うというものです。本ライブラリの使用による最大の効果は、圧縮下でjQueryよりも高速に動作する最新のライブラリをサイトに構築することが可能になることです。そして、サイトの軽量化が期待できますので、ユーザーのより快適なサイト閲覧をサポートすることができるでしょう。

それでは、Selectorについて詳しく見ていきましょう。

Selector

デモ

Selector は5KB未満のサイズで、jQueryを置き換えるために使用されるJSライブラリですが、実際どれくらいの軽量なのでしょうか。プラグインの配布サイトにサイズの比較が紹介されていました。

※( )内は、Selectorに対する比較。

  • Selector ・・・ 68KB
  • jQuery3.2 ・・・271KB(+203)
  • jQuery3.2Slim ・・・217KB(+149)
  • Selector ・・・ 16KB
  • jQuery3.2 ・・・84.5KB(+68.5)
  • jQuery3.2Slim ・・・68KB(+52)
  • Selector ・・・ 4.8KB
  • jQuery3.2 ・・・28.6KB(23.8)
  • jQuery3.2Slim ・・・22.7KB(17.9)

ご覧の通りどの場合でも明らかにSelectorの方が軽量であることが分かりますね。

近年のWEBサイトのデザインを含むトレンドは、まさに日進月歩で高度な技術や洗練されたコンテンツを有しています。そして、そのほとんどのサイトがjQueryを使用しており、様々なプラグインを併用して構築されています。そのため、コンテンツの表示までに時間がかかるサイトも珍しくはありませせん。

表示までの待ち時間を「%」を使用して知らせるサイトもあります。このような場合に、jQueryを軽量なサイズで置き換える本ライブラリの活躍は期待できますね。劇的な変化が無いとしても、クリエイターにとってサイトの軽量化は永遠のテーマであるように思います。

「ユーザーを待たせない」ということは、ユーザビリティの基本と言っても良いのではないでしょうか。ぜひSelectorをお役立てください。

Selector

関連記事

  1. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  3. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

  6. no-image

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP