JavaScriptの変数・定数・配列について、簡単なコードを用いながら解説します。
変数
変数は値を格納するための名前付きのコンテナです。


このコードでは、messageという名前の変数を宣言しています。最初に、messageには文字列 'Hello, JavaScript!' が代入されていますが、その後の行で再代入が行われ、messageには文字列 'Hello, world!' が再代入されます。
そして、console.log()関数を使ってmessageの内容をコンソールに表示しています。結果として、最後の値 'Hello, world!' がコンソールに表示されます。
定数
定数は変数と同じく値を格納するコンテナですが、一度定義された値を再代入できません(再代入するとエラーが発生します)。


このコードでは、ageという名前の定数を宣言しています。const age = 30;でageに数値30を代入しています。
その後、console.log()関数を使ってageの内容をコンソールに表示しています。結果として、30がコンソールに表示されます。
配列
配列は複数の値を1つの変数に格納するためのデータ構造です。


このコードでは、fruitsという名前の配列を宣言しています。fruitsには['apple', 'orange', 'banana']という3つの要素からなる配列が代入されています。
そして、console.log()関数を使って配列の特定の要素をコンソールに表示しています。例えば、console.log(fruits[0]);は最初の要素 'apple' をコンソールに表示し、console.log(fruits[1]);は2番目の要素 'orange' をコンソールに表示します。
また、fruits[2] = 'grape';により、配列の3番目の要素 'banana' が 'grape' に変更されます。
fruits.push('cherry');により、'cherry'が配列の末尾に追加されます。最終的に、console.log(fruits);により、配列の内容が['apple', 'orange', 'grape', 'cherry']としてコンソールに表示されます。
色々な配列
色々な配列を一気にご紹介します。


numbers配列の宣言と要素へのアクセス:numbersという名前の配列を宣言しています。この配列には[1, 2, 3, 4, 5]という5つの整数要素が含まれています。それぞれの操作を説明します。
numbers.length:numbers.lengthは配列の要素数を示すプロパティです。この場合、numbers配列は5つの要素を持っているので、console.log(numbers.length);により5がコンソールに表示されます。
numbers[3]:numbers[3]は配列の3番目(0から数えて4番目)の要素にアクセスする方法です。配列の要素は0から始まるインデックスで指定されます。console.log(numbers[3]);により、配列の3番目の要素である4がコンソールに表示されます。
配列の要素を変更:numbers[1] = 10;により、配列の2番目の要素(インデックス1)が2から10に変更されます。console.log(numbers);により、変更された配列がコンソールに表示されます。
配列の末尾に要素を追加:numbers.push(6);により、配列の末尾に要素6が追加されます。console.log(numbers);により、変更された配列がコンソールに表示されます。
配列の末尾の要素を削除:numbers.pop();により、配列の末尾の要素が削除されます。console.log(numbers);により、要素6が削除された配列がコンソールに表示されます。
配列の先頭に要素を追加:numbers.unshift(0);により、配列の先頭に要素0が追加されます。console.log(numbers);により、変更された配列がコンソールに表示されます。
配列の先頭の要素を削除:numbers.shift();により、配列の先頭の要素が削除されます。console.log(numbers);により、要素0が削除された配列がコンソールに表示されます。
配列の中から特定の要素を削除:numbers.splice(2, 1);により、配列のインデックス2の要素から1つの要素が削除されます。console.log(numbers);により、削除された後の配列がコンソールに表示されます。
配列の中から特定の要素を検索:numbers.indexOf(4);により、値が4の要素のインデックスを検索します。この場合、4はインデックス2にあるので、console.log(index);により2がコンソールに表示されます。
配列の要素を結合して文字列に変換:numbers.join('-');により、配列の要素をハイフン(-)で結合して1つの文字列に変換します。console.log(joined);により、結合された文字列がコンソールに表示されます。
多次元配列
多次元配列についてご紹介します。


matrix という名前の2次元配列の宣言: matrixという名前の2次元配列を宣言しています。2次元配列は、配列の要素が配列自体であるような配列です。この場合、matrixは3つの要素を持ち、それぞれが3つの要素からなる配列を含んでいます。以下のような行列を表しています。
console.log(matrix[0][1]);: matrix[0][1]は2次元配列の1行目(インデックス0)の2番目の要素(インデックス1)にアクセスする方法です。行列の値を取得する場合、最初に行のインデックスを指定し、その後に列のインデックスを指定します。この場合、1行目の2番目の要素である2がコンソールに表示されます。
matrix.push([10, 11, 12]);: matrix.push([10, 11, 12]);により、新しい行 [10, 11, 12] が2次元配列 matrix の末尾に追加されます。これにより、matrixは以下のようになります。
console.log(matrix);: console.log(matrix);により、変更された matrix がコンソールに表示されます。結果として、上記で示した4つの行の行列がコンソールに表示さます。
コード
// 変数
let message = 'Hello, JavaScript!';
message = 'Hello, world!';
console.log(message);
// 定数(定数の再代入はエラーになる)
const age = 30;
console.log(age);
// 配列
const fruits = ['apple', 'orange', 'banana'];
console.log(fruits[0]);
console.log(fruits[1]);
fruits[2] = 'grape';
fruits.push('cherry');
console.log(fruits);
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length);
console.log(numbers[3]);
// 配列の要素を変更
numbers[1] = 10;
console.log(numbers);
// 配列の末尾に要素を追加
numbers.push(6);
console.log(numbers);
// 配列の末尾の要素を削除
numbers.pop();
console.log(numbers);
// 配列の先頭に要素を追加
numbers.unshift(0);
console.log(numbers);
// 配列の先頭の要素を削除
numbers.shift();
console.log(numbers);
// 配列の中から特定の要素を削除
numbers.splice(2, 1);
console.log(numbers);
// 配列の中から特定の要素を検索
const index = numbers.indexOf(4);
console.log(index);
// 配列の要素を結合して文字列に変換
const joined = numbers.join('-');
console.log(joined);
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][1]);
matrix.push([10, 11, 12]);
console.log(matrix);
