JavaScript

JavaScript

Description

基本

二重否定の論理演算子

値を boolean に変換

var foo = !!"sample";

// true
console.log(foo);

ECMAScript6 (ECMAScript2015)

クラス構文

prototype ベースを、クラス形式の構文で記述できる。

// prototype base
var Person = function(name) {
  this.name = name;
};
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.getName());
};
Person.prototype.getName = function() {
  return this.name;
};

// class base
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log("Hello, I'm " + this.getName());   
  }
  getName() {
    return this.name;
  }
}

分割代入

配列やオブジェクトの要素を、まとめて定義する各変数に分割して代入する。

const array = [10, 20, 30];

const item1 = array[0];
const item2 = array[1];
const item3 = array[2];

const [ item1, item2, item3 ] = array; 

const user = {
    id: "ID0001",
    name: "Taro",
    age: 28,
    birthday: "1990/05/10"
};

const { id, name, age, birthday } = user;

スプレッド構文

配列やオブジェクトの要素を展開する。

const array = { "test", "test2", "test3" };
const array2 = { "test4", "test5" };

const spread = { ...array, ...array2 }

ECMAScript2017

async / await

async function () {
  const response = await command.getData({ id: "test" });
  if (response.isError()) {
    throw new TypeError("Something error.");
  }
}

用語

カリー化

複数の引数を持つ関数を、単一引数の関数にして、残り引数と戻り値を取る関数を返すように組み替える。

const func = (arg, arg2, arg3) => {
  // Do something
};
func("arg", "arg2", "arg3");

const curriedFunc = (arg) => {
  return (arg2) => {
    return (arg3) => {
      // Do something
    };
  };
};
curriedFunc("arg")("arg2")("arg3");

DOM 基本

HTML DOM Elements

id で要素を取得

var element = document.getElementById('sample');

タグで要素を取得

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

• 複数の要素が取得される可能性がある

class で要素を取得

var elements = document.getElementsByClassName('sample');

• 複数の要素が取得される可能性がある

Selectors

ID

#sample

<div id="sample">
</div>

Element

div p li etc.

<div>
  <p>sample</p>
  <ul>
    <li></li>
  </ul>
</div>

Class

.sample

<div class="sample">
</div>

Wild Card

// sample で始まる class の要素をすべて取得
var elements = document.querySelector('.sample*');

<div class="sample1">
  <p class="sample1-1"></p>
</div>
<div class="sample2"></div>

Multiple selectors

AND

selector1 selector2 ... selectorN 半角スペースで連結

// すべてに合致する要素をすべて取得
var elements = document.querySelector('div #sample1 .sample2');

<div id="sample1" class="sample2">
</div>

OR

selector1, selector2, ..., selectorN カンマで連結

// いずれかに合致する要素をすべて取得
var elements = document.querySelector('#sample1, .sample2, div');

<div>
  <p id="sample1">sample</p>
  <ul class="sample2">
    <li></li>
  </ul>
</div>

Reference

• ES2015(ES6) 入門
• イマドキのJavaScriptの書き方2018
• JS スプレッド演算子を理解する - Qiita
• Selectors - jQuery 日本語リファレンス
• JSON.stringifyについて改めて調べる