HTMLでカレンダー入力を実装する方法（スマホ対応）
JavaScriptで連想配列（オブジェクト）を使うと、名前付きのキーで柔軟にデータを管理できます。
このページでは、配列、連想配列の作成・値の追加・削除・ループ処理まで、`Object.keys()`と`forEach()`を使った実用的なコード例でわかりやすく解説します。
初心者の方でも理解しやすいように、コメント付きのコードと図解で丁寧に説明しています。
■配列の生成
配列変数生成と同時に値を代入する
//配列(Array)変数の生成と値の代入
let arr=[1,2,"3です"];
//配列をコンソールへ表示（[1,2,"3です"]がコンソールに表示される）
console.log(arr);
//配列の添え字0をコンソールへ表示（1 がコンソールに表示される）
console.log(arr[0]);
//forEachで配列の各値をコンソールへ表示
arr.forEach(function(val){
console.log(val);
});
配列変数生成と値の代入
//配列(Array)変数の生成
let arr=[]; //let arr=new Array(); でも同じ
//配列に値を代入
arr[0]="0だ";
arr[1]=1;
arr[1]=24;//値の変更
arr.push(231);//最大添え字+1に値を代入。arr[arr.length]=231;と同じ
arr.unshift("先頭");//配列の先頭に値を挿入
//配列をコンソールへ表示（["先頭","0だ",24,231]がコンソールに表示される）
console.log(arr);
//forEachで配列の各値をコンソールへ表示
arr.forEach(function(val){
console.log(val);
});
■連想配列の生成
連想配列変数生成と同時に値を代入する
//連想配列変数の生成と値の代入
let arr={id:1, name:"ジェーン"};
//連想配列をコンソールへ表示（{id:1, name:"ジェーン"}がコンソールに表示される）
console.log(arr);
//連想配列のキー「name」の値を表示（"ジェーン" がコンソールに表示される）
console.log(arr["name"]);
//連想配列のキー「name」の値を表示（"ジェーン" がコンソールに表示される）
console.log(arr.name);
//連想配列から「キーのみの配列」変数を作成
keys=Object.keys(arr); //keys=["id","name"]になる
//連想配列はforEachが使えない為、
//「キーのみの配列」をforEachで回し、連想配列の各値をコンソールへ表示
keys.forEach(function(key){
console.log(key+":"+arr[key]);
});
連想配列変数生成と値の代入
//連想配列変数の生成
let arr={};
//連想配列に値を代入
arr["id"]=0;
arr.name="ジェーン";
//連想配列の値を変更
arr["id"]=1;
arr["name"]="マイク";
//連想配列をコンソールへ表示（{id:1, name:"マイク"}がコンソールに表示される）
console.log(arr);
//連想配列から「値のみの配列」を生成する(IE不可)
let values=Object.values(arr); //values=[1,"マイク"]になる
//「値のみの配列」をコンソールへ表示（[1,"マイク"]がコンソールに表示される）
console.log(values);