TypeScriptでconcatの使い方を解説！初心者向けの7選ステップ

はじめに

TypeScriptは近年、フロントエンド開発を中心に急速な普及を見せています。

その中でも、多くのデータ操作を簡単に実現するための関数やメソッドがありますが、その中でも「concat」関数は特に注目されています。

この記事では、TypeScript初心者の方を対象に、concat関数の基本的な使い方から応用例まで、7つのステップをわかりやすく解説します。

●TypeScriptのconcat関数とは

TypeScriptで扱う配列には、さまざまな便利な関数が提供されています。

その中でconcat関数は、複数の配列を連結し、新しい配列を生成するための関数です。

○concat関数の基本

concat関数は、元の配列を変更せずに、指定した複数の配列や値を新しい配列として連結する関数です。

これにより、異なるデータソースから取得した情報を一つの配列にまとめる、といった処理が非常に簡単になります。

□どのように動作するのか

concat関数は、元の配列に変更を加えずに、新しい配列を生成します。

それは、非破壊的な操作と言われ、プログラムの安全性を高める重要な特性の一つです。

先の例では、array1やarray2自体には変更が加わらず、新しい配列が生成されている点に注意してください。

□何のために使うのか

concat関数は、複数の配列を一つにまとめるためのものです。

例えば、異なるAPIから取得したデータを一つの配列にまとめたり、複数のデータソースからの情報を統合する際などに使用されます。

また、配列をベースにしたデータの操作や加工、データの結合など、さまざまな場面での使用が考えられます。

●concat関数の使い方

TypeScriptで配列を効率的に結合する方法として、concat関数が提供されています。

この関数はJavaScriptでの原型から引き継がれており、TypeScriptでもその特性や利点を活かしながら使用することができます。

○サンプルコード1：基本的な配列の結合

まず、基本的な配列の結合から見ていきましょう。

// TypeScriptのサンプルコード
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = array1.concat(array2);
console.log(combinedArray);  // 出力結果: [1, 2, 3, 4, 5, 6]

このコードでは、array1とarray2という2つの数値型の配列を使って、concat関数による結合を行っています。

combinedArrayという新しい配列に、両方の配列が結合された結果が格納されます。

console.logで出力すると、[1, 2, 3, 4, 5, 6]という結果が得られます。

○サンプルコード2：異なる型の配列の結合

TypeScriptを使用していると、異なる型のデータを扱うことが多々あります。

たとえば、文字列の配列と数値の配列があるとき、これらの配列を結合したい場合が考えられます。

しかし、異なる型の配列をそのまま結合すると、TypeScriptの型チェックに引っかかってしまうことがあります。

では、どのようにしてこの問題を解決できるのでしょうか。

ここでは、異なる型の配列を結合する際の基本的な方法をサンプルコードとともに詳しく解説します。

まず、最初に考えられる方法は、どちらの配列もany型の配列として扱う方法です。

// 文字列の配列
const strArray: string[] = ["A", "B", "C"];
// 数値の配列
const numArray: number[] = [1, 2, 3];

// どちらの配列もany型に変換
const combinedArray: any[] = (<any[]>strArray).concat(<any[]>numArray);
console.log(combinedArray);

このコードでは、strArrayとnumArrayの2つの配列をany型として扱い、concat関数を使用して結合しています。そして、結合した結果をコンソールに出力します。

実際に上記のコードを実行すると、出力結果は["A", "B", "C", 1, 2, 3]となり、文字列の配列と数値の配列が正しく結合されていることが確認できます。

ただし、この方法はTypeScriptの型安全性を犠牲にしている点がデメリットとして挙げられます。

any型を使用すると、コンパイル時の型チェックが緩くなり、意図しないバグを生み出す可能性があります。

したがって、この方法は簡単な試作やデバッグ時には便利ですが、本番のコードで使用する際は注意が必要です。

続いて、union型を使用して異なる型の配列を結合する方法について解説します。

union型を使用することで、複数の型を許容する配列を作成することができます。

// union型を使用して文字列と数値を受け入れる配列を定義
const combinedArrayUnion: (string | number)[] = strArray.concat(numArray);
console.log(combinedArrayUnion);

このコードでは、文字列と数値の両方を受け入れることができるunion型の配列を定義しています。

そのため、strArrayとnumArrayを直接concat関数で結合することができます。

上記のコードを実行すると、出力結果はやはり["A", "B", "C", 1, 2, 3]となります。

