【超初心者】JavaScript 配列を理解しよう

更新日:

JavaScriptの基本構文の学習が終わってオブジェクトに入った頃に、おそらく大半の方が一度はここでつまずくのではないでしょうか。

説明を何回聞いても、どんなに優しく説明してもらっても理解ができない上に、この先とても自力で使いこなせそうにない、なんて自信喪失する時期が出てきませんか。

そんな時のたった一つの安心材料は「みんなはじめはそうだったよ」という講師の言葉だけでした。

ですがここが正念場、とにかく前に進んで後から何回でも振り返れば大丈夫です。

ということで、JavaScriptの複雑なデータ操作について、基本の振り返り用に、できるだけ基本事項を網羅できるような構成で本記事を作りました(何回かに分かれています)。

是非参考にしてください。

 

 

イメージ画像

JavaScript 配列を理解しよう

配列

配列とは、同じような意味合いのデータをまとめて同じ定数や変数名で扱うことができるデータ構造のことです。

例えば以下の3つのデータを扱うケースを考えてみます。

  • const score1 = 3;
  • const score2 = 6;
  • const score3 = 9;
  • console.log(score1, score2, score3);

 

これを配列を使って記述すると、以下のようになります。

  • const scores = [3, 6, 9] ;
    console.log(scores);

 

各要素を「 , 」(カンマ)で区切ることに注意しましょう。

 

インデックス

[   ] で囲った配列の中にある要素の順番を指定して呼び出します。

この順番のことを「インデックス」(または添字(そえじ))と呼び、0番目から始まります。

例えば上の配列の例で「6」にアクセスしたい場合は、1番目を指定することになり、その要素を[  ]で囲って呼び出します。

具体的には以下のとおりです。

  • const scores = [3, 6, 9] ;
    console.log(scores[1]);

 

配列の要素の変更(1)

配列内の要素を変更したい場合は以下のように記述します。

例えば、要素の「9」を「12」に変更する場合は、インデックスの2を[]で囲って指定します。

  • const scores = [3, 6, 9] ;
  • scores[2] =12;
    console.log(scores);

 

length

「lenght」は、要素の個数を示すキーワードです。

上記の例だと、要素は「3」と「6」と「9」で、lengthは「3個」になりますね。

これを呼び出す方法は以下のとおりです。

  • const scores = [3, 6, 9];
    console.log(scores.length);

 

取得したい定数scoresと、lengthの間に「 . 」(ピリオド)を入れて記述すればOKです。

配列の要素数を取得したいときにこのような記述を用います。

 

配列を使った処理例

配列を使えば、以下のような処理が可能です。

  • const scores = [3, 6, 9];
    console.log(`あなたのスコアは${scores[0]}点です`);
    console.log(`あなたのスコアは${scores[1]}点です`);
    console.log(`あなたのスコアは${scores[2]}点です`);

 

テンプレートリテラルでテキストと配列を組み合わせた例ですね。

処理の結果は以下のとおりです。

  • あなたのスコアは3点です
  • あなたのスコアは6点です
  • あなたのスコアは9点です

 

 テンプレートリテラル

テンプレートリテラルについてもう一度復習したい方は » こちら

 

ループを使った処理例

上の例と同じ処理を、for文を使って表すと以下のとおりになります。

  • const scores = [3, 6, 9];
    for(let i = 0 ; i < 3 ; i++) {
    console.log(`あなたのスコアは${scores[i]}点です`);
    }

 

「i」は要素のインデックスを表しているというロジックでfor文が組み立てられています。

配列の要素数が多いときなどは、for文を使って処理した方が確実ですね。

 for文

ループ処理についてもう一度復習したい方は » こちら

 

