【GAS基礎編13】基本を覚える_配列

おはようございます！MARIEです(｀・ω・´)ゞ

前回のテストは無事にできましたでしょうか？
わからなければストレス爆発しますが、ちゃんと理解してプログラムが書けたときの快感はもうすごいものです（笑）

配列について

では、また今回からは基礎編に戻り、配列について学んでいきましょう！
まだまだ覚えておかなければいけないGASの基礎は山ほどあります(ﾟ∀ﾟ)

配列を覚える前に、変数を思い出してみてください。
変数は、1つの値を格納できるものでしたよね。

const num = 10;

【配列とは】
配列は、複数の値を格納できるものです。

const numbers = [10, 30, 5, 25]

これが変数との違いですね。

用語を覚えてよう！

これは、インデックス。インデックスは0から始まるということを覚えておいてください。

これは要素。各インデックスの中身のことを言います。

最後に、「const = numbers」の太文字部分。これを配列名と呼びます。配列名は自由に決めることができますよ！

配列を使ってプログラムを書いてみよう！

以下プログラムを書いて、実行をしてみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //要素を取り出す
 console.log(animal[2]);
 
}

結果はこうなりました。

これがややこしい。先ほども説明しましたが、インデックスは「0」から始まるので、「animal」の2つ目の要素をlogで出力した場合、このように一見3つ目にある「rabbit」が出力されるということです。

ここが配列を使う際の要注意ポイントです！

要素を上書きしてみよう！

以下プログラムを書いて、実行をしてみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //要素を取り出す
 console.log(animal[2]);

 //要素を上書きする
 animal[2] = 'lion';
 console.log(animal[2]);
 
}

結果はこうなりました。

このようにインデックスの中身、つまり要素を上書きすることも可能です。

要素を追加してみよう！

以下プログラムを書いて、実行してみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //要素を取り出す
 console.log(animal[2]);

 //要素を上書きする
 animal[2] = 'lion';
 console.log(animal[2]);

 //要素を追加する
 animal[3] = 'kangaroo';
 console.log(animal);
 
}

結果はこうなりました。

このように、要素を追加していくことも可能です。
ただ、このやり方だと一番大きいインデックスを知らないと、その次に追加をすることができないですよね。配列がたくさんある場合、このままだとすごく効率が悪くなってしまいます。

配列を扱うための便利なもの

そんな時に役立つのが「length」。
以下プログラムを書いて、実行してみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //配列の要素数
 console.log(`${animal.length} つの要素があります`);
 
}

結果はこうでした。

ここで覚えておいて欲しいのが、「length」は最大インデックスではなく要素数を出力するということです。「length」を使えば、要素数が一発でわかります。

次はこれ。「push」を覚えましょう。
「push」は、配列の最後に要素を追加するときに役立ちます。

以下プログラムを書いて、実行してみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //配列の最後に要素を追加する
 animal.push('lion');
 console.log(animal);
 
}

結果はこうでした。

無事に、配列の最後にライオンを追加することができました( ｀ー´)ノ

次はこれ。「shift」を覚えましょう。
「shift」は、配列の最初の要素を削除するときに役立ちます。

以下プログラムを書いて、実行してみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //配列の最初の要素を削除する
 animal.shift();
 console.log(animal);
 
}

結果はこうでした。

配列の最初にあった「猫」が削除されましたね！

最後に1つだけ。これを覚えていってくださいm(_ _)m

以下プログラムを書いて、実行してみてください。

function myHairetsu() {
 const animal = ['cat' , 'dog', 'rabbit'];

 //一致する値のインデックス
 console.log(animal.indexOf('cat'));
 console.log(animal.indexOf('lion')); // 存在しない場合、何が表示されるか？
 
}

結果はこうでした！

「indexOf」は、そうつまり配列の先頭の要素から検索をするときに使えるメゾットとなります。何番のインデックスに該当の要素があるのか？を検索することができるのです。存在しない場合は、「マイナス」として表示されることもわかりました。ちなみに、配列の末尾から検索をするときは「lastIndexOf」を使います(*´ω｀*)

では宿題です

今日も覚えることがたくさんありました。
実は今日覚えた配列を扱う際の便利な道具ですが、まだまだた～くさんあります（笑）ということで、宿題は以下です。

「Javascript 配列」、「Javascript array」で検索をして、今日覚えた以外の便利な道具をググってみてくださいm(_ _)m
全て覚える必要はありません！ただ、自分が何かに躓いたときに、ググって調べてみるという行動を起こせるかどうかが非常に重要です( ｀ー´)ノ

宿題は以上です。
ではまた次回よろしくお願いいたします(｀・ω・´)ゞ

【GAS】でつくるおみくじ（おまけ）

function omikuji() {
 const omikuji = ['大吉','中吉', '吉', '凶'];

 // omikuji[x] で要素を取り出せる。xを0から3のランダムな整数にしたい。

 const x = Math.floor(Math.random() * omikuji.length);
 console.log( omikuji[x] );
}

GASを使っておみくじなんかも作れるんですよ！
今日のMARIEの運勢は「大吉」でした＼(^o^)／♪