アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

スマートフォン用に最適化されたjQuery互換ライブラリ、zepto.js



こんにちは、久保田です。

Monacaでプロジェクトを作る際のプロジェクトテンプレートでは、以前は組み込みのJavaScriptライブラリとして、jQueryjQuery mobileを利用していました。

が、実際にjQuery MobileやjQueryを実際にスマートフォン端末で使ってみるとわかるのですが、以下のような欠点があることがわかりました。

jQuery Mobileが重たい


jQuery単体でもそうなのですがjQuery Mobileも加わると、ページ読み込み時のJavaScriptのロード時間が非常に重たいということがわかりました。また、JavaScriptの読み込みだけでなく、数百個のリストを作ってその上でイベントをバインドするなどの処理をすると、スクロール自体がガクガクになるぐらいに重たくなります。

jQuery互換APIを持つZepto.js


そこで、jQueryに代わるJavaScriptライブラリとしてMonacaのプロジェクトテンプレート で用いているのがzepto.jsです。

このライブラリは、多くのブラウザをサポートするjQueryと違ってスマートフォンwebkit系ブラウザに最適化されている作りとなっていて、ライブラリのコードの量自体もjQueryの十分の一以下と、かなり軽量化されています。

また、嬉しいことにjQueryと互換性をもつAPIを持っており、今までjQueryを使ったことがある人ならば誰でも簡単に利用できるようになっています。jQueryは便利だけどスマートフォンで利用するには重すぎるというニーズをまさに満たしてくれるライブラリです。

というわけでこの記事ではzepto.jsの紹介をしました。詳しくは以下の公式サイトからどうぞ。

zepto.js