TypeScriptのArray（配列）の使い方

作成日: 2021-02-04
更新日: 2023-12-28
カテゴリ: TypeScript

TypeScriptの配列の使い方

マイクロソフト社が開発しているいわゆる「型のあるJavaScript」ことTypeScriptですが、このTypeScriptには基本的なデータ構造として「配列」があります。

配列を使えば複数のデータを1つにまとめたりすることが可能になるので、配列は現代的なプログラミングにはなくてはならないデータ型の1つです。
この記事ではTypeScriptの配列の使い方を簡単に解説します。

具体的には↓を見ていきます。

配列とはなにか？
TypeScriptの配列の初期化方法
配列の末尾にデータを追加
配列の末尾からデータを除去

配列とはなにか？

配列とはなんなのかというところですが、配列は基本的なデータ構造の1つです。
現代的なプログラミング言語には標準で備わっていることが多く、もっともポピュラーなデータ構造と言っても過言ではないでしょう。

配列の特徴としては、メモリ上のデータ領域が連続しているという点があげられます。
配列というデータを確保するとき、多くの処理系ではメモリ上のまとまった領域を配列用の領域として確保します。
そのためインデックスによるアクセスが高速に行えます。

これがリスト構造のようにメモリ領域が連続していないとインデックスアクセスで検索をしなくてはいけなくなるので、少々処理が遅くなるのですが、配列の場合はメモリ領域が連続しているためそのような検索も必要なく、一瞬でデータにアクセスすることが出来ます。

配列とは「要素」の集まりで、この要素が連続でつらなっているのが配列です。
TypeScriptの配列もインデックスで高速に配列内の要素にアクセスすることができます。

配列[ <要素> <要素> ... ]

配列には固定長配列と可変長配列があります。
固定長配列はサイズが固定している配列です。一度、メモリ上の領域を確保したら、その領域を小さくしたり大きくしたりすることは出来ません。
いっぽう可変長配列と言うのは、サイズが可変長な配列です。一度メモリ上に領域を確保しても、その領域を小さくしたり逆に大きくしたりすることが可能です。
TypeScriptの配列はこの可変長配列の方です。ですのでTypeScriptの配列はその大きさを自由に変えることが出来ます。

TypeScriptの配列の初期化方法

TypeScriptで配列を作る方法ですが、↓のような書式で配列を作成します。

var 配列名: Array<型> = 右辺値;

たとえば↓のように整数型の配列を作ってみます。

var nums: Array<number> = [];  
console.log(nums);

↑のコードはコンソール画面に

[]

と出力します。

初期化済みの配列を作る

配列の宣言時に配列内の要素を初期化したい場合がありますが、その場合は↓のようにします。

var nums: Array<number> = [1, 2, 3];  
console.log(nums)

右辺値の値を左のnumsに向かって代入します。
↑のコードを実行すると↓のような結果になります。

[1, 2, 3]

文字列型の配列を作る

整数型ではなく文字列型の配列を作りたい場合はArray<型>の部分の型を文字列にします。

var animals: Array<string> = ["Cat", "Dog", "Bird"];  
console.log(animals);

↑のコードを実行すると↓のような結果になります。

[ 'Cat', 'Dog', 'Bird' ]

初期化時に要素数を指定して初期化する

new Array()を使えば指定サイズの配列を作ることが出来ます。

var nums: Array<number> = new Array(3);  

console.log('length is', nums.length)  
console.log(nums[0])  
console.log(nums[1])  
console.log(nums[2])

↑のようにnew Array()に作成した配列の要素数を指定すると、そのサイズの配列を作成することが出来ます。
↑のコードを実行すると↓のような結果になります。

length is 3  
undefined  
undefined  
undefined

必要な要素数のサイズがわかっていて、初期化の必要が無い場合は↑のように配列を作成すれば効率的と言えます。

エイリアスによる初期化

今までに使っていた初期化方法にはエイリアスがあります。
↓のように書くことも出来ます。

var nums: number[] = [1, 2, 3];  
console.log(nums);

この初期化は

var nums: Array<number> = [1, 2, 3];

による初期化と同じ結果になります。
↑のコードを実行すると↓のような結果になります。

[ 1, 2, 3 ]

インデックスによる配列へのアクセス

インデックスで配列内の要素にアクセスすることが出来ます。
要素にアクセスするには配列に角カッコ（[]）を付けて、その中にインデックス番号を渡します。

配列[ インデックス番号 ]

例えば↓のようになります。

var nums: Array<number> = [1, 2, 3];  

console.log(nums[0])  
console.log(nums[2])  
console.log(nums[100])

↑のコードを実行すると↓のような結果になります。

1  
3  
undefined

↑の場合、nums[0]というインデックスアクセスで配列内の0番目の要素1が取り出せています。
またnums[2]の場合は配列内の2番目の要素3が取り出せています。
このように配列のインデックスは0オリジンで始まります。
1オリジンを採用しているプログラミング言語もありますが、TypeScriptは違うので注意しておきましょう。

また、配列の範囲外のインデックスアクセスでは↑のようにundefinedが返ってきます。
これはエラーにならないので注意が必要です。

配列の末尾にデータを追加

配列の末尾にデータを追加するにはArrayのメソッドpush()を使います。

var nums: Array<number> = [1, 2, 3];  

nums.push(4)  
nums.push(5)  

console.log(nums)

↑のようにpush()の第1引数に追加したいデータを渡します。
↑のコードの結果は↓のようになります。

[ 1, 2, 3, 4, 5 ]

配列の末尾からデータを除去

配列の末尾からデータを取り除くにはArrayのメソッドpop()を使います。

var nums: Array<number> = [1, 2, 3];  

console.log(nums.pop())  
console.log(nums.pop())  

console.log(nums)

↑のようにpop()を呼び出すと、pop()は配列の末尾から要素を削除し、その削除した要素を返り値として返します。
↑のコードを実行すると↓のような結果になります。

3  
2  
[ 1 ]

↑の結果を見ると[ 1, 2, 3 ]で初期化してあった配列が最終的に[ 1 ]になっているのがわかります。

おわりに

今回はTypeScriptの配列について見て見ました。
配列は非常によく使うデータ型です。これがなくてははじまらないと言っても良いでしょう。

🦝 < レッツトライ配列

ユーニックス総合研究所