JavaScript「slice」の使い方 | 文字列・配列を切り取る方法をわかりやすく解説

JavaScriptのslice()メソッドは、文字列や配列から一部分を切り出すのに非常に便利です。

この記事では、そのslice()メソッドの基本的な使い方から、もう少し実践的な使い方までわかりやすく解説していきます。

この記事を書いた人

• 未経験からWebエンジニアとして転職成功（年収 30% アップ）
• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

slice()メソッドの基本

slice()メソッドとは

slice()メソッドは、文字列(String)や配列(Array)から、指定した範囲の要素を新しい文字列や配列として切り出すメソッドです。

元の文字列や配列はそのままで、切り出した部分が新しい文字列や配列として返されます。

基本的な構文

slice()メソッドの基本的な構文は以下のようになります。

文字列.slice(開始位置, 終了位置);
配列.slice(開始位置, 終了位置);

両方とも開始位置は含むけれど終了位置は含まないことに注意しましょう。
また、終了位置は省略可能で、省略した場合は最後まで切り出されます。

使用例

文字列と配列、それぞれの簡単な使用例を見てみましょう。

// 文字列の例
let str = "ABCDEFG";
console.log(str.slice(1, 3)); // "BC"

// 配列の例
let arr = ["A", "B", "C", "D", "E", "F", "G"];
console.log(arr.slice(1, 3)); // ["B", "C"]

もう少し実践的な使い方

負の数を指定する

slice()メソッドでは、開始位置と終了位置に負の数を指定することもできます。
その場合、後ろから数えた位置になります。

let arr = ["A", "B", "C", "D", "E"];

console.log(arr.slice(-3));    // ["C", "D", "E"]
console.log(arr.slice(1, -2)); // ["B", "C"]

開始位置 ＞ 終了位置の場合

開始位置が終了位置より大きい場合、空の文字列や配列が返ります。

let str = "ABCDEFG";
console.log(str.slice(3, 1)); // ""

let arr = ["A", "B", "C", "D", "E"];
console.log(arr.slice(3, 1)); // []

よくあるミスと注意点

文字列や配列以外にslice()を使おうとする

slice()メソッドは文字列と配列にしか使えません。
他のオブジェクトに使おうとするとエラーになるので注意しましょう。

let obj = {a: "A", b: "B", c: "C"};
console.log(obj.slice(1)); // TypeError: obj.slice is not a function

開始位置や終了位置に不適切な値を指定する

開始位置や終了位置に、文字列や配列の長さを超える値や、数字以外の値を指定すると、予期せぬ結果になったりエラーになったりします。

let str = "ABCDEFG";

console.log(str.slice(1, 100)); // "BCDEFG"
console.log(str.slice(1, "3")); // "BC"
console.log(str.slice(1, "x")); // "A"

slice()メソッドのまとめ

slice()メソッドは、文字列や配列の一部を切り出すのに非常に便利なメソッドです。
基本的な使い方をマスターすれば、さまざまな場面で活用できるでしょう。

ただし、類似のメソッドもいくつかあるので、使い分けに注意が必要です。
状況に応じて適切なメソッドを選択し、効率的なコーディングを心がけましょう。

類似のメソッドとの違い

substring()メソッド

substring()メソッドも、文字列の一部を切り出すメソッドです。
slice()メソッドとの主な違いは以下の2点です。

substr()メソッド

substr()メソッドも文字列の一部を切り出しますが、第2引数に切り出す文字数を指定する点がslice()やsubstring()と異なります。

let str = "ABCDEFG";
console.log(str.substr(1, 3)); // "BCD"

splice()メソッド

splice()メソッドは配列専用のメソッドで、配列の要素を削除したり追加したりできます。
slice()メソッドとの主な違いは、元の配列を変更する点です。

let arr = ["A", "B", "C", "D", "E"];

console.log(arr.splice(1, 2)); // ["B", "C"]
console.log(arr);              // ["A", "D", "E"]

まとめ

slice()メソッドは、文字列や配列から指定した範囲の要素を切り出すのに非常に便利なメソッドです。
基本的な使い方をマスターすれば、さまざまな場面で活用できるでしょう。

ただし、類似のメソッドもいくつかあり、それぞれ動作や使用目的が異なります。状況に応じて適切なメソッドを選択し、効率的なコーディングを心がけましょう。

この記事が、皆さんのJavaScriptコーディングの助けになれば幸いです。
ぜひ実際のプロジェクトでslice()メソッドを活用してみてください！

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…