React での配列要素の削除方法
本記事は以下記事での配列要素の削除方法についての続きです。
useStateが検知できる配列要素の削除方法
useStateのset 関数に配列から要素が削除されたことを検知させるには、元の配列とは異なる配列（の参照）をset 関数に渡す必要があります。
useState()によって検知できるようにするためには、新たな配列を返すメソッドを利用するようにします。
以下では、要素を削除する際に新たな配列を返すメソッドと元の配列から要素を削除してしまうメソッドについてみていきます。
要素削除後に新たな配列として返すメソッド
Array.prototype.filter()
filter()は配列の各要素を、引数に渡した関数へと渡し、関数の結果がtrue（truthy）となる要素のみをもつ配列を新たに作成して返します。
条件に合致しない要素を削除した、新たな配列を得ることができます。
const array = [1, 2, 3]
const newArray = array.filter((element)=> {
return true
})
console.log(newArray)
// [ 1, 2, 3 ]
console.log(Object.is(newArray, array))
// false
上の例では、filter()適用後も同じ内容の配列となっていますが、Object.is()による比較では不一致判定となっており、確かに新しい配列が返ってきていますね。
Array.prototype.slice()
slice()は引数で指定した範囲の要素をもつ配列を新たに作成して返します。
slice(start, end)のように開始位置と終端位置を引数にとります。endで指定した番号の要素array[end]は含まれません。
startやendは省略可能であり、endを省略した場合にはarray[start]から末尾までの要素を持つ配列が返されます。
startとendを省略した場合には、配列のコピーが返されます。
元の配列の要素を直接削除するメソッド
Array.prototype.pop()
pop()は元の配列の最後の要素を直接取り除きます。
返り値は削除された要素であり、削除された要素がない場合にはundefinedが返されます。
const array = [1, 2, 3]
const poppedElement = array.pop()
console.log(poppedElement)
// 3
console.log(array)
// [ 1, 2 ]
const empty = [].pop()
console.log(empty)
// undefined
Array.prototype.shift()
shift()はpop()に似たメソッドで、元の配列の最初の要素を取り除きます。
返り値もpop()と同様に削除された要素であり、削除された要素がない場合にはundefinedが返されます。
Array.prototype.splice()
splice()によって、元の配列に対して直接要素の追加・削除・置き換えができます。
splice(start, deleteCount, item1, item2)のように、spliceは複数の引数を取ります。
第１引数のstartによって、変更を加える配列の要素の位置を指定します。
第２引数のdeleteCountによって、start番目1の要素からいくつ要素を削除するかを指定します。
削除する要素にはstart番目の要素を含みます。
また、start番目以降の要素を削除するにはInfinityを指定します。
const array = ['a', 'b', 'c', 'd']
array.splice(2, Infinity)
console.log(array)
// [ 'a', 'b' ]
第３引数以降は追加する要素を指定できます。
削除処理の後、start番目から順次要素を追加していきます。
const array = ['a', 'b', 'c', 'd']
array.splice(1, 2, 'e', 'f')
console.log(array)
//[ 'a', 'e', 'f', 'd' ]
上の例では、第１引数の1によってarrayのインデックスでの1番目、つまり配列の先頭から2つ目の要素'b'の位置が開始位置として指定されています。
第２引数の2によって、2番目の要素から2つ、つまり2番目の要素'b'と3番目の要素'c'が削除されます。
最後に第3引数以降の値が第１引数で指定した箇所から順次追加されていきます。
追加される要素数よりも削除される要素数の方が多い場合についてもみてみます。
const array = ['a', 'b', 'c', 'd', 'e', 'f']
array.splice(2, 3, 'g')
console.log(array)
//[ 'a', 'b', 'g', 'f' ]
arrayから'c'、'd'、'e'が削除され、開始位置である'c'のあった箇所に'g'が追加されます。
最終的な結果は['a', 'b', 'g', , , 'f']のように'd'や'e'があった箇所が空となりそうですが、実際には追加された要素の直後に'f'がきます。
配列をバラバラにしてからつなぎ合わせるような挙動から、splice（接合する）という名がついたのであろうと思えますね。
pop()やshift()、splice()など直接配列から要素を削除するメソッドを使用する際には、配列の複製を新たに作成してから削除処理を行うことで、useStateのset 関数に変更が検知されるようにできます。
-
0番目から始まるインデックスでの番目。先頭から
start + 1番目。 ↩