JavaScript | 配列を結合する方法（concatメソッド）

JavaScript JavaScript
2020.07.26
スポンサーリンク

ここでは、「実際のアプリ開発で concat() がどんな場面で役立つか」を、初心者にもわかりやすい実例（TODOリスト・APIのページネーション）を使って説明します。
あわせて「スプレッド演算子とどっちを使うか」のコツも紹介します。

実践例①：TODOリストを結合する

目的

「もともとあるタスク一覧」に「新しく追加されたタスク」をくっつけて、新しいリストを作る。

✅ 悪い例（pushを使う）

let todos = ['掃除', '勉強'];
let newTasks = ['買い物', '散歩'];

// pushだと元の配列が書き変わる！
todos.push(...newTasks);
console.log(todos); // ['掃除', '勉強', '買い物', '散歩']
JavaScript

一見問題なさそうですが、「todosの中身が変わってしまう」ため、Reactなどのフロントエンド開発ではNGです。
状態（state）を直接変更すると再レンダリングされないなどの不具合につながります。

✅ 良い例（concatを使う）

let todos = ['掃除', '勉強'];
let newTasks = ['買い物', '散歩'];

let updated = todos.concat(newTasks);
console.log(updated); // ['掃除', '勉強', '買い物', '散歩']
console.log(todos);   // ['掃除', '勉強'] ← 元はそのまま！
JavaScript

→ 元の配列を壊さずに「新しい配列」を返す。
ReactやVueなどの状態管理では、concat やスプレッド構文で「イミュータブル操作」するのが鉄則です。

スプレッド構文で書くと

let updated = [...todos, ...newTasks];
JavaScript

見た目が短くなり、モダンJSではこちらもよく使われます。
でも concat の方が「意図（結合する）」が明確なので、初心者にも読みやすいです。

実践例②：APIのページネーション結果を結合する

目的

APIでデータを分割して取得する（例：1ページ10件ずつ）とき、
ページを切り替えるたびに今までのデータに新しいデータを足したい。

例（JSONPlaceholderなどのAPIを想定）

// 仮のAPIレスポンス（ページごと）
let page1 = [{id:1}, {id:2}, {id:3}];
let page2 = [{id:4}, {id:5}, {id:6}];

// concatでデータをくっつける
let allData = page1.concat(page2);

console.log(allData);
// [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}, {id:6}]
JavaScript

このように、サーバーからデータを分割しても、フロント側でひとつの配列にまとめられます。

Reactなどでよくある書き方

const [posts, setPosts] = useState([]);

// 新しいページのデータを取得して追加
function loadNextPage() {
  fetch(`https://api.example.com/posts?page=2`)
    .then(res => res.json())
    .then(newPosts => {
      // postsを直接変更せずに、新しい配列をセット！
      setPosts(posts.concat(newPosts));
      // または setPosts([...posts, ...newPosts]);
    });
}
JavaScript

こうすることで、

  • 古いデータを保持したまま新しいデータを追加
  • 再レンダリングも正常に動作
  • バグや副作用を防止

という利点があります。

実践例③：ログ履歴やチャット履歴の追記

チャットアプリでも同じ考え方が使えます👇

let chatLog = ['こんにちは'];
let newMessages = ['やっほー', '元気？'];

let updatedLog = chatLog.concat(newMessages);
console.log(updatedLog);
// ['こんにちは', 'やっほー', '元気？']
JavaScript

もし「履歴をサーバーから少しずつ読み込む」場合にも、concat() でつなげていけばOK。

concat vs スプレッド構文の使い分け

目的おすすめ理由
複数配列を結合concat()意図が明確。「結合する」ことを表現できる
既存配列に他をくっつけるスプレッド構文（[...a, ...b]）短く書ける。現代的な書き方
配列をコピーしたいconcat() または [...a]どちらも浅いコピーになる
複雑な処理の中で可読性を重視したいconcat()メソッドチェーンに組み込みやすい

まとめ（実アプリでも使える考え方）

  • concat() は 「元の配列を壊さずにくっつける」 安全な方法。
  • 状態管理や非同期処理でのデータ更新（Reactなど）では特に重要。
  • APIの結果や履歴データなど、「追加型データ」に最適。
  • スプレッド構文でも同じ結果が得られるが、意味を明示したいときは concat() が◎。

前へ
1234
スポンサーリンク
タイトルとURLをコピーしました