path: root/files/ja/web/javascript/reference/global_objects/array/index.html

---
title: Array
slug: Web/JavaScript/Reference/Global_Objects/Array
tags:
  - Array
  - Class
  - Example
  - Global Objects
  - JavaScript
  - Reference
  - クラス
  - グローバルオブジェクト
  - 配列
translation_of: Web/JavaScript/Reference/Global_Objects/Array
---
<div>{{JSRef}}</div>

<p>JavaScript の <strong><code>Array</code></strong> クラスはグローバルオブジェクトで、高水準、リスト風のオブジェクトである配列の構築に使用されます。</p>

<h2 id="Description" name="Description">解説</h2>

<p>配列はリストのようなオブジェクトであり、そのプロトタイプは配列に対して横断的な操作や変更を行うメソッドを持っています。 JavaScript の配列は、要素数も要素の型も固定されていません。配列の長さは常に可変であり、データを連続しない位置に格納できるため、 JavaScript の配列は密であることが保証されていません。これはプログラマーの使い方次第です。一般に、これらは便利な特性です。しかし、もし特定の用途で望ましくないのであれば、型付き配列を使用したほうが良いかもしれません。</p>

<p>配列は (<a href="https://ja.wikipedia.org/wiki/%E9%80%A3%E6%83%B3%E9%85%8D%E5%88%97">連想配列</a>のように) 要素の添字に文字列を使うことはできず、整数を使う必要があります。整数以外によって<a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">ブラケット構文</a> (または<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">ドット構文</a>) を使用して設定やアクセスを行うと、配列のリスト自身の要素を設定したり取得したりすることはできませんが、その配列の<a href="/ja/docs/Web/JavaScript/Data_structures#Properties">オブジェクトプロパティ集合</a>に関連付けられた変数に設定またはアクセスすることになります。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の<a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">走査や変更の操作</a>を名前付きプロパティに適用することはできません。</p>

<h3 id="Common_operations" name="Common_operations">よくある操作</h3>

<p><strong>配列を作成する</strong></p>

<pre class="brush: js notranslate">let fruits = ['りんご', 'バナナ']

console.log(fruits.length)
// 2
</pre>

<p><strong>位置を使用して配列にアクセスする</strong></p>

<pre class="brush: js notranslate">let first = fruits[0]
// りんご

let last = fruits[fruits.length - 1]
// バナナ
</pre>

<p><strong>配列のループ処理</strong></p>

<pre class="brush: js notranslate">fruits.forEach(function(item, index, array) {
  console.log(item, index)
})
// りんご 0
// バナナ 1
</pre>

<p><strong>配列の末尾に要素を追加する</strong></p>

<pre class="brush: js notranslate">let newLength = fruits.push('みかん')
// ["りんご", "バナナ", "みかん"]
</pre>

<p><strong>配列の末尾の要素を削除する</strong></p>

<pre class="brush: js notranslate">let last = fruits.pop() // 配列の末尾の要素 "みかん" を削除
// ["りんご", "バナナ"]
</pre>

<p><strong>配列の先頭の要素を削除する</strong></p>

<pre class="brush: js notranslate">let first = fruits.shift() // 配列の先頭の要素"りんご" を削除
// ["バナナ"]
</pre>

<p><strong>配列の先頭に要素を追加する</strong></p>

<pre class="brush: js notranslate">let newLength = fruits.unshift('いちご') // 配列の先頭に追加
// ["いちご", "バナナ"]
</pre>

<p><strong>要素の添字を取得する</strong></p>

<pre class="brush: js notranslate">fruits.push('マンゴー')
// ["いちご", "バナナ", "マンゴー"]

let pos = fruits.indexOf('バナナ')
// 1
</pre>

<p><strong>位置を指定して要素を削除する</strong></p>

<pre class="brush: js notranslate">let removedItem = fruits.splice(pos, 1) // 要素を削除する方法

// ["いちご", "マンゴー"]</pre>

<p><strong>位置から複数の要素を削除する</strong></p>

<pre class="brush: js notranslate">let vegetables = ['キャベツ', 'かぶ', '大根', 'にんじん']
console.log(vegetables)
// ["キャベツ", "かぶ", "大根", "にんじん"]

