VIDEO LESSON

JavaScriptのArray.prototype.splice()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:51動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はスプライスを紹介します。
0:03これは、配列の途中で要素を削除したり、挿入したりするための、配列のインスタンスメソッドです。
0:11途中の要素を取り除くだけでなく、同じ場所へ新しい要素を差し込んだり、既存の要素を別の要素へ置き換えたりできます。
0:21たとえば、タスクの一覧で、確認という項目をレビューへ置き換える、という場面で役立ちます。
0:28この動画では、書き方と引数、戻り値と元の配列への影響、記事の基本例、挿入だけの使い方、
0:35負の位置の指定、範囲外の扱い、そして注意点まで、実行結果と一緒に学びます。
0:42元の配列自体が変わる点が、大きな特徴です。
0:46削除と挿入を分けて考えるより、一つの編集として捉えると、使い方が見えてきます。
0:53まず動作環境を確認します。
0:55記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
0:59サファリでは一以降で使えます。
1:04ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:08これらの数値はエムディーエヌの互換性データに基づく目安です。
1:13スプライスは古くからある基本的な機能で、現在の主要な環境では広く使えます。
1:18追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:25対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:29長く使われている機能なので、安心して学べます。
1:33書き方を確認します。
1:34対象の配列に続けてスプライスと書き、カッコの中に、開始位置、削除件数、追加する要素の順で渡します。
1:41リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:47開始位置は、編集を始める添字です。
1:50削除件数は、そこから何個取り除くかです。
1:53追加する要素は、取り除いた場所へ差し込まれます。
1:56戻り値は、削除した要素だけを集めた新しい配列です。
2:00スライドの例では、一、二、三、四から二と三が取り除かれ、エックスが入り、
2:04一、エックス、四になることを実機で確認しました。
2:09まずはこの三つの役割を押さえましょう。
2:12記事の基本例を見ます。
2:13下書き、確認、公開という三つのタスクが入った配列があります。
2:18開始位置一、削除件数一、追加する要素レビューでスプライスを呼びます。
2:23実行すると、配列は下書き、レビュー、公開になり、記事の期待出力と一致し、
2:27ノードの実機結果とも一致しました。
2:31戻り値として受け取ったリムーブドには、取り除かれた確認だけが入ります。
2:36ポイントは、削除と追加を一度に行うことで、置き換えになることです。
2:41変更前の値が戻り値で手に入るので、元に戻す処理や、変更履歴を残す処理にもつなげられます。
2:48タスク管理のように、順番が大切な一覧では、この置き換えの形がよく登場します。
2:54挿入だけと、削除だけの使い方を見ます。
2:57まず記事の境界例です。
2:59一と三の間に、削除件数ゼロで二を挿入します。
3:03削除件数がゼロなので何も消えず、結果は一、二、三になり、記事の期待出力と一致し、
3:07実機でも確認しました。
3:11次に削除だけです。
3:13一、二、三、四から、位置一から二件を取り除くと、戻り値は二と三になり、元の配列は一と四だけが残ります。
3:21このように、削除件数と追加要素の組み合わせで、挿入、削除、置き換えの三通りを使い分けられます。
3:29やりたい編集に合わせて、数字を選ぶのがコツです。
3:33どちらの場合も、開始位置を間違えると別の要素まで消えるので、位置の確認が欠かせません。
3:40開始位置の指定を詳しく見ます。
3:43削除件数を省略すると、開始位置から末尾までの要素がすべて取り除かれます。
3:49スライドの例では、一から五までの配列で位置二から省略すると、三、四、五が戻り、
3:54元の配列は一と二だけになることを実機で確認しました。
4:00次に、開始位置に負の数を渡すと、末尾から数えた位置になります。
4:05マイナス一は最後の要素を指すので、一、二、三から三が取り除かれます。
4:11末尾に近い要素を扱うとき、長さを数えなくてよいので便利です。
4:16ただし、読み手に意図が伝わるよう、使いどころは選びましょう。
4:22途中へ複数の要素を挿入する実例を見ます。
4:25エー、ビー、シーという配列の位置一へ、削除件数ゼロでエックスとワイの二つを渡します。
4:31実行すると、エー、エックス、ワイ、ビー、シーという順になり、実機で確認しました。
4:37このとき削除はしていないので、戻り値は空の配列になります。
4:41戻り値が空でも失敗ではない、という点が大切です。
4:45追加する要素は、渡した順番のまま並びます。
4:48メニューの途中へ項目を差し込む、行の途中へ列を加える、といった編集で、この形がそのまま使えます。
4:55挿入位置を一つずらすだけで結果が変わるので、実行前に予測してみましょう。
5:01元の配列への影響を確認します。
5:03スプライスは、元の配列を直接変更するメソッドです。
5:07スライドの例では、ジーという配列をエイチという別の変数でも参照し、ジーに対してスプライスで先頭を取り除きました。
5:16すると、ジーだけでなくエイチの方も、二十と三十だけになったことを実機で確認しました。
5:23同じ配列を共有しているためです。
5:26記事でも、状態更新ではコピーを検討する、と注意されています。
5:31元の並びや内容が後でも必要なら、先にコピーを作ってから編集しましょう。
5:36この性質を知らずに使うと、別の画面や処理で思わぬ変化が起きます。
5:41名前が似ているスライスとの違いを整理します。
5:45スライスは、指定した範囲を取り出して新しい配列を返し、元の配列は変えません。
5:50スライドの例では、一、二、三から先頭だけを取り出し、元はそのまま残ることを実機で確認しました。
5:57一方、スプライスは元を編集し、削除した分を返します。
6:01名前は一文字違いでも、元の配列を変えるかどうかが決定的に違います。
6:06取り出したいだけならスライス、配列自体を編集したいならスプライス、と目的で使い分けてください。
6:13間違えやすい組み合わせなので、この機会に区別を固めておきましょう。
6:18注意点を三つ確認します。
6:20まず、戻り値は変更後の全体ではありません。
6:23削除した要素だけの配列です。
6:26変更後の内容を知りたい場合は、元の配列の方を確認してください。
6:31次に、開始位置が長さを超えた場合です。
6:34スライドの例では、長さ三の配列に位置十を指定すると、末尾への追加として扱われ、
6:39ゼットが最後に加わり、戻り値は空になることを実機で確認しました。
6:45エラーにはならないので、意図しない追加に気づきにくい点に注意が必要です。
6:51そして、削除件数が残りの要素数を超えても、末尾までで止まります。
6:56境界では、実行前に結果を予測する習慣が役立ちます。
7:00まとめです。
7:01スプライスは、開始位置と削除件数を指定して、配列の途中で削除、挿入、置き換えを行うメソッドで、
7:07削除した要素の配列を返し、元の配列自体を変更します。
7:13ポイントは三つです。
7:15まず、削除件数ゼロで挿入、追加なしで削除、その両方で置き換えになること。
7:21次に、開始位置は負の数で末尾から数えられ、削除件数を省略すると末尾まで削除すること。
7:28そして、元の配列が直接変わるので、残したい場合はコピーを検討することです。
7:34まずは記事の基本例と境界例を実行し、戻り値と変更後の配列を予測してから確かめてみてください。
7:42お疲れさまでした。
7:43開始位置と削除件数と追加要素、この三つを言葉で説明できるようになれば、理解が深まった証拠です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.splice()で配列の途中で要素を削除・挿入する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.splice()の使い方：引数・戻り値・実例と注意点 →