【初心者向け】JavaScript unshiftメソッド - 配列の先頭に追加

「配列の最初に新しい要素を追加したい」と思ったことはありませんか？

「最新のニュースを一番上に表示したい」 「pushメソッドは知ってるけど、先頭に追加する方法がわからない」

そんな疑問を抱いている方は多いと思います。 でも大丈夫です！

この記事では、JavaScript unshiftメソッドの使い方を初心者向けに詳しく解説します。 基本的な使い方から実用的な応用例まで、配列の先頭への要素追加をわかりやすく説明していきます。

きっと「配列操作ってこんなに便利だったんだ！」と感じられるはずですよ。

unshiftメソッドって何？基本を理解しよう

unshiftメソッドの役割を覚えよう

unshiftメソッドは、配列の先頭（最初）に1つ以上の要素を追加するJavaScriptの配列メソッドです。

簡単に言うと、「配列の一番前に新しい要素を挿入して、既存の要素を後ろにずらす」機能なんです。 pushメソッドが配列の最後に要素を追加するのに対して、unshiftは配列の最初に要素を追加します。

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

unshiftメソッドの基本的な文法を理解しましょう。

// 基本的な文法
配列.unshift(要素1, 要素2, ...);

// 戻り値は新しい配列の長さ
const newLength = 配列.unshift(新しい要素);

この書き方をベースに、いろいろな使い方を見ていきましょう。

基本的な使い方をマスターしよう

1つの要素を追加してみよう

最もシンプルな使い方から始めてみましょう。

// 基本的な配列
const fruits = ["バナナ", "オレンジ"];
console.log("元の配列:", fruits); // ["バナナ", "オレンジ"]

// 先頭に1つの要素を追加
const newLength = fruits.unshift("りんご");

console.log("変更後の配列:", fruits);    // ["りんご", "バナナ", "オレンジ"]
console.log("新しい配列の長さ:", newLength); // 3

unshift("りんご")で「りんご」が配列の先頭に追加されます。 元の要素は自動的に後ろにずれて、配列の長さも1つ増えます。

数値の配列でも同じように動作します。

// 数値の配列の例
const numbers = [2, 3, 4];
console.log("元の配列:", numbers); // [2, 3, 4]

numbers.unshift(1);
console.log("1を先頭に追加:", numbers); // [1, 2, 3, 4]

numbers.unshift(0);
console.log("0を先頭に追加:", numbers); // [0, 1, 2, 3, 4]

連続してunshiftを使うと、新しい要素が次々と先頭に追加されていきますね。

複数の要素を同時に追加してみよう

unshiftメソッドは、複数の要素を一度に追加することもできます。

// 複数の要素を同時に追加
const colors = ["緑", "青"];
console.log("元の配列:", colors); // ["緑", "青"]

// 複数の要素を先頭に追加
colors.unshift("赤", "黄", "紫");
console.log("変更後の配列:", colors); // ["赤", "黄", "紫", "緑", "青"]

複数の要素を指定した場合、指定した順番通りに配列の先頭に追加されます。

異なる型の要素も一緒に追加できます。

// 文字列と数値を混在させた例
const mixedArray = ["C", "D"];
mixedArray.unshift("A", "B", 1, 2);
console.log("混在配列:", mixedArray); // ["A", "B", 1, 2, "C", "D"]

オブジェクトを追加する例も見てみましょう。

// オブジェクトを追加する例
const users = [
    {name: "佐藤", age: 25},
    {name: "田中", age: 30}
];

users.unshift({name: "鈴木", age: 22});
console.log("ユーザー配列:", users);
// [
//   {name: "鈴木", age: 22},
//   {name: "佐藤", age: 25},
//   {name: "田中", age: 30}
// ]

オブジェクトも問題なく先頭に追加できます。

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

追加位置の違いを確認しよう

pushとunshiftの最も大きな違いは、要素を追加する位置です。

// 比較用の配列
const originalArray = ["B", "C"];

// pushメソッド（末尾に追加）
const arrayForPush = [...originalArray]; // 配列をコピー
arrayForPush.push("D");
console.log("push後:", arrayForPush); // ["B", "C", "D"]

// unshiftメソッド（先頭に追加）
const arrayForUnshift = [...originalArray]; // 配列をコピー
arrayForUnshift.unshift("A");
console.log("unshift後:", arrayForUnshift); // ["A", "B", "C"]

pushは末尾に、unshiftは先頭に追加されることがわかりますね。

