現代的なブラウザー向けの小型 jQuery 代替 Cash

 (github.com/fabiospampinato)
4 ポイント 投稿者 GN⁺ 2024-11-04 | 1件のコメント | WhatsAppで共有

Cash の紹介

  • Cash は、現代的なブラウザー（IE11+）向けの非常に小さな jQuery 代替で、DOM 操作のための jQuery スタイルの構文を提供する。
  • コードベースを最小化するために現代的なブラウザー機能を活用し、jQuery に似たチェーン可能なメソッドを、はるかに小さいファイルサイズで提供する。
  • jQuery と 100% の機能一致を目指しているわけではないが、日常的なユースケースの大半をカバーしている。

比較

  • サイズ比較

    • Unminified: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minified: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minified & Gzipped: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • jQuery Slim と比べて 76.6% のサイズ削減効果がある。

  • 機能比較

    • 旧式ブラウザー対応: Cash ❌, Zepto ❌, jQuery Slim ✔
    • 現代的なブラウザー対応: Cash ✔, Zepto ✔, jQuery Slim ✔
    • 積極的なメンテナンス: Cash ✔, Zepto ❌, jQuery Slim ✔
    • 名前空間付きイベント: Cash ✔, Zepto ❌, jQuery Slim ✔
    • TypeScript コードベース: Cash ✔, Zepto ❌, jQuery Slim ❌
    • TypeScript 型: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • 部分ビルド対応: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

使い方

  • Cash は jsDelivr で利用でき、次のように使える: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • npm 経由でも cash-dom パッケージとして利用できる: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

ドキュメント

  • Cash はクエリセレクター、コレクションメソッド、および一部のライブラリメソッドを提供する。
  • jQuery の API を参照でき、Cash は jQuery と互換性のある機能の大半を実装している。
  • Cash はユーザー定義メソッドで拡張可能である。

コントリビュート

  • 問題を見つけた場合や機能要望がある場合は、issue を作成する必要がある。
  • プルリクエストを行うには、次の手順に従う:
    1. リポジトリをクローン: git clone https://github.com/fabiospampinato/cash.git
    2. クローンしたリポジトリに移動: cd cash
    3. 依存関係をインストール: npm install
    4. 変更時に Cash を自動再コンパイル: npm run dev
    5. テストスイートを開く: npm run test
    6. 必要に応じて README を更新

謝辞

  • Cash の開発に貢献したすべてのコントリビューターに感謝する。
  • ロゴデザインを担当した @hisk に感謝する。

ライセンス

  • MIT © Fabio Spampinato

関連記事

1件のコメント

 
GN⁺ 2024-11-04
Hacker Newsの意見

  • ブラウザがDOM操作を簡単にしてくれるので、2行のコードだけで十分に作業できる

    • document.querySelector と document.querySelectorAll をバインドして使う
    • モジュールからこの2つの関数をインポートして使う
    • GitHubリンク

  • jQueryの利点は、自動リスト処理と親クエリ機能にある

    • 空のリストで静かに失敗する点が問題
    • jQueryを作り直すなら、空集合ではエラーを発生させ、必要なときだけ静かに失敗するようにする
    • ライブラリとフレームワークの古くからの議論にも関係している

  • メインストリームのWebサイトが大量のJavaScriptを使っているため、ライブラリ全体を書き直すのは非効率

  • jQuery代替として個人的に作ったライブラリの紹介

    • アニメーションはCSSで実装
    • 単一要素でもリストでも透過的に使える
    • Vanilla JavaScript優先、依存関係なし、1ファイル、340行未満
    • GitHubリンク

  • jQueryとCashの違いについて知った

  • Shoestringを使ってJSを減らしていた経験

    • Cashも似た機能を提供しているが、ドキュメントでは目立たない
    • ブラウザの標準機能を使うほうがより良い選択
    • jQuery代替が6kBなのに対し、Preactはその半分のサイズ

  • TypeScriptのテンプレート文字列を使って要素の型を推論することが目標

    • たとえば、$('div#name') は HTMLDivElement と推論される

  • jQuery 4はモダンブラウザ向けの代替手段

  • ブラウザ拡張でjQueryを使っていたが、JSXライブラリへ移行した

  • 小さなライブラリやフレームワークは好きだが、実際には大きなライブラリを使うことになる

    • フレームワーク: 50KB
    • 小さい版: 5KB
    • 置き換え不能なライブラリ: 1MB