Search

検索したいワードを入力してください

2019年02月27日

JavaScriptの配列に要素を追加する方法のまとめ

JavaScriptの配列に要素を追加する方法をご紹介します。また、それに関連して要素の削除方法、オブジェクト(連想配列)の扱い方についても触れています。JavaScriptの配列で要素を追加するメソッドはいくつかあり、その使い分けも例示します!

JavaScriptで配列に要素の追加を行う方法

ほとんどのプログラミング言語に「配列」が存在しますが、その仕様はまちまちです。この記事では、JavaScriptの配列に実装されているメソッドのうち、要素の「追加」に関するものを主にご紹介します。

JavaScriptのpushメソッドを使って配列の要素を追加する方法

JavaScriptのArray.prototype.pushメソッドを使うと配列の最後尾に要素を追加することができます。引数を複数渡せば、全ての引数を渡した順に追加してくれます。

以下のコードでは最初にtwoを追加し、次にthreeとfourを一度に追加しています。

let array = ['one'];
array.push('two');
array.push('three', 'four');
console.log(array); // -> ['one', 'two', 'three', 'four']

JavaScriptでは、存在しないキーにアクセスすると当該プロパティが新たに作成されるので、以下のように書くこともできます。

let array = ['one'];
array[array.length] = 'two';
console.log(array); // -> ['one', 'two']

でもあまり一般的ではないので、特別な理由がなければpushメソッドを使いましょう。慣習に従うことは、コードのリーダビリティを向上します。

JavaScriptのunshiftメソッドで配列の値を先頭に追加する方法

Array.prototype.unshiftメソッドを使うと、配列の先頭に要素を追加できます。pushメソッドと同様に、引数を複数渡せば、全ての引数が追加されます。

複数の要素を追加した場合、要素の並び順は引数の並び順と同じになります。

let array = [1];
array.unshift(2);
array.unshift(3, 4);
console.log(array); // -> [3, 4, 2, 1]

JavaScriptのspliceメソッドで指定した位置に1つ以上の値を追加する方法

Array.prototype.spliceメソッドは、配列内で指定位置の要素を削除し、代わりの要素を追加できます。任意の位置に要素を追加したい場合は、spliceメソッドを使います。

let array = ['壱', '弐', '参'];
array.splice(1, 0, '四');
array.splice(3, 0, '伍', '六');
console.log(array); // -> ['壱', '四', '弐', '伍', '六', '参']

1番目の引数に位置 (インデックス)、2番目の引数に削除する要素数、3番目以降の引数に追加する要素の値を渡します。インデックスは、最初の要素の前が「0」、最後の要素の後ろがarray.lengthとなります。

削除する要素数を0とすれば、単に指定位置に要素を追加できます

spliceメソッドを使えば、pushメソッドやunshiftメソッドと同じこともできます。

let array = ['a', 'b', 'c', 'd'];
// pushメソッドと同等
array.splice(array.length, 0, 'e', 'f');
console.log(array); // -> ['a', 'b', 'c', 'd', 'e', 'f']
// unshiftメソッドと同等
array.splice(0, 0, 'g', 'h');
console.log(array); // -> ['g', 'h', 'a', 'b', 'c', 'd', 'e', 'f']

柔軟に配列への追加・削除を行うことができるので、要素の並び順が意味を持つケースでプログラマティックに配列操作をしたいときには、spliceメソッドがよく登場することになります。

配列要素の削除におけるpop、shiftメソッドとspliceメソッドの違い

蛇足ですが、spliceメソッドでは上述のように要素の削除もできます。

let array = ['い', 'ろ', 'は', 'に', 'ほ'];
array.splice(1, 2);
console.log(array); // -> ['い', 'に', 'ほ']

これと似たことができるpopメソッドもあります。popメソッドは、配列の最後尾の要素を取り出します。また、同じくshiftメソッドは先頭の要素を取り出します。

let array = ['い', 'ろ', 'は', 'に', 'ほ'];
array.pop();
console.log(array); // -> ['い', 'ろ', 'は', 'に']
array.shift();
console.log(array); // -> ['ろ', 'は', 'に']

spliceよりも簡潔ですが、最後尾または先頭の要素1つしか削除できませんので、シーンによって使い分けることになります

spliceメソッドを使えば同じ操作が可能ではありますが、push、unshift、pop、shiftメソッドを使える場合は、積極的に使って配列操作の意図を明確にしましょう。

オブジェクト で要素の追加を行う方法

まだオブジェクト にないキー文字列を指定して値を代入する

JavaScriptに連想配列はありませんが、Objectをデータコンテナとして用いることができます。Objectに要素を追加したいときは、単に追加したいキーに値を代入します。JavaScriptのオブジェクトでは、あらゆる文字列とシンボルをキーに用いることができます。

let hash = Object.create(null);
hash['年齢'] = 34;
console.log(hash); // -> { '年齢': 34 }

再び蛇足ですが、let hash = Object.create(null);のところで、let hash = {};としている例もよく見かけます。この2つは意味が異なりますので、適切に理解しましょう。

{}というのは、Objectというオブジェクトのインスタンスを生成します。JavaScriptのObjectには、__proto__やhasOwnPropertyなどのビルトインプロパティが定義されていますので、例えば{}.hasOwnPropertyはfunctionを返してしまいます。

一方でObject.create(null)はnullをプロトタイプに持つオブジェクトで、一切のプロパティを持ちません。完全に真っさらの連想配列を用意することができます。もしhashにあらゆる文字列の入る可能性があるなら、Object.create(null)が安全です。

push、unshift、spliceメソッドの使い分け

JavaScriptの配列に要素を追加する方法として、push、unshift、spliceメソッドをご紹介しました。既に述べたように、配列の途中などへ柔軟に追加したいときはsplice、pushやunshiftで代替可能な場合はpushやunshiftを使うのがオススメです

簡単な例として、アルファベット順に並べた単語リストを考えてみましょう。

let dictionary = [];

function add(word) {
const added = dictionary.some((item, index, array) => {
if (item > word) {
array.splice(index, 0, word);
return true;
}
});
if (!added) dictionary.push(word);
}

add('bean');
add('lemon');
add('apple');

console.log(dictionary); // -> ['apple', 'bean', 'lemon']

定義したadd関数は、dictionary内で単語がアルファベット順に並ぶように、適切な位置に引数wordを追加する関数です。ここでは、spliceとpushを使い分けています。

someメソッド内の関数でwordを追加することになった場合、wordの位置は現在のindexでなければいけません。そこで、位置を指定できるspliceメソッドを使います。

indexが0の場合にはunshiftメソッドが使えますが、0でない可能性もあります。このように、追加位置が変数の場合にはspliceメソッドが適しています。

もし、someメソッドがfalseを返した場合、wordはdictionaryのあらゆる要素よりも後方の単語ということになります。wordの追加先は必ず最後尾ですから、pushメソッドを使うことができます。

ここでspliceメソッドを使うと、if (!added) dictionary.splice(dictionary.length, 0, word);となりますが、一見どこに追加しようとしているのか分かりにくくなってしまいます。pushメソッドを用いて、意図を明確にすることが適切といえます。

適切なメソッドを使って、明瞭なコードに

JavaScriptにおける配列への要素の追加方法、そして追加メソッドの使い分けについてご紹介しました。spliceという汎用メソッド、push、unshiftという特化されたメソッドがありましたが、上手に使い分けて読みやすいコードを目指してください

読みやすいコードは、他人の役に立つだけでなく、自分にとってもデバッグしやすい、人の助けを得やすいというメリットがあります。本稿が、そうした習慣を身につける手助けになれば幸いです。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related