【JavaScript】sliceとは？配列・文字列を切り出す方法を初心者向けにわかりやすく解説

はじめに

JavaScriptを学び始めると、配列や文字列を扱う機会が多いのではないでしょうか。
要素の追加や削除、特定の範囲だけを抽出したいときに便利なメソッドはいくつかありますが、その中でも多用されるのがsliceメソッドです。

たとえば、画面上に表示する情報を一部だけ抜き出したい場合や、文字列を特定の範囲で取り出したい場合に活用されることが多いです。
さらに、元のデータを変更せずに新しい配列を作りたいシーンでも登場するので、sliceを使いこなしておくと便利です。

一方で、sliceと似た名前のメソッドや、類似する機能を持つ別のメソッドもあります。
たとえばsubstringやspliceなどが代表的な例です。
これらとsliceを混同すると、思わぬバグを引き起こしてしまうことがあります。

この記事では、初心者の皆さんにもわかりやすい言葉を使いながら、配列や文字列におけるsliceの使い方をしっかり整理します。
また、実際の業務でどう役立つのかや、注意すべきポイントなども合わせて解説します。

この記事を読むとわかること

• sliceメソッドの基本的な使い方
• 配列と文字列の切り出し方法の違い
• substringやspliceなど、類似メソッドとの相違点
• 実務でよくある具体的な活用例
• sliceを使う際に覚えておきたい注意点やコツ

sliceメソッドとは

sliceメソッドは、配列や文字列などから指定した範囲の要素を新しいオブジェクトとして取り出すための機能です。
このとき元の配列や文字列そのものは変更しません。

たとえば、配列であれば array.slice(startIndex, endIndex) のように記述し、開始位置と終了位置（終了位置は排他的）を指定します。
すると、元の配列から切り出された要素だけを集めた新しい配列が返されます。

JavaScriptでは、配列操作の場面で非破壊的（イミュータブル）な処理を行いたい場合にsliceがよく使われます。
元の配列を直接変更すると、予期せぬ影響が広範囲に及ぶことがあります。
これを防ぐため、sliceを活用して必要な要素だけを取り出すことで、安全にデータを扱えるというメリットがあります。

文字列に対してもsliceを適用できますが、配列の場合と少し使い勝手が異なる面があります。
ただ、それほど難しく考えなくても大丈夫です。
書き方そのものは配列と似ていますが、結果として返ってくるのは指定した範囲の文字列です。

基本的な使い方

それでは、具体的な書き方を見てみましょう。
まずは配列を例にします。
たとえば下記のようなコードがあります。

コピー
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// 先頭から3つ目の要素の手前まで切り出す
const slicedFruits1 = fruits.slice(0, 2);
console.log(slicedFruits1); // ["apple", "banana"]

// 2番目から最後まで切り出す
const slicedFruits2 = fruits.slice(1);
console.log(slicedFruits2); // ["banana", "cherry", "date", "elderberry"]

// 負の値を使うと末尾から数える
const slicedFruits3 = fruits.slice(-3);
console.log(slicedFruits3); // ["cherry", "date", "elderberry"]

上記の例では、slice(開始インデックス, 終了インデックス) を指定するだけで、必要な要素だけを抜き出した新しい配列が得られます。
終了インデックスは指定しなかったり、マイナスの値を使うことも可能です。

• slice(0, 2) はインデックス0番目から2番目の手前（つまり1番目まで）を抽出
• slice(1) はインデックス1番目以降すべてを抽出
• slice(-3) は末尾から3番目以降を抽出

いずれの操作も元の配列 fruits は変更されません。
これがsliceの大きな特徴の一つです。

配列に対するsliceの活用

配列におけるsliceは、たとえばページネーション機能を実装したいときに活用されることがあります。
Webアプリケーションで多くのデータを一覧表示する際に、1ページ目は先頭から10件、2ページ目は11件目から20件目…のように区切って表示するケースです。

実務では、データベースのクエリ自体で分割する方法を取ることも多いですが、フロントエンド側だけで簡易的にページングしたい場合は、sliceが非常に便利です。

以下の例では、配列 items の中身を10件ごとに区切って表示する機能を、JavaScriptでざっくり実装しています。

