はじめに
TypeScriptで配列から要素を削除する方法は一つではありません。状況に応じて最適な方法を選ぶことが重要です。
この記事では、pop、shift、splice、filterメソッドをはじめとした、TypeScriptで配列の要素を削除するさまざまな方法を、具体的なコード例とともに紹介します。各メソッドの引数や戻り値の説明に加え、同じメソッドでも異なる引数を使った場合の挙動についても詳しく解説していきます。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、TypeScriptの世界が変わる
末尾からの要素の削除：popメソッド
popメソッドは配列の末尾から要素を一つ削除し、その要素を戻り値として返します。このメソッドは元の配列を変更しますが、引数は取りません。
ソースコード例
|
1 2 |
let fruits: string[] = ["Apple", "Banana", "Cherry"]; let removedFruit = fruits.pop(); |
出力結果:
出力結果
["Apple", "Banana"]
削除された要素: "Cherry"
popメソッドは、配列が空の場合にはundefinedを返します。
先頭からの要素の削除：shiftメソッド
shiftメソッドは配列の先頭から要素を一つ削除し、その要素を戻り値として返します。popメソッドと同様に、このメソッドも元の配列を変更しますが、引数は取りません。
ソースコード例
|
1 2 |
let fruits: string[] = ["Apple", "Banana", "Cherry"]; let firstFruit = fruits.shift(); |
出力結果:
出力結果
["Banana", "Cherry"]
削除された要素: "Apple"
shiftメソッドも、配列が空の場合にはundefinedを返します。
特定の位置からの要素の削除：spliceメソッド
spliceメソッドは、配列の特定の位置から任意の数の要素を削除することができる非常に強力なメソッドです。また、同時に新しい要素を追加することも可能です。
このメソッドの最初の引数は削除を開始する位置、二番目の引数は削除する要素の数です。三番目以降の引数に新しく追加する要素を指定することができますが、この場合は削除のみを行うため、三番目の引数は省略します。
ソースコード例
|
1 2 3 |
let numbers: number[] = [1, 2, 3, 4, 5]; // 位置2から2つの要素を削除 numbers.splice(2, 2); |
出力結果:
出力結果
[1, 2, 5]
この例では、インデックス2の位置（3番目の要素）から2つの要素を削除しています。
条件に合う要素の削除：filterメソッド
filterメソッドを使用すると、配列から特定の条件に一致する要素のみを削除することができます。このメソッドは元の配列を変更せず、条件に一致しない要素を含む新しい配列を作成します。
例えば、偶数のみを削除したい場合は以下のようにします。
ソースコード例
|
1 2 3 |
let numbers: number[] = [1, 2, 3, 4, 5]; // 偶数の要素を削除 let filteredNumbers = numbers.filter(number => number % 2 !== 0); |
出力結果:
出力結果
[1, 3, 5]
filterメソッドは、指定した条件に一致する要素を残して新しい配列を作成するため、特定の条件に基づいて要素を「削除」するのに適しています。
findIndexとspliceを組み合わせた要素の削除
特定の条件に基づいて要素を削除したい場合、findIndexメソッドで要素のインデックスを見つけ、そのインデックスを使用してspliceメソッドで要素を削除する方法もあります。
例えば、特定の名前のオブジェクトを削除したい場合は以下のようにします。
ソースコード例
|
1 2 3 4 5 6 7 |
interface Person { name: string; age: number; } let people: Person[] = [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }, { name: "Charlie", age: 28 }]; let index = people.findIndex(person => person.name === "Bob"); if (index !== -1) { people.splice(index, 1); } |
出力結果:
出力結果
[{ name: "Alice", age: 30 }, { name: "Charlie", age: 28 }]
この方法では、findIndexメソッドで特定の条件に一致する要素のインデックスを見つけ、spliceメソッドでその要素を削除しています。
これらの方法を駆使することで、TypeScriptで配列の要素を効果的に削除することができます。状況に応じて最適なメソッドを選択し、より良いコードを書くための基礎を固めましょう。
ジェネリックを使用した配列からの要素削除
ジェネリックを使用した配列では、様々な型の要素を含むことができます。条件に基づいてこれらの要素を削除するには、filterメソッドが適しています。filterメソッドを用いることで、特定の型の要素のみを削除したり、特定の条件に合う要素を削除することが可能です。
ソースコード例
|
1 2 3 4 5 |
type MixedArray = Array; let mixedArray: MixedArray = [1, "apple", 2, "banana", 3]; // 文字列の要素のみを削除 let filteredArray = mixedArray.filter(item => typeof item !== "string"); |
出力結果:
出力結果
[1, 2, 3]
この例では、filterメソッドを使用して、mixedArray配列から文字列の要素を削除しています。
インターフェースを使用した配列からの要素削除
インターフェースを定義して、その型に基づくオブジェクトの配列を管理している場合、特定の属性を持つオブジェクトを削除するにはfilterメソッドが効果的です。filterメソッドを使うことで、特定の条件に合致するオブジェクトのみを配列から取り除くことができます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
interface Person { name: string; age: number; } let people: Person[] = [ { name: "Alice", age: 30 }, { name: "Bob", age: 25 }, { name: "Charlie", age: 28 } ]; // 年齢が28以上の人を削除 let youngerPeople = people.filter(person => person.age < 28); |
出力結果:
出力結果
[{ name: "Bob", age: 25 }]
この例では、年齢が28歳未満の人だけが残るように、filterメソッドを使って特定の条件に合致するオブジェクトを配列から削除しています。
こちらもCHECK
-
-
【TypeScript】配列操作、配列の基本的な使い方を徹底解説！
Typescriptでの配列の使い方完全ガイド この記事では、Typescriptを使った配列の基本から応用までを網羅的に解説します。 配列はプログラミングにおいて非常によく使われるデータ構造の一つで ...
続きを見る
まとめ
TypeScriptでの配列からの要素削除は、pop、shift、splice、filterメソッドをはじめ、findIndexと組み合わせた方法など、多様な手段が存在します。各メソッドの特性を理解し、適切に利用することで、配列の操作がより柔軟かつ効率的になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