let pos = 1
let n = 2

let removedItems = vegetables.splice(pos, n)
// 複数の要素を削除するには、 <em>n</em> で削除する要素数を定義します
// 指定位置（pos）以降から n 個分の要素が削除されます

console.log(vegetables)
// ["Cabbage", "Carrot"] (元の配列が変化)

console.log(removedItems)
// ["Turnip", "Radish"]
</pre>

<p><strong>配列をコピーする</strong></p>

<pre class="brush: js notranslate">let shallowCopy = fruits.slice() // 配列のコピーを作成できます
// ["いちご", "マンゴー"]
</pre>

<h3 id="Accessing_array_elements" name="Accessing_array_elements">配列要素へのアクセス</h3>

<p>JavaScript の配列の添字は 0 から始まるので、配列の最初の要素は添字 <code>0</code> の位置にあります。そして、最後の要素のインデックスは {{jsxref("Array.length", "length")}} プロパティの値から 1 を引いた値になります。</p>

<p>不正なインデックス番号を使った場合は <code>undefined</code> を返します。</p>

<pre class="brush: js notranslate">let arr = ['最初の要素', '2 番目の要素', '最後の要素']
console.log(arr[0])              // ログ : "最初の要素"
console.log(arr[1])              // ログ : "2 番目の要素"
console.log(arr[arr.length - 1]) // ログ : "最後の要素"
</pre>

<p><code>toString</code> が一つのプロパティであるのと同様に (ただし厳密には <code>toString()</code> はメソッドですが)、配列における配列要素はオブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が妥当でないため、構文エラーが発生します。</p>

<pre class="brush: js notranslate">console.log(arr.0) // 構文エラー
</pre>

<p>これは、JavaScript の配列とそのプロパティに限った話ではありません。数字から始まるプロパティは、ドット演算子を用いて参照できないため、ブラケット記法を用いる必要があります。</p>

<p>例えば <code>3d</code> というプロパティを持つオブジェクトがあった場合は、ドット記法ではなくブラケット記法を用いて参照しなければなりません。</p>

<pre class="brush: js notranslate">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
console.log(years.0)   // 構文エラー
console.log(years[0])  // 正しく動作
</pre>

<pre class="brush: js notranslate">renderer.3d.setTexture(model, 'character.png')     // 構文エラー
renderer['3d'].setTexture(model, 'character.png')  // 正しく動作
</pre>

<p><code>3d</code> の例では、<code>'3d'</code> は引用符で括らなければならないことに注意してください。 JavaScript 配列の添字も同様に引用符でくくることができますが (例えば <code>years[2]</code> でなく <code>years['2']</code>)、そうする必要はないでしょう。</p>

<p><code>years[2]</code> の 2 は最終的に、JavaScript エンジンが内部的に <code>toString</code> メソッドで型変換することで文字列にされます。これは '2' と '02' が <code>years</code> オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は <code>true</code> がログ出力されます。</p>

<pre class="brush: js notranslate">console.log(years['2'] != years['02'])
</pre>

<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties">length と数値プロパティとの関係</h3>

<p>JavaScript の配列の {{jsxref("Array.length", "length")}} プロパティと数値プロパティは関連しています。</p>

