JavaScript sliceメソッドとは？配列と文字列の切り取り方法

「JavaScriptで配列や文字列の一部分だけを取り出したい」と思ったことはありませんか？

「長いデータから必要な部分だけを抽出したい」 「データを分割して処理したい」

そんな場面でとても便利なのがsliceメソッドです。 でも大丈夫です！

この記事では、JavaScriptのsliceメソッドの基本から実践的な応用例までを初心者向けに詳しく解説します。 配列や文字列から指定した範囲の要素を簡単に切り取る方法をマスターして、より効率的なデータ処理ができるようになりましょう。

きっと「データの切り取りってこんなに簡単だったんだ！」と感じられるはずですよ。

sliceメソッドってどんなもの？

基本的な仕組みを理解しよう

sliceメソッドは、配列や文字列から指定した範囲の要素を切り取って、新しい配列や文字列として返すJavaScriptの組み込みメソッドです。

重要なのは、元のデータを変更せず、切り取った部分のコピーを作成することです。 イメージとしては、紙をハサミで切り取るのではなく、コピーしたい部分をコピー機で複写するような感じですね。

基本的な使い方を見てみましょう。

// 配列でのslice
let fruits = ["りんご", "バナナ", "オレンジ", "いちご", "メロン"];
let slicedFruits = fruits.slice(1, 3);

console.log("元の配列:", fruits);        // ["りんご", "バナナ", "オレンジ", "いちご", "メロン"]
console.log("切り取り結果:", slicedFruits); // ["バナナ", "オレンジ"]

// 文字列でのslice
let message = "Hello, World!";
let slicedMessage = message.slice(0, 5);

console.log("元の文字列:", message);        // "Hello, World!"
console.log("切り取り結果:", slicedMessage); // "Hello"

fruits.slice(1, 3)では、インデックス1から3の手前まで（バナナとオレンジ）を切り取っています。 元の配列fruitsは変更されず、新しい配列slicedFruitsが作成されます。

sliceメソッドの特徴を覚えよう

sliceメソッドには以下の特徴があります。

• 非破壊的：元のデータを変更しない
• 新しいデータを返す：切り取った部分の新しい配列や文字列を作成
• 範囲指定：開始位置と終了位置を指定可能
• 負のインデックス対応：末尾からの位置指定が可能

実際に確認してみましょう。

// 元のデータが変更されないことの確認
let originalArray = [1, 2, 3, 4, 5];
let slicedArray = originalArray.slice(1, 4);

console.log("元の配列:", originalArray);     // [1, 2, 3, 4, 5]（変更されない）
console.log("切り取り配列:", slicedArray);   // [2, 3, 4]

// 負のインデックスの使用
let numbers = [10, 20, 30, 40, 50];
let lastTwo = numbers.slice(-2);
console.log("最後の2つ:", lastTwo);          // [40, 50]

sliceメソッドは元のデータを安全に保持することが大きなメリットです。

配列でのslice使い方をマスター

基本的な書き方を覚えよう

配列のsliceメソッドの基本構文はとてもシンプルです。

array.slice(start, end)

// start: 開始位置（含む）
// end: 終了位置（含まない）、省略可能

startは切り取りを開始する位置、endは終了する位置を指定します。 重要なのは、endの位置の要素は含まれないことです。

基本的な使用例を見てみよう

let colors = ["赤", "青", "緑", "黄", "紫", "オレンジ"];

// 基本的な切り取り
console.log("インデックス1-3:", colors.slice(1, 4));    // ["青", "緑", "黄"]
console.log("インデックス0-2:", colors.slice(0, 3));    // ["赤", "青", "緑"]
console.log("インデックス2-5:", colors.slice(2, 5));    // ["緑", "黄", "紫"]

colors.slice(1, 4)では、インデックス1（青）から4の手前まで（黄まで）を切り取ります。 インデックス4の「紫」は含まれないので注意しましょう。

終了位置を省略することもできます。

// 終了位置を省略（指定位置から最後まで）
console.log("インデックス3から最後まで:", colors.slice(3)); // ["黄", "紫", "オレンジ"]
console.log("インデックス1から最後まで:", colors.slice(1)); // ["青", "緑", "黄", "紫", "オレンジ"]

// 引数なし（全体のコピー）
console.log("全体のコピー:", colors.slice());          // ["赤", "青", "緑", "黄", "紫", "オレンジ"]

