2019/04/06 2019/03/22 Web制作上谷亮太

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

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

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

direction: 'vertical',

loop: true

});

オプションは、公式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')

}

});
// echo.render(); is also available for non-scroll callbacks

</script>

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