JavaScriptの配列の一部を切り出す（slice, spliceの使い方）

1. sliceメソッドとは？配列の一部を切り出す

1. sliceメソッドとは？配列の一部を切り出す

sliceは配列の一部だけを取り出して、新しい配列を作るメソッドです。元の配列は変わりません。たとえば、本棚の中から特定の範囲の本だけを別の箱に移すイメージです。

使い方は簡単で、slice(開始位置, 終了位置)のように書きます。終了位置の直前までの要素が切り出されます。

let fruits = ["りんご", "みかん", "バナナ", "ぶどう", "メロン"];

let someFruits = fruits.slice(1, 4);
console.log(someFruits);  // ["みかん", "バナナ", "ぶどう"]
console.log(fruits);      // ["りんご", "みかん", "バナナ", "ぶどう", "メロン"]

この例では、fruits配列のインデックス1から3まで（終了位置4の直前まで）の要素を切り出しています。sliceは元の配列を変更しません。

2. spliceメソッドとは？配列から要素を取り出して元の配列も変える

2. spliceメソッドとは？配列から要素を取り出して元の配列も変える

spliceは配列の指定した位置から指定した数の要素を削除し、その削除した部分を新しい配列として返します。つまり、元の配列も変わります。たとえば、本棚から本を取り出し、その分本棚からもなくなるイメージです。

書き方はsplice(開始位置, 削除数, 追加したい要素…)です。削除数だけ要素を取り除きたい場合は、追加要素は省略します。

let fruits = ["りんご", "みかん", "バナナ", "ぶどう", "メロン"];

let removedFruits = fruits.splice(1, 3);
console.log(removedFruits);  // ["みかん", "バナナ", "ぶどう"]
console.log(fruits);         // ["りんご", "メロン"]

この例では、インデックス1から3つの要素を配列から取り除き、取り除いたものをremovedFruitsに入れています。元のfruitsは変更されています。

3. spliceメソッドで要素の追加もできる

3. spliceメソッドで要素の追加もできる

spliceは削除だけでなく、削除した部分に新しい要素を追加することもできます。たとえば、みかんとバナナを取り除いて、代わりにキウイを入れたい場合です。

let fruits = ["りんご", "みかん", "バナナ", "ぶどう", "メロン"];

fruits.splice(1, 2, "キウイ");
console.log(fruits);  // ["りんご", "キウイ", "ぶどう", "メロン"]

この例では、インデックス1から2つの要素を削除し、その場所に「キウイ」を追加しています。

4. sliceとspliceの違いのまとめ

4. sliceとspliceの違いのまとめ

• slice：配列の一部を切り出して新しい配列を作る。元の配列は変わらない。
• splice：配列の一部を削除・置き換えし、元の配列が変わる。削除した要素を返す。

この違いを理解して使い分けると、配列操作がとても便利になります。

5. インデックス（位置）について

5. インデックス（位置）について

配列の要素には順番があり、先頭の要素が「インデックス0」、次が「インデックス1」というように番号が振られています。これを使ってどこからどこまでを切り出すか指定します。

たとえば、fruits[0]は「りんご」を指します。

6. sliceとspliceを使うときの注意点

6. sliceとspliceを使うときの注意点

• sliceは終了位置の直前まで切り出すので、終了位置は含まれません。
• spliceは削除数を間違えると意図しない部分が削除されることがあります。数をよく確認しましょう。
• どちらも負の値を使って、配列の後ろから数えることもできます。たとえばslice(-2)は後ろから2つの要素を切り出します。

7. JavaScriptの配列操作

7. JavaScriptの配列操作

JavaScriptの配列操作では、sliceとspliceはよく使うメソッドです。使い方と違いを理解して、配列の一部を切り出したり、変更したりするのに役立ててください。

まとめ

まとめ

