【高校情報Ⅰ】JavaScriptプログラミング 超入門講座 第７話 配列
◆◆はじめに◆◆
高等学校情報Ⅰに完全準拠させた、JavaScript入門講座の７回目です。
今回は「配列」についてです。for文と組み合わせるとき、配列の要素の数からマイナス１するか否かが、よく試験で問われるので、その部分も説明入れています。
大学入学共通テストを意識して、インデックス番号は「添字」で統一しています。
教員研修用教材には、JavaScriptの基礎の解説がほとんど無いので、教員の方にも参考にして頂けると幸いです。
◆◆動画解説◆◆
◆◆文字おこし◆◆
今日はJavaScriptの配列について学んでいこう。
配列は複数のデータを格納できるデータ型のことなんだ
この前、変数について説明したときに文字や数字を入れる箱って説明したよね。
その箱に入れられるデータは、名前とか数字とか一種類だけだったよね
配列は、その箱を複数入れられるロッカーみたいなものなんだ。
この一つ一つの入れる箱のことを「要素」っていうんだ。
そのロッカーから特定のデータを取り出すときってどうすればいいの？
いい質問だね。
それぞれの箱の住所みたいなものがあるんだ。
それをインデックスまたは日本語で、添字という。
大学入試センターが発表した大学入学共通テストのサンプル問題で、添字という言葉が使われていたから、今回は添字という言葉で統一するね。
箱の一番目から 添字 ０番が割り当てられているんだ。
箱は１つ、２つ と数えるけど、この添字というのは０番から始まるから
プログラムを組むときは注意が必要だ。
添字を求めたいときは、
欲しい要素の順番 マイナス１と考えるといいと思うよ。
実際にプログラムを書いていこう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name_array = ["ミライ", "がっきー", "やまだ"];
document.write(name_array[0]);
</script>
</body>
</html>
前提として、１番目の箱にミライ、２番目の箱にがっきー、３番目の箱にやまだ という文字が入っているとしよう。
配列で書く時は こんな風に書くんだ。
[]角括弧の中に入れたい要素をカンマ区切りで入れるんだ。
文字列の場合はダブルクォーテーションで囲む、数値の場合はダブルクォーテーションは不要。
カンマの後の半角スペースは無くても動くけど、プログラムのソースコードを見やすくするために、半角スペースを入れるのが一般的になっている。
そしてそれを変数 name_array に入れてあげる
じゃあ、これを順番に取り出すプログラムを書いてみよう。
変数の後に角カッコを付けて その中に取り出したい添字を入れる
例えば ミライの要素を取り出したい場合は 0 を入れる
要素の中を変更することもできるよ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name_array = ["ミライ", "がっきー", "やまだ"];
name_array[1] = "がき";
document.write(name_array[1]);
</script>
</body>
</html>例えば 添字１のがっきーを がきに変更しよう
変数名 角カッコの中に変更したい添字を指定して イコールで変更したい値を代入すれば値が変わる。
実行してみよう
がっきーが がき にかわったね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name_array = ["ミライ", "がっきー", "やまだ"];
//配列名.length 要素数を返却
document.write(name_array.length);
</script>
</body>
</html>
配列名.length というので要素の数を取り出すことができる。
name_array.length で結果を見てみよう。
ちゃんと要素数の３が出力されたね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name_array = ["ミライ", "がっきー", "やまだ"];
for(var i = 0; i <= name_array.length -1; i++){
document.write(name_array[i]);
document.write("<br>");
}
</script>
</body>
</html>配列は以前説明した繰り返し構文のfor文で併用されることがよくある。
添字は０から始まるから変数iの初期値は０としている。
name_list.lengthの値からマイナス１しているのは、要素数は１から数えるけど、添字は０から数えるから、添字の数に合わせるためマイナス１しているんだ。
実行してみよう。ちゃんと要素内のデータが出力されたね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name_array = ["ミライ", "がっきー", "やまだ"];
for(var i = 0; i < name_array.length; i++){
document.write(name_array[i]);
document.write("<br>");
}
</script>
</body>
</html>i < array.length とした場合、要素数未満となるからマイナス１したのと同じ動きになる。逆にマイナス１してしまったら、最後の要素を取り出す前にループを抜けてしまう。
これは、試験で良く問われる部分だからしっかり理解しておこう。
今日はここまで、次回は条件分岐のif文について学んでいこう。
この記事が気に入ったらサポートをしてみませんか？