【初心者向け】JavaScriptの配列の使い方をマスターしよう！

JavaScriptのコーディングに欠かせない、基本的な概念の一つに「配列」があります。しかし、プログラミング初心者にとって、配列の考え方や使い方は、あまり馴染みがないものでしょう。配列とは、一つの変数に複数の値を格納したデータ構造です。具体的には、以下のようなコードで記述されます。

var array = new Array(‘東京’, ‘大阪’, ‘名古屋’);

本記事を読むことで、配列の宣言や追加、並べ替えなど、配列の使い方について理解できます。あなたのプログラミング学習に、ぜひ活用してください。

JavaScriptの配列とは

配列とは複数の値を1つの変数に格納し、1つのデータのように扱うデータ構造です。JavaScriptではArrayオブジェクトを活用することで、配列の作成や削除、追加、結合、分割、検索などを行えます。

通常、プログラミングでは数十個から100個以上など、多くの値を取り扱います。これら全ての値に対し、変数を1個ずつ作成するのは非常に手間のかかる作業です。そのような時に、配列を活用することで大量の値を一括で扱えます。

JavaScript配列の使い方

ここからはJavaScript配列の使い方について、以下の項目を解説します。

• 配列の宣言、初期化
• 配列の要素の取得、検索
• 配列の要素の追加
• 配列の要素の削除
• 配列の要素数の調べ方
• 配列の結合
• 配列の分割
• 連想配列
• 配列のコピー
• 配列の並び替え

配列の使い方①　宣言、初期化

JavaScriptの配列には、2種類の宣言方法があります。1つ目は、配列コンストラクタ「Array」を使う方法です。2つ目は、配列リテラル「[]」を使う方法です。各方法を使ったコード記述は、以下のようになります。

//配列コンストラクタの例 var array1 = new Array(‘キャベツ’, ‘にんじん’, ‘たまねぎ’); //配列リテラルの例 var array2 = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; console.log( array1 ); console.log( array2 );

このコードの実行結果は、以下のとおりです。

[“キャベツ”, “にんじん”, “たまねぎ”] [“キャベツ”, “にんじん”, “たまねぎ”]

配列を初期化する際は、配列コンストラクタと配列リテラル、どちらの場合でも空の配列を宣言します。コード記述の例は、以下のとおりです。

//配列コンストラクタの例 var array1 = new Array(); //配列リテラルの例 var array2 = [];

配列の使い方②　要素の取得、検索

JavaScriptでは、配列のインデックス番号を指定することで、配列内の特定の要素を取得できます。記述するコードは、以下です。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; console.log(Yasai［1]);　//実行結果は「にんじん」

なお、インデックス番号は0から数えられます。そのため、上記の例のようにインデックス番号1の要素を取得すると、配列では2番目にある要素の「じゃがいも」が、実行結果に表示されるのです。

また、JavaScriptには配列要素の検索方法として、indexOfメソッドが活用されています。indexOfメソッドは、引数の値が配列データ内に存在する場合に、その値のインデックス番号を返します。要素の検索を実行するコードは、以下です。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; var n = items.indexOf(‘にんじん’); console.log(n);　//実行結果は「1」

配列の使い方③　要素の追加

JavaScriptで配列に要素を追加する際は、pushメソッドを活用します。pushメソッドを活用すると、引数の値を指定した配列の最後に追加可能です。実際のコードは、以下のようになります。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; Yasai.push(‘トマト’);

上記のコードを実行すると、「キャベツ」「にんじん」「たまねぎ」の要素が含まれた配列の末尾に、「トマト」という要素を追加できます。

配列の使い方④　要素の削除

JavaScriptで配列の要素を削除する際は、delete演算子を活用します。delete演算子を利用することで、特定のインデックス番号の要素を削除できます。実際のコードは、以下を確認してください。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; delete Yasai［1]; console.log(Yasai); //実行結果は「キャベツ,,たまねぎ』

なお、delete演算子で削除された要素は空の要素になります。上記の例の場合、「キャベツ」「」「たまねぎ」の3つの要素が含まれた配列になります。

