TL;DR

このページでは、concat() メソッドの実装方法について解説しますね。一言でいうとconcat()メソッドとは、配列を結合する JavaScript のメソッドです。

開発環境表:

concat() メソッドとは？

JavaScript のconcat()メソッドは、配列の結合を行う際に用いられるメソッドです。それでは、一般的な使い方を見てみましょう。次の例では、二つの配列を結合しています。

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const result = array1.concat(array2)

console.log(result) // [1, 2, 3, 4, 5, 6]

上記の例では、array1とarray2という二つの配列を、concat()メソッドを使って結合しました。結合した結果は新しい配列として返され、元の配列は変更されません。

また、concat()メソッドは引数として複数の配列を受け取ることも可能で、その場合はすべての配列が順序を保持して結合されます。

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const result = array1.concat(array2, array3)

console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Next.js で、concat()メソッドを実装

それでは、Next.js と TypeScript の環境でconcat()メソッドを使ってみましょう。ここでは、concat()メソッドを用いて、ユーザーデータの配列を結合するコンポーネントを作ります。

components/UserList.tsx

import React from 'react'

type User = {
  id: number
  name: string
}

type UserListProps = {
  users1: User[]
  users2: User[]
}

const UserList = ({ users1, users2 }: UserListProps) => {
  const allUsers = users1.concat(users2)

  return (
    <div>
      {allUsers.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

export default UserList

このUserListコンポーネントでは、二つのユーザーデータの配列(users1とusers2)を受け取り、concat()メソッドを用いて結合します。結果として得られるallUsers配列を使って、ユーザーの名前をリスト表示しています。

2 つの異なるソースからの投稿を結合する

それでは、concat()メソッドを用いたもう一つの実装例をご紹介します。

ここでは、ブログ投稿のリストを 2 つの異なるソースから取得して結合し、1 つのリストとして表示するBlogPostsコンポーネントを作成します。異なるソースからの投稿を統一された形でユーザーに提供するケースに使えます。

components/BlogPosts.tsx

import React from 'react'

type Post = {
  id: string
  title: string
  content: string
}

type BlogPostsProps = {
  posts1: Post[]
  posts2: Post[]
}

const BlogPosts = ({ posts1, posts2 }: BlogPostsProps) => {
  const allPosts = posts1.concat(posts2)

  return (
    <div>
      {allPosts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default BlogPosts

このBlogPostsコンポーネントでは、二つのブログ投稿の配列(posts1とposts2)を受け取り、concat()メソッドを用いて結合しています。その結果得られたallPosts配列は、ブログ投稿のタイトルと内容をリスト表示します。

次に、異なる型を持つ配列を結合するときのconcat()の挙動についても説明します。JavaScript は動的型付けの言語であり、異なる型の要素を持つ配列を作成することが可能です。ですから、concat()メソッドを使用して異なる型の要素を持つ配列を結合することも可能です。

const array1 = [1, 2, 3]
const array2 = ['four', 'five', 'six']
const result = array1.concat(array2)

console.log(result) // [1, 2, 3, 'four', 'five', 'six']

ただし、このような操作は通常あまり推奨されません。なぜなら、配列の要素が一貫した型を持つことで、予測可能な動作とコードの読みやすさが向上するからです。TypeScript を使用している場合、このような操作は型エラーを引き起こす可能性があります。

フラット化

最後に、concat()メソッドのより高度な使用例を見てみましょう。次の例では、配列の配列（2 次元配列）をフラット化するためにconcat()メソッドを使用しています。2 次元配列をフラット化するとは、深さを 1 にするという意味です。

const arrays = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
]
const flatArray = [].concat(...arrays)

console.log(flatArray) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

この例では、concat()メソッドとスプレッド演算子(...)を組み合わせて使用し、2 次元配列を 1 次元配列にフラット化しています。このようにconcat()メソッドは、配列を効率的に結合・操作する際に非常に強力なツールとなります。

以上がconcat()メソッドの基本的な使用方法から応用例までの解説です。このメソッドを使うことで、配列を簡単に結合したり、2 次元配列を 1 次元配列に変換するなど、配列操作の幅が広がります。次回からは是非、ご自身のプロジェクトでこのconcat()メソッドを活用してみてください。