配列とタプルの分割代入
正しい要素型で配列とタプルを分割代入します。
「配列とタプルの分割代入」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
位置による分割代入
配列の分割代入では、名前ではなく位置によって変数をバインドします。タプルでは各位置に固有の型があるため、順序を保った正確な取り出しができます。
配列の分割代入の基本
左側の角かっきを使うと、インデックスの順序に従って要素を取り出せます。通常の配列では、すべてのバインディングが配列の要素型を共有します。
const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30タプルパターンに型注釈を付ける
パターンの後に、バインディングのタプル型を指定して型注釈を付けます。それぞれの位置に独自の型が割り当てられます。ここでは number の次に string が続きます。
const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two型は位置に従う
タプルでは、各インデックスの型が固定されています。1番目のバインディングは number、2番目は string です。値を入れ替えると型エラーになります。
const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)カンマで要素をスキップする
空のカンマ部分を使って空きを作ると、不要な位置をスキップできます。スキップした要素の型は単に無視されます。
const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0restを使った分割代入
rest要素を使うと、残りの項目を配列にまとめられます。タプルでは、その型に残りの位置が反映されます。
const [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail.length) // 3タプルから推論されるrestの型
restを使ってタプルを分割代入すると、TypeScript は rest 変数を残りの要素からなるタプルとして推論し、それぞれの型を保持します。
const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])変数を入れ替える
配列の分割代入で可能になる便利なテクニックとして、一時変数を使わずに2つの値を入れ替えられます。入れ替えを型チェックするには、型が互換性を持っている必要があります。
let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1関数の戻り値を分割代入する
タプルを返す関数は分割代入と非常に相性がよく、React の useState パターンもまさにこの形です。
function useCounter(): [number, () => number] {
let n = 0
return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())配列パターンのデフォルト値
undefined になる可能性がある位置には、デフォルト値を指定できます。デフォルト値が適用されるのは、要素がない場合または undefined の場合だけです。
const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0ネストした配列の分割代入
1つの文で、配列の中にある配列も分割代入できます。型もそれに応じてネストしますが、深い構造では読みやすさを意識してください。
const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4クイックチェック
配列とタプルの分割代入についての理解度を確認しましょう。
まとめ
配列の分割代入は位置によってバインドします。パターンの後にタプル型を指定して型注釈を付けると、各インデックスに独自の型が割り当てられます。空のカンマ部分で要素をスキップし、rest要素で残りをまとめると、残りの位置からなるタプルとして扱われます。また、存在しない可能性がある位置にはデフォルト値を指定できます。タプルの戻り値と分割代入を組み合わせると、useState のようなパターンを実現できます。
よくある質問
「配列とタプルの分割代入」レッスンは無料ですか？
はい。「配列とタプルの分割代入」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- オブジェクトの分割代入の型
- 配列とタプルの分割代入
- 分割代入におけるデフォルト値
- ネストした分割代入パターン