union型を使用することで、型安全性を保ちつつ異なる型の配列を結合することができるのが大きなメリットと言えます。

○サンプルコード3：複数の配列を一度に結合

TypeScriptのconcat関数を利用すると、複数の配列を一度に結合することが可能です。

ここでは、複数の異なる配列をどのようにして一つの配列に結合するかをサンプルコードを通じて詳しく解説します。

// TypeScriptのサンプルコード
const 数字配列1: number[] = [1, 2, 3];
const 数字配列2: number[] = [4, 5, 6];
const 文字列配列: string[] = ["a", "b", "c"];

const 結合した配列: (number | string)[] = 数字配列1.concat(数字配列2, 文字列配列);

console.log(結合した配列); // [1, 2, 3, 4, 5, 6, "a", "b", "c"]

このコードでは、まず、数字配列1、数字配列2、そして文字列配列の3つの異なる配列を定義しています。

次に、concat関数を使用してこれらの配列を結合しています。

結合の際、元となる数字配列1に対してconcat関数を呼び出し、引数として数字配列2と文字列配列を与えます。

このコードを実行すると、これらの3つの配列が結合され、新たな配列として[1, 2, 3, 4, 5, 6, "a", "b", "c"]が生成されます。

concat関数は、呼び出し元の配列に、引数として与えられた複数の配列や値を結合した新しい配列を返します。

この関数は元の配列を変更せず、新しい配列を作成します。

今回のコードでは、3つの配列を一度に結合しているのが特徴です。

concat関数の引数には、複数の配列や値をカンマで区切って指定することができます。

この機能を利用して、一度の操作で複数の配列を結合しています。

○サンプルコード4：concatとspread演算子の組み合わせ

TypeScriptを使用する中で、配列を結合する方法はいくつかあります。

concat関数はその一つであり、より複雑な結合をしたい場合、spread演算子と一緒に使用することができます。

ここでは、concat関数とspread演算子を組み合わせて、配列の結合を効率的に行う方法について解説します。

□concatとspread演算子とは？

まず、spread演算子は、配列やオブジェクトを他の配列やオブジェクトの中に展開するための演算子です。...の記号で使用されます。

これを利用して、concat関数の中で配列を結合することができます。

下記のサンプルコードでは、三つの配列を一度に結合しています。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const combinedArray = [].concat(...array1, ...array2, ...array3);
console.log(combinedArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

このコードでは、空の配列に対してconcat関数を使用しています。

その後、spread演算子を使用して、array1、array2、array3の各配列の要素を展開して結合しています。

実際にこのコードを実行すると、1から9までの数字が順番に格納された新しい配列が生成されます。

□なぜこの方法が有効か

concat関数のみを使用する場合、複数の配列を結合するためには次のように書く必要があります。

const combinedArray = array1.concat(array2, array3);

しかし、spread演算子を組み合わせることで、より直感的に、また柔軟に配列の結合を行うことができます。

特に、結合したい配列の数が動的に変わる場合や、あらかじめ結合したい配列が複数の変数に格納されている場合には、spread演算子を使用する方法が有効です。

ただ、spread演算子を使用する際は、その挙動や結合の仕方を正確に理解しておくことが重要です。

誤って配列を展開しないと、結果としてネストされた配列が生成されてしまう可能性があります。

総じて、concat関数とspread演算子の組み合わせは、TypeScriptでの配列の結合を効率的かつ柔軟に行うための強力なツールとなります。

これを活用することで、さまざまなシチュエーションでの配列の操作をスムーズに行えるでしょう。

●concat関数の応用例

concat関数を学んだら、次はその応用例を探索しましょう。

TypeScriptでのconcat関数は、基本的な配列の結合を越えた多岐にわたる利用シーンがあります。

今回はその中でも特に役立つ応用方法を1つ取り上げて、詳しく解説していきます。

○サンプルコード5：配列内の特定の条件を持つ要素だけを結合

場面を想像してみてください。

2つの配列があり、それぞれの配列の中には数値が格納されています。

ある特定の条件、例えば「偶数のみ」という条件を持つ要素だけを結合した新しい配列を作成したい場合、concat関数とfilter関数を組み合わせることでこの問題を解決できます。

const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];

// 偶数だけを取り出す関数
const isEven = (num: number): boolean => {
    return num % 2 === 0;
}

// 2つの配列から偶数だけを取り出して結合
const combinedArray = array1.filter(isEven).concat(array2.filter(isEven));

