はじめまして
- Yuji Sugiura / @leader22
- フロントエンド・エンジニア at PixelGrid Inc.
- 京都生まれ -> 大阪育ち -> 神奈川(ほぼ東京)在住
- Angular歴3ヶ月(最近はReactばっかり)
みんな一度は使ったことあるやつです。
バニラ ≒ プレーン = 素のJavaScriptのこと
JavaScriptの基礎力と言っても過言ではない？
俺にはチューニングできない＼(^o^)／
そこにはタブだけで良かったのに・・、
大量の使われてない機能と依存モジュールたちの姿が・・！＼(^o^)／
もうjQueryいれるしか＼(^o^)／
ライブラリを使う = ライブラリに依存するということ
目先の利益を追う価値があるかを慎重に。
( ˘ω˘).｡o( またその話か... )
キャッチーな煽り記事は平常心で読みましょう。
本当に必要かどうかを見極めるのが大事。
全てを追う必要はない。(知ってて損もないけど)
昨今のイケイケなWebアプリをVanillaでやるのは非現実的・・・_(:3」∠)_
書ける！読める！もう何も恐くない！
れっつVanilla！
最新のモダンブラウザは違いをほぼ意識しないでOK
そして今や、
ブラウザ間の差を埋めるPolyfillの出番も、着実に減少中。
依存ライブラリなしなので容量わずか4.1KB(gzip)！
ちなみにjQuery@2.2は34.6KB
株式会社ピクセルグリッドは、JavaScriptの会社です！
// jQuery
$('#el');
$('.els');
// Vanilla
document.getElementById('el');
document.getElementsByClassName('.els');
// Easy but..
document.querySelector('#el');
document.querySelectorAll('.els');
便利なqSとqSAですが、一部レガシーな環境でパフォーマンスが落ちるので注意(体験談)
// jQuery
$('.els').each(function() {
this.text('Angular!');
});
// Vanilla
var $els = [].slice.call(document.getElementsByClassName('.els'));
$els.forEach(function(el) {
el.textContent = 'Angular!';
});
[].forEach.call(document.getElementsByClassName('.els'), function(el) {
el.textContent = 'Angular!';
});
// ES 2015
var $els = Array.from(document.getElementsByClassName('.els'));
Array.from(document.getElementsByClassName('.els'), function(el) {
el.textContent = 'Angular!';
});
var array = ['A', 'n', 'g', 'u', 'l', 'a', 'r', '2'];
// _
_.each(array, fn);
_.map, _.filter, _.reduce, _.some, _.every;
_.contains(array, 'A');
// Vanilla
array.forEach(function(item, idx, arr) {});
array.map, array.filter, array.reduce, array.some, array.every;
// ES Next
array.includes('A');
ちょっと組み合わせれば、Underscore/Lodashでやってるだいたいのことは書ける。
// _
_.extend({ name: 'leader22' }, { age: 29 });
// jQuery
$.extend({ name: 'leader22' }, { age: 29 });
// ES 2015
Object.assign({ name: 'leader22' }, { age: 29 });
Object.freeze(), seal(), preventExtension()とかも便利。
// jQuery
var $el = $('#el');
$el.addClass('is-selected');
$el.removeClass('is-selected');
$el.toggleClass('is-selected');
$el.hasClass('is-selected');
// Vanilla
var $el = document.querySelector('#el');
$el.classList.add('is-selected');
$el.classList.remove('is-selected');
$el.classList.toggle('is-selected');
$el.classList.contains('is-selected');
複数のクラスを渡したりすると、ちょっと挙動が違ったはず。
// jQuery
$.ajax({
url: '/foo',
method: 'POST',
dataType: 'json',
data: { a: 1 }
})
.then(fn);
// Vanilla
var xhr = new XMLHttpRequest();
xhr.open('POST', '/foo', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = fn;
xhr.send(JSON.stringify({ a: 1 }));
// Near future
fetch('/foo', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ a: 1 })
})
.then(fn);
// jQuery
$(el).css('display');
// Vanilla
getComputedStyle(el)['display'];
そもそも使う機会あんまりないけどな・・・。
// jQuery
var $btn = $('#button');
$btn.trigger('click');
// Vanilla
var $btn = document.getElementById('button');
$btn.dispatchEvent(new Event('click'));
昔はcreateEvent()とかinitEvent()とか面倒やったけど、今は昔！
// jQuery
$(el).on('click', handler);
$(el).once('click', handler);
// Vanilla
el.addEventListener('click', handler, false);
// Near future
el.addEventListener('click', handler, { once: true });
var EE = require('events').EventEmitter;
var ev = new EE();
ev.on('foo', function() { console.log('foo'); });
ev.emit('foo'); // "foo"
いつもだいたいon()とemit()くらいしか使ってないそこのあなた！
function EE() {
this._events = {};
return this;
}
EE.prototype = {
constructor: EE,
emit: function(ev) {
var args = [].slice.call(arguments, 1),
handler = this._events[ev] || [];
for (var i = 0, l = handler.length; i < l; i++) {
handler[i].apply(this, args);
}
},
on: function(ev, handler) {
var events = this._events;
(events[ev] || (events[ev] = [])).push(handler);
}
}
return EE;
たった20行です。
window.addEventListener('message', handleMsg, false);
function handleMsg(ev) {
if (ev.origin !== location.origin) { return; }
var msg = ev.data;
var type = msg.type; // "foo"
var data = msg.data; // {}
}
window.postMessage({ type: 'foo', data: {} }, location.origin);
こういうのもあるよ。
<form id="myForm">
<input name="name" type="text" required>
<input name="email" type="email" required>
<button type="submit">Send</button>
</form>
var $form = document.getElementById('myForm');
// form全体
$form.checkValidity();
// email
$form.email.checkValidity();
正規表現とか書かんでも良い！
(おすすめせんけど)厳密にチェックしたい人はがんばって・・
window.addEventListener('online', handleNWChange, false);
window.addEventListener('offline', handleNWChange, false);
function handleNWChange() {
// navigator.onLine
}
他にもバッテリー状況とか取れる。
// Chromeならもう使える
navigator.getBattery().then((battery) => {
// battery
})
そのうち回線種別とか照度まで取れるようになるらしい！
自分で追うのが辛いなら、追ってそうな人を追うのも○
ただいろんな人がいるのでご注意・・・。
以上を踏まえた上で、Angularの偉大さを感じるデーにしましょう(˘ω˘ )