「 i 」は要素のインデックスを表している、という点に着目して、以下のように「 i 」そのものも出力して表現することが可能です。

  • const scores = [3, 6, 9];
    for(let i = 0 ; i < 3; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

この場合の結果は以下のとおりです。

  • 0あなたのスコアは3点です
  • 1あなたのスコアは6点です
  • 2あなたのスコアは9点です

 

また、上記のfor文の「i < 3」が、「iが3個未満の間は」、と個数を定義していることに着目して、ここでlengthを使って以下のように定義することができます。

  • const scores = [3, 6, 9];
    for(let i = 0 ; i < scores.length ; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

このように「i < scores.length」とすれば同じ処理結果になります。

冒頭で説明したのと同じように、scoresとlengthの間には「 . 」(ピリオド)が入っていることに注意してください。

 Point

この書き方の利点は、配列の要素数が増えたとしても、「i < scores.length」で全ての個数をカバーできることになっているという点にあります。

[3, 6, 9, 12, 20,・・・]となっても書き換える必要がないということですね。

 

配列の要素の変更(2)文頭・文末の追加・削除

配列の要素について、キーワードを使って、1番目や最後の要素の追加や削除をすることができます。

例えば、以下の配列があったとします。

  • const scores = [3, 6, 9];

 

この場合、以下のキーワードでそれぞれ処理することができます。

 追加・削除のキーワード
  • 1番目に要素を追加する場合は「unshift()」
  • 最後に追加する場合は「push()」
  • 削除する場合は、先頭の削除は「shift()」
  • 末尾を削除する場合は「pop()」

 

では、配列[3, 6, 9]に対して、先頭の3を削除し、最後に12と18を加える場合の記述をみてみましょう。

  • const scores = [3, 6, 9];
    scores.shift();
    scores.push(12, 18);
  • for(let i = 0 ; i < scores.length; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

このような記述をすれば、結果は以下のとおりになります。

  • 0あなたのスコアは6点です
  • 1あなたのスコアは9点です
  • 2あなたのスコアは12点です
  • 3あなたのスコアは18点です

 

配列の要素を変更するケースは多いので、この操作方法は是非覚えておきましょう。

 注意点 

  • 追加の「unshift()」と「push()」は複数指定できます。
  • その場合、( )内に要素をカンマ区切りで並べます。
  • 一方、削除の「shift()」と「pop()」は一つずつしか指定できません。
  • そのため、( )内は常に空白になります。

 

配列の要素の変更(3)文中の追加・削除 splice

「splice(スプライス)」というキーワードを使って、配列の途中にある要素を削除したり追加することができます。

 spliceの使い方
  • splice(変化が開始する位置, 削除数)
  • splice(変化が開始する位置, 削除数, 追加する要素, ・・・)

※「〜位置」はインデックスで表します

 

具体例をみてみましょう。

以下の記述に対して、要素の6を削除して5と7を追加してみます。

  • const scores = [3, 6, 9];
  • for(let i = 0 ; i < scores.length; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

この時点での出力結果は以下のとおりです。

  • 0あなたのスコアは3点です
  • 1あなたのスコアは6点です
  • 2あなたのスコアは9点です

 

これに対して、先ほど挙げた「spliceの使い方」を、以下のように当てはめていきます。

  • 要素の6はインデックス1(→変化が開始する位置
  • 削除する個数は1(→ 削除数,)
  • 追加する要素は5と7(→ 追加する要素

となるので、書き方は以下のとおりです。

  • const scores = [3, 6, 9];
    scores.splice(1, 1, 5, 7);
  • for(let i = 0 ; i < scores.length; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

結果は次のとおりです。

  • 0あなたのスコアは3点です
  • 1あなたのスコアは5点です
  • 2あなたのスコアは7点です
  • 3あなたのスコアは9点です

 

 もう一度spliceの使い方

 

  • scores.splice(1, 1, 5, 7);

の( )内の1, 1, 5, 7の意味をもう一度紐解いて説明すると、

  • インデックス「1」の場所から
  • 「1」個削除して
  • 「5」と「7」を加える

という意味ですね。

 

「インデックス」(または添字(そえじ))は、0番目から始まるということも併せて思い出しておきましょう。

つまり、「1」は2番目のことになりますね。(「0」が1番目)。

 

配列の要素の操作 スプレッド構文

複数の配列があった場合に、その要素を一つにまとめて定義できる方法がスプレッド構文です。

例えば、以下のように2つの配列があったとします。

  • const scores2nd = [25, 35];
    const scores = [3, 6, 9] ;

 

これを「scores2nd」の要素を「scores」の要素にまとめて処理をしたい場合には、以下のように「...」(ピリオド3つ)を使って記述すればOKです。

  • const scores2nd = [25, 35];
    const scores = [3, 6, 9, ...scores2nd] ;
  • for(let i = 0 ; i < scores.length; i++) {
    console.log(`${i}あなたのスコアは${scores[i]}点です`);
    }

 

「socores2nd」の要素が「scores」の要素になって処理されることになり、結果は以下のとおりです。

  • 0あなたのスコアは3点です
  • 1あなたのスコアは6点です
  • 2あなたのスコアは9点です
  • 3あなたのスコアは25点です
  • 4あなたのスコアは35点です

 

 スプレッド構文

「 . . . 」(ピリオド3つ)を使う

 

分割代入

配列として定義した要素を、あえて分劃して結果を出す場合には、以下のように記述すれば、個別の定数に割り当てて出力することができます。

  • const scores = [3, 6, 9, 12];
  • const [a, b, c, d] = scores;
  • console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);

 

const [a, b, c, d] = scores;として、scoresをa,b,c,dに分割して代入する命令ですね。

これで、呼び出しが分割してできることになります。

  • 3
  • 6
  • 9
  • 12

 

レスト構文

配列として定義した要素を、配列と分割を混合させて結果を出す場合に、レスト構文を使って結果を出すことができます。

上で見た分割代入と、「...others」と使って代入すればOKです。

  • const scores = [3, 6, 9, 12];
  • const [a, b, ...others] = scores;
    console.log(a);
    console.log(b);
    console.log(others);

 

aとbだけ分割代入し、残りは配列どおりに出力する命令ですね。

もちろん、結果も同じようになります。

  • 3
  • 6
  • 9
  • 12

 

値の交換

分割代入の考え方を使って、値を入れ替えることができます。

変数を使って値を入れ替える例を見てみましょう。

  • let a = 99;
    let b = 44;
    [a, b] = [b, a];
    console.log(a);
    console.log(b);

 

[a, b] = [b, a];によって、値が再代入された形で入れ替わり、aが44、bが99、という出力結果になります。

 

forEach()

配列の中の全ての要素を処理する方法に、forEach()という方法があります。

上の説明で、for文を使ったループ処理でも同じように配列の中の全ての要素を処理する方法がありましたが、forEach()も同じような目的の処理になります。

やり方は簡単で、以下のような配列の宣言があった場合に、

  • const scores = [3, 6, 9, 12];

 

「scores.forEach(関数);」の記述を加えればOKです。

 関数

関数についてもう一度復習したい方は » こちら

 

では、関数を以下のようにアロー関数で処理するとします。

  • () => {
  • }

 

これを「scores.forEach(関数);」の中に入れると次のようになりますね。

  • scores.forEach(() => {
  • });

 

このように指示すると、あとは関数の中の()内に引数を入れれば、scoresの配列の要素が順番に引数で受け取られ、全ての要素を{ }のブロックの中で使うことができるようになります。

この場合、自動的に関数の( )内に配列の要素が入ってくることになっているので、引数の名前は何でもOKです。

引数の名前をscoreとしてみて、全体を記述すると次のようになります。

  • const scores = [3, 6, 9, 12];
  • scores.forEach((score) => {
    console.log(`あなたのスコアは${score}点です`);
    });

 

結果は以下のようになります。

  • あなたのスコアは3点です
  • あなたのスコアは6点です
  • あなたのスコアは9点です
  • あなたのスコアは12点です

 

なお、forEachの場合、引数をカンマ区切りで2つ入れれば、2つ目の引数がscoresで指定している要素からのインデックスを受け取ることもできるようになっています。

この場合も、JavaScriptが自動的に関数の( )内に配列の要素を入れてくれる仕様になっているので、インデックスを渡す引数の名前は何でもOKです。

この例では、2つ目の引数を文字どおりにindexとして、全体を記述してみると次のようになります。

  • const scores = [3, 6, 9, 12];
  • scores.forEach((score, index) => {
    console.log(`${index}:あなたのスコアは${score}点です`);});

 

結果は以下のとおりです。

  • 0:あなたのスコアは3点です
  • 1:あなたのスコアは6点です
  • 2:あなたのスコアは9点です
  • 3:あなたのスコアは12点です

 

map()

map()は、配列に関数を与えて全ての要素を呼び出して、その結果を別の新しい配列として取得させることができるキーワードです。

例えば、次のようなスコアがあって、それぞれに15点のスコアを加点した結果を配列として出したいといった場合にmap()が使えます。

  • const scores = [60, 70, 85];

 

書き方はforEachと同じような仕組みを使えばOKです。

まずは「scores.map(関数);」の記述を加える感じでしたね。

  • scores.map = ();

 

この()内に、以下のようにアロー関数を入れればOKです。

  • () => {
  • }

 

これを「scores.map(関数);」の中に入れると次のようになりますね。

  • scores.map(() => {
  • });

 

ここまでは、先ほどのforEachとほぼ同じ流れですが、map()の場合は返された値を使ってもう一度別の配列を作ることになるので、処理の結果をreturnとすることになります。

また、もう一度別の配列を作ることから、いったん定数で受け取る処理をします。

まずは、引数をscoreとし、returnで受け取る定数の名前をupdatedScoresとして記述すると、全体として以下のようになります。

  • const scores = [60, 70, 85];
  • const updatedScores = scores.map((score) => {
    return score + 15;
    });
  • console.log(updatedScores);

 

処理結果は次のとおりです。

  • [75, 85, 100]

 

この辺りからやや混乱してくるかもしれませんので、今一度噛み砕いて説明してみます。

 Point
  1. scores.map()の中に関数を入れて全ての要素、つまりscores(60, 70, 85)を呼び出す。
  2. 関数の()内には仮引数(ここではscoreとした)を渡すことで(入れることで)、処理の中で(returnの中で)そのscoreを使うことができるようになる
  3. つまり、scoresの全要素をscoreで受け取って、そこに15を足して、新しい要素を返してくれる(=新しい要素が作られる)
  4. 結果として、scoresの各要素に15が足された新しい配列ができる
  5. 以上をupdatedScoresとして定数に入れておく
  6. 処理結果は、updatedScoresをconsole.logで呼び出せばOK。

という感じです。

なお、アロー関数でreturnを使う場合には以下のように省略して記述することも可能です。

  • const scores = [60, 70, 85];
  • const updatedScores = scores.map(score => score + 15);
  • console.log(updatedScores);

 

先ほどの基本構文は以下のとおり。

比較して省略形も覚えておいた方が良いかと思います。

  • const scores = [60, 70, 85];
  • const updatedScores = scores.map((score) => {
    return score + 15;
    });
  • console.log(updatedScores);

 

 基本構文と省略形の違いは次のとおり 
  • 引数の( )を省略(ただし、引数が2つ以上になると省略不可)
  • ブロックを示す{ }を省略
  • returnを省略(ただし、処理の内容が2つ以上になると省略不可)

 

まとめ

以上、まずは基本の基本をまとめた配列を使った構文はいかがでしたか。

1回で理解するのは難しいと思いますが、何回も振り返っていくうちにすぐに理解できるようになると思います。

焦らずに一歩ずつ進みましょう。

皆さんのお役に立てれば幸いです。

 

自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます!

TECH CAMPの広告リンク画像

 

併せて読みたい

» プログラミング関連記事

» ワードプレス関連記事

 

 







-Programming
-,

Copyright© AI Blog , 2021 All Rights Reserved Powered by STINGER.