【jQuery入門】extend()で複数オブジェクトを連結する方法！

こんにちは！フリーランスの桃太郎です。

JavaScriptのライブラリであるjQueryにはextendというメソッドが存在します。

このextendメソッドは一体どんな機能を持っていて、何の役に立つのか？、ということについて本記事では解説を進めていきます。

この記事では

・extendメソッドとは
・extendメソッドの使い方

という基本的な内容から、

・特殊な連結（ディープコピー）の使い方
・配列を連結するmergeメソッドとは？

など実践的な内容についても解説していきます。

extendメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！

extendメソッドとは

extendメソッドを説明する前に、必要な前提知識としてオブジェクトについて２つ解説します。

オブジェクトの基本について

jQueryやJavaScriptでいうオブジェクトとは一体何者かご存知でしょうか？

オブジェクトをわかりやすく説明すると、あるものの特徴や動作をまとめた一つの塊をイメージしてもらうと良いでしょう。

具体的なオブジェクトを表すコードの例は以下の通りです。

var person = {
    name: '太郎',
    age: 45,
    phrase: function() {
    console.log("ツイてる！");
  }
}

varで定義されたpersonがオブジェクトになります。

そして、その中身は中かっこ{}で括られた箇所に書かれています。

オブジェクトの特徴や動作は「（プロパティもしくはメソッド名）: (内容)」という形で定義されます。

上の例でいうと、nameやageが特徴にあたり、プロパティ名となります。

そして、phraseが動作にあたります。

プロパティやメソッド名は自分の好きな文字で設定して構いません。

ただし、形式だけは「（プロパティもしくはメソッド名）: (内容)」という形を守る必要があります。

要するにオブジェクトは特徴や動作を一つのまとまりとして表現するためのものです。

オブジェクトの中身を取り出す方法

ではそのオブジェクトの中身を確認するにはどのように処理を書けば良いのでしょうか？

その答えの例が以下のサンプルコードです。

var person = {
    name: '太郎',
    age: 45,
    phrase: function() {
    console.log("ツイてる！");
  }
}

console.log(person.age);
person.phrase();

実行結果

45
ツイてる！

オブジェクト名(person)に対して、コンマ(.)をつけて、そのあとに、プロパティ名やメソッド名をつけることで対応する中身を取得することができます。

注意する点としてメソッドについては、名前の最後にカッコ()をつけることがポイントです。

extendメソッドの特徴について

オブジェクトの基本を学んだところで、本題であるextendメソッドの特徴について解説をしておきます！

extendメソッドは、簡単に言うと２つ以上のオブジェクトの中身を連結して1つのオブジェクトにまとめることができます。

これにより、複数のオブジェクトを複雑に制御することなく効率の良いプログラミングができるわけです。

また、単純に連結するだけでなく1つにまとめたオブジェクトのコピーを作成したり、階層構造を制御することも可能です！

本記事では、基本から応用まで学べるように解説していくのでぜひ参考にしてください！

extendメソッドの使い方

この章では、「extend()」を使ったオブジェクトの連結方法について見ていきましょう！

基本的な使い方から連結後に新規のオブジェクトを生成する方法を学んでいきます。

オブジェクトを連結（マージ）する方法

まずは、基本的な連結方法から見ていきましょう！

サンプル例として、次のようなオブジェクトが2つあるとします。

var user1 = {
  name: '太郎',
  area: 'tokyo'
}

var user2 = {
  name: '花子',
  age: 28
}

この2つのオブジェクトは、同一のプロパティ「name」とそれぞれ異なるプロパティ「area / age」が含まれています。

この2つのオブジェクトを連結するには次のように記述します。

var result = $.extend(user1, user2);

console.log(result);

実行結果

{ name: "花子", area: "tokyo", age: 28 }

extendメソッドの引数に注目してください！

複数のオブジェクトを「,（カンマ）」で区切って指定することで1つにまとめることができるわけです。

実行結果を見ると、すべてのプロパティが1つにまとまっているのが分かりますね。

ただし、同一のプロパティ「name」に関しては1つしかありませんよね？

この結果からも分かるように、同じ名称のプロパティは最終的に上書きされるという点に注意が必要です！

