配列とオブジェクトのスプレッド
正確な型を保ちながら値をスプレッドします。
「配列とオブジェクトのスプレッド」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
値をスプレッドする
スプレッド演算子 ... は、配列の要素またはオブジェクトのプロパティを新しい配列やオブジェクトにコピーします。TypeScript は結果の型を正確に追跡します。これは不変更新の基盤となります。
配列のスプレッド
2つの配列を新しい配列にスプレッドすると、連結できます。結果の要素型は、元の2つの配列の要素型によるユニオンになります。
const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]スプレッドとリテラルを組み合わせる
スプレッド要素と個別の値は、交互に配置できます。順序は記述したとおりに正確に保持されます。
const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]スプレッド要素の型
スプレッド元の要素型が異なる場合、結果はそれらのユニオンからなる配列になります。型注釈を付けることも、型推論に任せることもできます。
const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)オブジェクトのスプレッド
オブジェクトのスプレッドは、列挙可能な自身のプロパティを新しいオブジェクトにコピーします。結果の型には、元の形が統合されます。
const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }スプレッドでプロパティを上書きする
キーが重複する場合は、最後のものが優先されます。オブジェクトをスプレッドしてから特定のフィールドを上書きする方法は、不変更新の基本です。
const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37順序が優先される値を決める
プロパティの優先順位は、元データの順序に従います。上書きしたい値はスプレッドの後に置くと優先され、前に置くとスプレッドによって上書きされます。
const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last上書きされたプロパティの型
上書きによってプロパティの型が変わる場合、結果の型には新しい型が反映されます。TypeScript は最後に現れる型へと絞り込みます。
const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())スプレッドは浅いコピーです
スプレッドは1階層分だけコピーします。ネストされたオブジェクトは参照によって共有されるため、ネストされたフィールドを変更すると両方のコピーに影響します。より深くコピーするには、ネストされたオブジェクトもスプレッドしてください。
const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared referenceスプレッドとreadonly
readonly配列またはオブジェクトをスプレッドすると、新しく作成された変更可能なコピーが生成されます。新しい値を構築しているため、readonly修飾子はスプレッド後に引き継がれません。
const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4不変更新パターン
スプレッドは、変更を加えずに状態を更新するための慣用的な方法です。古いオブジェクトをコピーし、変更するフィールドを上書きして、新しいオブジェクトを返します。
interface State { count: number; name: string }
function increment(s: State): State {
return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))理解度チェック
スプレッド型と優先順位についての理解度を確認してください。
まとめ
スプレッドは、配列の要素またはオブジェクトのプロパティを新しい値にコピーします。配列のスプレッドは共用体の要素型で連結され、オブジェクトのスプレッドは形状をマージします。キーが衝突した場合は、最後に現れたものが優先されます。スプレッドは浅いコピーであるため、ネストされたオブジェクトは共有されたままです。また、readonlyソースからでも新しく変更可能な値を生成します。これは不変更新の慣用的なパターンです。
よくある質問
「配列とオブジェクトのスプレッド」レッスンは無料ですか？
はい。「配列とオブジェクトのスプレッド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「配列とオブジェクトのスプレッド」で何を学びますか？
正確な型を保ちながら値をスプレッドします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「配列とオブジェクトのスプレッド」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 関数のRestパラメーター
- 配列とオブジェクトのスプレッド
- タプルのRest要素
- 可変長関数の型付け