JavaScript slice徹底解説｜配列と文字列操作の基本と応用

SHARE

この記事ではJavaScriptのslice()メソッドについて、文字列・配列での使い方や構文、負のインデックス活用法、類似メソッドとの違い、よくあるエラー回避法まで網羅的に解説し、効率的にデータを切り出す方法が理解できます。

JavaScriptのsliceメソッドとは

javascript+slice+array

sliceの基本的な役割

JavaScriptのsliceメソッドは、元のデータを変更せずに一部を抽出するための便利な機能です。主に「配列」や「文字列」に対して用いられ、指定した範囲の要素や文字を切り出して新しい配列または文字列として返します。
このとき重要なのは、元のデータに一切影響を与えない、非破壊的メソッドである点です。
例えば、大規模な配列から一部分だけを抽出したい場合や、文字列から必要な部分を取り出したい場合に頻繁に利用されます。

  • 指定した範囲を「コピー」して返す
  • 元の配列や文字列は変更されない
  • 開始位置・終了位置を柔軟に指定できる

このように、sliceはデータの一部を効率的に利用できるため、可読性の高いコードを実装する際に欠かせないメソッドといえます。

配列と文字列におけるsliceの違い

sliceは配列と文字列の両方に使えますが、対象によって挙動が異なります。両方とも「範囲を指定して切り出す」という点では共通していますが、返される型に違いがあります。

対象 返り値の型 特徴
配列 新しい配列 要素をコピーして返す。オブジェクト要素の場合は参照がコピーされる。
文字列 新しい文字列 指定部分の文字列を抽出。元の文字列の不変性は保たれる。

例えば、配列に対してsliceを実行すれば子配列を取得できます。一方、文字列に対して使った場合は部分文字列を返します。
この違いを理解しておくことで、「配列で欲しかったのに文字列として処理してしまった」といったミスを防ぐことができます。

sliceメソッドの基本構文

javascript+slice+array

引数の指定方法（開始位置・終了位置）

JavaScriptのsliceメソッドは、配列や文字列から一部を切り出して新しい値を返すために用いられます。このときの重要なポイントは、引数として「開始位置」と「終了位置」を指定することです。引数の扱い方を正しく理解することで、意図した部分だけを取り出せるようになります。

  • 開始位置（start）: 切り出しを始めたいインデックスを指定します。インデックスは0から始まるため、0を指定すると最初の要素、1を指定すると2番目の要素が開始位置となります。
  • 終了位置（end）: 切り出しを終える位置を指定しますが、この位置の直前までの要素が対象となります。つまり、終了位置に指定したインデックス自体は含まれません。
  • 省略時の挙動: 終了位置を省略すると、最後の要素までを切り出します。
  • 負のインデックス: 開始位置や終了位置に-1など負の値を指定すると、末尾から数えた位置が基準になります。例えば-1は末尾の要素を指します。

// 配列から一部を切り出す例
const arr = [10, 20, 30, 40, 50];
console.log(arr.slice(1, 3)); // [20, 30]

// 文字列から切り出す例
const str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

このように、sliceメソッドでは開始位置と終了位置を柔軟に指定できるため、必要に応じてデータを自在に切り出すことが可能です。

戻り値（返されるデータの特徴）

sliceメソッドのもうひとつの大きな特徴は、「元のデータを破壊せずに新しい値を返す」という点です。つまり、非破壊的メソッドであり、配列や文字列の元の値そのものは変更されません。これにより安全に部分データを扱うことができます。

  • 配列の場合: 指定範囲の要素を含む新しい配列オブジェクトが返されます。
  • 文字列の場合: 指定範囲の文字を含む新しい文字列が返されます。
  • 参照タイプの要素を含む場合: 配列の要素にオブジェクトが含まれる場合、参照はコピーされますがオブジェクトそのものは共有されます。

// 元の配列は変更されない例
const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(2, 4);

console.log(sliced);    // [3, 4]
console.log(numbers);   // [1, 2, 3, 4, 5] 元の配列はそのまま

