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

脱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" />

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'))
});