コピー
function getItemsByPage(items, pageNumber, pageSize) {
  const startIndex = (pageNumber - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return items.slice(startIndex, endIndex);
}

// サンプルデータ
const items = [...Array(35)].map((_, i) => `Item ${i + 1}`);

// 2ページ目（pageNumber=2）を表示するとき
const page2Items = getItemsByPage(items, 2, 10);
console.log(page2Items);
// ["Item 11", "Item 12", ... "Item 20"]

このように、sliceを使うと開始位置と終了位置を簡単に調整できます。
ページネーションのように特定範囲だけ取り出したいときに便利ですね。

文字列に対するsliceの活用

次は文字列におけるsliceの使い方を見てみましょう。
文字列の場合も、基本的な文法は string.slice(startIndex, endIndex) という形で、配列とよく似ています。

コピー
const text = "Hello World";

// 先頭5文字を取得
const slice1 = text.slice(0, 5);
console.log(slice1); // "Hello"

// 6文字目以降を取得
const slice2 = text.slice(6);
console.log(slice2); // "World"

// マイナスインデックスで最後の5文字を取得
const slice3 = text.slice(-5);
console.log(slice3); // "World"

文字列の場合、slice(0, 5) は先頭から5文字目の手前（つまり4文字目まで）を切り出します。
配列と同じように、終了インデックスは指定しなければ最後まで取得できますし、負の値を使えば末尾からの指定も可能です。

実務で文字列の一部を切り出すシーンとしては、たとえばユーザー名の冒頭数文字だけを表示するケースや、長い文章をサマリー表示したい場合などが挙げられます。
少しだけ一部を取り出したい、あるいは最後の数文字だけ確認したい、といったケースでも役立ちます。

sliceとsubstringの違い

JavaScriptには、文字列を切り出す類似機能としてsubstringがあります。
sliceとsubstringの機能は似ていますが、挙動に細かな違いがあるため注意が必要です。

たとえばsubstringは、startIndexがendIndexより大きい場合にインデックスを自動的に入れ替えますが、sliceはそのまま空文字を返します。
また、負の値をサポートしていない点も異なります。

• slice(-2) は末尾から2文字を切り出す
• substring(-2) は引数が0と解釈されるので、結局先頭からの処理になってしまう

こうした差があるため、特に負の値をうまく扱いたい場合はsliceの方が柔軟に使えます。
一方、負の値を使わない場面であれば、substringでも同様の処理が行えます。
ただしコードを読む際に「これはどちらを使っているんだろう？」と混乱しないよう、ある程度チーム内で使い分けのルールを決めることがあるかもしれません。

sliceとspliceの違い

配列においては、spliceというメソッドもあります。
名称がよく似ていますが、こちらは全く異なる動きをするので気をつけたいところです。

• slice: 元の配列は変更せず、新しい配列を返す
• splice: 元の配列を直接変更する

たとえば、要素を追加・削除したいときはspliceを使う場面が多いです。
しかし、元の配列が変わってしまうので、他の処理に影響を及ぼす可能性があります。
一方でsliceは、非破壊的に部分配列を取り出すだけなので、元の配列には一切手を加えません。

配列を切り出したいが、元の配列はそのまま残したい場合はsliceを使う。
元の配列を実際に変更したい場合はspliceを使う。
この認識をはっきり持っておくだけで、意図しない動作を防ぎやすくなります。

実務での活用例: 画面に表示するデータの区切り

先ほど少し触れたページネーション以外にも、sliceが実務で用いられる場面は多々あります。
たとえば、フロントエンドの表示領域に合わせて動的にデータを切り出すケースです。

画面幅が大きいデスクトップ環境では多めに表示し、スマートフォンなど小さな画面では一部だけ表示したい、というような状況を考えてみてください。
レスポンシブデザインを適用する際に、JavaScriptで配列を加工するときがあります。

下記の例は、ウィンドウ幅が一定以下になったら「表示上限」を切り替える例です。
実際にはライブラリやフレームワークを使うケースも多いですが、発想としてはこういう使い方もあるというイメージです。

コピー
function getVisibleItems(items, windowWidth) {
  // たとえば900pxより小さい画面なら3件表示、それ以外なら5件表示にする
  const limit = windowWidth < 900 ? 3 : 5;
  return items.slice(0, limit);
}

const items = ["A", "B", "C", "D", "E"];

// 画面幅800の場合
console.log(getVisibleItems(items, 800)); // ["A", "B", "C"]

// 画面幅1200の場合
console.log(getVisibleItems(items, 1200)); // ["A", "B", "C", "D", "E"]

このように、切り出す要素数を動的に決めることで、ユーザーに合わせた見やすいレイアウトを提供できます。
もちろん、こうした処理をバックエンドやCSSだけで行う方法もありますが、JavaScriptで直接データを操作する場合はsliceが活躍します。

実務での活用例: ライブラリやフレームワーク内での利用

ReactやVue.jsなどのフレームワーク内でも、配列データを部分的に加工して表示するときにsliceがよく使われます。
たとえば、配列の一部だけをコンポーネントに渡す、あるいはステート管理で配列の一部を取り出すなどの操作です。

開発現場では、チームのコーディング規約次第で別の方法を使うこともありますが、非破壊的に配列を取り出せる手段としてsliceは覚えやすい存在です。
とくに、大規模なプロジェクトでは、あちこちから配列の参照が行われている可能性があるため、元データを勝手に変更してしまうと混乱を招きやすくなります。

また、パフォーマンスの観点からも、「元の配列を変更せずに新たな配列を作りたい」という要求はよくあります。
イミュータブルな操作が期待される場面でも、sliceは役に立ちます。

sliceメソッドの注意点

ここまで見てきたように便利なsliceですが、注意しておきたい点もいくつかあります。

1. 負のインデックスの扱い

sliceは負のインデックスに対応しているので、配列や文字列の末尾から指定して範囲を切り出せます。
ただ、実際に負の値を使うと、コードを読む人が混乱する可能性があります。
わかりやすさを優先するなら、配列の長さを使って明示的に計算してからsliceする方法もあります。

2. 第二引数 (終了インデックス) は排他的

指定した終了インデックスそのものは含まれません。
これを忘れていると「思ったより1件少ない」「文字列が1文字足りない」といったミスが起こることがあります。

3. 文字列の場合の返り値は文字列

配列と同じ感覚で操作しても返ってくるのは文字列です。
文字列はイミュータブルなので、その場で変更するような使い方はできません。

4. startIndex > endIndex の場合

このように指定すると、配列や文字列では空の値（空配列や空文字）が返ってきます。
substringとは挙動が違うので注意してください。

上記の点を理解したうえで使えば、それほど難しいものではありません。

パフォーマンスとslice

JavaScriptでのパフォーマンスは、一般的にアルゴリズムの複雑度や処理回数が大きな影響を与えます。
sliceは、一部を切り出して新しい配列や文字列を作るだけのシンプルな処理です。

ただし、極端に大きい配列や文字列に対して何度もsliceを繰り返すと、やはりメモリ消費と処理時間は気になります。
一方、元の配列を変更する方法（例えばspliceなど）では、イミュータブルな操作と比べてバグを起こしやすい可能性があるため、トレードオフを考慮する必要があります。

実務では、以下のような観点でsliceの利用を検討することがあります。

• 1回の操作で処理する要素数が少量なら、sliceのコストはそれほど大きくない
• 大きな配列を複数回に分けて扱うときは、ページネーションやストリーム的な処理を活用する
• 元の配列や文字列を変更せずに部分的な処理を行いたい場合に便利

結局のところ、sliceによるコストよりも、可読性やバグ防止のメリットが上回ることが多いです。

sliceとイミュータブルなデータ操作

最近は、ReactやReduxなどのフロントエンドフレームワークでも、イミュータブルにデータを扱うことが推奨されています。
元の配列やオブジェクトを直接書き換えず、新しく生成して更新を表現するほうが、差分検知などがやりやすくなるからです。

そこで活躍するのが、非破壊的なデータ操作を可能にするメソッドです。
sliceは配列の一部を新しい配列に取り出せるので、「元の配列を保存しつつ、特定範囲だけを別で利用したい」 というシーンに適しています。

もし要素を追加・削除する場合は、concatやスプレッド構文 [...] などと組み合わせて、新しい配列を作るのが一般的です。
一方、既存の要素を切り出すときはsliceを使う、というように、それぞれのメソッドの役割を明確にすることで、コードの可読性を維持しやすくなります。

sliceの上級テクニック: 配列を複製する

sliceの引数を指定しないか、あるいは slice(0) のように書くと、配列全体をコピーできることをご存じでしょうか。
これも実務でよく使われるテクニックの一つです。

コピー
const original = [1, 2, 3];
const copy1 = original.slice();
const copy2 = original.slice(0);

// どちらも [1, 2, 3] という新しい配列になる
copy1.push(4); 
console.log(original); // [1, 2, 3]
console.log(copy1);    // [1, 2, 3, 4]

このように、sliceに引数を与えずに呼び出すか、開始インデックスに0を指定するだけで、新しい配列を簡単に作成できます。
元の配列には影響を与えずに、コピーした先だけを改変できるため、イミュータブルな操作を維持しやすいです。

ただし、オブジェクトや配列をネストしている場合は、シャローコピー（浅いコピー）にしかならないという点には注意が必要です。
深い入れ子構造のオブジェクトがある場合は、別途深いコピーの仕組みを検討することがあります。

まとめ

ここまで、JavaScriptのsliceメソッドを中心に、配列や文字列での具体的な使い方と注意点を解説してきました。

sliceは元の配列や文字列を変更せずに部分的な要素を取り出すため、複数の処理やデータ参照が絡む場面でも安全に使えます。
また、ページネーションや表示領域の切り替えなど、現場でも幅広く活用される手法の一つです。

もし配列を直接変更する必要があるなら、spliceと混同しないようにしましょう。
さらに、文字列を切り出すときにsubstringやsubstrを使う場合は、それぞれの違いを押さえるとエラーを減らせます。

最後に、sliceの特徴をまとめると以下のようになります。

• 非破壊的操作: 元データはそのまま
• 柔軟なインデックス指定: 負の値や省略が可能
• 複製も作れる: 引数なしで呼び出せば配列のコピー
• 実務での活用例が多い: ページネーション、表示領域の切り替えなど

こうしたポイントを押さえながら、sliceをうまく使ってみてください。
配列や文字列を扱う際に大変役立つメソッドなので、この機会にぜひ手を動かして慣れておきましょう。