引数を指定しないslice()は、配列全体のコピーを作成します。 これは元の配列を安全に複製したい時に便利ですね。

負のインデックスを活用しよう

負のインデックスを使うと、末尾から数えて要素を指定できます。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 負のインデックスでの切り取り
console.log("最後の3つ:", numbers.slice(-3));           // [8, 9, 10]
console.log("最後の5つ:", numbers.slice(-5));           // [6, 7, 8, 9, 10]

// 負のインデックスでの範囲指定
console.log("後ろから5番目-3番目:", numbers.slice(-5, -2)); // [6, 7, 8]
console.log("後ろから4番目-1番目:", numbers.slice(-4, -1)); // [7, 8, 9]

// 正負混在
console.log("2番目から後ろ3つ前まで:", numbers.slice(2, -3)); // [3, 4, 5, 6, 7]

-1は最後の要素、-2は最後から2番目の要素を表します。 正のインデックスと組み合わせることもできますよ。

配列のコピーに活用

sliceメソッドは配列をコピーする時にもよく使われます。

// 配列の浅いコピー
let originalData = [
    { name: "太郎", age: 25 },
    { name: "花子", age: 30 },
    { name: "次郎", age: 22 }
];

let copiedData = originalData.slice();

// コピーされた配列を変更
copiedData.push({ name: "美咲", age: 28 });

console.log("元の配列の長さ:", originalData.length);    // 3
console.log("コピーされた配列の長さ:", copiedData.length); // 4

ただし、オブジェクトを含む配列では浅いコピーになることに注意してください。

// 注意：オブジェクトの参照は共有される（浅いコピー）
copiedData[0].age = 26;
console.log("元の配列の太郎の年齢:", originalData[0].age); // 26（変更される）

配列の構造はコピーされますが、中身のオブジェクトは参照が共有されます。

文字列でのslice使い方をマスター

基本的な文字列切り取り

文字列でも配列と同じようにsliceメソッドを使えます。

let text = "JavaScript プログラミング";

// 基本的な切り取り
console.log("0-4文字目:", text.slice(0, 4));          // "Java"
console.log("4-10文字目:", text.slice(4, 10));        // "Script"
console.log("11文字目以降:", text.slice(11));         // "プログラミング"

// 負のインデックス
console.log("最後の6文字:", text.slice(-6));          // "ラミング"
console.log("後ろから8-3文字目:", text.slice(-8, -3)); // "グラミ"

文字列では、各文字がインデックスを持ちます。 日本語の文字も1文字として扱われるので注意しましょう。

実用的な文字列処理を作ってみよう

実際の開発でよく使われるパターンを見てみましょう。

// ファイル拡張子の取得
function getFileExtension(filename) {
    let lastDotIndex = filename.lastIndexOf(".");
    if (lastDotIndex === -1) return "";
    return filename.slice(lastDotIndex + 1);
}

console.log(getFileExtension("document.pdf"));        // "pdf"
console.log(getFileExtension("image.jpg"));           // "jpg"
console.log(getFileExtension("script.min.js"));       // "js"

lastIndexOf(".")で最後の「.」の位置を見つけて、その次の文字から最後まで切り取ります。 拡張子を取得する便利な関数ですね。

ファイル名から拡張子を除いた部分も取得できます。

// ファイル名（拡張子なし）の取得
function getBaseName(filename) {
    let lastDotIndex = filename.lastIndexOf(".");
    if (lastDotIndex === -1) return filename;
    return filename.slice(0, lastDotIndex);
}

console.log(getBaseName("document.pdf"));             // "document"
console.log(getBaseName("script.min.js"));            // "script.min"

今度は0から「.」の位置まで切り取って、ファイル名部分だけを取得しています。

URLからドメイン名を抽出することもできます。

