2018

9

11

脱jQueryのコードまとめてやんよ!!!

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

jQueryもなんだかんだでメジャーバージョンも３までいって、バージョン依存だったり中規模クラスのサイトになるとコードの再利用やらコンポーネント管理しにくかったりとかの問題もチラホラ出てきて簡単に書けるコードの数々が積もっていつの間にか払拭できない負債になる様な場面に出くわした方も多いんじゃないでしょうか？ かくいう私も長い事jQueryで書く事に慣れてしまうとプレーンのJavaScriptをコード書くのに必要以上に時間が掛かってしまうので覚えるよりまとめます！

DOM要素の指定を脱jQuery

id要素を取得

var idElem = document.getElementById("id");

class要素を取得

var classElem = document.getElementsByClassName("class");

タグ要素を取得

var tagElem = document.getElementsByTagName('p');

最初にマッチする要素を取得

var query = document.querySelector("div span");

マッチする全ての要素を取得

var query = document.querySelectorAll("div span");

親要素を取得【parentメソッド】

document.getElementById("id").parentNode;

子要素を取得【childrenメソッド】

document.getElementById("id").children;

最初にマッチする子要素を取得

document.getElementById("id").firstElementChild;

最後にマッチする子要素を取得

document.getElementById("id").lastElementChild;

１つ前の要素を取得【prevメソッド】

document.getElementById("id").previousElementSibling;

１つ後の要素を取得【nextメソッド】

document.getElementById("id").nextElementSibling;

指定要素内のすべての要素を取得【findメソッド】

const el = document.getElementById("id");
// class名「item」が存在すればtrue
if(!!el.querySelector(".item")){
  alert("true");
}else{
  alert("false");
}

指定要素のhtmlタグを取得【htmlメソッド】

let tag = document.querySelector("a"). innerHTML;

指定要素の属性を取得【attrメソッド】

// aタグのリンク先を取得
let link = document.querySelector("a").getAttribute('href');

指定要素のテキストを取得【textメソッド】

let text = document.querySelector("p").textContent;

指定要素のスタイルを取得【cssメソッド】

const el = document.getElementById("id");
let el_display = getComputedStyle(el)["display"];

指定要素の横幅を取得【widthメソッド】

const el = document.getElementById("id");
let el_w = parseFloat(getComputedStyle(el, null).width.replace("px", ""))

指定要素の高さ取得【heightメソッド】

const el = document.getElementById("id");
let el_H = parseFloat(getComputedStyle(el, null).height.replace("px", ""))

指定要素のオフセット値を取得【offsetメソッド】

const el = document.getElementById("id");
var rect = el.getBoundingClientRect();

console.log("要素x座標：" + rect.x);
console.log("要素y座標：" + rect.y);
console.log("要素横幅：" + rect.width);
console.log("要素高さ：" + rect.height);
console.log("ドキュメント先頭から要素までの縦スクロール値：" + rect.top);
console.log("ドキュメント左端から要素までの幅：" + rect.left);
console.log("ドキュメント終点から要素までの縦スクロール値：" + rect.bottom);

指定要素のmargin幅を含まない横幅を取得【outerHeightメソッド】

const el = document.getElementById("id");
let el_inW = el.offsetWidth;

指定要素のmargin幅を含む横幅を取得【outerHeightメソッド】

const el = document.getElementById("id");
function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

let el_outW = outerWidth(el);

指定要素のmargin幅を含まない高さを取得【outerHeightメソッド】

const el = document.getElementById("id");
let el_inH = el.offsetHeight

指定要素のmargin幅を含む高さを取得【outerHeight(true)】

const el = document.getElementById("id");

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}
let el_outH = outerHeight(el);

指定要素の座標を取得【positionメソッド】

const el = document.getElementById("id");
let offsetT = el. offsetTop;
let offsetL = el.offsetLeft;

DOM構造の操作を脱jQuery

要素を新規作成

var div = document.createElement('div');
div.textContent = 'hoge';

最後の子要素として追加【appendメソッド】

document.getElementById("id").appendChild(div);

最初の子要素として追加【before()】

const $main = document.getElementById("id");
$main.insertBefore(div, $main.firstChild);

要素の直後に追加【afterメソッド】

const $main = document.getElementById("id");
$main.parentNode.insertBefore(div, element.nextSibling);

classを追加【addClassメソッド】

// 指定classのみを追加
document.getElementById("main").classList.add("add-class");

// 複数classを追加
document.getElementById("main").classList.add('make', 'me', 'look', 'rad');

classを削除【removeClassメソッド】

// 指定classのみを削除
document.getElementById("main").classList.remove("remove-class");

// 複数classを削除
document.getElementById("main").classList.remove('cool', 'make', 'me');

classを切り替え【toggleClassメソッド】

const $main = document.getElementById("main");
$main.classList.toggle("toggle-class");

// clickイベントの場合
$main.addEventListener('click', () => {
  $main.classList.toggle('toggle-class');
});

classの存在を確認【hasClassメソッド】

const $main = document.getElementById("main");

// "active"クラスを持っていればtrueが返る
var a = $main.classList.contains("active");
console.log(a); // true

// "active"クラスを持っていたら削除・持っていなかったら追加
if ($main.classList.contains('active')) {
  $main.classList.remove('active');
} else {
  $main.classList.add('active');
}

指定要素をクローン【cloneメソッド】

document.getElementById("id").cloneNode(true);

指定要素内に含まれているか調べたい要素の有無を確認【contains()】

