jQuery世代がそのまま使える、Zeptoは今も現役なのか

はじめに

「jQueryの書き方には慣れているけれど、あのファイルサイズをそのまま読み込むのは気が引ける」——そんな場面に心当たりはないでしょうか。フレームワークを使わない小さなページや、既存のjQueryコードを段階的に置き換えたい場面では、フル機能のjQueryはややオーバースペックに感じられることがあります。

Zeptoは、そうした悩みに応えるために作られたJavaScriptライブラリです。$()によるセレクタ取得、on()でのイベント登録、css()やaddClass()といったメソッドチェーンなど、jQueryとほぼ同じAPIをモダンブラウザ向けに絞り込んだ小さな実装で提供しています。jQueryの書き方をそのまま持ち込めるので、学習コストをほぼゼロにできるのが最大の強みです。

とはいえ、説明を読むより実際に動かしたほうが早いと思います。Zeptoの$関数とイベント処理がどんな見た目で動くか、先に触っておきたい方はこちらからどうぞ。

＞＞＞ まずはサンプルを確認 ＜＜＜

Zeptoとは

Zeptoは、Thomas Fuchs氏によって2010年に公開されたJavaScriptライブラリです。当時のiOS Safariなど、まだJavaScriptエンジンが非力だったモバイルブラウザ向けに、jQueryよりずっと軽量なDOM操作手段として設計されました。現在は「モダンブラウザ向けの、jQuery互換APIを持つミニマルなライブラリ」として、GitHub上でも継続的にメンテナンスされています。

主な特徴

• jQuery互換API - $()、on()、css()、addClass()など、jQueryユーザーがそのまま書ける関数・メソッド名を採用している
• モジュール構成 - ソースコードはcore・event・ajax・formなど機能ごとのモジュールに分かれており、必要な機能だけを選んでビルドできる
• モダンブラウザに特化した軽さ - 古いInternet Explorer向けのハックを持たない分、実装がシンプルで読みやすい
• イベント委任のサポート - on(event, selector, handler)の形で、後から追加した要素にも効くイベントハンドラを登録できる

インストール

npmから導入する場合は次のコマンドを実行します。

npm install zepto

CDN経由でそのまま<script>タグから読み込むこともできます。

<script src="https://cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js"></script>

どちらの方法でも読み込むと、グローバルにZeptoと$が登録されます（$がすでに他のライブラリに使われている場合は上書きされません）。

なお、npmで配布されている既定のビルドに含まれるのはcore・event・ajax・form・ie・detectモジュールまでです。タッチイベント（touch）やCSSアニメーション（fx）、ジェスチャー（gesture）などのモジュールは既定ビルドには含まれていません。これらを使いたい場合は、公式サイト（zeptojs.com）のビルドツールでモジュールを選んでカスタムビルドするか、GitHubのソースから該当ファイルを個別に読み込む必要があります。この記事のサンプルは、npmの既定ビルドに含まれるAPIだけで組んでいます。

Zeptoのサンプルを動かす

まずはZeptoの基本である「要素の取得→イベント登録→クラス操作」の流れを動かして確かめてみましょう。下のサンプルはボタンをクリックするたびに、ZeptoのtoggleClass()でクラスを付け外しし、text()で表示文言を書き換えています。

要点だけを抜き出すと次のようになります。

import 'zepto@1.2.0'
const $ = window.$

$('#toggle').on('click', () => {
  const $msg = $('#msg')
  $msg.toggleClass('active')
  $msg.text($msg.hasClass('active') ? 'クリックされました！' : 'まだクリックされていません')
})

実際に動かせるものが下です。ボタンを何度か押して、枠線の色と文言が切り替わる様子を確かめてみてください。

$('#toggle')はjQueryと同じCSSセレクタで要素を取得し、on('click', ...)でクリックイベントを登録しています。toggleClass()は引数のクラス名が付いていれば外し、付いていなければ付ける、という切り替えを1回の呼び出しで行うメソッドです。CSSのtransitionと組み合わせているため、クラスが切り替わる瞬間に枠線や背景色がふわっと変化して見えます。

基本的な使い方

Zeptoの基本は、$()で要素を取得し、メソッドチェーンでスタイルやクラス、イベントをまとめて設定していくことです。