この性質から、データの一部分を切り分けて処理したい場合や、元のデータを保持したまま演算を行いたい場合にsliceメソッドは非常に有効です。特にバグを防ぐ観点からも、非破壊的に動作するという点は大きなメリットといえます。

文字列におけるsliceの使い方

javascript+slice+string

部分的に文字列を切り出す方法

JavaScriptにおけるsliceメソッドは、文字列の一部を抽出して新しい文字列を作成する際に便利です。元の文字列を破壊することなく、指定した範囲の部分文字列を取得できます。そのため、文字列処理において安全かつ効率的に利用できるのが特徴です。

基本的な使い方は次の通りです。 

const text = "JavaScript Slice Example";
const result = text.slice(0, 10);
console.log(result); // "JavaScript"

この例では、文字列の先頭からインデックス0の位置を開始点、インデックス10の位置を終了点として指定しています。結果的に「JavaScript」という部分文字列が切り出されます。

  • slice(start, end) の形式で利用する
  • startは抽出を開始するインデックス
  • endは抽出を終了するインデックス（ただしこの位置の文字は含まれない）

この挙動によって、開始位置から終了位置直前までの文字列が返されるため、細かく範囲をコントロールすることが可能です。文字列の一部を取得する処理はWebアプリケーション開発において頻出であり、制御文や入力データの解析など幅広いシーンで役立ちます。

開始位置のみ指定した場合の挙動

sliceに開始位置だけを指定した場合、そこから文字列の末尾までが切り出されます。終了位置を省略することで「残りすべてを取得する」という挙動になるため、部分的な除去や分割の操作でよく利用されます。 

const text = "JavaScript Slice Example";
const result = text.slice(11);
console.log(result); // "Slice Example"

このように、slice(11)と記述するだけでインデックス11以降の末尾まで抽出されます。開始位置以降の全文字列を取りたいときには終了位置を省略するのが簡潔で便利です。

負のインデックスを利用する場合

sliceは負のインデックス指定にも対応しています。負の値を与えると、文字列の末尾から逆算した位置が参照されます。これは文字列後部の処理において特に有効です。 

const text = "JavaScript Slice Example";
const result = text.slice(-7);
console.log(result); // "Example"

この例では末尾から7文字分を切り出しています。末尾側の文字列を利用するような場面では、予め文字数を計算しなくても済むため便利です。

  • slice(-n) → 文字列の末尾からn文字目を基点に抽出
  • 開始と終了の両方を負のインデックスにすることも可能

ただし、負のインデックスを扱う際には「0基準」ではなく「末尾からの相対指定」であることを意識しておくと、思わぬ結果を避けられます。

開始位置より終了位置が小さい場合

sliceメソッドでは、もし開始位置が終了位置よりも大きい場合、結果は空文字列となります。これは、抽出範囲が存在しないために返される仕様です。 

const text = "JavaScript Slice Example";
const result = text.slice(10, 5);
console.log(result); // ""

このような場合は特にエラーが発生するわけではなく、単に空の文字列が返る点が特徴です。そのため、制御フローにおいて意図的に「範囲外なら空文字を戻す」という挙動を利用するケースもありますが、ほとんどの場合はインデックス指定の間違いとして扱われます。

文字列を扱う処理では、開始位置と終了位置の関係を確認しながら利用することで、意図しない結果を防ぐことができます。

配列におけるsliceの使い方

javascript+array+slice

部分配列を取得する方法

JavaScriptのsliceメソッドは、配列の一部を抽出して新しい配列を返す際によく利用されます。元の配列を変更しないため、安全に部分的な配列を取り出したいときに非常に便利です。特にリストデータや大量の要素を扱うアプリケーションでは、効率的なデータ操作の手段として頻繁に活用されます。

基本的な使用方法は以下の通りです。 

const fruits = ["apple", "banana", "cherry", "grape", "orange"];
const sliced = fruits.slice(1, 4);

