【脱jQuery】バニラjsで使えるおすすめjavascriptプラグイン

2019年3月22日2019年6月1日

Web制作をしていると、為にjQueryが使えない条件で制作することも稀にあります。

そんな時は、いつもバニラjs（フレームワークとか使わない生のjs）で作るのですが、スライダーとか重めなものはプラグインを使ってサクッと実装しちゃいます。

自分用のメモもを兼ねて、バニラjsで制作するときによく使うjavascriptプラグインをまとめました。

1. スライダー swiper.js
- 1.1. swiper.jsの使い方
2. imgタグの遅延読み込みecho.js
- 2.1. echo.jsの使い方
3. まとめ

スライダー swiper.js

https://idangero.us/swiper/

jQueryのスタイダー系のプラグインは、bxslider.jsやslick.jsあたりがよく使われているイメージですが、最近はswiper.jsをずっと使っています。

bxsliderやslickに比べて、swiperの方がcssの調整が楽なので、重宝しています。

また、swiperは公式のサンプルが豊富で、いろんな形態のスライダーを公式サイトを見るだけで簡単に実装できるのでそういう面でもいい感じです。

swiper.jsの使い方

バージョンはV4系です。ネットのswiperの記事は過去バージョンのものが多く、記述方法が微妙に違うのでご注意を。

htmlでswiperのcssとjavascriptを読み込む
htmlにswiperのコードを記入
javascriptでswiper呼び出しのコードを記入

1.htmlでswiperのcssとjavascriptを読み込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>

↑swiperのversionはそれぞれ適時変更するように。また、ローカルにファイルあるならローカルで読み込みましょう。

2.htmlにswiperのコードを記入

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-scrollbar"></div>
</div>

div.swiper-wrapper内のdiv.swiper-slideがスライドする部分です。

3.javascriptでswiper呼び出しのコードを記入

var mySwiper = new Swiper ('.swiper-container', {
	// Optional parameters
	spaceBetween: 0,
	effect: 'fade',
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	autoplay: {
		delay: 3500,
		disableOnInteraction: false,
	},
	loop: true,
	// on:でコールバック関係
	on: {
		// スライドが変わった後のコールバック
		slideChange: function () {
			// thisの中にいろんなスライダー情報
			console.log(this);
			// スライドのdom情報（配列になってる）
			console.log(this.slides);
			// 今のスライドが何枚目か数字で返す
			console.log(this.realIndex);
		}
	}
});

オプションは、公式DEMOを参照。

特にコールバック系が過去のバージョンと記述が違うので、オプション関係は公式をちゃんとチェックされたし。（公式もちょい不便ですが、、、）

imgタグの遅延読み込みecho.js

https://github.com/toddmotto/echo

シンプルに画像の遅延読み込みを使いたい時などに使います。

echo.jsよりも高性能な遅延読み込みプラグインは多くありますが、echo.jsほどシンプルに使えるプラグインはあまりありません。

遅延読み込み自体の処理を自作することもありますが、echo.jsでシンプルに行ける時はだいたいこれを使います。（Lazy loadは重い気がするので、個人的に敬遠しているのもありますが。。）

使い方も、js読み込んでdata-echo属性を指定して、echo.initをしてあげるだけなので楽チンです。

echo.jsの使い方

htmlでecho.jsのjavascriptを読み込む
htmlのimgタグに、遅延読み込みしたいdata-echo属性を与えるコードを記入（imgのsrcには、遅延読み込みさせるまで表示されるダミー画像を入力）
javascriptでecho.jsの呼び出しのコードを記入

<img src="img/dummy.gif" alt="Photo" data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
	echo.init({
		offset: 100,
		throttle: 250,
		unload: false,
		callback: function (element, op) {
			console.log(element, 'has been', op + 'ed')
		}
	});
</script>

echo.initのオプションは公式githubを参照。