<p>配列の一部の組込みメソッド (例えば {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, など) は、配列の {{jsxref("Array.length", "length")}} プロパティの値はメソッドの呼び出し時の値を考慮します。</p>

<p>他にも (例えば {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, 等)、結果として配列の {{jsxref("Array.length", "length")}} プロパティを更新するメソッドがあります。</p>

<pre class="brush: js notranslate">var fruits = []
fruits.push('バナナ', 'りんご', 'もも')

console.log(fruits.length) // 3
</pre>

<p>JavaScript の配列に、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の {{jsxref("Array.length", "length")}} プロパティを更新します。</p>

<pre class="brush: js notranslate">fruits[5] = 'マンゴー'
console.log(fruits[5])            // 'マンゴー'
console.log(Object.keys(fruits))  // ['0', '1', '2', '5']
console.log(fruits.length)        // 6
</pre>

<p>{{jsxref("Array.length", "length")}} を増加させてみます。</p>

<pre class="brush: js notranslate">fruits.length = 10
console.log(fruits)              // ['バナナ', 'りんご', 'もも', undefined, 'マンゴー', &lt;5 empty items&gt;]
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length)       // 10
console.log(fruits[8])           // undefined
</pre>

<p>一方、 {{jsxref("Array.length", "length")}} プロパティの数を減らすと、要素が削除されます。</p>

<pre class="brush: js notranslate">fruits.length = 2
console.log(Object.keys(fruits)) // ['0', '1']
console.log(fruits.length)       // 2
</pre>

<p>これらについては {{jsxref("Array.length")}} のページで詳しく解説します。</p>

<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">match の結果を利用して配列を作成</h3>

<p>正規表現 ({{jsxref("RegExp")}}) と文字列の一致の結果から配列を生成することができます。この配列には、プロパティと、一致した者に関する情報を提供する要素を持ちます。このような配列は {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}, {{jsxref("String.replace()")}} から返されます。</p>

<p>これらのプロパティと要素を理解しやすくするために、以下の例と表を参照してください。</p>

<pre class="brush: js notranslate">/ 1文字の d と、続く1文字以上の b と、続く1文字の d に一致します
// 一致した b およびそれに続く d を記憶します
// 大文字小文字は区別しません

const myRe = /d(b+)(d)/i
const myArray = myRe.exec('cdbBdbsbz')
</pre>

<p>この一致から返されるプロパティと要素は次の通りです。</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th class="header" scope="col">プロパティまたは要素</th>
   <th class="header" scope="col">説明</th>
   <th class="header" scope="col">例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>input</code><br>
    {{ReadOnlyInline}}</td>
   <td>正規表現が一致の文字列を反映する読み取り専用プロパティです。</td>
   <td>"<code>cdbBdbsbz</code>"</td>
  </tr>
  <tr>
   <td><code>index</code><br>
    {{ReadOnlyInline}}</td>
   <td>文字列中で一致場所を、0 から始まる位置で示します。</td>
   <td><code>1</code></td>
  </tr>
  <tr>
   <td><code>[0]</code><br>
    {{ReadOnlyInline}}</td>
   <td>最後にマッチした文字列です。</td>
   <td>"<code>dbBd</code>"</td>
  </tr>
  <tr>
   <td><code>[1], ...[n]</code><br>
    {{ReadOnlyInline}}</td>
   <td>正規表現に含まれる場合、括弧で囲まれた一致た部分文字列を指定する読み取り専用の要素です。括弧で囲まれた部分文字列の数は無制限です。</td>
   <td><code>[1]: "bB"<br>
    [2]: "d"</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{jsxref("Array/Array", "Array()")}}</dt>
 <dd>新しい <code>Array</code> オブジェクトを生成します。</dd>
</dl>

<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2>

<dl>
 <dt>{{jsxref("Array/@@species", "get Array[@@species]")}}</dt>
 <dd>コンストラクター関数。派生オブジェクトを生成する時に使われます。</dd>
</dl>

<h2 id="Static_methods" name="Static_methods">静的メソッド</h2>

<dl>
 <dt>{{jsxref("Array.from()")}}</dt>
 <dd>配列風 (array-like) または反復可能 (iterable) オブジェクトから新しい <code>Array</code> インスタンスを生成します。</dd>
 <dt>{{jsxref("Array.isArray()")}}</dt>
 <dd>配列であれば <code>true</code> を、配列でなければ <code>false</code> を返します。</dd>
 <dt>{{jsxref("Array.of()")}}</dt>
 <dd>可変個の引数から、引数の個数や型に関わらず、新しい <code>Array</code> インスタンスを生成します。</dd>
</dl>

<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2>

