脱jQueryにおすすめのJavaScriptライブラリ

WEB制作
脱jQueryにおすすめのJavaScriptライブラリ

脱jQueryにおすすめのjQueryレスなJavaScriptライブラリを紹介します。

目次

autoComplete

入力中の内容から自動で候補となるテキストを表示してくれるライブラリ

Usage

// initialize
var my_autoComplete = new autoComplete({key1: value1, key2: value2});

// destroy
my_autoComplete.destroy();

Choices.js

セレクトボックス内に選択肢の検索機能を追加するSelect2ライクなライブラリです。jQueryを使わずにSelect2を導入したいときに役に立ちます。

Usage

  // Pass multiple elements:
  const [firstInstance, secondInstance] = new Choices(elements);

  // Pass single element:
  const choices = new Choices(element);

  // Pass reference
  const choices = new Choices('[data-trigger]');
  const choices = new Choices('.js-choice');

  // Pass jQuery element
  const choices = new Choices($('.js-choice')[0]);

Sortable

jQuery UIのようにドラッグ&ドロップでテーブルやリストの並び替えを行うことができるようになるライブラリです。

Usage

new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

X-Ray

会員登録画面などにある「パスワードの表示」の機能を追加してくれます。

Usage

xray.init();

lazysizes

LazyLoad（画像の遅延読み込み）機能を実装してくれるライブラリ。背景画像などにも対応している。

Usage

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

Swiper

スライダー作成ライブラリ。スワイプなどの操作にも対応しています。

Usage

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
</script>

Macy.js

Pintarestのようなグリットデザインを実装できる軽量ライブラリ。

Usage

var macy = Macy({
    container: '#macy-container',
    trueOrder: false,
    waitForImages: false,
    margin: 24,
    columns: 6,
    breakAt: {
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});

axios

非同期通信を行う事ができるライブラリ。オプションの設定もAjaxのように行うことができます。

Usage

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// GET request for remote image
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
.then(function (response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});