さらに、もう1つの注意点として連結すると一番最初に指定したオブジェクトに上書きされるという点です。

試しに「user1」のオブジェクトを出力してみましょう！

console.log(user1);

実行結果

{ name: "花子", area: "tokyo", age: 28 }

このように、中身が先ほど連結した中身と同じになっていますよね？

つまり、「$.extend(user1, user2)」と記述すると一番最初に指定したuser1へオブジェクトがまとめられるというわけです。

オブジェクトを上書きせずに連結する方法

さて、先ほど連結したオブジェクトが元のオブジェクトを書き換えてしまうと説明しました。

しかし、場合によっては元のオブジェクトをそのままにしておきたいこともあるでしょう。

そのような場合には、第1引数へ空のオブジェクトを指定する方法があります。

次のサンプル例を見てください！

var result = $.extend({}, user1, user2);

console.log(result);
console.log('------------');
console.log(user1);

実行結果

Object { name: "花子", area: "tokyo", age: 28 }
------------
Object { name: "太郎", area: "tokyo" }

この例では、extendメソッドの第1引数へ空のオブジェクトを指定していますよね？

これにより、1つに連結されたオブジェクトは新規のオブジェクトとして生成されるのです。

実行結果を見ると、元のオブジェクト「user1」の中身に変化がないことが分かりますね。

特殊な連結（ディープコピー）の使い方

プロパティの中身がさらにオブジェクト構造になっているような複雑な構成の場合注意が必要なので解説しておきます。

例えば、次のようなオブジェクトが2つあるとします。

var list1 = {
  user: {
    name: '太郎'
  }
}

var list2 = {
  user: {
    age: 30,
    area: 'tokyo'
  }
}

この例では、同一のプロパティ「user」の中身がオブジェクト構造になっていますね。

それぞれのオブジェクトは内容が異なっている点に注目しておいてください。

この2つのオブジェクトを普通に連結すると次のようになります。

var result = $.extend(list1, list2);

console.log(result);

実行結果

{
    user: {
        age: 30,
        area: 'tokyo'
    }
}

実行結果に注目してください！

同じプロパティ名なので上書きされてしまいますね。

このような階層構造を持っているオブジェクトに対して、上書きせずに連結したい場合はどうれば良いでしょうか？

実は、第1引数に「true」を指定することで解決できるのです！

var result = $.extend(true, list1, list2);

console.log(result);

実行結果

{
    user: {
        name: '太郎'
        age: 30,
        area: 'tokyo'
    }
}

この例では、extendメソッドの第1引数に「true」を指定して上書きを防止しています。

実行結果を見ると、2つのオブジェクトの「userプロパティ」の中身が連結されているのが分かりますね！

配列を連結するmergeメソッドとは？

extendメソッドは複数のオブジェクトを連結しました。

類似メソッドとしてよく比較される「merge」についても合わせて解説をしておきます。

mergeメソッドは、オブジェクトではなく複数の「配列」を連結することができるメソッドです。

ただ、使い方はextendメソッドとほぼ同じなので一緒に覚えておくと良いでしょう。

次のサンプル例を見てください！

var array1 = [1,2,3];
var array2 = ['太郎', '花子'];

var result = $.merge(array1, array2);

console.log(result);

実行結果

[1, 2, 3, "太郎", "花子"]

この例では、2つの配列をmergeメソッドで1つに連結しているのが分かります。

実行結果を見るとしっかりと異なる配列がまとめられていますね。

ちなみに、extendメソッドと同じように一番最初に指定した配列へ上書きされる点は同じなので覚えておきましょう！

まとめ

本記事ではjQueryのextendメソッドの基本的な機能についてご紹介しました。

extendメソッドは第一引数に統合されるオブジェクト、第二引数に統合するオブジェクトを指定することで、中身が合わさったオブジェクトが生成される機能でした。

また、統合される側の中身が上書きされたくない場合は空のオブジェクトをextendメソッドの第一引数に指定して新しいオブジェクトに代入するのでした。

jQueryの開発を進めていくと、extendメソッドを使った処理を目にする機会が増えていくと思います。

そのような時にextendメソッドに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。