JavaScriptの配列を安全かつ柔軟に扱うためには、sliceとspliceという二つの大切な機能をしっかり理解しておくことが欠かせません。配列はさまざまな場面で扱われる基本的な構造であり、位置の指定や配列全体の並びを意識しながら操作することによって、扱える情報の幅が大きく広がります。とくに今回学んだ二つの機能は、見た目はよく似ているものの、実際の動きや用途が大きく異なるため、どのような場面で使えばよいかを丁寧に理解しておくことが重要です。まずsliceは元の配列を変えずに一部を切り出す働きがあり、必要な部分だけを取り出して別に扱いたいときに非常に便利です。このとき対象となる範囲がはっきりしているほど、予想したとおりの結果が得られるので、インデックスの仕組みをあらためて確認しておくことが大切です。反対にspliceは配列そのものを変化させる性質を持ち、削除だけでなく置き換えや差し込みまでも行えるため、目的に応じてさまざまな変化を与えることができます。さらにspliceは削除した部分の配列を返すため、その返り値を活かして処理を分岐させたり、途中の情報を確認したりするような応用も可能です。 配列操作を使いこなすためには、単純な使い方だけでなく、インデックスの意味を深く理解することがとても重要になります。先頭から数える場面だけでなく、後ろから数えるための負の値の指定など、多様な書き方ができることを知っておくと、より柔軟にコードを書くことができます。多くのプログラムでは要素の位置関係や並び順が非常に重要になるため、sliceとspliceの違いを確実に区別し、どのようなときにどちらを選べばよいか判断できる力が身につけば、配列を扱う場面において迷いが少なくなり、より安定したコードを書くことができるでしょう。 また配列操作は単にデータを切り出すだけでなく、値の整理、不要な要素の削除、置き換え、順番の調整といった幅広い用途に利用できます。例えばWebアプリケーションでは、ユーザーが選んだ項目の整理や管理に配列が活躍することが多く、sliceによる取り出しやspliceによる整形を使えるかどうかで、処理の自然さや見通しのよさが大きく変わります。こうした知識は一度覚えると多くの場面で応用でき、後から新しい機能に挑戦するときにも役立つ基礎となります。配列に含まれる情報が多くなればなるほど、適切な処理を選ぶ力が必要になるため、今回学んだ内容を積み重ねていくことでプログラム全体の理解が深まります。 さらにsliceとspliceの使い分けを明確にすることで、配列を誤って変えてしまうといった問題を避けられるようになります。予期せぬ変更はバグの原因となりやすく、特に初心者や大規模なプログラムを扱う場面では注意が必要です。そのため元の配列を残したいときにはsliceを選び、意図的に変更を加えたいときにはspliceを選ぶという判断が自然にできるようになることが、とても大きな成長につながります。配列の扱いに慣れてくると、「削除したいのか」「部分的に取り出したいのか」「置き換えたいのか」という目的に応じてより直感的に選択できるようになり、コード全体も見通しのよい構造になります。 また今回の内容では、実際に配列を操作する中でエラーを防ぐためのポイントもたくさん含まれていました。配列の位置指定を誤ると、希望しない範囲を削除してしまったり、意図しない結果になることがあります。そのため実行前にインデックスを確認することや、範囲が適切かどうかを慎重に判断する姿勢も大切です。とくにspliceは元の配列を直接変えるため、変更前の状態をどのように扱うかを考えておくと、後から修正しやすくなります。 sliceとspliceはとてもよく使われる機能でありながら、細かい違いが多いため、今回のように実際のコード例とともに整理しておくと、理解がさらに深まります。ここまで学んだ知識を活かして、さまざまな場面で配列を自在に使いこなせるようになり、より楽しく効率的にJavaScriptを書くことができるようになるはずです。ぜひ、実際にコードを書きながら、この二つの違いや使い方を自分の手で確かめてみてください。

サンプルコードで確認しよう

let items = ["あさ", "ひる", "よる", "やすみ", "しごと"];

// sliceで取り出し
let sliced = items.slice(1, 4);
console.log(sliced);

// spliceで削除と追加
let replaced = items.splice(2, 2, "かわり");
console.log(items);
console.log(replaced);