【JavaScript】 便利メソッド 【ゆるっとまとめ】

はじめに

産休・育休に入って1年間、全くコードを書かなかったら忘れてしまっていた...
頑張れ、脳。記憶力・・！

注意事項

あまり使わない引数や、直感的に理解できるメソッドの説明は省略しています。
下記にピックアップされているメソッドは個人的によく使うものたちで、
全てではありません のでご注意ください。

対象者

• 育休してて忘れている人（私です）
• JavaScript 初〜中級者

Array 編

join

配列の全ての要素を連結して、新しい文字列を作成する

const date = ['2020', '02', '23'];
const result = date.join('.');

console.log(result); // "2020.02.23"

forEach

配列のループ処理
配列の各要素に対して一度ずつ実行する

const animals = ['dog', 'cat', 'fox'];
/**
 * # forEach
 * value: 現在処理されている配列の要素
 * index: 現在処理されている配列の要素のインデックス
 * array: 元々の配列（あまり使わないので下記では省略）
 */
animals.forEach((value, index) => {
  console.log(index, value);
});

// 0 "dog"
// 1 "cat"
// 2 "fox"

ちなみに Object.keys と組み合わせることで、 Object の各要素に対して処理を実行できる

const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon'
};

Object.keys(animals).forEach((key, index) => {
  console.log(index, key, animals[key]);
});

// 0 "dog" "wan-wan"
// 1 "cat" "nya-n"
// 2 "fox" "kon-kon"

Object.keys でも 上記のような forEach 処理は実現できるが、
Object の各要素に対して処理を実行する手法として Object.entries を活用する方法もある。
Object.entries についての詳細は Object.entries を参照

every

配列の 全て の要素が、与えられた条件を満たしているかどうかチェックする

// 例１
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 5);
console.log(result); // false

// 例2
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 10);
console.log(result); // true

some

配列の 少なくとも1つ の要素が、与えられた条件を満たしているかどうかチェックする
なお、条件を満たした段階でループは終了する

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.some((num) => num > 3);
console.log(result); // true

// numbers[3]以降は評価されずに終了

filter

与えられた条件を配列要素それぞれに対して実行し、
条件を満たしている新しい配列を作成する
every や some が真偽値なのに対し、こちらは配列を返す （チョット似テル）

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((num) => num < 3);
console.log(result); // [1, 2]

find

与えられた条件を満たしているか、配列要素の頭から実行（検索）し、
条件を満たした 最初の配列の要素 を返す
なお、条件を満たした段階でループは終了する

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.find((num) => num > 3);
console.log(result); // 4

// numbers[4]以降は評価されずに終了

map

配列のすべての要素に対して、与えられた関数をそれぞれ実行し、
関数で返された値で新しく配列を作る

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.map((num) => {
  return num * 2;
});
console.log(result); // [2, 4, 6, 8, 10, 12]

reduce

配列の各要素を累積して、1つの累積値にする目的でよく使用する

• 数値なら「配列要素の合算値を求める」
• 文字列なら「全ての文字要素を1つの文字列にする」
• 配列から Object を作る
  など

例1: 配列要素の合算値を求める

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

/**
 * # reduce
 * accumulator: returnされた演算結果 （初期値はarray[0]）
 * currentValue: 現在処理されている配列の要素 （初期値はarray[1]）
 * currentIndex: 現在処理されている配列の要素のインデックス （あまり使わないので下記では省略）
 * array: 元々の配列 （あまり使わないので下記では省略）
 */
const result = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(result); // 45

|currentIndex| accumulator | currentValue | 戻り値 |
| -----: | ----------------------------------------------: | -------------------------------------------: | -----------: | ----------------------------------------: |
| 1| 1
numbers[0]| 2
numbers[1] | 3
1 + 2 |
| 2| 3
1 回目の戻り値| 3
numbers[2] | 6
3 + 3 |
| 3| 6
2 回目の戻り値 | 4
numbers[3] | 10
6 + 4 |
| 4| 10
3 回目の戻り値 | 5
numbers[4] | 15
10 + 5 |
| 5| 15
4 回目の戻り値 | 6
numbers[5] |21
15 + 6 |
| 6| 21
5 回目の戻り値 | 7
numbers[6] |28
21 + 7 |
| 7| 28
6 回目の戻り値 | 8
numbers[7] |36
28 + 8 |
| 8| 36
7 回目の戻り値 | 9
numbers[8] |45
36 + 9 |

例2: 配列から Object を作る

const animals = [
  { id: 'ZOO01', name: 'cat' },
  { id: 'ZOO02', name: 'dog' },
  { id: 'ZOO03', name: 'fox' }
];