実際の使用場面を想定してみましょう。

// 両方を使った例
const timeline = ["投稿2", "投稿3"];

// 最新の投稿を先頭に追加（unshift）
timeline.unshift("投稿1");
console.log("最新投稿追加後:", timeline); // ["投稿1", "投稿2", "投稿3"]

// 古い投稿を末尾に追加（push）
timeline.push("投稿4");
console.log("古い投稿追加後:", timeline); // ["投稿1", "投稿2", "投稿3", "投稿4"]

最新のものを上に、古いものを下に配置したい場合にはunshiftが便利です。

パフォーマンスの違いも知っておこう

// パフォーマンスの違いを理解する例
const largeArray = Array.from({length: 10000}, (_, i) => i);

// pushは高速（末尾に追加するだけ）
console.time("push実行時間");
largeArray.push(10000);
console.timeEnd("push実行時間");

// unshiftは相対的に低速（全要素をシフトする必要がある）
console.time("unshift実行時間");
largeArray.unshift(-1);
console.timeEnd("unshift実行時間");

console.log("配列の長さ:", largeArray.length);
console.log("最初の要素:", largeArray[0]);    // -1
console.log("最後の要素:", largeArray[largeArray.length - 1]); // 10000

unshiftは既存の要素をすべて後ろにずらす必要があるため、大きな配列では少し時間がかかります。

実用的な活用例を学ぼう

最新ニュース管理システムを作ろう

新しいニュースを常に一番上に表示するシステムの例を見てみましょう。

// ニュース管理システム
class NewsManager {
    constructor() {
        this.news = [
            {id: 3, title: "製品アップデート", date: "2025-07-03", category: "product"},
            {id: 2, title: "新機能リリース", date: "2025-07-02", category: "feature"},
            {id: 1, title: "メンテナンス完了", date: "2025-07-01", category: "maintenance"}
        ];
    }
    
    // 新しいニュースを追加（常に最新が一番上）
    addNews(title, category) {
        const newArticle = {
            id: this.news.length + 1,
            title: title,
            date: new Date().toISOString().split('T')[0],
            category: category
        };
        
        // unshiftで先頭に追加
        this.news.unshift(newArticle);
        console.log(`新しいニュースが追加されました: ${title}`);
        
        return newArticle;
    }
    
    // ニュース一覧を表示
    displayNews() {
        console.log("=== 最新ニュース ===");
        this.news.forEach((article, index) => {
            console.log(`${index + 1}. [${article.category}] ${article.title} (${article.date})`);
        });
    }
    
    // 最新のニュースを取得
    getLatestNews(count = 3) {
        return this.news.slice(0, count);
    }
}

このクラスでは、unshiftメソッドを使って新しいニュースを先頭に追加しています。

使用例も見てみましょう。

// 使用例
const newsManager = new NewsManager();

// 初期状態を表示
newsManager.displayNews();

// 新しいニュースを追加
newsManager.addNews("緊急メンテナンスのお知らせ", "maintenance");
newsManager.addNews("新サービス開始", "announcement");