console.log(sliced); // ["banana", "cherry", "grape"]

この例では、開始位置を1、終了位置を4と指定しています。sliceは「開始位置を含み、終了位置を含まない」という仕様のため、インデックス1から3までの要素が取り出され、新しい配列["banana", "cherry", "grape"]が返されます。

部分配列を取得する際のポイントは以下の通りです。

  • 元の配列は変更されないため、副作用を気にせず利用可能。
  • 開始位置は0から始まるインデックス番号で指定する。
  • 終了位置は「取り出す対象に含まれない」点に注意する。
  • 新しい配列として返るため、そのまま変数に格納して再利用できる。

このように、sliceメソッドを使えば、配列内の特定範囲のデータを柔軟に取り出すことができます。データ処理やビュー表示向けの配列加工など、様々な場面で役立つ基礎的なテクニックです。

sliceの応用的な使い方

javascript+slice+array

配列風オブジェクトを配列に変換する

JavaScriptでは、関数のargumentsオブジェクトや、DOM操作で得られるNodeListなど、配列のように見えるが実際には配列ではない「配列風オブジェクト」が存在します。これらは配列のメソッドを直接利用できないため、柔軟な操作を行うためには本物の配列へ変換する必要があります。slice()は、その変換に便利に活用できます。

たとえば、関数の引数を配列として処理したい場合に、次のように記述します。 