const el =  document.getElementById("id");
const child = document.getElementById("child");
if(el !== child && el.contains(child);){
  alert("true");
}else{
  alert("false");
}

指定要素内をループ処理【eachメソッド】

var elements = document.querySelectorAll(".item");
Array.prototype.forEach.call(elements, function(el, i){
    alert(i);
});

指定要素内を空に【emptyメソッド】

while(el.firstChild)
  el.removeChild(el.firstChild);

指定要素内にある対象要素に【filterメソッド】

// 指定要素内の子要素数を表示
function filterFunc(index){
    var child = index.children;
    console.log(child.length)
}
Array.prototype.filter.call(document.querySelectorAll(".item"), filterFunc);

指定要素のインデックスを取得【indexメソッド】

const el =  document.getElementById("id");
function index(el) {
  if (!el) return -1;
  var i = 0;
  do {
    i++;
  } while (el = el.previousElementSibling);
  return i;
}

指定要素内を空に【isメソッド】

el === otherEl;

Form要素関連を脱jQuery

input、textareaの値取得

var textbox = document.getElementById('main').value;

radioボタン(単品)の値取得

var radio = document.getElementById("main");
if(radio.checked){
    console.log("チェックされている");
} else {
    console.log("チェックされていない");
}

radioボタン(グループ)の値取得

var formElem = document.getElementById("form") ;
var radioList = formElem.radio;
var val = radioNodeList.value;
if (val === "") {
    console.log("未選択");
} else {
    console.log(val);
}

select要素の値変更を取得

const selectElement = document.querySelector('.form-select');
selectElement.addEventListener('change', (event) => {
    console.log(event.target.value);
});

input要素の値変更を取得

const input = document.querySelector('input');
input.addEventListener('change', updateValue);
function updateValue(e) {
  console.log(e.srcElement.value);
}

要素ハック関連メソッド系から脱jQuery

css()メソッド

// 要素#mainの文字色を#fffに変更
document.getElementById("main").style.color = "#fff";

// プロパティに"-"が含まれる場合(background-color)
document.getElementById("main").style.backgroundColor = "#fff";

// 一括でstyle指定したい場合
document.getElementById("main").setAttribute("style","position:absolute; bottom:0, left:0; z-index:1;");

// 複数の要素に共通style指定したい場合
const cssString = "font-size:18px; background-color:red";
document.getElementById("elemA").setAttribute("style",cssString);
document.getElementById("elemB").setAttribute("style",cssString);

// 既存要素のスタイル状態を取得
var thisStyle = document.defaultView.getComputedStyle(document.getElementById("main"), null).color;

attr()メソッド

// 画像要素#thumbのsrc属性を取得
document.getElementById("thumb").getAttribute("src");

// 画像要素#thumbのsrc属性を「/thumb.png」に変更
document.getElementById("thumb").setAttribute("src", "/thumb.png")

hide()メソッド

el.style.display = 'none';

show()メソッド

el.style.display = '';

hover()メソッド

const btn = document.querySelector('.btn');
btn.addEventListener('mouseenter', (e) => {
  console.log('マウスオーバー');
});
btn.addEventListener('mouseleave', (e) => {
  console.log('マウスアウト');
});

on()メソッド

// 対象がIDを持っている場合
document.addEventListener("click", function(event) {
    if(event.target.id === "button") {
        alert("クリックされました");
    }
}, false);

// 対象がclassを持っている場合
document.addEventListener("click", function(event) {
    if(event.target.classList.contains("button")) {
        alert("クリックされました");
    }
}, false);

post()メソッド

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://httpbin.org/post');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send('data=yanyo&since=2012');

getJSON()メソッド

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // JSONデータ取得成功
    var data = JSON.parse(this.response);
  } else {
    // JSONデータ取得失敗
  }
};
request.onerror = function() {
  // 接続エラー
};
request.send();

post()メソッド

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

ajax()メソッド

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 成功時の処理
    var resp = this.response;
  } else {
    // 失敗時の処理
  }
};

request.onerror = function() {
  // 接続エラー
};
request.send();

エフェクトメソッド系から脱jQuery

animate()メソッド

// 2秒間で上100px、左100px移動
document.getElementById("main").animate([
    { 'top' : '100px' },
    { 'left' : '100px' }
], 2000);

// 5秒間で２フレームに分けてフェードイン
document.getElementById("main").animate([ 
  { opacity: 0, color: "#fff"}, 
  { opacity: 1, color: "#000"}
], 5000);

fadeIn()メソッド

el.classList.add('show');
el.classList.remove('hide');

.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

fadeOut()メソッド

el.classList.add('hide');
el.classList.remove('show');

.show {
  opacity: 1;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}

簡易ユーティリティ操作

配列のループアクセス【eachメソッド】

let array = [1, 2, 3];
array.forEach(function(item, i){
  console.log(item + 1);
});

新規配列要素をリターン【mapメソッド】

let array = ['A', 'B', 'C'];
let array = array.map(function(value, index){
  return value + 'だよ';
});

console.log(array) --> ['Aだよ', 'Bだよ', 'Cだよ'];

個別オブジェクトを結合【extendメソッド】

var extend = function(out) {
  out = out || {};
  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;
    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }
  return out;
};

extend({}, objA, objB);

配列内のアイテム確認【inArrayメソッド】

let array = ["A","B","C"];

console.log(array.indexOf("C")); --> 2
console.log(array.indexOf("D")); --> -1
このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