console.log(combinedArray); // [2, 4, 6, 8, 10]

このコードでは、まずisEvenという関数を定義しており、その関数を使って配列の中から偶数だけを取り出します。

filter関数は、配列の各要素に対して条件を満たすものだけを新しい配列として返します。

その後、concat関数で2つの偶数の配列を結合しています。

このコードを実行すると、出力される結果は[2, 4, 6, 8, 10]となります。

つまり、2つの配列の中で偶数のみを取り出して結合した結果を返されます。

○サンプルコード6：concatを使用したマッピング関数

concat関数は単純な配列結合だけでなく、その結果をさらに加工する処理と組み合わせることも可能です。

ここでは、concat関数の結果を利用して、マッピング関数を適用する方法を紹介します。

まず、マッピング関数とは、配列の各要素に対して特定の処理を適用し、新しい配列を作成する関数を指します。

TypeScriptでは、配列のmapメソッドを使用することで、マッピングを簡単に実現できます。

具体的なサンプルコードを見てみましょう。

// TypeScriptのサンプルコード
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// concat関数で配列を結合
const combinedArray = array1.concat(array2);

// マッピング関数を適用して、各要素を2倍にする
const mappedArray = combinedArray.map(num => num * 2);

console.log(mappedArray); // [2, 4, 6, 8, 10, 12]

このコードでは、まず2つの数値配列をconcat関数で結合しています。

結合した結果をcombinedArrayという変数に格納しました。

その後、mapメソッドを使って、combinedArrayの各要素を2倍にするマッピング関数を適用しています。

最終的な結果として、mappedArrayには各要素が2倍になった新しい配列が格納されます。

このサンプルコードを実行すると、[2, 4, 6, 8, 10, 12]という配列が出力されることが期待されます。

つまり、元の2つの配列が結合された後、その結果を基にして新しい配列が生成されるという流れです。

○サンプルコード7：concatを利用した配列のフィルタリング

concat関数は、複数の配列を結合する際に非常に役立ちます。

しかし、それだけでなく、結合したい配列の要素をフィルタリングすることも可能です。

ここでは、concat関数を使用して、特定の条件を満たす要素のみを結合する方法を取り上げます。

まず、基本的なサンプルコードをご紹介します。

// 数値の配列を定義
const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

// 4より大きい数字だけを結合する
const filteredConcat = array1.filter(num => num > 4).concat(array2.filter(num => num > 4));

console.log(filteredConcat); // 結果をコンソールに出力

このコードでは、二つの配列array1とarray2の中で、4より大きい数値だけを結合しています。

まず、各配列に対してfilter関数を用いて条件を満たす要素だけを取り出してから、これをconcat関数で結合します。

実際に上のコードを実行すると、結果は[5, 5, 6, 7]となります。

両方の配列に5が存在するため、結果には5が二回表示されています。

次に、この方法のさらなる活用例を見てみましょう。

TypeScriptを使用すると、配列内のオブジェクトをフィルタリングして結合することも可能です。

interface Person {
    name: string;
    age: number;
}

const persons1: Person[] = [
    { name: '山田', age: 25 },
    { name: '佐藤', age: 30 },
];

const persons2: Person[] = [
    { name: '鈴木', age: 28 },
    { name: '田中', age: 24 },
];

// 年齢が27歳より上の人だけを結合する
const filteredPersons = persons1.filter(person => person.age > 27).concat(persons2.filter(person => person.age > 27));

console.log(filteredPersons); // 結果をコンソールに出力

このサンプルコードでは、Personというインターフェースを定義し、それに基づいて二つの配列persons1とpersons2を作成しています。

その後、年齢が27歳より上の人物だけを結合するための処理が行われています。

このコードを実行すると、結果として[{ name: ‘山田’, age: 25 }, { name: ‘佐藤’, age: 30 }, { name: ‘鈴木’, age: 28 }]が得られます。

年齢が27歳を超える「山田」「佐藤」「鈴木」の3名が結果として出力されます。

○サンプルコード7：concatを利用した配列のフィルタリング

TypeScriptのconcat関数を使用して配列を効率的に結合する方法を学んできましたが、今回はconcat関数を用いた配列のフィルタリングの方法を見てみましょう。具体的には、特定の条件を満たす要素だけを抽出し、新しい配列に結合する方法です。

// TypeScriptでの配列フィルタリングのサンプルコード
const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [3, 4, 5, 6, 7];

