脱jQuery! Vanilla.jsへの書き換え方

Vanilla.jsとは

素のJavaScriptでもできることをライブラリありきで考える風潮を皮肉ったものらしい。つまり普通のJavaScriptのこと。

目次

• DOMの取得
  • $('セレクタ')
  • 複数の要素に対して処理をする

• フェードイン, フェードアウト

  • transition
  • keyframe
  • Web Animate API

• スクロール

  • scroll()
  • スムーズスクロール

DOMの取得

$('セレクタ')

//jQuery
const h1 = $('h1');
const para = $('#para');

//Vanilla.js
const h1 = document.querySelector('h1');
const para = document.getElementById('para');

jQueryの場合、$('')の中にcssのセレクタを書くだけでいい。
Vanilla.jsの場合はちょっと長いです。他にもいくつかメソッドがあるのでググってみて欲しい。

複数の要素に対して処理をする

//jQuery
$('li').css('color', 'red');

//Vanilla.js
document.querySelectorAll('li').forEach(elm => {
  elm.style.color = 'red';
})

jQueryでは特に意識せずとも全ての要素に対してスタイルをあてることができますが、JavaScriptではquerySelectorAll()が返す値はNodeListというオブジェクトなので、forEach()で全ての要素に対して処理をする必要がある。

fadeIn,fadeOut,fadeToggle

アニメーションを作成する方法はtransition, keyframe, Web Animate APIなどたくさんの方法がある。
fade○○を実装するにはopacityの値を変更しつつ、display: blockとdisplay: noneを切り替えればいいので、今回は1番簡単なtransitionを使ってみる。(個人的にはJavaScript側でロジックを持てるWeb Animate APIを推したいのですが...)

tansition

.elm{
  opacity: 0;
  transition: 1s;
}

.fadeout{
  opacity: 0;
}

.fadein{
  opacity: 1;
}

const elm = document.querySelector('.elm');
  //fadeout
elm.classList.add('fadeout');
  //fadein
elm.classList.add('fadein');

スクロール処理

今回は2種類の方法を紹介する。
最初はscroll()から。

scroll()

//100pxスクロールする。
scroll(0, 100)

scroll()は絶対位置にスクロールする。
scrollBy()を使うと相対位置にスクロールするので試してみて下さい。

//targetに移動先、durationにスクロールにかける時間を指定することで
//スムーズなスクロールを実現できます。
function smoothScroll(target, duration) {
   // 移動先のDOM取得
   let targetElm =  target === '#' ? document.body : document.querySelector(target);
   // 移動先の位置
   let targetPosition = targetElm.getBoundingClientRect().top;
   // 今のスクロール値
   let startPosition = window.pageYOffset;
   let startTime = null;

   function animation(currentTime) {
      if(startTime === null) {
         startTime = currentTime;
      }
      // 経過時間
      let timeElapsed = currentTime - startTime;
      let run = ease(timeElapsed, startPosition, targetPosition, duration);
      scroll(0, run);
      if(timeElapsed < duration) requestAnimationFrame(animation);
   }

   function ease(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t + b;
      t--;
      return -c / 2 * (t * (t - 2) - 1) + b;
   };
   requestAnimationFrame(animation);
}

最後に

あえてVanilla.jsで実装することでググりまくる癖をつけたり、知らなかったメソッドを知れたりするので初心者には特にやってもらいたいなと思います。jQueryってすごいんやな...って思えるようになります。

役には立たないかも知れませんが(笑)
Web Animate APIについてはこちらなどを読めばいいと思います。