🕌

自分のためだけの無作為アウトプット

2025/02/27に公開

React

TypeScript

非同期

tech

自分のためだけのアウトプット備忘録

非同期

Promiseに関するメモ

new Promiseをすると、Promiseの中の処理が開始する
Promiseの実行結果を知りたいならthen()やcatch()が必要。（async関数なら別）
ただthen()やcatch()を書かないからといって、Promiseの中の処理自体は変わらない。（ただ人知れず処理するだけ）

setTimeoutを同期的に使う

setTimeoutは非同期のコールバックを登録するだけなので、promiseは返さない。setTimeoutを同期的に使いたいなら、指定した時間待機する処理をpromiseで作ればよい

const delay = (ms: number) => {
    // Promise<void>にすることで、戻り値なしのPromiseにする
    return new Promise<void>((resolve) => setTimeout(resolve, ms));
};

const someAction = async() => {
    // 5秒待機
    await delay(5000);

    console.log("おわり");
}

async関数はPromiseを返すが、awaitする処理がPromise出ない場合すぐに次の処理に進む

次の2つの処理って同じだと思っていたけど、ちゃんと指定時間待機して後続に進むのは一つ目の処理だけ。

// 指定した時間待機する
const delay = (ms: number) => {
  return new Promise<void>((resolve) => setTimeout(resolve, ms));
};

// 待機しない（すぐに次の処理に進む）
const asyncDelay = async (ms: number) => {
  await setTimeout(() => {}, ms);
};

asyncDelay関数の型が(ms: number) => Promise<void>となっており、Promiseを返すなら待機してくれるんじゃないの???

大事なのはasync関数の中のawaitがPromiseを返すかどうか

async関数の中で行う処理（今回の場合はsetTimeout)がPromiseを返さないと、すぐに後続の処理に進んでしまう。つまり、async関数自体が返すPromiseはどうでもよい
async関数を修正すると次のようになる

const asyncDelay = async (ms: number) => {
  await new Promise<void>((resolve) => setTimeout(resolve, ms));
};

async関数を使えば、new Promiseを書かなくてもよい的なことを想像していたので備忘としてメモ

Object

Object.fromEntries

配列やMapをObjectへ変換するメソッド。

Map→Object

const map = new Map([
  ["foo", "bar"],
  ["baz", 42],
]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }

Array→Object

const arr = [
  ["0", "a"],
  ["1", "b"],
  ["2", "c"],
];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

Map

ObjectとMapの違い一覧

特性	Object	Map
キーの型	string または symbol のみ	あらゆる型 (数値・オブジェクト・関数など)
キーの順序	順序保証なし	挿入順が保証される
パフォーマンス	大量のデータ操作に向かない	高速なデータアクセス・削除が可能
サイズの取得	Object.keys(obj).length を使う	.size で即時取得
キーの存在確認	key in obj	.has(key)
ループ処理	for...in / Object.entries()	forEach() / for...of
シリアライズ (JSON化)	JSON.stringify() 可能	JSON.stringify() できない

ObjectとMapの使い分け

使いたい機能	Object を使う	Map を使う
キーが文字列 (string) のみ	✅	✅
キーに数値・オブジェクト・関数を使いたい	❌	✅
キーの順序を保証したい	❌	✅
データを頻繁に追加・削除する	❌	✅
JSON.stringify() したい	✅	❌
パフォーマンスを重視	❌	✅

Json.stringify()をしたいなら

Object.fromEntries()を使ってObjectにしてから実行する

const map = new Map([
  ["name", "Alice"],
  ["age", 25],
  ["isAdmin", true],
]);
const json = JSON.stringify(Object.fromEntries(map));
console.log(json); // '{"name":"Alice","age":25,"isAdmin":true}'

非同期