まとめ「配列(Array)」とは?それではまず最初に、配列について基本的な知識から学んでいきましょう。配列を活用すると、複数の値をまるで1つのデータのように取り扱うことができるようになります。10;上記のように、文字列や数値などの値を1つの変数に格納していきます。10個や20個...または100個などもっと多くの値を扱いたい場合に、いちいち変数を1つずつ作るのは大変ですよね?そのような時に、配列データを作成することで大量の値を1つのデータのように扱えるわけです。JavaScriptではこのような配列型を扱うために「Arrayオブジェクト」が用意されています。...などを簡単に行えるようになります!配列の使い方では、配列の基本的な考え方を知ったところで、具体的な使い方についてサンプルコードと共にみていくことにしましょう。配列を宣言する方法まずは、JavaScriptで配列を使うために宣言(作成)する方法から学んでいきましょう!配列の宣言には2種類の方法があります。]」を使う方法になります。"イチゴ"]この例では、3つの果物名の文字列を配列に格納しています。]を使ってそのまま文字列を設定すればOKです!どちらの方法でも同じ配列データが作成できているのを実行結果からも確認できますね。この2種類の方法はいくつか相違点があるのですが、最も違うのは1つだけの数値を格納しようとした時に発生します。5][5]どちらの宣言方法にも「5」という数値を設定しているのが分かりますよね?ところが、実行結果は大きく異なっています。Array(5)」と記述すると「5つ分の配列要素を用意する」という意味になるのです。配列リテラルで「[5]」と記述すると「5という数値を配列に格納する」という意味になります。このような仕様のため、配列コンストラクタを使うと数値1つだけの配列データを作成できないわけです。次は、すでに作成した配列データを初期化する方法について見ていきましょう!ここで言う初期化というのは、配列データの中身を空っぽにするという意味になります。]だけを記述しているのが分かりますね?これにより、もし変数「array」に配列データが格納されていたとしても、初期化されて中身は空っぽの状態になるわけです。Array()」とだけ記述することで同じように初期化することもできます。作成された配列変数の各要素を取得するためには、どうすれば良いのでしょうか?その答えは以下のサンプルの通りです。_3nen5kumi[5]);実行結果_3nen5kumi[0]:kato_3nen5kumi[3]:tanaka_3nen5kumi[5]:undefined取得したい配列変数の要素番号をカッコで指定することで、その要素の中身を取得することができました。注意点としては繰り返しになりますが、要素番号(インデックス)は0番から始まるということです。上の例で6番目の要素を取ろうとしたところ、’undefined’という結果が得られました。これは、最初に配列変数を宣言した際に、6番目の児童の名前を設定していないので、6番目の要素はありませんよということをJavaScriptがプログラマーに教えるために’undefined’(未定義)という変数が結果として得られる仕組みになっています。配列の要素を検索する方法(indexOf)配列内にある各要素のデータを簡単に検索できる方法が用意されているのでご紹介します!最も手軽に検索する方法としては、「indexOf()」メソッドがあるので詳しく見ていきましょう。「indexOf()」は、指定した「値」が配列データに存在する場合にその場所を「インデックス番号」で取得できる機能を持っています。);実行結果2この例では、配列データに対して「indexOf('リンゴ')」を記述することで、文字列「リンゴ」が存在するかを確認しています。実行結果を見ると、インデックス番号が「2」なので配列の2番目の要素に「リンゴ」という文字列があることを示しています。直感的に使える検索手段ですよね。配列の要素を追加する方法(push)配列を使い始めるための宣言や初期化の方法を理解したところで、次に、配列に要素を追加したり、削除したりする方法をみていくことにしましょう。ある小学校のクラスで転入生が入って来た場合を想定してサンプルコードを確認してみましょう。夏休み前:kato,sato,suzuki,tanaka,hayama夏休み後:kato,sato,suzuki,tanaka,hayama,maeda冬休み前:kato,sato,suzuki,tanaka,hayama,maeda,yamada上のサンプルでは要素(上の例では児童)を追加する方法を2つご紹介しています。最初の方法は、追加したい配列の現在の一番後ろの要素番号(ここでは’hayama’君の4番)から1足した要素番号(5)を指定し、’maeda’君を代入する方法です。一つは、pushメソッドを使い要素を追加する方法です。どちらが手間がかからない追加方法でしょうか?そうです、pushメソッドを使えば、わざわざ一番後ろの要素を調べて指定する必要が無い分、とても楽に要素を追加することが可能です。pushメソッドを更に詳しく知りたい場合は以下の記事を参考にしてください。配列の要素を削除する方法(delete)では、次に、ある小学校のクラスで他の学校に転校してしまう生徒がいた場合の想定で、配列の要素を削除する方法をみていくことにしましょう。]配列の要素を削除するために、delete演算子を利用します。削除したい要素のインデックスを指定することで、配列変数の中身の指定要素の箇所が空になっていることが確認できるかと思います。配列の削除について更に詳しい内容を知りたい方は以下の記事が参考になります。配列を連結・結合する方法(join)配列データを「連結・結合」する簡単な方法として、「join()」メソッドが用意されているのでご紹介します!「join()」は、配列の各要素を連結・結合して「文字列(String)」として出力することができる機能を持っています。);実行結果2018/1/10この例では、数値が格納された配列データに対して「join('/')」を実行しているのが分かりますね。join()の引数に「/」を指定していますが、これにより配列の各要素を「/」で連結することが出来るのです。最終的にすべての配列要素を結合すると実行結果のような日付の文字列を取得できるわけです!ちなみに、join()の引数を何も指定しない場合は「カンマ区切り」の文字列を取得できます。);実行結果バナナ,イチゴ,リンゴ,メロンjoin()の引数に何も指定していない点に注目してください。配列を分割する方法(slice)配列データを分割する方法として簡単なのは「slice()」メソッドを使うことです!「slice()」は、指定した配列のインデックス番号を境目に分割して新しい配列データを取得することができる機能を持っています。)」と記述しているのが分かりますね。これにより、配列の2番目のインデックス番号にある要素から末尾までを分割して新しい配列として取得できます。ちなみに、配列のインデックス番号は0番目から数える点に注意しておきましょう。"リンゴ"]slic()の引数に注目してください!この場合は、開始位置が「1」で終了位置が「3」になります。そのため、インデックス番号が1番目から始まり3番目までを分割して結合することになります。mapについてのメソッドを学んでいきます。forEachで配列要素を繰り返し処理するまずは、forEach文を使った配列要素の処理について見ていきましょう!forEachは、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることができます。次の例では配列要素を1つずつコンソールに出力しています。);});実行結果バナナリンゴメロンブドウforEach内のコールバック関数に、配列要素1つずつに実行させたい処理を記述するわけです。2019年6月5日filterで配列要素を抽出する次に、filterの使い方について見ていきましょう!filterは、任意の条件に合致する配列要素だけを抽出して新しい配列データを作成することができます。次の例では、数値データが格納された配列に対して任意の条件を設定しています。5」という条件を設定していますね。これにより、5よりも小さい数値の配列要素だけを抽出しているわけです。2019年4月8日mapで処理した要素を新しい配列で作成する今度は、mapによる配列処理について見ていきましょう!mapはforEachとよく似ていますが、最終的に新しい配列として生成してくれる点が大きく異なります。次の例では数値データが格納された配列要素に対して、すべて2倍にする処理になります。10]map内のコールバック関数にて配列要素1つずつに対して2を掛けているのが分かりますね。これにより、新しい配列へ2倍にした数値が次々と格納されていくわけです。配列を便利に扱うメソッドやプロパティこれまで配列について基本的な使い方を学んできました。次には配列に関連するメソッドやプロパティを中心に紹介していきます。配列はArrayクラスという大元となるクラスの機能を受け継いでおり、Arrayクラスには数多くの配列に関する便利なメソッドやプロパティが用意されています。そのうち、よく使われる代表的なものをみていくことにしましょう。作成済みの配列をコピーして、そのコピーした配列を処理に使いたい場面があるかと思います。そのような時、Arrayクラスのconcatメソッドを利用する方法があります。concatメソッドは指定した配列を対象の配列に連結するためのメソッドです。対象の配列が空であれば、結果的に指定した配列と同一の内容の配列が得られるという仕掛けでコピーを行います。文章ではわかりづらいかと思いますので、具体的な例をサンプルコードで確認してみましょう。_4nen5kumi);実行結果_3nen5kumi:kato,sato,suzuki,tanaka,hayama_4nen5kumi:kato,sato,suzuki,tanaka,hayama上の例のように3年5組の配列と4年5組の配列の中身は同じであることが確認できます。ポイントはconcatメソッドの引数を空にすることです。配列内の要素を抽出するのに便利なメソッドとしてfilterメソッドがあります。このfilterメソッドを使いこなすことができると様々な処理を実現することができる、とても応用力のあるメソッドなので、初学者の方もぜひ根気よく以下の記事を繰り返し読んで学んでみてください。次に配列の要素数を調べるメソッドについてみていきましょう。配列の要素数を調べるにはlengthプロパティを活用します。詳しいlengthプロパティの使い方は以下の記事を参考にしてください。配列を比較して重複・差分を求める複数の配列があるときに、それぞれの要素を比較して重複している要素を抽出したり差分を求める方法について見ていきましょう。差分を求める方法について解説していきます。差分を求めることで、例えばAという配列要素には存在しているけどBという配列要素には存在しない...という複雑な条件をもとにした配列要素を抽出することができます。考え方としては、対象となる配列要素をすべて連結したあとに比較したい配列要素を1つずつ調べていく方法が簡単です。次のサンプル例では、2つの配列要素を比較することでどちらかの配列要素に存在しない要素を抽出しています。2]まず最初に「concat()」を使って2つの配列を連結している点に注目してください。0」という条件を作ることで、配列「arr1」に存在しない要素を抽出しています。実行結果を見ると「[4,2]」となり、arr2の要素にはあるけどarr1の要素にはないものがピックアップされていますね。今度は、配列要素のなかで重複している要素を抽出してみましょう!次のサンプル例を見てください。2]配列に対してfilter()を使い、indexOf()とlastIndexOf()で要素の先頭と末尾から配列要素を1つずつ調べて検索位置が異なる要素だけを抽出しています先頭と末尾からで検索位置が異なるということは、同じ要素が複数あるという意味になるので重複していると判断できるわけです。配列要素はsort()メソッドを利用することで、効率よくソート(並び替え)を行うことができます。配列要素内の文字列をアルファベット順に並び替えるには次のようにします。"sa"]対象の配列要素に対してsort()を実行するだけですね。文字列ではなく数値をソートする場合は、比較関数を使う必要があります。55]この比較関数を使っていない場合は文字列としてソートされてしまうので注意が必要です。この比較関数の作り方やさらに複雑な配列のソート方法などについては、次の記事で詳しくまとめているので参考にしてみてください。配列の応用的な内容として連想配列についても紹介します。連想配列は数字の要素番号(インデックス)の代わりに文字列をキーとして指定できる配列のことです。詳しい内容は以下の記事を参考にしてください。配列の基本的な使い方まとめ最後に、配列の基本的な操作についてまとめておきます!まず、配列の作成には「コンストラクタ」「リテラル」による書き方が使われます。[];「array1」がコンストラクタによる作成で「array2」がリテラルです。「array3」のように空の配列を作成したり、既存の配列を初期化することもできます。配列の要素を取得する場合は「インデックス番号」を指定します。//1番目の要素console.log(array[0]);配列の要素は1番目からではなく、0番目から数えるので注意しましょう。配列要素に新しい要素を追加するときは「push」メソッドを使います。'maeda';配列要素に追加したい値をpushすることで、配列の一番末尾に追加されます。特定の配列要素があるかどうかを検索したい場合は、文字列と同様に「indexOf」を利用します。items.indexOf('リンゴ');検索したい値をindexOfの引数に指定すれば、配列要素1つずつに対して合致するかどうかをチェックできます。配列の要素同士を連結・結合したい場合は「join」を使います。items.join('/');この場合は、配列の要素同士を「/」で連結することで「2018/1/10」という文字列になります。逆に、配列要素を分割したい場合は「slice」を使います。);sliceの引数にどこから分割したいかのインデックス数を設定します。この場合は2番目から分割するので「リンゴ,メロン」になるわけです。まとめ本記事では配列について基本的な内容から実践的なメソッドの使い方までをご紹介しました。様々なプログラミングにおいて、利用機会がとても多い配列についてしっかり理解することができましたでしょうか?配列の基本的な宣言や初期化、要素の追加・削除方法はpushメソッドなど便利なメソッドがたくさん用意されていました。これらのメソッドの使い方を必要な場面で適切に使いこなすことで、実践力のあるプログラマーへの第一歩を踏むことができます。今後、配列に関して迷うことがあれば、ぜひこの記事を思い出して下さいね。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。桃太郎20代は役者、30代はエンジニア、そして40代を迎えた現在、Webライターとして活動しながら、3人の息子たちの家庭教育、アンチエイジングなどにも力を入れて日々ノマドライフを楽しんでいます。