配列の使い方⑤　配列の要素数を調べる

JavaScriptで配列の要素数を調べる際は、length演算子を活用します。length演算子を使った実際のコードは、以下のようになります。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’]; console.log(Yasai.length);　//実行結果は「3」

length演算子は、要素数の大きい配列の要素数を調べる場合や、要素の追加や結合を繰り返した配列の要素数を調べる場合に便利です。

配列の使い方⑥　配列の結合

JavaScriptで配列の結合をする際は、joinメソッドを活用します。joinメソッドを使うと、配列内の要素をString型の文字列として出力可能です。実際のコードは、以下のようになります。

var dateValue= [2022, 1, 23]; var date = dateValue.join(‘/’); console.log(date);　//実行結果は「2022/1/23」

上記の例では、各要素を「/」を利用して結合するのです。引数を指定しないと、各要素はカンマで区切られて結合されます。

配列の使い方⑦　配列の分割

JavaScriptで配列の分割をする際は、sliceメソッドを活用します。sliceメソッドを使うと、特定のインデックス番号で配列を分割し、新たな配列として出力できます。実際のコードは、以下のようになります。

var Yasai = [‘キャベツ’, ‘にんじん’, ‘たまねぎ’, ‘トマト’]; var Yasai1 = Yasai.slice(1); console.log(Yasai1);　//実行結果は「にんじん,たまねぎ,トマト」 var Yasai2 = Yasai.slice(1, 2); console.log(Yasai2);　//実行結果は「にんじん,たまねぎ」

1つの引数を指定してsliceメソッドを使うと、指定した引数以降の要素を含む配列が出力されます。2つの引数を指定してsliceメソッドを使うと、1つ目の引数と2つ目の引数の間に含まれる要素を含む配列が、出力結果として返ってきます。

配列の使い方⑧　連想配列

プログラミングで扱われる配列の種類の一つに、連想配列があります。JavaScriptにおける連想配列とは、「キー」と「値」のペアで構成される配列です。なお、連想配列にはデータの型の縛りがないため、一つの連想配列に文字列と数値の両方を格納できます。実際に連想配列を作成すると、以下のようになります。

var YasaiList = {1:’キャベツ’, 2:にんじん, 3:’たまねぎ’}; console.log(YasaiList.1);　//実行結果は「キャベツ」

上記のように連想配列は{}で作成し、キーと値を「:」でひも付けます。データの型に縛られない配列であるため、あらゆる場面で活用されます。

配列の使い方⑨　配列要素を抽出

JavaScriptで配列の要素を抽出する際は、filterメソッドを活用しましょう。filterメソッドを使うことで、配列内から特定の条件に合う要素だけを抽出し、それらで構成された新たな配列データの作成が可能です。実際のコードは、以下のようになります。