const result = animals.reduce((accumulator, currentValue) => {
  accumulator[currentValue.id] = currentValue.name;
  return accumulator;
}, {});

console.log(result);
// {
//   ZOO01: "cat"
//   ZOO02: "dog"
//   ZOO03: "fox"
// }

第2引数について

reduce の第2引数はオプションだが、空の配列を実行するとエラーになる

[].reduce((a, b) => {
  return a + b;
});

// Uncaught TypeError: Reduce of empty array with no initial value

予期せぬ実行結果になる可能性があるため、基本的に reduce には初期値を設定すると安全！

[].reduce((a, b) => {
  return a + b;
}, 0);

flat

ネストされた配列構造を平らにする

const numbers = [1, 2, [3, 4]];
numbers.flat(); 
// [1, 2, 3, 4]

flat メソッドは配列内に空要素があった場合、削除するため要注意

const numbers = [1, 2, ,4];
numbers.flat(); 
// [1, 2, 4]

includes

特定の要素が含まれているかどうかチェックする

const animals = ['cat', 'dog', 'fox', 'red-panda'];

const hasCats = animals.includes('cat');
console.log(hasCats); // true

const hasPanda = animals.includes('panda');
console.log(hasPanda); // false

String 編

split

文字列を分割して配列にする

const date = `2020/02/23`;
const result = date.split('/');

console.log(result); // ["2020", "02", "23"]

split して分割したものを改めてくっつけたい場合は、 joinを使うと良い
join についての詳細は join を参照

concat

文字列に別の文字列を連結して、新しい文字列をつくる

const str1 = `Hello.`;
const str2 = `World!`;
const result = str1.concat(str2);

console.log(result); // > "Hello.World!"

startsWith

文字列の先頭が指定した文字列で始まるかどうかチェックする

const str = `Hello.World!`;
const result = str.startsWith('Hel');

console.log(result); // true

includes

文字列中に特定の文字列が含まれているかどうかチェックする

const str = `Tom and Jerry are cat and rat.`;
const result = str.includes('at');

console.log(result); // true

trim

文字列の両端から空白や改行文字（LFやCR）、スペースやタブなどを取り除く

const str = `   Hello！！






`;
const result = str.trim();

console.log(result); // "Hello！！"

padStart

文字列が任意の長さになるよう、指定した文字列で先頭から字詰めする

/**
 * # padStart
 * 
 * targetLength: 文字列の長さ。現在の文字列の長さよりも短い場合、現在の文字列が返る
 * padString: 字詰め文字列。 targetLength より長い場合は、右からその長さ分が切り捨てられる
 */

'targetString'.padStart(targetLength, padString);

5桁を指定し、空いた部分は頭から*で字詰め

const targetString = 'abc';
const result = targetString.padStart(5, '*');

console.log(result); // **abc

5桁を指定し、空いた部分は頭から12345で字詰め

const targetString = 'abc';
const result = targetString.padStart(5, '12345');

console.log(result); // 12abc

targetString + padString が指定した桁数より長い場合は、
padString が右からその長さ分切り捨てられる
12345abc -> 12abc

Object 編

entries

• オブジェクトを配列に変換する
  • Object {key: value} -> Array [key, value]
• Object だけど配列操作を行いたい際などに起点となる便利なメソッド

オブジェクトを配列に変換する

Object.entries 単体を使ってオブジェクトを配列に変換

const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon'
};

const result = Object.entries(animals);
console.log(result);
//  [
//    ["dog", "wan-wan"],
//    ["cat", "nya-n"],
//    ["fox", "kon-kon"],
//  ]

上記のような形だとあまり使いみちがない（あったらゴメンナサイ）
基本的に Object.entries で配列にした後、map でコードの柔軟性を高めると良い

map についての詳細は map を参照

Object.entries と map を組み合わせる

const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon',
};

const result = Object.entries(animals).map(([key, value]) => ({
  name: key,
  cry: value,
}));

console.log(result);
// [
//   {
//     name: "dog",
//     cry: "wan-wan",
//   },
//   {
//     name: "cat",
//     cry: "nya-n",
//   },
//   {
//     name: "fox",
//     cry: "kon-kon",
//   },
// ];

使いやすい形になった

引用 & 参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object

まとめ

• 1年以上コードを書かないでいると浦島状態
  • 頭がリセットされるので、新しい視点でコードを見れるようになる（ぽじてぃぶ）
  • 育休はいいぞ

最後までお読みいただき、ありがとうございました！