Javascriptの変数、配列、連想配列
変数、配列、連想配列は値（文字、数字、オブジェクト等）を入れる器です。
変数は１個の値を入れることができます。
配列、連想配列は複数の値を入れることができます。
また、配列の配列（２次元配列）や、配列の連想配列、連想配列の連想配列を使うこともできます。
変数を扱う前に関数やコメントについて
変数を扱う前に、関数とコメントについて簡単な説明です。
関数とは、一連の処理をまとめて書いて定義しておき、他の箇所から呼び出して実行できる機能です。
関数の定義方法はいくつか有るのですが、まずは可読性の良い記述方法で解説します。
function 重複しない任意の関数名(必要なら引数,必要なら引数,・・・){
コメントとは実行されないメモのことでスラッシュ2つの右に続けて記述するか、"/*"と"*/"の間に記述します。
ここに処理を書く;
}
//コメント(実行されないメモの事)
/*コメント(実行されないメモの事)*/
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
//引数無しの関数「test1」の宣言
function test1(){
//メッセージをポップアップで画面に表示
alert("関数test1が実行されました");
}
//引数1つの関数「test2」の宣言
function test2(arg){
//メッセージをポップアップで画面に表示
alert("関数test2が引数「"+arg+"」で実行されました");
}
//引数2つの関数「test3」の宣言
function test3(arg1, arg2){
//メッセージをポップアップで画面に表示
alert("関数test3が引数「"+arg1+"」,「"+arg2+"」で実行されました");
}
</script>
<button onclick="test1()">関数test1を呼び出す</button>
<button onclick="test2(1)">関数test2を呼び出す</button>
<button onclick="test3('2です', 3)">関数test3を呼び出す</button>
<button onclick="test3(4, '文字列')">これも関数test3を呼び出す</button>
</body>
</html>
変数を使う（文字列型）
let 変数名;
で変数を宣言して、
変数名 = "文字列の値";
又は
変数名 = '文字列の値';
で変数に文字列値（ダブルクォート又はシングルクォートで括る）を入れることができます。
「+」記号を使うと文字列を連結させることができます。
<!DOCTYPE html> <html lang="ja"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta http-equiv="content-language" content="ja"> <meta charset="UTF-8"> </head> <body> <!-- 以下のボタンがクリックされたらtest4()関数が呼び出されます --> <button onclick="test4()">変数を使う（文字列型）</button> <script> function test4(){ //変数aの宣言と値の代入 let a = "変数"; //変数aの値の前に "Javascriptで" を連結して後ろに "を扱う" を連結して変数aに代入する a = "Javascriptで" + a + "を扱う"; //変数aの値を表示する alert(a); } </script> </body> </html>
変数を使う（数値型）
let 変数名;
で変数を宣言して、
変数名 = 値;
で変数に値を入れる（値の代入）ことができます。
「+」記号を使うと数値の足し算ができます。
「-」は引き算、「*」は掛け算、「/」で割り算も行えます。
<!DOCTYPE html> <html lang="ja"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta http-equiv="content-language" content="ja"> <meta charset="UTF-8"> </head> <body> <!-- 以下のボタンがクリックされたらtest5()関数が呼び出されます --> <button onclick="test5()">変数を使う（数値型）</button> <script> function test5(){ //変数bの宣言と値の代入 let b = 23; //変数bの値に1を足した後、2.4倍し、2を引いてから、3.3で割った値を変数bに代入する b = ((b + 1) * 2.4 - 2) / 3.3; //変数bの値を表示する alert("計算結果は" + b); } </script> </body> </html>
配列(変数)について
配列(変数)を扱う前に、for文によるループについて簡単な説明を行います。
for(初期値; 繰り返す条件; ループ後の増加値){
例えば以下は1～10までの数値を足して表示します。
繰り返し実行されるなんらかの処理を書く;
}
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
//引数無しの関数「test6」の宣言
function test6(){
//変数sumの宣言を行い同時に 0 を入れる
let sum=0; //この変数にfor文のループ内で1～10まで足した値を入れる
/*
for文によるループ
初期値：「i」に 1を入れる
繰り返す条件： 「i」が10以下
ループ後の増加値（初回通過時は実行しない）：ループする毎に「i」に「i+1」を入れる
*/
for(let i=1; i<=10; i=i+1){
//ループ内では変数「i」が1～10に変化しながら10回通過します
sum = sum + i;//sumに1～10まで足される
}
//メッセージをポップアップで画面に表示
alert("1～10を足した値は" + sum);
}
</script>
<button onclick="test6()">1～10を足した値を表示</button>
</body>
</html>
ようやく配列(変数)を扱います。
配列変数は、1つの変数名で複数の値を扱えます。
//配列変数の宣言と値の代入
配列変数の各要素には
let 重複しない任意の変数名 = [値,値,値,・・・];
//配列変数の宣言のみ
let 重複しない任意の変数名 = [];
配列変数名[添え字]
で値を取得することができ、配列の「添え字」は整数(小数ではない)です。
例えば以下のJavascriptソースコードでは配列a[0～9]に1～10までの数値を代入します。
a[0],a[1],・・・a[9]で配列変数の各要素の値が取得ができます。
変数aに割り当てられた配列の要素数は、a.length で取得できます。
「添え字」は通常は0から割り当てられますので、a[0]～a[a.length-1] が添え字の範囲となります。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
//引数無しの関数「test7」の宣言
function test7(){
let sum=0; //この変数にfor文のループ内で1～10まで足した値を入れる
//変数aの宣言を行い同時に 1,2,3,4,5,6,7,8,9,10 を入れる
let a=[1,2,3,4,5,6,7,8,9,10];
//forループ(初期値「i=0」; 条件「iが10未満」; ループ後「iの値を+1する」)
for(let i=0; i<a.length; i=i+1){
//ループ内では変数「i」が0～9に変化しながら10回通過します
sum = sum + a[i];//sumに配列a[0～9]の1～10までの値が足される
}
//メッセージをポップアップで画面に表示
alert("1～10を足した値は" + sum);
}
</script>
<button onclick="test7()">配列で1～10を足した値を表示</button>
</body>
</html>
連想配列(変数)について
連想配列は配列の添え字が「文字列」キーとなったものです。
連想配列の添え字は「key(キー)」と呼ばれるようです。
//配列変数の宣言と値の代入
連想配列の各要素は
let 重複しない任意の変数名 = {"key1":値, "key2":値, ・・・};
//配列変数の宣言のみ
let 重複しない任意の変数名 = {};
配列変数名["添え字文字列"]
で値を取得することができ、配列の「添え字」は整数(小数ではない)です。
以下のソースコードでは配列v["apple"、"banana"、"cacao" 又は"avocado"]に値を代入しています。
v["apple"], v["banana"], v["cacao"], v["avocado"]で連想配列の各要素の値が取得ができます。
また、v.apple, v.banana, v.cacao, v.avocado でも値が取得ができます。
最後に v["apple"] と v.avocado の値を表示します。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
function test8(){
//連想配列の宣言と値の代入
let v = {"apple":"150円","banana":2,"cacao":5};
//連想配列の要素の追加
v.avocado = "2ドル";
alert("appleは" + v["apple"] + " avocadoは" + v.avocado);
}
</script>
<button onclick="test8()">test8</button>
</body>
</html>
連想配列は「Object.keysメソッド」と「Object.valuesメソッド」を使用すると便利なようです。
Object.keys()で連想配列のキー（添え字）だけの配列を取得
キーだけの配列 = Object.keys(連想配列);
Object.values()で連想配列の値だけの配列を取得
値だけの配列 = Object.values(連想配列);
以下ソースコードでは、連想配列vの宣言を行い、値を追加しています。
Object.keys()で連想配列のキー（添え字）だけの配列を取得し、
for文（ループ）で全てのキーと値を取得し表示しています。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
function test9(){
//連想配列の宣言
let v={};
//連想配列の要素を４つ追加
v["apple"] = "150円";
v.banana = 2;
v.cacao = 5;
v["avocado"] = "2ドル";
//連想配列からキーだけの配列を取得
let keys = Object.keys(v); //["150円",2,5,"2ドル"]
//変数を宣言
let s="";
//for文で4回ループ
for(let i=0; i<keys.length; i=i+1){
s = s + "「" + keys[i] + "は" + v[ keys[i] ] + "」";
}
alert(s);
}
</script>
<button onclick="test9()">test9</button>
</body>
</html>
配列と連想配列の多次元配列
配列と連想配列は自由に組み合わせて多次元の配列変数を作ることができます。
以下のソースコードでは、配列の連想配列を使用しています。
最後に「divタグのクラス名が"name-age"の要素」のHTMLテキスト(innerHTML)に書き込んでいます。
要素の取得には
document.querySelector("CSSセレクタ");
を使用しています。
for文にある「i++」は「i=i+1」と同じ意味です。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
function test10(){
//配列変数vの宣言
let v=[];
//配列に連想配列を入れる
v[0]={"name":"佐藤", "age":24};
v[1]={"name":"山田", "age":50};
//変数を宣言
let s="";
for(let i=0; i<v.length; i++){ //「i++」は「i=i+1」と同じ意味です
s = s + v[i]["name"]+ "さんは" + v[i]["age"] + "歳 ";
}
//divタグのname-ageクラスの要素を取得しHTMLテキストに変数sの値を入れる
document.querySelector("div.name-age").innerHTML = s;
}
</script>
<button onclick="test10()">test10</button>
<div class="name-age"></div>
</body>
</html>
上記サンプルでは「配列」に「連想配列」を代入しましたが、jsonを使えば一度に「配列の連想配列」を代入することもできます。
let v=[ {"name":"佐藤", "age":24}, {"name":"山田", "age":50} ];
[ {"name":"佐藤", "age":24}, {"name":"山田", "age":50} ]
はjson（JavaScript Object Notation）と呼ばれるデータフォーマット(データの記述形式)です。
javascriptではjsonを使えば、一度に複雑な配列と連想配列の組み合わせを表現することができ、変数に代入することもできます。
以下のサンプルでは複雑なjsonを使用して変数に値を代入しています。
「{」で始まり「}」で終わる箇所は「連想配列」で、
「[」で始まり「]」で終わる箇所は「配列」です。
複雑なjson構造は慣れないとベテランのプログラマーでもよく間違えます。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
function test11(){
//変数vの宣言と、jsonを使って配列と連想配列が組み合わさった値を代入する
let v=
{
"company":"株式会社名無し商事",
"office":
[
{
"name":"東京事務所",
"addrees":"東京都港区赤坂",
"member":
[
{"name":"佐藤", "age":24},
{"name":"山田", "age":50}
]
},
{
"name":"大阪事務所",
"addrees":"大阪府大阪市北区",
"member":
[
{"name":"伊藤", "age":28},
{"name":"井上", "age":31}
]
}
]
};
//変数を宣言
let s="";
for(let i=0; i<v.office.length; i++){ //「i++」は「i=i+1」と同じ意味です
for(let j=0; j<v.office[i].member.length; j++){ //「j++」は「j=j+1」と同じ意味です
s = s + v.office[i].member[j].name + "さんは" + v.office[i].member[j].age + "歳 ";
}
}
//divタグのname-ageクラスの要素を取得しHTMLテキストに変数sの値を入れる
document.querySelector("div.office-name-age").innerHTML = s;
}
</script>
<button onclick="test11()">test11</button>
<div class="office-name-age"></div>
</body>
</html>
変数にHTML要素を代入して使ってみる
変数（配列、連想配列含む）には、HTML要素を代入することも出来ます。
javascriptの
document.querySelectorAll("CSSセレクタ")
メソッドを使います。このメソッドを呼び出すと、該当する要素が配列で返ってきます。
例えば以下のソースコードは、変数vに「クラスがmyclassと指定されている全ての要素」の配列が代入されます。
つまり <div class="myclass">～<div> や <p class="myclass">～<p>
など、class="myclass"と記述されているタグ全てが配列vとして取得できます。
let v = document.querySelectorAll(".myclass"); //ドット「.」はクラスを示す
早速使ってみます。
以下ソースコードでは、ボタン「test12」をクリックすると、クラスが"myclass"の要素（タグ）の背景色と文字の色と太さを変更します。
背景色は 要素.style.background="#99FFFF" で変更しています。
文字の色は 要素.style.color="#880088" で変更しています。
文字の太さは 要素.style.fontWeight="bold" で変更しています。
<!DOCTYPE html>
<html lang="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>
<body>
<script>
function test12(){
//変数vの宣言と「クラスがmyclassと指定されている全ての要素」の配列を代入
let v = document.querySelectorAll(".myclass"); //ドット「.」はクラスを示す
//取得した要素の数だけループ（繰り返し処理）
for(let i=0; i<v.length; i++){
//2つ要素が見つかったら １回目にi=0で通過し ２回目にi=1で通過する
v[i].style.background="#99FFFF";//背景色を変更する
v[i].style.color="#880088";//文字の色を変更する
v[i].style.fontWeight="bold";//文字の太さを変更する
}
}
</script>
<style>.myclass{border:1px #f00 solid;margin:1em;max-width:80%;width:300px;}</style>
<div style="border:1px #000 solid;">
<button onclick="test12()">test12</button>class="myclass"の全て要素の背景色と文字の色と太さを変えます<br>
<div class="myclass">クラス"myclass"指定されたdivタグの要素</div>
<p class="myclass">クラス"myclass"指定されたpタグの要素</p>
</div>
</body>
</html>
クラス"myclass"指定されたpタグの要素