// ドメイン名の抽出
function extractDomain(url) {
    // http://やhttps://を除去
    let cleanUrl = url.replace(/^https?:\/\//, "");
    
    // 最初の/までを取得
    let slashIndex = cleanUrl.indexOf("/");
    if (slashIndex !== -1) {
        cleanUrl = cleanUrl.slice(0, slashIndex);
    }
    
    return cleanUrl;
}

console.log(extractDomain("https://www.example.com/page"));  // "www.example.com"
console.log(extractDomain("http://blog.example.org"));       // "blog.example.org"

正規表現で「http://」や「https://」を除去した後、最初の「/」までの部分を切り取ります。

文字列の分割と加工テクニック

さらに実用的な文字列処理を見てみましょう。

// 長い文字列の省略表示
function truncateText(text, maxLength, suffix = "...") {
    if (text.length <= maxLength) {
        return text;
    }
    return text.slice(0, maxLength - suffix.length) + suffix;
}

let longText = "これは非常に長いテキストの例です。通常、このような長いテキストは省略して表示します。";
console.log(truncateText(longText, 20));               // "これは非常に長いテキストの..."
console.log(truncateText(longText, 15, "…"));         // "これは非常に長いテキ…"

指定した長さに文字列を切り詰めて、省略記号を追加する関数です。 ウェブサイトの記事一覧でよく見かける機能ですね。

パスワードをマスクする処理も作れます。

// パスワードのマスク処理
function maskPassword(password, visibleChars = 2) {
    if (password.length <= visibleChars) {
        return "*".repeat(password.length);
    }
    
    let visible = password.slice(0, visibleChars);
    let masked = "*".repeat(password.length - visibleChars);
    return visible + masked;
}

console.log(maskPassword("password123", 2));           // "pa*********"
console.log(maskPassword("abc", 1));                   // "a**"

最初の数文字だけ表示して、残りを「*」でマスクします。 セキュリティを考慮した表示によく使われるパターンです。

実践的な応用例を学ぼう

ページネーション機能を作ってみよう

大量のデータを分割して表示するページネーション機能を実装してみましょう。

// ページネーション用のデータ分割
class Paginator {
    constructor(data, itemsPerPage = 10) {
        this.data = data;
        this.itemsPerPage = itemsPerPage;
        this.totalPages = Math.ceil(data.length / itemsPerPage);
    }
    
    getPage(pageNumber) {
        if (pageNumber < 1 || pageNumber > this.totalPages) {
            return [];
        }
        
        let startIndex = (pageNumber - 1) * this.itemsPerPage;
        let endIndex = startIndex + this.itemsPerPage;
        
        return this.data.slice(startIndex, endIndex);
    }
    
    getCurrentPageInfo(pageNumber) {
        let pageData = this.getPage(pageNumber);
        let startIndex = (pageNumber - 1) * this.itemsPerPage;
        
        return {
            page: pageNumber,
            totalPages: this.totalPages,
            totalItems: this.data.length,
            itemsOnPage: pageData.length,
            startIndex: startIndex + 1,
            endIndex: startIndex + pageData.length,
            data: pageData
        };
    }
}

このクラスを実際に使ってみましょう。

// 使用例
let items = Array.from({length: 47}, (_, i) => `アイテム${i + 1}`);
let paginator = new Paginator(items, 10);

// 各ページの表示
for (let page = 1; page <= 3; page++) {
    let pageInfo = paginator.getCurrentPageInfo(page);
    console.log(`
ページ ${page}/${pageInfo.totalPages}:`);
    console.log(`表示: ${pageInfo.startIndex}-${pageInfo.endIndex} / ${pageInfo.totalItems}`);
    console.log("データ:", pageInfo.data.slice(0, 3).join(", ") + "...");
}

sliceメソッドを使って、各ページに表示するデータを切り取っています。 大量のデータを効率的に分割表示できる便利な仕組みです。

検索結果のハイライト機能

検索キーワードをハイライト表示する機能も作れます。

// 検索キーワードのハイライト機能
class TextHighlighter {
    constructor(text) {
        this.text = text;
    }
    
    highlight(keyword, contextLength = 50) {
        let results = [];
        let searchText = this.text.toLowerCase();
        let searchKeyword = keyword.toLowerCase();
        let startIndex = 0;
        
        while (true) {
            let index = searchText.indexOf(searchKeyword, startIndex);
            if (index === -1) break;
            
            // コンテキストの範囲を計算
            let contextStart = Math.max(0, index - contextLength);
            let contextEnd = Math.min(this.text.length, index + keyword.length + contextLength);
            
            // 単語境界で調整
            if (contextStart > 0) {
                let spaceIndex = this.text.indexOf(" ", contextStart);
                if (spaceIndex !== -1 && spaceIndex < index) {
                    contextStart = spaceIndex + 1;
                }
            }
            
            // コンテキストの抽出
            let context = this.text.slice(contextStart, contextEnd);
            let keywordInContext = this.text.slice(index, index + keyword.length);
            
            results.push({
                index: index,
                context: context,
                keyword: keywordInContext,
                prefix: this.text.slice(contextStart, index),
                suffix: this.text.slice(index + keyword.length, contextEnd)
            });
            
            startIndex = index + 1;
        }
        
        return results;
    }
}

この機能を使って検索結果を表示してみましょう。

// 使用例
let articleText = `
JavaScriptは非常に人気のあるプログラミング言語です。
Webブラウザで動作するJavaScriptは、動的なWebページを作成できます。
最近では、Node.jsによりサーバーサイドでもJavaScriptが使用されています。
JavaScriptを学習することで、フロントエンドとバックエンドの両方を開発できます。
`;

let highlighter = new TextHighlighter(articleText);
let results = highlighter.highlight("JavaScript");

console.log(`"JavaScript" の検索結果: ${results.length}件`);
results.forEach((result, i) => {
    console.log(`
${i + 1}. 位置 ${result.index}:`);
    console.log(`${result.prefix}【${result.keyword}】${result.suffix}`);
});

sliceメソッドを使って、キーワードの前後のコンテキストを切り取ります。 検索結果を分かりやすく表示する実用的な機能です。

データ分析とグループ化

時系列データを期間別に分析する機能も作れます。

// 時系列データの期間別分析
class TimeSeriesAnalyzer {
    constructor(data, dateField = 'date') {
        this.data = data;
        this.dateField = dateField;
        this.sortedData = this.sortByDate();
    }
    
    sortByDate() {
        return [...this.data].sort((a, b) => {
            return new Date(a[this.dateField]) - new Date(b[this.dateField]);
        });
    }
    
    getMovingAverage(field, windowSize) {
        let result = [];
        
        for (let i = windowSize - 1; i < this.sortedData.length; i++) {
            let window = this.sortedData.slice(i - windowSize + 1, i + 1);
            let average = window.reduce((sum, item) => sum + item[field], 0) / windowSize;
            
            result.push({
                date: this.sortedData[i][this.dateField],
                value: this.sortedData[i][field],
                movingAverage: Math.round(average * 100) / 100
            });
        }
        
        return result;
    }
}

売上データで移動平均を計算してみましょう。

// 使用例（売上データの分析）
let salesData = [
    { date: "2025-01-01", sales: 1200 },
    { date: "2025-01-02", sales: 800 },
    { date: "2025-01-03", sales: 1500 },
    { date: "2025-01-04", sales: 900 },
    { date: "2025-01-05", sales: 1800 },
    { date: "2025-01-06", sales: 1100 },
    { date: "2025-01-07", sales: 1400 }
];

let analyzer = new TimeSeriesAnalyzer(salesData);

// 移動平均の計算
let movingAverage = analyzer.getMovingAverage('sales', 3);
console.log("3日移動平均:");
movingAverage.forEach(item => {
    console.log(`${item.date}: 売上 ${item.value}, 移動平均 ${item.movingAverage}`);
});

sliceメソッドで指定した期間のデータを切り取って、移動平均を計算しています。 データ分析における基本的な処理を効率的に実装できます。

他のメソッドとの違いを理解しよう

slice vs substring vs substr

文字列を切り取るメソッドは複数ありますが、特徴が異なります。

let text = "JavaScript Programming";

// slice: 負のインデックス対応、end未満まで
console.log("slice(4, 10):", text.slice(4, 10));         // "Script"
console.log("slice(-11, -1):", text.slice(-11, -1));     // "Programmin"

// substring: 負の値は0として扱われる、小さい値が開始位置
console.log("substring(4, 10):", text.substring(4, 10)); // "Script"
console.log("substring(10, 4):", text.substring(10, 4)); // "Script"（引数が入れ替わる）
console.log("substring(-5, 5):", text.substring(-5, 5)); // "JavaS"（-5が0になる）

// substr: 廃止予定、開始位置と長さを指定
console.log("substr(4, 6):", text.substr(4, 6));         // "Script"
console.log("substr(-11, 7):", text.substr(-11, 7));     // "Program"

sliceは最も柔軟で推奨される方法です。 負のインデックスが使えて、引数の順序も直感的ですね。

slice vs splice（配列のみ）

配列でよく混同されるのがsliceとspliceです。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// slice: 非破壊的、切り取り
let sliced = numbers.slice(2, 5);
console.log("元の配列:", numbers);    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]（変更なし）
console.log("slice結果:", sliced);    // [3, 4, 5]

