- Day 15：配列の基礎（前半）―「ひとつずつ」から「まとめて扱う」へ進む
- 配列とは何かをイメージでつかむ
- 配列の作成：[] で「リスト」を作る
- インデックス：配列の「何番目か」を表す番号
- 要素の取得：配列名[インデックス] で取り出す
- 実践1：好きな食べ物リストを配列で作る
- 実践2：商品リストを配列で作る
- Day 15 前半の練習テンプレート
- Day 15 前半のまとめ
- Day 15：配列の基礎（後半）―「配列を使ってデータを扱う感覚」を強くする
- 配列の復習：まずは「並び」と「インデックス」を再確認する
- 好きな食べ物リストを使って「要素の取得」を深掘りする
- 商品リストを使って「インデックスの意味」をさらに固める
- Day 15 後半の練習テンプレート
- Day 15 後半のまとめ
Day 15：配列の基礎（前半）―「ひとつずつ」から「まとめて扱う」へ進む
Day 15では、JavaScriptでデータを扱ううえで欠かせない 配列（Array） を学びます。 ここまでの学習では、変数に「1つの値」を入れて扱ってきましたが、 現実のデータは「複数の値の集まり」であることが多いです。
- 好きな食べ物の一覧
- 商品の一覧
- テストの点数の一覧
こうした「一覧」を扱うための道具が 配列 です。 今回は、配列のいちばん基本となる
- 配列とは
- 配列の作成
- インデックス
- 要素の取得
を、好きな食べ物リスト・商品リストを題材にしながら、 ステップバイステップでかみ砕いて説明していきます。
配列とは何かをイメージでつかむ
1つの変数と配列の違い
まず、普通の変数は「1つの値」しか持てません。
const food1 = 'ラーメン';
const food2 = 'カレー';
const food3 = '寿司';
好きな食べ物が増えるたびに、 food4, food5…と変数を増やしていくのは、管理が大変です。
そこで登場するのが 配列 です。
const foods = ['ラーメン', 'カレー', '寿司'];
foodsという1つの変数の中に、複数の値が「並び」として入っています。- この「並び」を 配列（Array） と呼びます。
配列のイメージを身近なものにたとえる
配列は、次のようなものにたとえるとイメージしやすいです。
- 本棚に並んだ本
- 冷蔵庫に並んだ飲み物
- メモ帳に書かれたリスト
それぞれに「順番」があり、 「何番目の本」「何番目の飲み物」といった形で取り出せます。
配列も同じで、 「何番目の要素」を取り出すという考え方がとても重要になります。
配列の作成：[] で「リスト」を作る
基本の書き方
配列は、[]（角括弧）を使って作ります。
const foods = ['ラーメン', 'カレー', '寿司'];
[]の中に、値をカンマ,で区切って並べます。- ここでは3つの文字列が並んでいます。
数値の配列の例
const scores = [80, 90, 75, 60];
- テストの点数など、「同じ種類のデータ」が並んでいるときに配列はとても便利です。
真偽値の配列の例
const flags = [true, false, true];
- 「オン・オフ」「有り・無し」などをまとめて管理したいときにも使えます。
混在した配列（できるけれど、初心者はあまり使わない）
const mixed = ['太郎', 20, true];
- JavaScriptでは、配列の中に異なる型を混ぜることもできます。
- ただし、初心者のうちは 「同じ種類のデータをまとめる」 使い方に絞ったほうが理解しやすいです。
インデックス：配列の「何番目か」を表す番号
インデックスは「0から始まる」
配列の中の要素には、それぞれ インデックス（index） と呼ばれる番号がついています。 ここが最初のつまずきポイントなので、丁寧に押さえていきます。
const foods = ['ラーメン', 'カレー', '寿司'];
この配列のインデックスは次のようになります。
foods[0]→'ラーメン'（0番目）foods[1]→'カレー'（1番目）foods[2]→'寿司'（2番目）
重要なルール：
- インデックスは 0から始まる
- 「1番目の要素」はインデックス
0 - 「2番目の要素」はインデックス
1 - 「3番目の要素」はインデックス
2
日本語の「1番目」と、プログラミングの「インデックス0」がずれるので、 頭の中で変換する癖をつけていきます。
要素の取得：配列名[インデックス] で取り出す
基本の取り出し方
配列の要素を取り出すには、 配列名[インデックス] の形で書きます。
const foods = ['ラーメン', 'カレー', '寿司'];
console.log(foods[0]); // ラーメン
console.log(foods[1]); // カレー
console.log(foods[2]); // 寿司
foods[0]は「foods配列の0番目の要素」を意味します。[]の中にインデックス（番号）を書くことで、特定の要素を取り出せます。
インデックスを変数として使う
インデックスは、変数として扱うこともできます。
const foods = ['ラーメン', 'カレー', '寿司'];
let index = 1;
console.log(foods[index]); // カレー
index = 2;
console.log(foods[index]); // 寿司
- こうすることで、「どの要素を取り出すか」を柔軟に変えられます。
- 後のDayで学ぶ「繰り返し」と組み合わせると、配列を順番に処理することができます。
実践1：好きな食べ物リストを配列で作る
好きな食べ物を配列で表現する
まずは、好きな食べ物を配列で表現してみます。
const favoriteFoods = ['ラーメン', 'カレー', '寿司', '焼肉', 'パスタ'];
- ここでは5つの好きな食べ物を1つの配列にまとめています。
特定の食べ物を取り出して表示する
console.log('1番目に好きな食べ物：', favoriteFoods[0]); // ラーメン
console.log('2番目に好きな食べ物：', favoriteFoods[1]); // カレー
console.log('3番目に好きな食べ物：', favoriteFoods[2]); // 寿司
ポイント：
- 「1番目に好きな食べ物」はインデックス
0 - 「2番目に好きな食べ物」はインデックス
1
日本語の「1番目」と、プログラミングの「0番目」がずれるので、 意識して慣れていくことが大切です。
インデックスを使って「何番目か」を変える
let index = 3; // 4番目の要素（インデックス3）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]); // 焼肉
index = 4; // 5番目の要素（インデックス4）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]); // パスタ
- インデックスを変えることで、取り出す要素を切り替えられます。
- これが後々、「ループで順番に処理する」ことにつながっていきます。
実践2：商品リストを配列で作る
商品名のリストを作る
const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
- 文房具の名前を配列にまとめています。
特定の商品を取り出す
console.log('おすすめ商品：', products[0]); // ノート
console.log('次のおすすめ商品：', products[1]); // ペン
console.log('3番目のおすすめ商品：', products[2]); // 消しゴム
商品リストを使った簡単なメッセージ
const firstProduct = products[0];
const secondProduct = products[1];
console.log(`本日のおすすめは「${firstProduct}」と「${secondProduct}」です。`);
- 配列から取り出した要素を、文字列の中で使うことができます。
- こうした「リスト＋メッセージ」の組み合わせは、実際のWebアプリでもよく使われます。
Day 15 前半の練習テンプレート
ここまでの内容をブラウザでまとめて確認できるテンプレートです。 コンソールに出力される内容を見ながら、配列・インデックス・要素の取得を体で覚えていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 15 前半：配列の基礎 練習テンプレート</title>
</head>
<body>
<h1>Day 15 前半：配列の基礎（配列とは・作成・インデックス・要素の取得）</h1>
<p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>
<script>
console.log('--- 配列とは何か（好きな食べ物リスト） ---');
// 好きな食べ物を配列でまとめます
const favoriteFoods = ['ラーメン', 'カレー', '寿司', '焼肉', 'パスタ'];
console.log('好きな食べ物リスト：', favoriteFoods);
console.log('1番目に好きな食べ物（インデックス0）：', favoriteFoods[0]);
console.log('2番目に好きな食べ物（インデックス1）：', favoriteFoods[1]);
console.log('3番目に好きな食べ物（インデックス2）：', favoriteFoods[2]);
console.log('--- インデックスを変数として使う例 ---');
let index = 3; // 4番目の要素（インデックス3）を指します
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]);
index = 4; // 5番目の要素（インデックス4）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]);
console.log('--- 商品リストの配列 ---');
const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
console.log('商品リスト：', products);
console.log('おすすめ商品（インデックス0）：', products[0]);
console.log('次のおすすめ商品（インデックス1）：', products[1]);
console.log('3番目のおすすめ商品（インデックス2）：', products[2]);
const firstProduct = products[0];
const secondProduct = products[1];
console.log(`本日のおすすめは「${firstProduct}」と「${secondProduct}」です。`);
console.log('--- Day 15 前半：配列の基礎の練習が完了しました ---');
</script>
</body>
</html>
Day 15 前半のまとめ
Day 15前半では、配列の基礎として
- 配列とは「複数の値をひとまとめにした並び」であること
[]を使って配列を作る方法- インデックスは「0から始まる番号」であること
配列名[インデックス]で要素を取り出す方法- 好きな食べ物リスト・商品リストを使った具体的な例
を学びました。
配列は、今後のJavaScript学習で 何度も何度も登場する重要なデータ構造 です。 この段階では、「配列＝並び」「インデックス＝0から始まる番号」という2つの軸をしっかり押さえておくことが大切です。
Day 15：配列の基礎（後半）―「配列を使ってデータを扱う感覚」を強くする
Day 15後半では、前半で学んだ
- 配列とは
- 配列の作成
- インデックス
- 要素の取得
を、もう一歩踏み込んで「実際に使いこなす」方向に深めていきます。 具体的には、好きな食べ物リストと商品リストを使いながら、
- 配列の中身を確認する
- 特定の要素を取り出してメッセージを作る
- インデックスを意識して「どの要素を使うか」をコントロールする
という流れを、ステップバイステップで見ていきます。
配列の復習：まずは「並び」と「インデックス」を再確認する
配列は「複数の値の並び」
もう一度、配列の基本イメージを確認します。
const favoriteFoods = ['ラーメン', 'カレー', '寿司', '焼肉', 'パスタ'];
favoriteFoodsは「好きな食べ物の並び」を表す配列です。- 1つの変数の中に、複数の値が順番に並んでいます。
インデックスは「0から始まる番号」
この配列のインデックスは次のようになります。
favoriteFoods[0]→'ラーメン'（0番目＝1番目の要素）favoriteFoods[1]→'カレー'（1番目＝2番目の要素）favoriteFoods[2]→'寿司'（2番目＝3番目の要素）
重要なルール：
- インデックスは 0から始まる
- 「1番目の要素」はインデックス
0 - 「2番目の要素」はインデックス
1
この「0スタート」の感覚を、後半ではさらに体に馴染ませていきます。
好きな食べ物リストを使って「要素の取得」を深掘りする
配列全体と個別要素を両方意識する
まず、配列全体と個別要素を両方表示してみます。
const favoriteFoods = ['ラーメン', 'カレー', '寿司', '焼肉', 'パスタ'];
console.log('好きな食べ物リスト全体：', favoriteFoods);
console.log('1番目に好きな食べ物（インデックス0）：', favoriteFoods[0]);
console.log('2番目に好きな食べ物（インデックス1）：', favoriteFoods[1]);
console.log('3番目に好きな食べ物（インデックス2）：', favoriteFoods[2]);
console.log('4番目に好きな食べ物（インデックス3）：', favoriteFoods[3]);
console.log('5番目に好きな食べ物（インデックス4）：', favoriteFoods[4]);
ここで意識してほしいのは、
- 「リスト全体」と「個別の要素」は別物として扱う
- 個別の要素は必ず
favoriteFoods[インデックス]の形で取り出す
という点です。
インデックスを変数として扱うことで「柔軟さ」が生まれる
インデックスを変数にすると、 「どの要素を取り出すか」を後から変えられるようになります。
let index = 0; // 最初はインデックス0（1番目の要素）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]); // ラーメン
index = 2; // インデックス2（3番目の要素）に変更
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]); // 寿司
index = 4; // インデックス4（5番目の要素）に変更
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]); // パスタ
ここが重要です：
- インデックスを変数にすることで、 「どの要素を使うか」をコードの中で自由に切り替えられます。
- この考え方は、後で学ぶ「繰り返し（for文など）」と組み合わせると、 配列を順番に処理する強力なパターンになります。
好きな食べ物リストから「メッセージ」を作る
配列から取り出した要素を使って、 少しだけ「アプリっぽい」メッセージを作ってみます。
const firstFood = favoriteFoods[0]; // 1番目の好きな食べ物
const secondFood = favoriteFoods[1]; // 2番目の好きな食べ物
console.log(`今日の気分は「${firstFood}」か「${secondFood}」ですね。`);
- 配列から取り出した要素を、文字列の中に埋め込んでいます。
- こうした「リスト＋メッセージ」の組み合わせは、 実際のWebアプリでもよく使われるパターンです。
商品リストを使って「インデックスの意味」をさらに固める
商品リストを配列で作る
const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
- 文房具の名前を配列にまとめています。
- ここでも「同じ種類のデータ」をひとまとめにしていることがポイントです。
特定の商品を取り出して表示する
console.log('おすすめ商品（インデックス0）：', products[0]); // ノート
console.log('次のおすすめ商品（インデックス1）：', products[1]); // ペン
console.log('3番目のおすすめ商品（インデックス2）：', products[2]); // 消しゴム
ここでも、
- 「1番目のおすすめ」はインデックス
0 - 「2番目のおすすめ」はインデックス
1
という「0スタート」のルールが効いています。
商品リストから「おすすめメッセージ」を作る
const firstProduct = products[0];
const secondProduct = products[1];
console.log(`本日のおすすめ商品は「${firstProduct}」と「${secondProduct}」です。`);
- 配列から取り出した要素を、 ユーザー向けのメッセージに変換しています。
- こうした「配列 → 要素取得 → メッセージ生成」の流れは、 実際のサービスでも頻繁に使われます。
Day 15 後半の練習テンプレート
ここまでの内容をブラウザでまとめて確認できるテンプレートです。 コンソールに出力される内容を見ながら、 「配列の中身」「インデックス」「要素の取得」を意識して追いかけてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 15 後半：配列の基礎 練習テンプレート</title>
</head>
<body>
<h1>Day 15 後半：配列の基礎（好きな食べ物リスト・商品リストで深掘り）</h1>
<p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>
<script>
console.log('--- 好きな食べ物リスト（配列全体と要素の取得） ---');
// 好きな食べ物を配列でまとめます
const favoriteFoods = ['ラーメン', 'カレー', '寿司', '焼肉', 'パスタ'];
// 配列全体を表示します
console.log('好きな食べ物リスト全体：', favoriteFoods);
// 個別の要素をインデックスで取り出します
console.log('1番目に好きな食べ物（インデックス0）：', favoriteFoods[0]);
console.log('2番目に好きな食べ物（インデックス1）：', favoriteFoods[1]);
console.log('3番目に好きな食べ物（インデックス2）：', favoriteFoods[2]);
console.log('4番目に好きな食べ物（インデックス3）：', favoriteFoods[3]);
console.log('5番目に好きな食べ物（インデックス4）：', favoriteFoods[4]);
console.log('--- インデックスを変数として使う例 ---');
let index = 0; // 最初はインデックス0（1番目の要素）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]);
index = 2; // インデックス2（3番目の要素）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]);
index = 4; // インデックス4（5番目の要素）
console.log(`インデックス ${index} の食べ物：`, favoriteFoods[index]);
console.log('--- 好きな食べ物リストからメッセージを作る ---');
const firstFood = favoriteFoods[0];
const secondFood = favoriteFoods[1];
console.log(`今日の気分は「${firstFood}」か「${secondFood}」ですね。`);
console.log('--- 商品リスト（配列全体と要素の取得） ---');
const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
console.log('商品リスト全体：', products);
console.log('おすすめ商品（インデックス0）：', products[0]);
console.log('次のおすすめ商品（インデックス1）：', products[1]);
console.log('3番目のおすすめ商品（インデックス2）：', products[2]);
const firstProduct = products[0];
const secondProduct = products[1];
console.log(`本日のおすすめ商品は「${firstProduct}」と「${secondProduct}」です。`);
console.log('--- Day 15 後半：配列の基礎の練習が完了しました ---');
</script>
</body>
</html>
Day 15 後半のまとめ
Day 15後半では、前半で学んだ
- 配列とは
- 配列の作成
- インデックス
- 要素の取得
を、好きな食べ物リストと商品リストを使って、 より実践的な形で深掘りしました。
ここで意識してほしいのは、
- 配列は「複数の値の並び」であり、
- インデックスは「0から始まる番号」で、
配列名[インデックス]で特定の要素を取り出し、- その要素を使ってメッセージや処理を組み立てていく
という流れです。
