[チートシート]JavaScriptの組み込み関数・メソッド集

Frontend
Frontend

この記事では、JavaScriptでよく出る組み込み関数やメソッドの一部をまとめています。

忘れた時用のチートシートとしてぜひご活用ください。

管理人
管理人

一部なのでこれを元に足しても良いかも!

JavaScriptの組み込み関数・メソッド

1. 数値操作

// --------------- 変換 --------------- //

// 文字列から数値への変換
parseFloat('123.45')       // 123.45
parseInt('123')            // 123

// --------------- 数値判定 --------------- //

// NaNかどうか
isNaN(123)                 // false
isNaN('abc')               // true

// 数値かどうか(整数・少数など問わず。Number.isFinite()でワンセット)
Number.isFinite(123)       // true

// --------------- 丸め・桁数指定 --------------- //

// 小数点以下2桁に丸めてStringで返す
(123.456).toFixed(2)       // "123.46"

// 表示させる桁数を指定してStringで返す
(123.456).toPrecision(4)   // "123.4"

2. 配列操作

const arr1 = [1, 2, 3]; 

// 配列生成
Array(5).fill(0)                              // [0, 0, 0, 0, 0]

// 条件に一致する要素を抽出: filter
arr1.filter(x => x > 1);                        // [2, 3]

// 配列内の全要素に順次処理を行い、累積した単一の値を生成: reduce
arr1.reduce((sum, current) => sum + current, 0) // 6 // 0は初期値

// 追加と削除(末尾): push, pop
arr1.push(4);                                   // [1, 2, 3, 4]
arr1.pop();                                     // [1, 2]

// 追加と削除(先頭): shift, unshift
arr1.unshift(0);                                // [0, 1, 2, 3]
arr1.shift();                                   // [2, 3]

// 部分抽出と置換: slice, splice
  // slice(開始位置, 終了位置)  // 非破壊
  // splice(開始位置[, 削除カウント[, 追加要素1[, 追加要素2, ...]]])  // 破壊
arr1.slice(1, 3);                               // [2, 3]
arr1.splice(1, 2, 'a', 'b');                    // [1, 'a', 'b']
arr1.splice(1, 2);                              // [1]

// 各要素の処理: forEach, map
arr1.forEach(num => console.log(num));          // 1 2 3
arr1.map(num => num * 2);                       // [2, 4, 6]

// 条件で絞り込む: filter, find
arr1.filter(num => num % 2 === 1);              // [1, 3]
arr1.find(num => num % 2 === 0);                // 2

// 条件に一致する最初のインデックスを取得: findIndex
arr1.findIndex(num => num === 3);               // 2

// 存在確認: indexOf, includes
arr1.indexOf(2);                                // 1
arr1.includes(2);                               // true

// ソート: sort
const arr2 = [3, 1, 4, 2];
arr2.sort((a, b) => a - b);                     // [1, 2, 3, 4]
arr2.sort((a, b) => b - a);                     // [4, 3, 2, 1]

// 結合: concat, join
const arr3 = [1, 2];
const arr4 = [3, 4];
arr3.concat(arr4);                              // [1, 2, 3, 4]
arr3.join('-');                                 // "1-2"

3. 文字列操作

const str1 = 'Hello World'

// 置換: replace, replaceAll
  // replace:最初に該当した文字列のみ置換。
  // replaceAll:該当したすべての文字列を置換。
str1.replace('World', 'JS')         // "Hello JS"
str1.replace(/world/i, 'JS')        // "Hello JS" - iは大文字・小文字区別なし
str1.replace(/l/g, '1')             // "He11o Wor1d" - gはグローバルオプション
str1.replaceAll('l', '1')           // "He11o Wor1d"

// トリミング: trim
const str2 = ' Hello World '
str2.trim()                         // "Hello World"

// 文字列の連結と分割: split
const arr = str.split(' ')          // ["Hello", "World"]

// 部分取得: substr, substring  - substrは現在非推奨。代わりにsubstringかsliceを利用
const part1 = str.substr(6, 5);     // "World" - 指定位置から部分文字列を取得
const part2 = str.substring(0, 5);  // "Hello" - 指定位置間の部分文字列を取得

4. オブジェクト操作

// キーや値を配列で取得: Object.keys, Object.values
const obj = {a: 1, b: 2, c: 3}
const keys = Object.keys(obj)              // ["a", "b", "c"]
const values = Object.values(obj)          // [1, 2, 3]

