Menu
Coddy logo textTech

タプルの分割代入

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部 — レッスン 17/73。

インデックスを使用してタプルの要素にアクセスする方法は完璧に動作しますが、タプルから値を取り出すためのさらにエレガントな方法があります。それが分割代入(destructuring)です。このJavaScriptの機能はTypeScriptの型定義されたタプルとシームレスに動作し、1行でタプルの値を個別の変数に展開することができます。

配列の分割代入では、代入の左側に角括弧を使用して、タプルの各位置に対応する新しい変数を作成します:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (TypeScriptはこれがnumberであることを認識しています)
console.log(name); // "Alice" (TypeScriptはこれがstringであることを認識しています)
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

challenge icon

チャレンジ

簡単

数値(従業員ID)とそれに続く文字列(従業員名)を保持する、employee という名前のタプルを作成してください。ID 1001 と名前 "Sarah Johnson" で初期化します。

分割代入を使用して、employee タプルから値を抽出し、empIdempName という名前の2つの別々の変数に代入してください。

緯度と経度の座標を表す2つの数値を保持する、coordinates という名前の別のタプルを作成してください。値 40.7128-74.0060 で初期化します。

分割代入を使用して、location タプルから値を抽出し、latitudelongitude という名前の2つの別々の変数に代入してください。

分割代入された変数を、以下の順序でそれぞれ別の行に出力してください:

  • 従業員IDを出力する
  • 従業員名を出力する
  • 緯度を出力する
  • 経度を出力する

チートシート

分割代入を使用すると、角括弧を使用して、タプルから値を抽出して1行で個別の変数に代入できます。

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (TypeScriptはこれがnumberであることを認識しています)
console.log(name); // "Alice" (TypeScriptはこれがstringであることを認識しています)

TypeScriptは、タプルの型定義に基づいて、分割代入された各変数の型情報を保持します。

自分で試してみよう

// TODO: ここにコードを書いてください
// ID 1001、名前 "Sarah Johnson" の従業員タプルを作成します
// 分割代入を使用して empId と empName を抽出します
// 値 40.7128 と -74.0060 を持つ座標タプルを作成します(変数名として 'location' を使用しないでください)
// 分割代入を使用して latitude と longitude を抽出します
// 指定された順序で4つの変数すべてを出力します

// 結果を出力します(必要に応じてコメントを解除し、修正してください)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Introduction To TypeScriptのすべてのレッスン