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

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

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

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

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

スライダー swiper.js

https://idangero.us/swiper/

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

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

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

swiper.jsの使い方

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

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

<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はそれぞれ適時変更するように。また、ローカルにファイルあるならローカルで読み込みましょう。

<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がスライドする部分です。

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の使い方

1. htmlでecho.jsのjavascriptを読み込む
2. htmlのimgタグに、遅延読み込みしたいdata-echo属性を与えるコードを記入（imgのsrcには、遅延読み込みさせるまで表示されるダミー画像を入力）
3. 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を参照。

まとめ

jQuery依存のプラグインだと、jQueryのバージョンによって挙動が変わって微妙に動かなくなることがあるので、通常のWeb制作でも、今回のプラグインはよく使います。

特に、swiper.js。スライダーは今まで定番のslick.jsを使っていたんですが、調整する時にswiperの方がcss調整しやすいので、重宝しています。

今は、2つしかないですが、今後いいのあったらちょくちょく加筆していきます〜。