console.log("
--- ニュース追加後 ---");
newsManager.displayNews();

// 最新3件を取得
const latestNews = newsManager.getLatestNews(3);
console.log("
--- 最新3件 ---");
latestNews.forEach(news => {
    console.log(`・${news.title}`);
});

新しいニュースが追加されるたびに、一番上に表示されるようになります。

操作履歴管理機能を実装しよう

ユーザーの操作履歴を管理する例を作ってみましょう。

// 操作履歴管理クラス
class ActionHistory {
    constructor(maxHistory = 10) {
        this.history = [];
        this.maxHistory = maxHistory;
    }
    
    // 新しい操作を履歴に追加
    addAction(action, details = '') {
        const historyItem = {
            action: action,
            details: details,
            timestamp: new Date().toLocaleString(),
            id: Date.now()
        };
        
        // 最新の操作を先頭に追加
        this.history.unshift(historyItem);
        
        // 履歴の上限を超えた場合、古いものを削除
        if (this.history.length > this.maxHistory) {
            this.history = this.history.slice(0, this.maxHistory);
        }
        
        console.log(`操作記録: ${action} ${details}`);
    }
    
    // 履歴を表示
    displayHistory() {
        console.log("=== 操作履歴 ===");
        
        if (this.history.length === 0) {
            console.log("履歴がありません");
            return;
        }
        
        this.history.forEach((item, index) => {
            console.log(`${index + 1}. ${item.action} ${item.details} - ${item.timestamp}`);
        });
    }
    
    // 最後の操作を取得
    getLastAction() {
        return this.history[0] || null;
    }
    
    // 特定の操作タイプの履歴を取得
    getActionsByType(actionType) {
        return this.history.filter(item => item.action === actionType);
    }
}

このクラスでは、最新の操作が常に先頭に来るようにunshiftを使用しています。

実際に使ってみるとこんな感じです。

// 使用例
const actionHistory = new ActionHistory(5); // 最大5件の履歴

// 様々な操作を記録
actionHistory.addAction("ファイル作成", "document.txt");
actionHistory.addAction("ファイル編集", "document.txt");
actionHistory.addAction("ファイル保存", "document.txt");
actionHistory.addAction("フォルダ作成", "新規フォルダ");
actionHistory.addAction("ファイル削除", "old_file.txt");

// 履歴を表示
actionHistory.displayHistory();

// 最後の操作を確認
const lastAction = actionHistory.getLastAction();
console.log(`
最後の操作: ${lastAction.action} ${lastAction.details}`);

操作履歴が新しいものから順番に表示されます。

優先度付きタスク管理システム

優先度に応じてタスクを適切な位置に挿入する例も見てみましょう。

// 優先度付きタスク管理
class PriorityTaskManager {
    constructor() {
        this.tasks = [];
        this.priorities = {
            'urgent': 1,    // 緊急
            'high': 2,      // 高
            'medium': 3,    // 中
            'low': 4        // 低
        };
    }
    
    // タスクを追加（優先度に応じて配置）
    addTask(title, priority = 'medium', dueDate = null) {
        const task = {
            id: Date.now(),
            title: title,
            priority: priority,
            priorityLevel: this.priorities[priority] || 3,
            dueDate: dueDate,
            createdAt: new Date().toLocaleString(),
            completed: false
        };
        
        // 優先度が緊急の場合は常に先頭に追加
        if (priority === 'urgent') {
            this.tasks.unshift(task);
            console.log(`🚨 緊急タスクが先頭に追加されました: ${title}`);
            return task;
        }
        
        // その他の場合は優先度順に挿入
        this.insertTaskByPriority(task);
        console.log(`📝 タスクが追加されました: ${title} (優先度: ${priority})`);
        
        return task;
    }
    
    // 緊急タスクを先頭に追加（unshiftの活用）
    addUrgentTask(title, dueDate = null) {
        const urgentTask = {
            id: Date.now(),
            title: `🚨 ${title}`,
            priority: 'urgent',
            priorityLevel: 1,
            dueDate: dueDate,
            createdAt: new Date().toLocaleString(),
            completed: false
        };
        
        this.tasks.unshift(urgentTask);
        console.log(`緊急タスクが最優先で追加されました: ${title}`);
        
        return urgentTask;
    }
    
    // タスク一覧を表示
    displayTasks() {
        console.log("
=== タスク一覧（優先度順） ===");
        
        if (this.tasks.length === 0) {
            console.log("タスクがありません");
            return;
        }
        
        this.tasks.forEach((task, index) => {
            const status = task.completed ? "✅" : "⏳";
            const dueInfo = task.dueDate ? ` (期限: ${task.dueDate})` : "";
            const priorityEmoji = this.getPriorityEmoji(task.priority);
            
            console.log(`${index + 1}. ${status} ${priorityEmoji} ${task.title}${dueInfo}`);
        });
    }
    
    // 優先度に応じた絵文字を取得
    getPriorityEmoji(priority) {
        const emojis = {
            'urgent': '🚨',
            'high': '🔴',
            'medium': '🟡',
            'low': '🟢'
        };
        return emojis[priority] || '⚪';
    }
}

緊急タスクは常にunshiftで先頭に追加されるようになっています。

使用例はこんな感じです。

// 使用例
const taskManager = new PriorityTaskManager();

// 通常のタスクを追加
taskManager.addTask("レポート作成", "medium", "2025-07-10");
taskManager.addTask("会議資料準備", "high", "2025-07-08");
taskManager.addTask("メール返信", "low");

// タスク一覧を表示
taskManager.displayTasks();

// 緊急タスクを追加（先頭に配置される）
taskManager.addUrgentTask("システム障害対応", "2025-07-06");
taskManager.addUrgentTask("重要顧客対応");

console.log("
--- 緊急タスク追加後 ---");
taskManager.displayTasks();

緊急タスクが常に最優先で表示されるようになります。

注意点とベストプラクティス

パフォーマンスを考慮した使い方

// パフォーマンスを考慮した使い方
class PerformanceAwareArray {
    constructor() {
        this.items = [];
    }
    
    // 大量の要素がある場合のunshift使用の注意点
    addToFront(item) {
        // 配列が大きい場合は要注意
        if (this.items.length > 10000) {
            console.warn("⚠️ 大きな配列でunshiftを使用すると性能が劣化する可能性があります");
        }
        
        return this.items.unshift(item);
    }
    
    // 代替案：配列の再構築
    addToFrontEfficient(item) {
        this.items = [item, ...this.items];
        return this.items.length;
    }
    
    // 複数要素を効率的に先頭に追加
    addMultipleToFront(items) {
        this.items = [...items, ...this.items];
        return this.items.length;
    }
}

大きな配列ではunshiftの代わりにスプレッド演算子を使うのも一つの方法です。

使用例を見てみましょう。

// 使用例
const performanceArray = new PerformanceAwareArray();

// 少量の要素の場合はunshiftでOK
for (let i = 0; i < 10; i++) {
    performanceArray.addToFront(`item${i}`);
}

console.log("小さな配列:", performanceArray.items);

// 大量の要素を扱う場合の代替手法
const largeItems = Array.from({length: 100}, (_, i) => `large${i}`);
performanceArray.addMultipleToFront(largeItems);

console.log("配列サイズ:", performanceArray.items.length);
console.log("先頭3つ:", performanceArray.items.slice(0, 3));

用途に応じて適切な方法を選択することが重要です。

型安全性とバリデーションの例

// 型安全なunshift操作
class TypeSafeArray {
    constructor(expectedType = 'any') {
        this.items = [];
        this.expectedType = expectedType;
    }
    
    // 型チェック付きのunshift
    safeUnshift(...items) {
        // 型チェック
        for (const item of items) {
            if (!this.isValidType(item)) {
                throw new Error(`Invalid type: expected ${this.expectedType}, got ${typeof item}`);
            }
        }
        
        return this.items.unshift(...items);
    }
    
    // 型チェック関数
    isValidType(item) {
        if (this.expectedType === 'any') return true;
        
        switch (this.expectedType) {
            case 'string':
                return typeof item === 'string';
            case 'number':
                return typeof item === 'number' && !isNaN(item);
            case 'object':
                return typeof item === 'object' && item !== null;
            case 'array':
                return Array.isArray(item);
            default:
                return typeof item === this.expectedType;
        }
    }
    
    // 配列の内容を取得
    getItems() {
        return [...this.items]; // コピーを返す
    }
}

使用例はこんな感じです。

// 使用例
const stringArray = new TypeSafeArray('string');
const numberArray = new TypeSafeArray('number');

try {
    stringArray.safeUnshift("hello", "world");
    console.log("文字列配列:", stringArray.getItems());
    
    numberArray.safeUnshift(1, 2, 3);
    console.log("数値配列:", numberArray.getItems());
    
    // エラーが発生する例
    stringArray.safeUnshift(123); // TypeError
} catch (error) {
    console.error("型エラー:", error.message);
}

型チェックを行うことで、より安全な配列操作ができます。

まとめ

JavaScript unshiftメソッドは、配列の先頭に要素を追加する重要な配列操作メソッドです。

基本的なポイントをおさらい

unshiftメソッドの重要な特徴を確認しましょう。

• 配列の先頭に要素を追加
• 複数の要素を同時に追加可能
• 戻り値は新しい配列の長さ
• pushメソッドとは追加位置が逆

これらの特徴を理解することが重要です。

実践的な活用場面

以下のような場面で特に威力を発揮します。

• 最新ニュースの管理: 新しい記事を上に表示
• 操作履歴の記録: 最新の操作を先頭に配置
• 優先度付きタスク管理: 緊急タスクを最優先表示
• タイムライン表示: 最新の投稿を上に配置

注意すべきポイント

unshiftメソッドを使う際の注意点も覚えておきましょう。

• 大きな配列ではパフォーマンスに注意
• 型の整合性を保つ
• 配列の長さの変化を意識する

適切なunshiftメソッドの使用により、より直感的で使いやすい配列操作が実現できます。

まずは基本的なunshift操作から始めて、徐々に実用的なアプリケーションで活用してみてください。 ぜひ今日から、これらの知識を活用してより良い配列操作を実装してみませんか？