import 'zepto@1.2.0'
const $ = window.$

// 要素の取得とスタイル変更
$('#box').css({ color: 'white', background: '#1976d2' })

// クラスの追加・削除
$('#box').addClass('rounded').removeClass('square')

// メソッドチェーンでまとめて操作
$('#box')
  .text('Zeptoで書き換えました')
  .css('padding', '12px')
  .on('click', () => alert('クリックされました'))

css()はオブジェクトでもプロパティ名と値のペアでも指定でき、addClass()やremoveClass()、on()はすべてthis（Zeptoオブジェクト自身）を返すため、こうして数珠つなぎに書けます。jQueryで書いていたコードのほとんどは、この書き方のまま移植できます。

実践的なユースケース

要素の動的な追加・削除とイベント委任

一覧に項目を増やしたり減らしたりするUIでは、「後から追加した要素にもイベントが効くか」がつまずきどころになりがちです。Zeptoのon(event, selector, handler)という書き方を使うと、親要素にイベントを1回登録するだけで、あとからappend()で追加した子要素にもイベント委任で対応できます。

import 'zepto@1.2.0'
const $ = window.$

$('#addBtn').on('click', () => {
  const text = $('#todoInput').val()
  if (text) {
    $('#todoList').append($('<li>').text(text).append('<button class="del">×</button>'))
  }
  $('#todoInput').val('')
})

// イベント委任: 後から追加した要素にもそのまま効く
$('#todoList').on('click', '.del', function () {
  $(this).closest('li').remove()
})

下のサンプルで、入力欄にテキストを入れて「追加」を押すと一覧に増え、各項目の「×」ボタンを押すとその項目だけclosest('li').remove()で取り除かれます。入力欄を空のまま追加を押しても何も起きない挙動も確かめてみてください。

$('<li>')のようにHTML文字列を$()に渡すと、その場でDOM要素を生成できます。生成した要素に対してもtext()やappend()をそのままチェーンできるため、テンプレート文字列を組み立てるより見通しよく書けます。

フォームのリアルタイム検証とシリアライズ

フォームでは「未入力の項目を視覚的に知らせる」「送信時にまとめて値を取り出す」という2つの処理が定番です。Zeptoはeach()による複数要素のループ処理と、serializeArray()によるフォーム値の一括取得をどちらもサポートしています。

import 'zepto@1.2.0'
const $ = window.$

function validate() {
  $('#form input[required]').each(function () {
    const $input = $(this)
    const filled = $input.val().trim() !== ''
    $input.toggleClass('valid', filled).toggleClass('invalid', !filled)
  })
}

$('#form').on('input', validate)
$('#form').on('submit', (e) => {
  e.preventDefault()
  console.log($('#form').serializeArray())
})

下のサンプルでは、ユーザー名かメールアドレスのどちらかを空にすると枠線が赤くなり、文字を入力すると緑に戻ります。入力のたびにinputイベントで即座に反応する点がポイントです（changeだとフォーカスが外れるまで反応しません）。送信ボタンを押すとpreventDefault()でページ遷移を止めたうえで、serializeArray()が返す配列をそのまま画面に表示します。

toggleClass(name, boolean)は第2引数に真偽値を渡す書き方で、条件に応じてクラスを付けるか外すかを1行で表現できます。serializeArray()は各inputのname属性をキーにした配列を返すので、fetch()などに渡す前段の下ごしらえとして扱いやすい形になっています。

まとめ

Zeptoは、jQueryとほぼ同じ書き方をモダンブラウザ向けに絞り込んだ、軽量なDOM操作ライブラリです。$()によるセレクタ取得、on()でのイベント委任、css()やaddClass()のメソッドチェーンなど、jQueryに触れたことがあれば学習コストはほとんどかかりません。一方で、npmの既定ビルドにはタッチイベントやアニメーション用のモジュールが含まれていないため、フル機能が必要な場面では公式サイトのビルドツールでカスタムビルドを作る必要がある点は覚えておくとよいでしょう。

小規模なページやjQueryからの段階的な移行先として、Zeptoを候補に入れてみてはいかがでしょうか。

参考リンク

• Zepto.js公式サイト
• Zepto GitHub
• zepto - npm