// splice: 破壊的、削除・挿入・置換
let numbers2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let spliced = numbers2.splice(2, 3); // インデックス2から3個削除
console.log("元の配列:", numbers2);   // [1, 2, 6, 7, 8, 9, 10]（変更される）
console.log("splice結果:", spliced);  // [3, 4, 5]（削除された要素）

sliceは元の配列を変更せず、spliceは元の配列を変更します。 用途に応じて使い分けることが重要ですね。

よくある間違いとその対策

インデックスの範囲外指定

sliceメソッドは範囲外の指定でもエラーになりません。

let array = [1, 2, 3, 4, 5];

// 範囲外の指定（エラーにならない）
console.log("範囲外開始:", array.slice(10));      // []
console.log("範囲外終了:", array.slice(0, 20));   // [1, 2, 3, 4, 5]
console.log("負の値大きすぎ:", array.slice(-20)); // [1, 2, 3, 4, 5]

エラーにならないのは便利ですが、意図しない結果になる可能性があります。 必要に応じて事前にチェックを行いましょう。

参照と値の混同

オブジェクトを含む配列では、浅いコピーになることに注意してください。

// オブジェクトを含む配列のslice（浅いコピー）
let originalData = [
    { id: 1, name: "太郎" },
    { id: 2, name: "花子" },
    { id: 3, name: "次郎" }
];

