GASでプログラミング入門 Vol.7

社内サークルにてエンジニアから非エンジニアの方向けにプログラミングを教えるという活動を行っています。

今回はその教材第7弾です。
前回の記事はこちら

前回の演習問題の解答例

(1). 下記のプログラムを実行すると事前に意図した表示とは異なって表示されるプログラムになってしまっていました。意図した表示になるようにプログラムを修正して下さい。
また修正する際にはなるべくグローバル変数を使用しないように配慮して修正して下さい。

function myFunction(){
    num = 1;
    myFunction2();
    console.log("myFunction内でのnumは" + num + "です。");
}
function myFunction2(){
    num = num + 1;
    console.log("myFunction2内でのnumは" + num + "です。");
}

事前に期待していた実行結果

myFunction2内でのnumは2です。
myFunction内でのnumは1です。

現在のコード実行結果

myFunction2内でのnumは2です。
myFunction内でのnumは2です。

解答例コード

function myFunction(){
    let num = 1;
    myFunction2(num);
    console.log("myFunction内でのnumは" + num + "です。");
}
function myFunction2(num){
    num = num + 1;
    console.log("myFunction2内でのnumは" + num + "です。");
}

(2). 下記のプログラムを実行すると事前に意図した表示とは異なって表示されるプログラムになってしまっていました。意図した表示になるようにプログラムを修正して下さい。
また、仮に変数の値を書き換えられてしまっていた場合に実行時に書き換えられた際にエラーが発生するようにして下さい。

function myFunction(){
    let name = "鈴木一郎";
    console.log(name + "の趣味はドライブです。");
    console.log(name + "の出身地は東京都です。");
    name = "山田太郎";
    console.log(name + "は現在東京の会社で働いています。");
}

事前に期待していた実行結果

鈴木一郎の趣味はドライブです。
鈴木一郎の出身地は東京都です。
鈴木一郎は現在東京の会社で働いています。

現在のコード実行結果

鈴木一郎の趣味はドライブです。
鈴木一郎の出身地は東京都です。
山田太郎は現在東京の会社で働いています。

解答例コード

function myFunction(){
    const name = "鈴木一郎";
    console.log(name + "の趣味はドライブです。");
    console.log(name + "の出身地は東京都です。");
    name = "山田太郎";
    console.log(name + "は現在東京の会社で働いています。");
}

なお解答例はあくまで例なので、必ずしも上記のようになっていないといけないわけではありません。

配列について

今回は配列について学習していきます。
配列とは一言で言うと、複数の値をひとまとめにしたデータ構造です。
今まで学習してきた変数を複数個連続して使用できるようにするものと思ってもらえると良いと思います。
まず下記のような変数を用意した場合のイメージ図を見てみましょう。

let num1 = 1;
let num2 = 2;
let num3 = 3;

上図のように3つの変数を用意して、それぞれ1,2,3で初期化してあります。

次に配列を使用すると以下のようなコードになります。

配列変数を宣言して初期化する文法

配列変数名 = [配列の0番目のデータ, 配列の1番目のデータ, ...]

let nums = [1, 2, 3];

変数を3つ用意しているのとイメージ図は似ていますが、重要なポイントは下記になります。

• 3つの領域が連続している
• 変数名としてはnumsという名称が付けられている

次に配列の中の値へのアクセス方法について見ていきます。

配列内のデータへアクセスする文法

配列変数名[アクセスする配列内のデータへの番号]

let nums = [1, 2, 3];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);

上記のコードを実行すると

1
2
3

と表示されます。
ポイントとしては配列の何番目というように、連続した領域内の数値で指定するところです。
そして、先頭の数値は0ということもポイントです。
JavaScriptを含む多くのプログラミング言語では配列の先頭を0から数えるようになっています。
日常生活では1から数え始めるので、この辺りの感覚の違いみたいなものも、プログラミング入門におけるつまづきポイントかと思いますが、この辺りは慣れの部分も強いと思いますので、まずは配列の先頭は0番目ということに慣れていってもらえればと思います。

配列内のデータへ数値を指定してアクセスする方法について理解したところで、forを使用して配列内のデータを参照する方法を見ていきます。
と言っても、今までの学習内容の応用なので、新しいことは特にありません。

let nums = [1, 2, 3];
for(let i = 0; i < 3; i++){
    console.log(nums[i]);
}

上記コードを実行すると先ほどと同じように1,2,3が順番に表示されます。
変数を3つ別々に用意した場合と比べると、for文で繰り返し処理が出来ることも配列を使用するメリットの一つです。
また、先ほどのコードと比べると繰り返し処理を使用するようになった分だけ、少しコードがすっきりとしました。
しかし、上記の書き方では配列のサイズを変更した際にfor文の継続条件式を合わせて変更しなければいけません。
そこで、条件式には配列のサイズを取得するようにして、変更に強いコードにします。

let nums = [1, 2, 3, 4];
for(let i = 0; i < nums.length; i++){
    console.log(nums[i]);
}

上記のようにコードを変更すると、配列のサイズを変更しても、for文の部分は変更することなく実行することが可能になります。JavaScriptでは配列変数名.lengthと記述すると、その配列のサイズを参照することができるので、繰り返し処理を行う際によく使用されます。

更に、下記のように記述することも可能です。

let nums = [1, 2, 3, 4];
for(let num of nums){
    console.log(num);
}

上記は少し特殊なfor文でfor...of文と呼ばれるものです。
for...of文も配列のサイズを気にすることなく、配列のサイズ文だけ繰り返し処理を行ってくれます。

最後に、配列に格納できるのは変数同様に数値だけではなく、文字なども格納可能です。

let names = ["鈴木", "佐藤", "田中"];
for(let name of names){
    console.log(name);
}

上記コードを実行すると下記のようになります。

鈴木
佐藤
田中

演習問題

(1). 下記の配列を宣言して、実行結果の表示になるプログラムを作成して下さい。

let nums = [1, 2, 3, 5, 8, 13];

実行結果

numsの0番目のデータは「1」です。
numsの1番目のデータは「2」です。
numsの2番目のデータは「3」です。
numsの3番目のデータは「5」です。
numsの4番目のデータは「8」です。
numsの5番目のデータは「13」です。

(2). 下記の配列を宣言して、実行結果の表示になるプログラムを作成して下さい。
配列内のデータは可変しても平気なように考慮して、各種果物の個数を数えるようにして下さい。
ただし、配列内に出現する果物の種類は「りんご」、「みかん」、「ぶどう」の3種類のみで、それ以外の種類の果物に関しては個数を数える必要はありません。

let fruits = ["りんご", "みかん", "ぶどう", "みかん", "りんご", "りんご"];

実行結果

配列内に含まれる「りんご」の個数は3個です。
配列内に含まれる「みかん」の個数は2個です。
配列内に含まれる「ぶどう」の個数は1個です。

まとめ

いかがでしたでしょうか。
今回は配列について学びました。
配列はプログラミング学習において序盤で学ぶことが多いのですが、中々概念を理解できず、つまづくポイントの一つでないかなと思うので、しっかりと復習して、理解を深めておくと良いと思います！
それではまた次の記事でお会いしましょう。