Merge pull request #898 from yytypescript/feature/891

docs: ✏️ タプルにラベルの説明を追加

docs/reference/values-types-variables/tuple.md

@@ -4,7 +4,9 @@ sidebar_label: タプル
 
 # タプル (tuple)
 
-TypeScriptの関数は1値のみ返却可能です。戻り値に複数の値を返したい時に、配列に返したいすべての値を入れて返すことがあります。なお次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
+TypeScriptの関数は1値のみ返却できます。ですが実際は複数の値を返したくなる時もあります。そんな時は配列に返したいすべての値を入れて返すことがあります。
+
+次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
 
 ```ts twoslash
 function tuple() {
@@ -51,6 +53,18 @@ function tuple(): [number, string, boolean] {
 
 配列の型は`T[]`と`Array<T>`のふたつの書き方がありましたがタプルはこの書き方しか存在しません。
 
+### タプルにラベルをつける
+
+同じ型の値ばかりをタプルにして返却する関数の場合、その型が何を示しているのか分かりにくくなることがあります。そんな時はタプルにラベルをつけることができます。
+
+```ts twoslash
+declare function tuple(): [x: number, y: number, z: number];
+// ---cut---
+const coordinate: [x: number, y: number, z: number] = tuple();
+```
+
+この例であれば3次元座標を返す関数の戻り値であることが分かりやすくなります。
+
 ## タプルへのアクセス
 
 タプルを受けた変数はそのまま中の型が持っているプロパティ、メソッドを使用できます。
@@ -78,6 +92,22 @@ list[5];
 
 そのため`list.push()`のような配列の要素を増やす操作をしてもその要素を使うことはできません。
 
+### ラベルをつけたタプルへのアクセス
+
+あくまでもラベルは可読性の向上のために使われるもので、実際のコードの中でラベルを使ってアクセスすることはできません。
+
+```ts twoslash
+// @errors: 2339
+const tuple = (): [x: number, y: number, z: number] => {
+  return [1, 2, 3];
+};
+// ---cut---
+const coordinate: [x: number, y: number, z: number] = tuple();
+
+coordinate[0];
+coordinate.x;
+```
+
 ### 分割代入を使ってタプルにアクセスする
 
 上記関数`tuple()`の戻り値は分割代入を使うと次のように受けることができます。