初心者も簡単にできる！jQueryのmerge関数で異なる配列をマージする完全ガイド｜DAD UNION

プログラミングの世界では、様々なデータを効率的に扱う方法が求められます。特に、複数の配列を合わせる「マージ」という作業は非常によく行われるものです。
今回は、JavaScriptのライブラリであるjQueryを使った配列のマージ方法（merge）について解説します。

Contents

はじめに
jQueryのmerge関数を用いたマージ方法
HTMLとCSSの準備
- HTMLの記述
- CSSの記述
jQueryのmergeを使って2つの異なる配列をマージし、マージ結果を表示するデモページ
まとめ

はじめに

まず、配列とは何かを理解しましょう。配列は、複数のデータを一つの変数で管理するためのデータ構造です。例えば、色々な文字を配列で管理することができます。

今回使う例として、以下の2つの配列を考えます。

onearry = [ "A", "B", "C", "D" ]
twoarry = [ "e", "f", "g", "h", "i", "k" ]

　
これらの配列をマージ（結合）し、新しい配列を作る方法を見ていきましょう。

jQueryのmerge関数を用いたマージ方法

jQueryには、配列をマージするためのmerge関数が用意されています。この関数を使うと、簡単に配列を結合できます。
以下が、merge関数を使用して2つの配列をマージするサンプルコードです。

<script src="./jquery-2.2.0.min.js"></script>

<script type="text/javascript">
$(function() {
  var onearry = [ "A", "B", "C", "D" ];
  var twoarry = [ "e", "f", "g", "h", "i", "k" ];
  var mrgarry = $.merge( $.merge( [], onearry ), twoarry );

  var mrglist = '';
  for (var i=0; i<mrgarry.length;i++){
    mrglist += '<li>'+ mrgarry[i] + '</li>';
  }

  document.getElementById('mrglist').innerHTML = mrglist;
});
</script>

　
このコードでは、merge関数を使ってonearryとtwoarryをマージし、新しい配列mrgarryを作成しています。そして、このマージした配列の各要素をリストとしてHTML（id=”mrglist”）に追加しています。

HTMLとCSSの準備

マージした結果を表示するためには、HTMLとCSSも適切に設定する必要があります。

HTMLの記述

HTMLでは、以下のようにマージ結果を表示する部分を用意します。
id=”mrglist”タグにマージ結果を出力します。

<h1>2つの配列をマージして出力します。</h1>

<p>
配列1　onearry = [ "A", "B", "C", "D" ]<br>
と<br>
配列2　twoarry = [ "e", "f", "g", "h", "i", "k" ]<br>
をマージして以下に出力します。
</p>


  <ul id="mrglist"></ul>

CSSの記述

CSSでは、表示するリストのスタイルを調整します。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
p{
  text-align: center;
  padding-bottom: 20px;
}
#mrglist{
  width: 20px;
  margin: 0 auto;
}
ul{
  list-style: none;
}
</style>