push()は、配列の末尾に1つ以上の要素を追加するメソッドです。戻り値は追加後の配列の長さです。最も基本的な配列操作の一つで、データの蓄積やリストへの項目追加など、あらゆる場面で使われます。元の配列を直接変更する破壊的メソッドです。
基本的な使い方
push()は引数に渡した値を配列の末尾に追加し、新しい配列の長さを返します。
JavaScript
const fruits = ["りんご", "バナナ"];
// 1つの要素を追加
const newLength = fruits.push("みかん");
console.log(fruits);
console.log("新しい長さ:", newLength);
// 複数の要素を一度に追加
fruits.push("いちご", "ぶどう");
console.log(fruits);実行結果
["りんご", "バナナ", "みかん"]
新しい長さ: 3
["りんご", "バナナ", "みかん", "いちご", "ぶどう"]push()は元の配列を直接変更します。変更を避けたい場合は、スプレッド演算子[...arr, newItem]で新しい配列を作成してください。
さまざまな値の追加
push()は任意の型の値を追加できます。オブジェクトや配列も要素として追加可能です。
JavaScript
const data = [];
// さまざまな型の値を追加
data.push(42);
data.push("テキスト");
data.push(true);
data.push({ name: "田中", age: 28 });
data.push([1, 2, 3]);
console.log(data);
// オブジェクト配列にレコードを追加
const users = [];
users.push({ id: 1, name: "田中" });
users.push({ id: 2, name: "佐藤" });
users.push({ id: 3, name: "鈴木" });
console.log(users);実行結果
[42, "テキスト", true, { name: "田中", age: 28 }, [1, 2, 3]]
[
{ id: 1, name: "田中" },
{ id: 2, name: "佐藤" },
{ id: 3, name: "鈴木" }
]実践的な活用例
push()はデータ収集、条件付き追加、配列の構築など多くの場面で活用されます。
JavaScript
// 条件付きでデータを収集
const scores = [85, 42, 93, 67, 78, 55, 91];
const passed = [];
const failed = [];
scores.forEach(score => {
if (score >= 60) {
passed.push(score);
} else {
failed.push(score);
}
});
console.log("合格:", passed);
console.log("不合格:", failed);
// ログの蓄積
const log = [];
function addLog(message) {
log.push({
timestamp: new Date().toISOString(),
message
});
}
addLog("アプリ起動");
addLog("ユーザーログイン");
addLog("データ取得完了");
console.log(`ログ${log.length}件:`, log.map(l => l.message));
// 別の配列の全要素を追加（スプレッド演算子）
const base = [1, 2, 3];
const extra = [4, 5, 6];
base.push(...extra);
console.log(base);実行結果
合格: [85, 93, 67, 78, 91]
不合格: [42, 55]
ログ3件: ["アプリ起動", "ユーザーログイン", "データ取得完了"]
[1, 2, 3, 4, 5, 6]push()とスプレッド演算子の使い分け
元の配列を変更してよい場合はpush()が効率的です。Reactの状態管理やイミュータブルな操作が必要な場合は[...arr, newItem]を使いましょう。別の配列の全要素を追加する場合はpush(...otherArray)とスプレッド構文を組み合わせます。
注意点
push()は破壊的メソッドです。元の配列を直接変更するため、他の変数が同じ配列を参照している場合は影響があります。また、push([1,2])は配列自体を1つの要素として追加します。要素を個別に追加したい場合はpush(...[1,2])を使ってください。
まとめ
push()は配列の末尾に要素を追加する破壊的メソッド- 戻り値は追加後の配列の長さ
- 複数の要素を一度に追加可能
- イミュータブルな追加には
[...arr, item]を使う - 別の配列の要素を個別に追加するには
push(...arr)を使う