function example() {
  var argsArray = Array.prototype.slice.call(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3] と出力

このように、配列風オブジェクトを実際の配列へと変換できるため、map()やforEach()といったメソッドを適用できるようになります。これにより、よりモダンで読みやすいコードが書けるようになります。

call()を利用して他のデータ型へ適用する

slice()は配列専用メソッドのように見えますが、Function.prototype.call()やapply()を利用することで、他のデータ型にも適用することが可能です。例えば、文字列に対して配列風の操作を行いたいときに有効です。 


var str = "JavaScript";
var sliced = Array.prototype.slice.call(str, 0, 4);
console.log(sliced); // ["J", "a", "v", "a"]

この例では、文字列を1文字ずつ配列化しています。通常のslice()では部分文字列を取得しますが、Array.prototype.slice.call()を使うことで、「文字列を配列として扱う」別の表現が可能になります。
このテクニックは、ジェネリックな処理を実装したい場合や、データ型に依存しない柔軟なコードを記述するときに役立ちます。

map()など他メソッドとの組み合わせ

slice()は単体で使用するだけでなく、他のメソッドと組み合わせることでさらに強力になります。特にmap()やfilter()と併せて使う事で、配列から一部分を切り出しつつ加工するといった表現が可能です。 


var numbers = [10, 20, 30, 40, 50];
var result = numbers.slice(1, 4).map(function(num) {
  return num / 10;
});
console.log(result); // [2, 3, 4]

ここでは、配列の一部を切り出した上で、さらにmap()で変換処理を行っています。
また、データ分析処理やフロントエンドでの一部データの表示など、現場でも頻繁に使えるパターンです。

このようにslice()は単体利用だけでなく、他の配列メソッドと組み合わせることで、その用途を大きく広げる事ができます。単なる部分抽出以上のロジックを構築する際に、積極的に取り入れてみると便利です。

sliceと他のメソッドの違い

javascript+slice+method

sliceとsubstringの違い

JavaScriptにおける文字列操作では、sliceとsubstringの両方が部分文字列を取得するために用意されていますが、その挙動には明確な違いがあります。
sliceは「開始位置」と「終了位置」を指定し、負のインデックスをサポートするのが特徴です。一方で、substringは負の値を受け付けず、負のインデックスを0として扱うという制限があります。

  • slice(2, 5) → インデックス2から5未満を抽出
  • slice(-3) → 文字列の末尾から3文字を抽出
  • substring(-3) → 負の値を0として扱うため、先頭から全てを取得

このように両者は似た構文を持ちながら、インデックスの扱いに違いがあるため、柔軟さを求める場合はslice、シンプルな指定をしたい場合はsubstringを使うとよいでしょう。

sliceとsubstrの違い

sliceとよく混同されるのがsubstrです。どちらも部分文字列を取り出すためのメソッドですが、指定方法が異なります。
sliceは「開始位置」と「終了位置」を指定するのに対し、substrは「開始位置」と「取得する文字数」を指定する点が大きな違いです。

  • slice(2, 6) → インデックス2から5までの文字を取得
  • substr(2, 4) → インデックス2から4文字分を取得

また、substrは現在では非推奨とされており、将来的な互換性の観点からも利用は推奨されていません。モダンな開発ではsliceを利用するのがベストプラクティスです。

sliceとspliceの違い

配列操作におけるsliceとspliceも、混同されやすいメソッドです。しかし性質は大きく異なります。
sliceは元の配列を変更せずに、一部をコピーして新たな配列を返すのに対し、spliceは元の配列自体を直接変更する破壊的なメソッドです。

  • array.slice(1, 3) → インデックス1から2までの要素を取得（元の配列はそのまま）
  • array.splice(1, 2) → インデックス1から2つの要素を削除（元の配列が変化）
  • spliceは削除だけでなく、新しい要素の挿入や置換も可能

この違いを理解しておかないと、意図せず元の配列を変更してしまいバグにつながる可能性があります。したがって、非破壊的に部分配列を取得したい場合はslice、配列内容を直接編集したい場合はspliceを選ぶと良いでしょう。

sliceの活用事例と注意点

javascript+slice+array

よくあるエラーと対処法

JavaScriptのsliceメソッドは非常に便利ですが、使い方を誤ると予期せぬ結果やエラーにつながることがあります。特に初心者に多いのは、開始位置や終了位置の指定時に発生する不具合や、意図しない型を渡してしまうケースです。ここでは代表的なエラーとその対処法を整理します。

  • インデックス範囲の誤解:
    sliceでは終了位置のインデックスは含まれないため、指定した範囲が想定より短くなることがあります。
    → 対処法：終了位置は「含まれない」挙動を理解し、一つ大きい数値を指定する。
  • 負のインデックスの混乱:
    負数を指定すると配列や文字列の末尾からカウントされる仕様がありますが、慣れていないと誤用しやすいです。
    → 対処法：開発時にはconsole.log()を活用し、範囲が意図通りか確認する習慣を持つ。
  • メソッド未定義エラー:
    sliceはnullやundefinedには使用できません。そのため、変数が配列や文字列であることを確認せずに呼び出すと、TypeError が発生します。
    → 対処法：事前にArray.isArray()やtypeofで型を判定してから利用する。

これらを回避するためには、実際のデータ型をしっかりチェックすることが重要です。sliceメソッドは「安全なコピー」を返す特徴があるため、実装次第でエラーを防ぎながら効率的にデータを操作できます。

想定外の型を扱った場合の挙動

sliceは配列や文字列で主に利用されますが、JavaScriptの柔軟な性質から他の型に対して使うと独特の挙動を示します。誤って想定外の型を渡すと、期待通りに動作しないため注意が必要です。

  • 数値に対してsliceを使った場合:
    数値は反復可能オブジェクトではないため直接使うとTypeErrorが発生します。
  • オブジェクトに対してsliceを使った場合:
    標準オブジェクトにはsliceが定義されていないため、基本的にはエラーになります。ただし、Array.prototype.slice.call()のように「配列風オブジェクト」に適用すると配列に変換できます。
  • 関数に対してsliceを使った場合:
    通常の関数にはsliceが存在しないためエラーですが、argumentsオブジェクトのように配列に似た構造を持つケースでは有効です。

このように、sliceは文字列と配列以外の型では意図した結果を得られないケースが多いです。コード内で「どの型に対してsliceを呼び出しているのか」を常に意識することで、予期しないバグを防ぐことができます。

sliceに関する仕様と互換性

javascript+slice+array

ECMAScript仕様における定義

JavaScriptのsliceメソッドは、ECMAScript仕様において配列インスタンスおよび文字列インスタンスに定義されています。仕様では、sliceは元のオブジェクトを変更することなく、新しい配列や文字列を返す「非破壊的メソッド」として位置付けられています。そのため、sliceは参照透過性が高く、安全に部分的なコピーや切り出し処理を行える点が特徴です。

具体的には、内部的な抽象操作として「開始インデックスから終了インデックス未満までを取り出す」動作が定義されています。また、開始位置や終了位置に負の値を指定した場合は「末尾からのオフセット」として計算されるルールも仕様で明確に定義されています。これにより、すべての実装環境で一貫した挙動が保証されるように設計されています。

さらに、配列の場合はスパースアレイ（疎配列）に対しても動作が定義されており、欠損要素（empty slot）はそのまま保持されます。文字列に対するsliceについても、Unicode文字単位での動作が規定されており、文字化けを避けつつ部分抽出できるようになっています。

ブラウザ間の対応状況

sliceメソッドは非常に古くから実装されているため、主要なブラウザ（Google Chrome、Mozilla Firefox、Safari、Microsoft Edgeなど）において高い互換性があります。特に配列に対するsliceはECMAScript第3版の時点で定義されており、Internet Explorerを含む過去の環境でも広くサポートされてきました。

文字列に対するsliceも同様に、モダンブラウザで安定して利用可能です。HTML5時代以降、モバイル環境のブラウザ（Safari iOS、Chrome Androidなど）でも問題なく動作します。そのため、Webアプリケーションにおいてクロスブラウザの互換性問題を気にせずに利用できるメソッドだといえます。

ただし、特殊なケースとして一部の古いIEバージョンでは、配列風オブジェクトやNodeListなどに対するsliceの挙動に制限がある場合がありました。現代のJavaScript実装では、Function.prototype.call()やArray.from()などを組み合わせることでこの問題は解消されています。

総じて言えば、「JavaScriptのsliceメソッドはECMAScript仕様に準拠し、ブラウザ間で高い互換性を持つ」と理解しておけば安心して活用できます。

まとめ

javascript+slice+array

文字列操作・配列操作におけるsliceの位置づけ

JavaScriptにおけるsliceは、文字列や配列の一部を切り出すための基本的かつ汎用的なメソッドです。特に特徴的なのは、元のデータを壊さずに新しい部分データを生成する「非破壊メソッド」である点です。これにより、既存の配列や文字列を保持したまま柔軟なデータ操作が可能になります。

文字列操作の場面では、テキストの一部を抽出して加工したり、部分文字列を利用した検索や比較といった用途で有効です。一方、配列操作では、部分配列の生成やデータの分割といった処理に幅広く使用されます。つまり、sliceは文字列や配列に共通して「必要な部分のみを安全に取り出す役割」を担っていると言えます。

他メソッドと比較した使い分けのポイント

sliceは非常に便利ですが、同様に部分抽出を行うsubstringやsubstr、さらには配列を操作するspliceなど、似た機能を持つメソッドも存在します。これらと適切に使い分けることが開発効率を高めるカギとなります。

  • sliceは非破壊的に部分抽出できる → 安全にデータを扱いたい場合に最適。
  • substringは負のインデックスをサポートしない → インデックスの指定方法に制約がある。
  • substrは非推奨 → 古いコードには存在するが、新規開発では避けるべき。
  • spliceは破壊的に配列を変更 → 要素の追加や削除を伴う場面で使用。

このように、「一時的に部分データを抜き出したいのか」「元のデータ自体を変更したいのか」といった目的に応じて選択が分かれます。実務においては、sliceをデフォルトの選択肢としつつ、必要に応じて他のメソッドを補助的に活用することで、コードの可読性とメンテナンス性を高められるでしょう。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

JavaScript splitメソッド完全ガイド！基本から実…

次の記事

JavaScriptのswitch文完全ガイド！使い方から応用…