http://3846masa.blog.jp/archives/1043609084.html とだいたい同じ
#nakano_lt とは
中野区にある明治大学中野キャンパスで不定期に行われているLTイベント．
今回の開催が4回目で初めての早朝開催だった．
この話は，僕がLTの準備をする前に寝てしまって，丸腰でLT登壇へ臨んだときの話．
5分で作るjQuery 2015
ほぼ即席で話した（もといデモした）が， 5分は短い．
jQueryとは
- JavaScriptのライブラリ
- DOMセレクタ，Ajax，アニメーション処理など
- Qiita読んでいる人は知っていると思う
// サイト内のリンク先をすべて抽出
$('a').map(function(){ return $(this).attr('href'); }).get();
5分で作るjQueryで搭載する機能
- DOMセレクタ
// サイト内のaタグをすべて抽出
$('a');
- イベントリスナー
// pタグをクリックしたらalertを出す
$('p').on('click', function() { alert('Clicked.'); });
- Ajax
// サイトトップを取ってくる
$.ajax({
url: '/',
method: 'GET'
}).done(function(body) {
console.log(body);
});
DOMセレクタ
- ChromeDevToolsのコンソールにはデバッグ用の関数がある
- firefoxにもあったし，IEにもありそう
デバッグコンソールにある$と$$
-
$(selector[, parentNode])は最初にヒットするDOMを返す
// 最初にヒットするDOMを返す
delete $; // delete jQuery
$('a') === document.querySelector('a'); // true
-
$$(selector[, parentNode])はヒットするDOMのリストを返す
var dollars = $$('a');
var normal = document.querySelectorAll('a');
dollars.length === normal.length; // true
DOMセレクタの実装
-
querySelector()があるのでそれにつなげてやればいい
var $ = function(sel, node) {
return (node || document).querySelector(sel);
};
var $$ = function(sel, node) {
return (node || document).querySelectorAll(sel);
};
注）デバッグコンソールに貼り付けて試すとき，1度変数宣言してからでないと代入されなかった．原因求む．
- 引数1つだと
nodeはundefinedなのでdocument.querySelectorが呼ばれる
NodeListの問題
-
querySelectorAll()で取れるDOMリストは 配列ではない- NodeListが返ってくる
- デバッグ用
$$()は配列で返る
// 前述のコードを読み込んだあと
$$('a').forEach; // undefined
-
Array.from()をつかうとarray-likeなオブジェクトを配列にできる- MDN
- ES2015から使えるようになった
- それまでは
Array.prototype.slice.call(arrLike);とかやってた-
Array.fromnotEqualsArray.prototype.slice.call
-
var $$ = function(sel, node) {
var ArrayFromNL = Array.from || function(nodes) {
return Array.prototype.slice.call(nodes);
};
var nodeList = (node || document).querySelectorAll(sel);
return ArrayFromNL(nodeList);
};
イベントリスナー
-
addEventListenerをonにしてやればいい- DOMだけならば
HTMLElementに対して行う - すべてならば
EventTargetに対して行う-
XMLHttpRequestやdocumentなど
-
- DOMだけならば
EventTarget.prototype.on = EventTarget.prototype.addEventListener;
-
offの実装は手間なので省略-
removeEventListenerは削除したい関数が引数に必要- つまり無名関数は削除できない
- そう考えるとjQuery便利
- jQueryは無名関数を保管しているので削除できる
-
attachEvent
- 古いIEでは
attachEventを使う- MDN
- ぼくはIE使わないから(ry
- jQueryはそこもしっかりやってくれる
Ajax
-
fetch関数というものがある- Chrome42, firefox39 から搭載
- Githubからpolyfillが出ている
- 大体のブラウザで動く
- Promiseをつかっている
fetch('/', {
method: 'GET'
})
.then((res) => {
if (parseInt(res.status/100) !== 2) {
throw new Error(`${res.status} ${res.statusText}`);
}
return res.text();
})
.then((body) => {
console.log(body);
})
.catch((err) => {
console.error(err.stack);
});
-
$.ajaxは2種類書き方がある
$.ajax('/', {
method: 'GET'
})
.done((body) => {
console.log(body);
})
.fail((err) => {
console.error(err);
});
$.ajax({
url: '/',
method: 'GET'
})
.done((body) => {
console.log(body);
})
.fail((err) => {
console.error(err);
});
- どこまで似せるか
- 5分しかないし最初のほうだけにする
-
fetch()に似ているから楽
$.ajax = function() {
return fetch.apply(window, arguments)
.then(function(res) {
if (parseInt(res.status/100) !== 2) {
throw new Error(res.status + ' ' + res.statusText);
}
return res.text();
});
};
$.ajax('/', {
method: 'GET'
})
.then((body) => {
console.log(body);
})
.catch((err) => {
console.error(err.stack);
});
- 正直
fetch()をそのまま使うほうがよい
まとめ
var $ = function(sel, node) {
return (node || document).querySelector(sel);
};
var $$ = function(sel, node) {
var ArrayFromNL = Array.from || function(nodes) {
return Array.prototype.slice.call(nodes);
};
var nodeList = (node || document).querySelectorAll(sel);
return ArrayFromNL(nodeList);
};
EventTarget.prototype.on = EventTarget.prototype.addEventListener;
$.ajax = function() {
return fetch.apply(window, arguments)
.then(function(res) {
if (parseInt(res.status/100) !== 2) {
throw new Error(res.status + ' ' + res.statusText);
}
return res.text();
});
};
- コード短いけど，5分で解説は無理でした
-
$()のコードだけでも書けると便利だと思う
-
- 素直にjQuery使ったほうがいい気がする
- 勉強も兼ねてこういうことするのはよいと思う
- 最近PCの
qキーが効かない- つらい