Skip to content

20251125mon

Published: at 15:00

20251125mon

1. TS/JSのsliceは配列を切り取る。

以下の場合、配列は一つで三つ分のオブジェクトを返す。

  return sortedResponses.slice(0, limit).map((response) => ({
    id: response.id,
    name: response.name,
    date: formatZonedDate(response.submittedAt, userTz, "yyyy-MM-dd HH:mm", "")
  }))

2. 並び替え

b-a は降順。

 const sortedResponses = [...responses].sort((a, b) => {
    const dateA = new Date(a.submittedAt).getTime()
    const dateB = new Date(b.submittedAt).getTime()
    return dateB - dateA
  })

3. スプレッド構文

✅ スプレッド構文は「シャローコピー(浅いコピー)」
新しい配列(新インスタンス)を作るが、中身のオブジェクトは複製しない

users = [ ObjA, ObjB ]
[...users] → 新しい配列インスタンス
             [ ObjA, ObjB ](中身は同じ参照)

しかし、配列内のオブジェクトは複製されない(参照が同じ)

const users = [{ name: "A" }];
const copy = [...users];

copy[0].name = "B";
console.log(users[0].name); // "B"(同じオブジェクト参照)

4. ユニオン型

’desc’か’asc’のいずれか。デフォルトは’desc’
order: 'desc' | 'asc' ='desc'

T のプロパティ名のユニオン (たとえば、 “id” | “name” | “submittedAt”のいずれかがキーになる。)
dateKey: keyof T

5. ジェネリクス構文のきまり

// 関数宣言の場合
// 引数や戻り値で使う型パラメータを、関数名直後に宣言する必要がある」

function 関数名<T, U>(引数: T): U { }

// アロー関数の場合
const 関数名 = <T>(引数: T): T => { }

// クラスの場合
class クラス名<T> { }

6. ジェネリクス(何回もやって覚える)

const sortByDate = <T>(
  array: T[],
  dateKey: keyof T,
  order: 'desc' | 'asc' = 'desc'
): T[] => {
  return [...array].sort((a, b) => {
    const dateA = new Date(a[dateKey] as string | number | Date).getTime()
    const dateB = new Date(b[dateKey] as string | number | Date).getTime()
    return order === 'desc' ? dateB - dateA : dateA - dateB
  })
}

#TypeScript #JavaScript #ジェネリクス