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

GoogleSheets-HTMLImporterGoogleスプレッドシートからデータをインポートできる「GoogleSheets-HTMLImporter」前のページ

パララックス効果で視差の背景を演出してくれる「parallax-background.js」次のページparallax-background.js

関連記事

  1. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  2. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  3. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  4. jQuery fullsizable
  5. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  6. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP