JavaScriptについて学んだことを書き留めておく自分用のメモです。Twitterに投稿した内容に追記を加えてまとめています。できるだけ継続して追記していきたいと思います。

Promise（非同期処理）

• 非同期処理では同時に実行している処理が複数ある。
• Promiseは非同期処理の結果を表すビルトインオブジェクト。
• Promiseは、待機（pending）、成功（fulfilled）、失敗（rejected）の3つの値を持つ。
• Promiseでは非同期処理に成功した場合はthen()にコールバック関数として処理が渡され、非同期処理に失敗した場合はcatch()に渡される。

Syntax

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

// or

const promise2 = doSomething().then(successCallback, failureCallback);

Fetch API

• HTTP通信を使ってデータを取得するためのAPI。
• Fetch APIによってページの再読み込みをせずに指定URLからデータを取得できる。
• XMLHttpRequestよりもさらに柔軟。
• リクエストのためにはfetch()を用いる。

コード例

// DOM
const button = document.getElementById('addButton');
const lists = document.getElementById('lists');

// 関数
async function getPosts() {
  // データのやりとり
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return posts;
}

async function listPosts() {
  const posts = await getPosts();
  posts.forEach(addList);
}

// イベント
function addList(post) {
  const list = document.createElement('li');
  list.innerText = post.title;
  lists.appendChild(list);
}

window.addEventListener('load', listPosts);
button.addEventListener('click', listPosts);

高階関数

• 引数に関数を受け取った関数を高階関数という。
• 反復処理でよく使われるのは、ArrayメソッドのforEach()、map()、filter()、reduce()。
• これらは引数にコールバック関数を受け取り、高階関数と呼ばれる。

Syntax

function 高階関数(コールバック関数) {
  コールバック関数();
};

コード例

// コード例。
function writeDiary() {
  console.log('日記を書く');
};

function drinkWater() {
  console.log('水を飲む');
};

function washFace() {
  console.log('顔を洗う');
};

function wakeUp(fn) {
  if( window.confirm('起きましたか？') ) {
    fn(); // コールバック関数の処理
  } else {
    console.log('まだ寝ています');
  }
};

wakeUp(drinkWater);
// 「起きましたか？」にOKを押すと、「水を飲む」が出力。
// wakeUp()関数内の引数を変えると、それぞれの処理結果が出力される。writeDiaryなら「日記を書く」、washFace()なら「顔を洗う」が出力。

reduce()

• 配列のそれぞれの要素に対して、左から右に処理して単一の値を生成する。
• 配列の全ての要素の和を出力したいときに使う。

Syntax

const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

コード例

const array = [1, 2, 4, -3];
const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log(sum);
// 4と出力される。
// 1 + 2 + 4 + (-3) = 4という計算結果。以下何が起こっているかの詳細。
// 1回目の計算：accumulator = 1、currentValue = 2として値が入る。return 1 + 2となり、accumulator = 3となる。
// 2回目の計算：accumulator = 3、currentValue = 4として値が入る。return 3 + 4となり、accumulator = 7となる。
// 3回目の計算：accumulator = 7、currentValue = -3として値が入る。return 7 + (-3)となり、accumulator = 4となる。
// 結果、4が出力される。

map()

• 配列に対して演算をおこない、別の新しい配列をつくる。
• 配列の要素全てに処理を適用する。
• IDと名前を持つオブジェクトの配列からIDだけの配列をつくるときに使う。
• map()メソッドはforEach()と似ているが、実行後の結果を配列として返す点が異なる。

Syntax

let new_array = array.map(function callback( currentValue[, index[, array]]) {
    // 新しい配列の要素を返す
}[, thisArg])

コード例

const numberArray = [1, 4, 9, 16];
const map10x = numberArray.map(param => param * 10);
console.log(map10x);
// [10, 40, 90, 160]と出力される。
// 引数（この場合はparam）は別の単語でも良い。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ', 'グレープフルーツ', 'アボカド'];
console.log(fruitsArray.map(fruits => fruits.length));
// [3, 3, 3, 8, 4]と出力される。
// 文字列の配列を元にして、文字数を表示する配列を生成。

アロー関数式

• 関数を簡略化して記述するときに使う。
• thisを固定したいときに使う。アロー関数を使うとthisの実行箇所に関わらず参照先が変わらなくなり、コードが読みやすくなる。
• 1行で表す場合はreturnを省略できる。複数行になる場合は中括弧とreturnが必要。

Syntax

param => expression
(param1, paramN) => expression

コード例

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ', 'グレープフルーツ', 'アボカド'];
console.log(fruitsArray.map(fruits => fruits.length));
// [3, 3, 3, 8, 4]と出力される。

const button = document.querySelector('.button'); 
button.addEventListener('click', (event) => {
  console.log(fruitsArray);
});
// buttonというclassの付いた要素をクリックしたときに、['リンゴ', 'ミカン', 'ブドウ', 'グレープフルーツ', 'アボカド']と出力される。

join( )

• 配列内の文字要素を結合して表示するときに用いる。
• 要素と要素の間に表示する区切り文字を指定できる。

Syntax

array.join([separator])

• separator：配列の各要素を区切る文字列を指定する。区切り文字を省略した場合は「,」が表示される。
• separatorは文字列としてシングルクオーテーションで表記する。

コード例

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
console.log(fruitsArray.join());
// リンゴ,ミカン,ブドウと出力される。

console.log(fruitsArray.join(''));
// リンゴミカンブドウと出力される。

console.log(fruitsArray.join('-'));
// リンゴ-ミカン-ブドウと出力される。

console.log(fruitsArray.join(' '));
// リンゴ ミカン ブドウと出力される。

splice()

• 配列から既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、内容を変更する。
• 配列の要素の一部を置き換えたいときにも用いる。

構文

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

• start：配列を変更する戦闘の位置（インデックス）。
• deleteCount（省略可）：startの位置から取り除く古い要素の個数。取り除く数。
• item1, item2, …（省略可）：配列に追加する要素。
• startから始まる。要素を指定しなかった場合、splice()は単に配列から要素を取り除く。

コード例

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(1, 0, 'グレープフルーツ');
console.log(fruitsArray);

// ['リンゴ', 'グレープフルーツ', 'ミカン', 'ブドウ']と出力される。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(2, 0, 'グレープフルーツ');
console.log(fruitsArray);

// ['リンゴ', 'ミカン', 'グレープフルーツ', 'ブドウ']と出力される。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(0, 1, 'グレープフルーツ');
console.log(fruitsArray);

// ['グレープフルーツ', 'ミカン', 'ブドウ']と出力される。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(0, 2, 'グレープフルーツ');
console.log(fruitsArray);

// ['グレープフルーツ', 'ブドウ']と出力される。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(0, 1);
console.log(fruitsArray);

// ['ミカン', 'ブドウ']と出力される。
// 追加するitemを指定していないので、単に指定要素が取り除かれる。

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.splice(1, 1, 'グレープフルーツ', 'アボカド' );
console.log(fruitsArray);

// ['リンゴ', 'グレープフルーツ', 'アボカド', 'ブドウ']と出力される。

for…of

• 配列の要素を反復処理（繰り返し処理）したいときに用いる。反復的な処理をするループを作成する。
• 配列のループ処理で要素のインデックス（この場合は通し番号などの識別情報）が不要なときに使う。

Syntax

for (const variable of iterable) {
  statement
}

• variable：変数を指定する。const、let、varで宣言可能。
• iterable：反復処理が行われる反復可能なプロパティを持つオブジェクト。

コード例

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
for (const fruit of fruitsArray) {
  console.log(fruit);
}

// 'リンゴ', 'ミカン', 'ブドウ'が順に出力される。
// fruitは要素、fruitsArrayは配列。

addEventListener()

• 何らかのイベントに応じて処理をおこなうために用いる。
• 主なイベントは、クリック、タップ、スクロール、画像の読み込み完了、JSONの読み込み完了など。
• 主な対象はElement、Document、Windowなど。XMLHttpRequestも対象。

Syntax

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

• type：イベントの種類。click、mousemove、keypress、load、scroll、resizeなど。
• listener：イベントが発生するときに通知を受け取るオブジェクト。
• option：capture、once、passiveなどのオプション。

コード例

button.addEventListener('click', () => {
  if (button.textContent === 'ON') {
      button.textContent = 'OFF';
  }
  else {
      button.textContent = 'ON';
  }
});

// 初期状態のテキストON。クリックするたびにONとOFFが切り替わる。
// buttonはあらかじめ定義した変数。

appendChild()

• 親要素の末尾に要素を追加するメソッド。
• 動的に表示要素を増やしたいときに用いる。

Syntax

appendChild(aChild);

• aChild：指定された親ノードに追加するノード。

コード例

let text1 = document.createElement('p');
text1.textContent = 'Grapes are fruit.';
document.body.appendChild(text1);

// Grapes are fruit.と出力される。

reverse()

• 配列の要素を反転させる（要素の並び順を反転させる）。
• 最初の要素が最後の要素に、最後の要素が最初の要素になる。
• 配列の並び順を逆順にしたいときに用いる。

Syntax

a.reverse()

コード例

const fruitsArray = ['リンゴ', 'ミカン', 'ブドウ'];
fruitsArray.reverse();
console.log(fruitsArray);

// ['ブドウ', 'ミカン', 'リンゴ']と出力される。

try…catch

• コードがクラッシュする前にエラーを検知する仕組み。
• tryブロックの中のコードがエラーを起こした場合、catchブロックに移る。
• その際にtryブロックの残りの部分は実行されない。
• catch(e)の(e)は慣習的にerrorの意味で使われる。
• エラーの種類を検知したいときに用いる。
• エラーが発生しても処理を止めたくないときに用いる。
• エラーが発生したら別の処理を開始したいときに用いる。

Syntax

try {
  try_statements
}
catch (exception_var) {
  catch_statements
}
finally {
  finally_statements
}

• try_statements：エラーが発生しなかった場合に実行される。
• catch_statements：エラーが発生した場合に実行される。
• finally_statements：エラーの発生に関係なく実行される。

コード例

const grape = 'ブドウ';
try{
  grape = 'ミカン';
} catch(e){
  console.log('エラーが発生。');
}
console.log(grape);

// tryブロックの中で定数grapeを'ミカン'に書き換えようとするがエラーのため実行されず、catchブロックの「エラーが発生。」が出力。
// 最終行はブドウが出力。

// try...catchを使わなかった場合の例。
const grape = 'ブドウ';
grape = 'ミカン'; // 定義済みの定数を書き換えようとしてエラーになる。
console.log(grape);

// Uncaught TypeError: Assignment to constant variable.というエラーメッセージが出力。
// エラーのため最終行は出力されない。

参考文献

• MDN Web Docs
• Grasshopper
• 池田泰延 、鹿野壮『JavaScript コードレシピ集』
• JavaScript Primer