はじめに
この記事を読めば、Javascriptでタプルを使いこなすことができるようになります。
タプルとは、固定長で要素の型が異なることが許されるデータ構造です（例：[1, ‘one’]）。
これをJavascriptで活用する方法として、使い方、応用例、注意点、カスタマイズ方法を10の方法とサンプルコードで解説します。
●Javascriptでのタプルの基本
○タプルの定義方法
Javascriptにはタプルというデータ型は存在しませんが、配列やオブジェクトを使ってタプルのように扱うことができます。
下記にそれぞれの方法を示します。
// 配列を使ったタプルの作成
const tuple1 = [1, 'one'];
// オブジェクトを使ったタプルの作成
const tuple2 = {0: 1, 1: 'one'};●タプルの使い方とサンプルコード
○サンプルコード1：タプルから要素を取り出す
タプルから要素を取り出す方法は通常の配列やオブジェクトと同じです
const tuple = [1, 'one'];
console.log(tuple[0]); // 1
console.log(tuple[1]); // 'one'○サンプルコード2：タプルの要素を変更する
タプルは変更可能ですが、Javascriptの配列やオブジェクトは変更が可能なため、タプルの要素を変更することもできます。
ただし、タプルの性質上、変更を避けるべきです。
const tuple = [1, 'one'];
tuple[1] = 'two';
console.log(tuple); // [1, 'two']●タプルの応用例とサンプルコード
○サンプルコード3：複数の値を返す関数
タプルを使うことで、関数から複数の値を返すことができます。
下記の例では、商と余りを同時に返すdivmod関数を定義しています。
function divmod(a, b) {
return [Math.floor(a / b), a % b];
}
const [quotient, remainder] = divmod(7, 3);
console.log(quotient); // 2
console.log(remainder); // 1○サンプルコード4：タプルを使った座標の表現
座標を表現する際にタプルを活用することができます。
下記の例では、2次元平面上の点を表すためにタプルを使っています。
const pointA = [3, 4];
const pointB = [1, 2];
function distance(point1, point2) {
const dx = point1[0] - point2[0];
const dy = point1[1] - point2[1];
return Math.sqrt(dx * dx + dy * dy);
}
console.log(distance(pointA, pointB)); // 2.8284271247461903●タプルの注意点と対処法
○注意点1：タプルの要素数や型が異なる場合
Javascriptにはタプル専用のデータ型が存在しないため、要素数や型が異なる場合にもエラーが発生しません。
これを防ぐには、プログラムのロジックでタプルの要素数や型をチェックする必要があります。
○注意点2：要素の変更
Javascriptの配列やオブジェクトは変更が可能なため、タプルの要素も変更できてしまいます。
しかし、タプルの性質上、変更を避けるべきです。
要素の変更を防ぐには、Object.freeze()を使用して配列やオブジェクトを凍結することができます。
const tuple = Object.freeze([1, 'one']);
// エラーが発生します（strictモードの場合）
tuple[1] = 'two';●タプルのカスタマイズ方法とサンプルコード
○サンプルコード5：タプルを使った独自のデータ構造の作成
タプルをベースに独自のデータ構造を作成することができます。
下記の例では、RGBカラーを表現するためのデータ構造を作成しています。
function createColor(r, g, b) {
return Object.freeze([r, g, b]);
}
const red = createColor(255, 0, 0);
console.log(red); // [255, 0, 0]○サンプルコード6：タプルを使ったシンプルな時刻表現
タプルを使ってシンプルな時刻を表現することができます。
下記の例では、時刻を表現するためにタプルを使用しています。
function createTime(hours, minutes) {
return [hours, minutes];
}
const time1 = createTime(12, 30);
console.log(time1); // [12, 30]○サンプルコード7：タプルを使った独自のデータ構造の比較
タプルを使って独自のデータ構造を比較することができます。
下記の例では、点を表現するためのデータ構造を比較しています。
function isEqual(point1, point2) {
return point1[0] === point2[0] && point1[1] === point2[1];
}
const pointA = [1, 2];
const pointB = [1, 2];
const pointC = [2, 3];
console.log(isEqual(pointA, pointB)); // true
console.log(isEqual(pointA, pointC)); // false○サンプルコード8：タプルを使った名前付き引数の実装
JavaScriptでは名前付き引数を直接サポートしていないため、タプルを使って名前付き引数を実現できます。
下記の例では、オプション引数をタプルで表現しています。
function createUser({ firstName, lastName, age }) {
return {
firstName,
lastName,
age,
};
}
const user = createUser({ firstName: 'John', lastName: 'Doe', age: 30 });
console.log(user); // { firstName: 'John', lastName: 'Doe', age: 30 }○サンプルコード9：タプルを使ったリストのソート
タプルを使ってリストをソートすることができます。
下記の例では、名前とスコアのタプルからなるリストをスコアの降順でソートしています。
const scores = [
['Alice', 90],
['Bob', 80],
['Carol', 85],
];
scores.sort((a, b) => b[1] - a[1]);
console.log(scores);
// [['Alice', 90], ['Carol', 85], ['Bob', 80]]○サンプルコード10：タプルを使った状態の管理
タプルを使って状態を管理することができます。
下記の例では、トラフィックライトの色と状態をタプルで管理しています。
function getNextState(state) {
const [color, status] = state;
if (color === 'red' && status === 'waiting') {
return ['red', 'going'];
} else if (color === 'red' && status === 'going') {
return ['green', 'waiting'];
} else if (color === 'green' && status === 'waiting') {
return ['green', 'going'];
} else {
return ['red', 'waiting'];
}
}
const initialState = ['red', 'waiting'];
const nextState = getNextState(initialState);
console.log(nextState); // ['red', 'going']まとめ
この記事では、Javascriptでタプルを活用するための10の方法とサンプルコードを紹介しました。
Javascriptにはタプルというデータ型が存在しないため、配列やオブジェクトを使ってタプルのように扱うことができます。
また、タプルは複数の値を返す関数や座標の表現など、様々な応用例が存在します。
ただし、要素数や型が異なる場合や要素の変更に注意が必要です。
これらのポイントを押さえながら、Javascriptでタプルを活用してみてください。