// プロパティの有無を確認: hasOwnProperty, in
const obj = {a: 1};
console.log(obj.hasOwnProperty('a'))       // true 
console.log('a' in obj)               // true

// 型・インスタンス確認: typeof, instanceof
const num = 42;
console.log(typeof num)                    // "number" - データ型を返す

class Person {}
const person = new Person();
console.log(person instanceof Person)      // true - インスタンスが特定のクラスか確認

// 数値操作: Math
Math.random()                              // 0から1の間のランダムな浮動少数を生成
Math.round(4.6)                            // 5 - 数値を四捨五入
Math.max(1, 5, 3)                          // 5 - 最大値を取得

// 日付操作: Date
  // 現在日時
const now = new Date();                     // 2024-12-07T12:34:56.789Z - 現在の日付と時刻

const year = now.getFullYear();             // 2024 - 現在の年
const month = now.getMonth();               // 11 - 現在の月 (0が1月、11が12月)
const date = now.getDate();                 // 7 - 現在の日 (月内の日付)
const day = now.getDay();                   // 6 - 現在の曜日 (0が日曜日、6が土曜日)
const hours = now.getHours();               // 12 - 現在の時間 (24時間制)
const minutes = now.getMinutes();           // 34 - 現在の分
const seconds = now.getSeconds();           // 56 - 現在の秒
const milliseconds = now.getMilliseconds(); // 789 - 現在のミリ秒
const timestamp = now.getTime();            // 1733596496789 - 1970年1月1日からの経過ミリ秒数
const isoString = now.toISOString();        // '2024-12-07T12:34:56.789Z' - ISO 8601 形式の文字列
const localeString = now.toLocaleString();  // '12/7/2024, 12:34:56 PM' - 現地時間形式の文字列

  // 日付/時刻を指定
const specificDate = new Date('2023-08-16T10:20:30Z')      // ISO 8601形式
const anotherDate = new Date(2023, 7, 16, 10, 20, 30)      // 年、月(0-11)、日、時、分、秒
const dateFromMillis = new Date(1692182430000)             // UNIXタイムスタンプ(ミリ秒)
const utcDate = new Date(Date.UTC(2023, 7, 16, 10, 20, 30))

5. 非同期処理


// ---------- Promiseを返さない非同期関数 ---------- //

// 一定時間後に処理を実行: setTimeout
setTimeout(() => {
    console.log("1秒後に実行されます");
}, 1000);                               // 1000ミリ秒後

// 一定間隔で処理を実行: setInterval
const intervalId = setInterval(() => {
    console.log("1秒ごとに実行されます");
}, 1000);                               // 1000ミリ秒ごと

// 一定時間後に処理を停止: clearInterval
setTimeout(() => {
    clearInterval(intervalId);
    console.log("インターバルをクリアしました");
}, 5000);                               // 5000ミリ秒後にインターバルを停止

// 一定時間後に処理を停止: clearTimeout
setTimeout(() => {
    clearTimeout(timeoutId);
    console.log("タイマーをクリアしました");
}, 500);                                // 500ミリ秒後にタイマーを停止

// ---------- Promiseを返す非同期関数 ---------- //
// データをget, post: fetch
fetch('<https://jsonplaceholder.typicode.com/posts>')
    .then(response => response.json())
    .then(data => console.log(data)) 
    .catch(error => console.error('エラー:', error));

fetch('<https://jsonplaceholder.typicode.com/posts>', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
    })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('エラー:', error));

// 非同期関数の使用: async/await
async function fetchData() {
    try {
        const response = await fetch('<https://jsonplaceholder.typicode.com/posts>');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error);
    }
}

fetchData();

// ---------- Promiseを返さない非同期関数をnew Promise()でラップ ---------- //
const sampleFunc1 = () => {
	return new Promise((resolve, reject) => {後者の非同期関数})
}

const sampleFunc2 = async () => {
	.....
	await sampleFunc1()
	.....
}

sampleFunc2()

まとめ

以上、JavaScriptの組み込み関数・メソッド集でした。

忘れても良いようにぜひチートシートをフル活用してみてください。

※万が一、不備や誤り等ございましたらご指摘頂けますと幸いです。

コメント

タイトルとURLをコピーしました