<dl>
 <dt>{{jsxref("Array.prototype.length")}}</dt>
 <dd>配列内の要素数を反映します。</dd>
 <dt>{{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
 <dd><a href="/ja/docs/Web/JavaScript/Reference/Statements/with"><code>with</code></a> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd>
</dl>

<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2>

<dl>
 <dt>{{jsxref("Array.prototype.concat()")}}</dt>
 <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd>
 <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
 <dd>配列内で配列内の連続した要素をコピーします。</dd>
 <dt>{{jsxref("Array.prototype.entries()")}}</dt>
 <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd>
 <dt>{{jsxref("Array.prototype.every()")}}</dt>
 <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.fill()")}}</dt>
 <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd>
 <dt>{{jsxref("Array.prototype.filter()")}}</dt>
 <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd>
 <dt>{{jsxref("Array.prototype.find()")}}</dt>
 <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
 <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
 <dd>配列中のそれぞれの要素について関数を呼び出します。</dd>
 <dt>{{jsxref("Array.prototype.includes()")}}</dt>
 <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd>
 <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
 <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、<code>-1</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.join()")}}</dt>
 <dd>配列のすべての要素を結合した文字列を返します。</dd>
 <dt>{{jsxref("Array.prototype.keys()")}}</dt>
 <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各添字のキーを保持します。</dd>
 <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
 <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、<code>-1</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.map()")}}</dt>
 <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd>
 <dt>{{jsxref("Array.prototype.pop()")}}</dt>
 <dd>配列から最後の要素を取り除き、返値として返します。</dd>
 <dt>{{jsxref("Array.prototype.push()")}}</dt>
 <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の <code>length</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
 <dd>アキュムレーターと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd>
 <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
 <dd>アキュムレーターと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd>
 <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
 <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd>
 <dt>{{jsxref("Array.prototype.shift()")}}</dt>
 <dd>配列から最初の要素を取り除き、その要素を返します。</dd>
 <dt>{{jsxref("Array.prototype.slice()")}}</dt>
 <dd>配列の一部を取り出して新しい配列として返します。</dd>
 <dt>{{jsxref("Array.prototype.some()")}}</dt>
 <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.sort()")}}</dt>
 <dd>配列内で要素を整列し、配列を返します。</dd>
 <dt>{{jsxref("Array.prototype.splice()")}}</dt>
 <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd>
 <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
 <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きします。</dd>
 <dt>{{jsxref("Array.prototype.toString()")}}</dt>
 <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd>
 <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
 <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の <code>length</code> を返します。</dd>
 <dt>{{jsxref("Array.prototype.values()")}}</dt>
 <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。</dd>
 <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
 <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Creating_an_array" name="Creating_an_array">配列の生成</h3>

<p>次の例では、 <code><var>msgArray</var></code> を長さ <code>0</code> で生成し、 <code>msgArray[0]</code> と <code>msgArray[99]</code> に値を設定、その後配列の <code>length</code> が <code>100</code> である事を確認しています。</p>

<pre class="brush: js notranslate">let msgArray = []
msgArray[0] = 'Hello'
msgArray[99] = 'world'

if (msgArray.length === 100) {
  console.log("配列の length は 100 です。")
}
</pre>

<h3 id="Creating_a_two-dimensional_array" name="Creating_a_two-dimensional_array">2 次元配列を生成する</h3>

<p>以下では、文字列の 2 次元配列としてチェスボードを生成しています。最初の動きは <code>'p'</code> を <code>board[6][4]</code> から <code>board[4][4]</code> にコピーすることでなされます。古い位置 <code>[6][4]</code> は空白にされます。</p>

<pre class="brush: js notranslate">let board = [
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ]

console.log(board.join('\n') + '\n\n')

// キングの前のポーンを 2 つ前へ移動
board[4][4] = board[6][4]
board[6][4] = ' '
console.log(board.join('\n'))
</pre>

<p>出力を以下に示します。</p>

<pre class="eval notranslate">R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r
</pre>

<h3 id="Using_an_array_to_tabulate_a_set_of_values" name="Using_an_array_to_tabulate_a_set_of_values">配列を使って値のセットを表にする</h3>

<pre class="brush: js notranslate">values = []
for (let x = 0; x &lt; 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
}
console.table(values)</pre>

<p>結果は次のようになります。</p>

<pre class="eval notranslate">0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162</pre>

<p>(最初の列は要素の添字です)</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">初回発行</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
   <td>ECMAScript 1</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("javascript.builtins.Array")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>From the JavaScript Guide:
  <ul>
   <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">“Indexing object properties”</a></li>
   <li><a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">“Indexed collections: <code>Array</code> object”</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/JavaScript_typed_arrays">型付き配列</a></li>
</ul>