let copiedData = originalData.slice(1, 3);

// コピーした配列の要素を変更
copiedData[0].name = "花子さん";

console.log("元のデータ:", originalData[1].name);  // "花子さん"（変更される）
console.log("コピーデータ:", copiedData[0].name); // "花子さん"

配列の構造はコピーされますが、中身のオブジェクトは参照が共有されます。 深いコピーが必要な場合は別の方法を検討しましょう。

パフォーマンスの考慮

大きな配列で頻繁にsliceを使用する場合は、パフォーマンスに注意が必要です。

// 大きな配列での頻繁なslice使用の問題
function inefficientProcessing(largeArray) {
    let results = [];
    
    // 非効率：毎回新しい配列を作成
    for (let i = 0; i < largeArray.length - 10; i++) {
        let chunk = largeArray.slice(i, i + 10);
        results.push(processChunk(chunk));
    }
    
    return results;
}

// より効率的な方法
function efficientProcessing(largeArray) {
    let results = [];
    
    // インデックスを使用して処理
    for (let i = 0; i < largeArray.length - 10; i++) {
        let sum = 0;
        for (let j = i; j < i + 10; j++) {
            sum += largeArray[j];
        }
        results.push(sum);
    }
    
    return results;
}

頻繁にsliceを呼ぶよりも、インデックスを直接使った方が効率的な場合があります。

まとめ

JavaScript のsliceメソッドについて、基本から応用まで詳しく学習しました。

基本的な特徴をおさらい

• 配列と文字列から指定範囲を切り取り
• 元のデータを変更しない（非破壊的）
• 負のインデックスで末尾からの指定が可能
• 新しい配列や文字列を返す

これらの特徴を理解することが基本です。

実践的な応用例を覚えよう

• ページネーション機能でのデータ分割
• 検索結果のハイライト表示
• 時系列データの期間別分析
• 文字列処理ユーティリティの構築

実際の開発で役立つ様々な活用法を学びました。

重要なポイントを確認

• **slice(start, end)**でstartは含み、endは含まない
• 引数なしで全体のコピーが作成可能
• オブジェクトを含む配列では浅いコピーになる
• 範囲外指定でもエラーにならない

これらのポイントを押さえておくことが重要です。

注意すべき点を理解

• substring、substrとの違い
• spliceメソッドとの違い（破壊的vs非破壊的）
• 浅いコピーと深いコピーの違い
• 大量データでのパフォーマンス影響

sliceメソッドは、データの部分的な抽出において非常に重要なメソッドです。 適切に理解して使用することで、効率的で安全なデータ処理を実装できます。

今回学んだ内容を実際のプロジェクトで活用して、効果的なデータ操作機能を実装してみませんか？ sliceメソッドをマスターすることで、より柔軟で保守性の高いJavaScriptコードを書けるようになるはずです。