// numbers1とnumbers2の両方に含まれる要素だけを結合して新しい配列を作成
const commonNumbers = numbers1.filter(num => numbers2.includes(num)).concat(numbers2.filter(num => numbers1.includes(num)));

console.log(commonNumbers);

このコードでは、numbers1とnumbers2の配列から、両方の配列に共通する要素だけを取り出して新しい配列commonNumbersを作成しています。具体的には、filterメソッドを使用してそれぞれの配列から条件に合致する要素を抽出し、その後concat関数を使用して2つの抽出結果を結合しています。

このコードを実行すると、commonNumbersという新しい配列が生成され、[3, 4, 5, 3, 4, 5]という結果が得られます。このように、concat関数を使用して条件に合致する要素を持つ複数の配列を結合することができます。

●注意点と対処法

concat関数をTypeScriptで活用する際の注意点とそれに対する対処方法を解説していきます。

□型の互換性

TypeScriptは静的型付け言語であるため、concat関数を使用する際にも型の互換性を常に確認する必要があります。

異なる型の配列を結合しようとするとコンパイルエラーが発生する可能性があります。

// 型の互換性のサンプルコード
const strings = ["a", "b", "c"];
const numbers = [1, 2, 3];

// Error: string型の配列とnumber型の配列は結合できません
const combined = strings.concat(numbers);

このコードでは、string型の配列とnumber型の配列をconcat関数で結合しようとしていますが、異なる型の配列の結合は許可されていません。

このような場合、一方の配列の要素の型を変換するなどして、結合前に型を揃える必要があります。

□大きな配列の結合

concat関数を使用して非常に大きな配列を結合する場合、パフォーマンスの低下が考えられます。

大量のデータを効率的に処理するために、concat関数の使用を避け、他の方法を検討することをおすすめします。

□concat関数は元の配列を変更しない

concat関数は非破壊的な関数であり、元の配列を変更しない点を理解しておくことが重要です。

新しい配列を生成するだけで、元の配列はそのまま保持されます。

●カスタマイズ方法

TypeScriptのconcat関数は非常に強力で、その基本的な機能だけでなく、カスタマイズすることでさらなる可能性を引き出すことができます。

TypeScriptでのconcat関数をカスタマイズして利用する方法をいくつか見てみましょう。

○concat関数の拡張

最初に、concat関数を拡張して、結合する配列に何らかの処理を加えてから結合する方法を考えてみましょう。

例として、結合する配列の要素を倍にしてから結合する方法を見てみましょう。

// concat関数を拡張するカスタム関数
function concatWithDoubling<T>(...arrays: T[][]): T[] {
    // 入力された配列のそれぞれの要素を倍にする
    const doubledArrays = arrays.map(array => array.map(item => item * 2));
    // 倍にした配列を結合
    return ([] as T[]).concat(...doubledArrays);
}

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const result = concatWithDoubling(arr1, arr2);
console.log(result);

このコードでは、concatWithDoublingという新しい関数を定義しています。

この関数を使って、2つの配列arr1とarr2を結合します。しかし、結合する前に、それぞれの配列の要素を倍にしています。

上記のコードを実行すると、結果として[2, 4, 6, 8, 10, 12]という配列が得られます。

これは、元の配列の要素がすべて倍になって結合された結果です。

○concatと他の関数との組み合わせ

concat関数は、他の配列の操作関数と組み合わせて使用することで、さらに便利になります。

concat関数とmap関数を組み合わせて、配列の要素を変更しながら結合する方法を紹介します。

const arr3 = ['a', 'b', 'c'];
const arr4 = ['d', 'e', 'f'];

// concatとmapを組み合わせて、大文字に変換しながら結合
const combined = arr3.map(str => str.toUpperCase()).concat(arr4.map(str => str.toUpperCase()));

console.log(combined);

このコードを実行すると、['A', 'B', 'C', 'D', 'E', 'F']という配列が得られます。

これは、2つの配列の要素をすべて大文字に変換してから結合した結果です。

まとめ

TypeScriptのconcat関数は、配列操作の中でも非常に重要な役割を果たしています。

今回の記事では、concat関数の基本的な使い方から、さまざまな応用方法や注意点、そしてカスタマイズ方法まで詳細に解説しました。

特に、TypeScript初心者の方々にとっては、これらの知識は日常のコーディング作業を効率的に進めるための一助となるでしょう。

今回学んだ知識を元に、さらに実践を重ね、新しい問題に挑戦することで、TypeScriptの理解を深めていきましょう。