var Number = [4, 2, 1, 7, 3, 6, 9]; var result = Number.filter(function(value) { 　return value < 5;　//5より小さい数値を抽出 } console.log(result);　//実行結果は「4,2,1,3」

なお、配列内に指定した条件の要素が含まれていない場合、空の配列が出力結果として返ってきます。

配列の使い方⑩　配列をコピーする

JavaScriptで配列をコピーする際は、concatメソッドを活用するのがベスト。concatメソッドは、配列同士を連結する機能を持ちます。しかし、連結対象の配列を空の配列にすることで、配列内の要素を別の配列に丸ごとコピー可能です。実際のコードは、以下のようになります。

var Number = [4, 2, 1, 7, 3, 6, 9]; var newNumber = Number.concat(); console.log(​​Number);　//実行結果は「4,2,1,7,3,6,9」 console.log(newNumber);　//実行結果は「4,2,1,7,3,6,9」

配列の使い方⑪　配列を並べ替える

JavaScriptで配列内の要素を並び替える際は、sortメソッドを活用します。sortメソッドを使うと、配列内の要素を昇順に並び替えることが可能です。実際のコードは、以下のようになります。

var String = [‘d’, ‘c’, ‘a’, ‘e’, ‘b’]; String.sort(); var Number = [4, 2, 1, 7, 3, 6, 9]; function compareFunc(a, b) { 　return a – b; } Number.sort(compareFunc); console.log(String);　//実行結果は「a,b,c,d,e」 console.log(Number);　//実行結果は「1,2,3,4,6,7,9」

上記の例のように、数値を並び替える場合は比例関数を使う必要があります。比例関数を使わないと、文字列として並べ替えられるため注意しましょう。

JavaScriptを勉強するならおすすめプログラミングスクール

JavaScriptを効率的に勉強するなら、プログラミングスクールで経験豊富な講師の方から学ぶのがおすすめです。ここからは、JavaScriptの勉強に適したプログラミングスクールを紹介します。

TECH CAMP  エンジニア転職

受講料（税込）	短期集中スタイル 分割料金：19,600円/月〜 一括料金：657,800円 夜間・休日スタイル 分割料金：43,800円/月〜 一括料金：877,800円
受講形式	オンライン完結型
特徴	・受講者数60,000名以上、転職成功人数3,200名以上の教育実績 ・ライフスタイルに合わせて学習方法を選択可能

TECH CAMP エンジニア転職は、最短10週間で未経験からITエンジニアを目指せるプログラミングスクールです。プログラミングに触れたことの無い方でも、挫折しないで学びきれる学習カリキュラムや、サポート体制が充実しています。

TECH CAMP エンジニア転職でプログラミングを教える講師は、徹底した教育研修を受けた、未経験者にプログラミングを教えるプロです。プログラミングの技術力に加え、接客力が備わった講師が揃っているため、未経験者でも安心して学習を進められます。

TECH CAMP プログラミング教養

受講料（税込）	3ヶ月プラン 月額料金：21,780円/月（初月無料） 入会費用：217,800円
受講形式	オンライン完結型
特徴	・複数ある学習コースを受け放題 ・7日間の無条件全額返金保証を実施

TECH CAMP プログラミング教養は、テクノロジーが主役の時代に成果を出せる人材の育成を目的としたプログラミングスクール。数多くの学習コンテンツを提供しており、受講期間中であれば全ての学習コンテンツの受講が可能です。

どのコンテンツも自己学習型の形式をとっているため、自分のペースで自分に必要なスキルを学ぶことができます。また、TECH CAMP プログラミング教養ではTECH CAMP エンジニア転職と同様に、高い技術力と接客力を兼ね備えた講師陣が、プログラミングを教えてくれます。

TechAcademy

受講料（税込）	4週間コース 社会人：174,900円 学生：163,900円 8週間コース 社会人：229,900円 学生：196,900円 12週間コース 社会人：284,900円 学生：229,900円 16週間コース 社会人：339,900円 学生：262,900円
受講形式	オンライン完結型
特徴	・学習目的や目標に合わせて、多種多様のコースを選択可能 ・副業として案件獲得やエンジニア転職もサポート

TechAcademyは、多種多様の学習コースを提供しているプログラミングスクールです。Webサービス開発やスマートフォンアプリ開発など、目的によって受講コースを選べます。TechAcademyの講師陣は、全員が実務経験者で通過率わずか10％の選考を通過した優秀な技術者たちです。優秀な講師陣が、受講者の学習を適切にサポートしてくれます。

また、TechAcademyでは副業の案件獲得や、エンジニアへの転職サポートも行っています。月5万円副業で稼ぎたい人から、ITやエンジニアとして転職したい人まで、あらゆる受講者の目標をサポートします。

JavaScriptの配列はプログラミングの基本の1つなので必ず理解しておこう

本記事では、JavaScriptの配列の役割や使い方、JavaScriptを学ぶのに適したプログラミングスクールについて解説しました。配列はJavaScriptに限らず、あらゆるプログラミング言語の基本となる考え方の一つです。そのため、プログラミングを習得する際には、必ず理解しなければならない考え方と言えるでしょう。

配列にはさまざまな扱い方がありますが、扱い方一つ一つの原理は難しくありません。焦らず確実に、配列の扱い方をマスターしましょう。