【初心者向け】JavaScriptのslice関数｜文字列・配列の切り出しガイド

はじめに

JavaScriptで文字列や配列の一部を取り出す操作は、開発や実装の中でも頻繁に登場します。

例えば、ユーザーの入力から特定の文字列を抽出したり、データ配列の一部だけを加工する場合などがあります。
このような場合に役立つのがslice関数です。

本記事では、slice関数の基本的な使い方から応用例までを、具体的なコード例を交えながら解説します。slice関数を正しく理解することで、効率的かつ安全にデータ操作を行えるようになりましょう。

slice関数の基本

文字列でのslice使用例

JavaScriptの文字列に対してslice関数を使用すると、指定した範囲の文字列を抽出することができます。

基本的な書き方は以下の通りです。

const str = "JavaScript";
const result = str.slice(0, 4);
console.log(result); // "Java"

このコードでは、文字列 “JavaScript” の先頭から 0〜3 までの文字が抽出され、結果として “Java” が得られています。

slice(開始位置, 終了位置)の形式で呼び出し、抽出範囲には開始位置は含まれ、終了位置は含まれません。

また、この開始位置、終了位置に指定する数のことをインデックスといいます。

配列でのslice使用例

配列に対しても同じようにslice関数を使用できます。
配列の一部を取得する際に便利です。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // [2, 3, 4]

この例では、インデックス1から3までの要素が抽出され、新しい配列として [2, 3, 4] が返されています。

sliceは配列のコピーや部分配列（必要な要素だけを取り出した配列）の作成に非常に便利で、特に元の配列を変更したくない場合に重宝します。

開始位置と終了位置の指定方法

正のインデックス指定

正のインデックスを使用すると、配列や文字列の先頭から数えた位置で範囲を指定できます。

const text = "Hello World";
console.log(text.slice(0, 5)); // "Hello"
console.log(text.slice(6));    // "World"

開始位置として6を指定することで、6〜末尾 の文字が切り出されています。
インデックスを開始位置のみを指定すると終了位置は末尾まで抽出されます。

負のインデックス指定

負のインデックスを使うと、末尾から数えて位置を指定することができます。

const arr = ["あ", "い", "う", "え", "お"];
console.log(arr.slice(-3, -1)); // ["う", "え"]

負のインデックスでは -1 が末尾の要素を指し、-2 が末尾から2番目という具合にカウントされます。

上記の例では、末尾から3番目の “う” から末尾2番目の “え” までが抽出されています。
末尾側から柔軟に範囲を指定したい時に非常に便利な手法です。

部分抽出の応用テクニック

文字列操作での応用

文字列操作での応用では、sliceを活用して、規則的な文字列から日付やファイル名などを簡潔に取り出す方法を紹介します。

日付文字列から年・月・日を抽出する

const dateStr = "2025-11-27";
const year = dateStr.slice(0, 4); // "2025"
const month = dateStr.slice(5, 7); // "11"
const day = dateStr.slice(8); // "27"

​​このコードでは、それぞれ “2025”, “11”, “27” を抽出できます。
日付の分解は業務で頻繁に必要となる処理であり、フォーマットが一定であればsliceが最も扱いやすい方法です。

ファイル名から拡張子だけ取得する

const file = "document.pdf";
const extension = file.slice(file.lastIndexOf('.') + 1); // "pdf"

この方法では “pdf” の部分を取得できます。

拡張子の判定や制御はWeb開発でよく行われるため、覚えておくと便利です。

配列操作での応用

配列操作での応用では、配列の一部だけを取り出して加工・分割・前処理に活用する方法を紹介します。

配列の先頭と末尾を除いた部分だけを取り出す

const numbers = [1, 2, 3, 4, 5];
const middleNumbers = numbers.slice(1, -1); // [2, 3, 4]

このコードでは [2, 3, 4] が抽出されます。

先頭と末尾のデータを除外したいケースはデータ前処理（不要な要素を除外して分析や加工しやすくする処理）などでよくあります。

配列を中央で分割

const data = ["A", "B", "C", "D"];
const firstHalf = data.slice(0, 2); // ["A", "B"]
const secondHalf = data.slice(2);   // ["C", "D"]

このように、配列を中央で分割することも可能です。

例えば、データの処理を2つのタスクに分けて処理する場合や、ページネーションで配列を分割して表示する場合などで活用できます。

よくあるエラーと注意点

範囲外指定時の挙動

sliceは、指定した範囲が実際のデータの長さを超えた場合でもエラーにはなりません。

const arr = [1, 2, 3];
console.log(arr.slice(0, 10)); // [1, 2, 3]

範囲を超えても自動的に末尾まで抽出されます。

ただし、空配列や空文字列が返る場合もあるため、処理の前後でチェックが必要です。

元の配列や文字列は変更されない

slice関数は非破壊メソッドです。
元のデータは変更されません。

const arr = [1, 2, 3];
const newArr = arr.slice(0, 2);
console.log(arr); // [1, 2, 3]
console.log(newArr); // [1, 2]

このコードを実行しても arr は [1, 2, 3] のまま維持されます。

データの安全性が求められる場合は、元データを壊さずに部分的に抽出できる点は非常に大きなメリットです。

破壊的メソッドと非破壊的メソッド

破壊的メソッドは、元の配列や文字列を直接変更する処理です。

例えば splice() は要素を削除すると元の配列が変わります。

splice() の例（破壊的メソッド）

const arr = ["A", "B", "C", "D"];
const result = arr.splice(1, 2);
console.log(arr);    // ["A", "D"]　←もとの配列が破壊されている
console.log(result); // ["B", "C"]

一方、非破壊的メソッドは元のデータを変更せず、新しい配列や文字列を返す処理です。

slice() や concat() が代表例です。

slice() の例（非破壊的メソッド）

const arr = ["A", "B", "C", "D"];
const result = arr.slice(1, 3);
console.log(result); // ["B", "C"]
console.log(arr);    // ["A", "B", "C", "D"]　←もとの配列もそのまま残る

このように、処理の結果が同じに見えても、元データが変わるかどうかが両者の大きな違いです。

効率的なsliceの活用

sliceは、機能を正しく理解することで、データを安全に扱え、意図した範囲だけを効率的に取り出すことができます。

これらを踏まえてsliceを活用すると、安全にデータを切り出せるだけでなく、後からの処理や分析もスムーズになります。

正しく使いこなして、日常のプログラミングに役立てていきましょう。

まとめ

本記事では、JavaScriptのslice関数について、文字列や配列の基本操作から応用テクニック、実装での活用方法までを解説しました。

sliceは元の配列や文字列を変更せずに部分的に取り出せる機能 であり、終了位置の扱いや負のインデックス指定などの特徴を理解しておくことが重要です。
ポイントを押さえて使うことで、効率的で安全なデータ操作が可能になります。

こうしたJavaScriptを基礎から学び、Web制作に挑戦したい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

段階的に学び、コーディングスキルを着実に身につけていきましょう。