JavaScript
PR

【JavaScript 2-3】配列の入口｜複数のデータをまとめて扱う（初心者向け）

JS2-3.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 2-3「配列の入口」です。
ここでは、複数のデータを1つにまとめて扱う「配列」を見ていきます。
最初は「リストのように並んだ値を、番号で取り出せる」くらいで大丈夫です。

前回は、関数を使って
処理をひとまとめにする感覚を見ました。

今回はその次として、
**複数のデータをまとめて扱う方法**
を見ていきます。

たとえば、

– HTML
– CSS
– JavaScript
– PHP

のように、いくつかの項目を1つずつ変数に入れていくと、
数が増えた時に少し扱いづらくなります。

そんな時に使いやすいのが、
**配列**です。

配列を使うと、
複数のデータを1つのまとまりとして扱えるようになります。

Q
「配列は“複数の値をまとめた箱”です」

最初はこの理解で大丈夫です。

・複数の値をまとめられる
・[ ] の中に値を並べる
・0番目、1番目、2番目……のように番号で取り出せる
・length で個数を確認できる

たとえば、

const topics = [“HTML”, “CSS”, “JavaScript”];

と書くと、
topics という名前の中に、
HTML、CSS、JavaScript という3つの文字がまとまって入っているイメージです。

目次
  1. 今回のゴール
  2. 配列の基本形
  3. まずは完成形を見る
  4. どこを見ればいい？
  5. 配列は0番目から始まります
  6. length で配列の個数を確認できます
  7. currentIndex で
    “今どれを表示しているか”を持ちます
  8. 最後まで進んだら、0番目に戻します
  9. 関数にまとめると、
    クリック処理が読みやすくなります
  10. console.log で配列の中身を確認できます
  11. よくあるつまずき
  12. 今回のまとめ
  13. 今日のゴール確認
  14. JavaScript 2-4へ
  15. JavaScript 2-3 の一例
ここまでできればOK

今回のゴール

  • 配列は複数のデータをまとめるものだと分かる
  • [ ] の中に値を並べる形が分かる
  • 配列は0番目から数えると分かる
  • length で配列の個数を確認できる
  • ボタンを押して、配列の中身を順番に表示できる

配列は、
複数の値を1つにまとめて扱うためのものです。

たとえば、学習する内容をまとめたい時は、
次のように書けます。

const topics = ["HTML", "CSS", "JavaScript"];
JavaScript

この場合、
topics という名前の中に、
3つの文字がまとめて入っています。

ひとまず、
**配列 = 値を順番に並べたリスト**
と考えると分かりやすいです。

配列①

配列の基本形

書き方ざっくりした意味
const topics配列に名前をつけている
[ ]配列を作るための箱
“HTML”, “CSS” 配列の中に入っている値
topics[0] 0番目の値を取り出す
topics.length配列の中身の数を確認する

配列は、番号で中身を取り出せます。

ただし、JavaScriptの配列は、
**1番目ではなく、0番目から数えます。**

const topics = ["HTML", "CSS", "JavaScript"];

console.log(topics[0]); // HTML
console.log(topics[1]); // CSS
console.log(topics[2]); // JavaScript
JavaScript

最初に少し戸惑いやすいのが、0番目から始まるところです。
「最初の値は topics[0]」と見ればOKです。

コピペOK

まずは完成形を見る

今回は、配列に入れた学習項目を、
ボタンを押すたびに順番に表示するページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-02-03-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

   └─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 2-3</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 2-3 の一例</p>
      <h1>配列の入口</h1>
      <p class="lead">配列に入れた学習項目を、ボタンで順番に表示する練習です。</p>
      <p id="topicText" class="message">ここに学習項目が表示されます。</p>
      <p id="countText" class="message">登録されている項目数：0個</p>
      <button id="nextButton" class="button" type="button">次の項目を見る</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.message {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const topics = ["HTML", "CSS", "JavaScript", "PHP"];

const topicText = document.getElementById("topicText");
const countText = document.getElementById("countText");
const nextButton = document.getElementById("nextButton");

let currentIndex = 0;

countText.textContent = "登録されている項目数：" + topics.length + "個";
topicText.textContent = "現在の項目：" + topics[currentIndex];

function showNextTopic() {
  currentIndex = currentIndex + 1;

  if (currentIndex >= topics.length) {
    currentIndex = 0;
  }

  topicText.textContent = "現在の項目：" + topics[currentIndex];
}

nextButton.addEventListener("click", function() {
  showNextTopic();
});
JavaScript
toshi
toshi

今回は “配列の中にある項目を、
番号で取り出して表示する” ところがポイントです。

変化のポイント

どこを見ればいい？

見る場所起きていること
const topics複数の学習項目を配列にまとめている
topics[0]配列の0番目を取り出している
topics.length配列の個数を確認している
currentIndex今どの番号を表示しているかを持っている
showNextTopic次の項目を表示する処理をまとめている
addEventListenerボタンを押した時に関数を呼び出している

今回のコードでは、
配列・変数・関数・if・クリック処理を少しずつ組み合わせています。

いきなり全部を完璧に理解しなくて大丈夫です。

まずは、
配列の中に入っている項目が、
ボタンを押すたびに順番に表示されることを確認します。

配列とは？

配列は0番目から始まります

書き方取り出される値
topics[0]HTML
topics[1]CSS
topics[2]JavaScript
topics[3]PHP

今回の配列は、次の形です。

const topics = ["HTML", "CSS", "JavaScript", "PHP"];
JavaScript

この場合、最初の “HTML” は 1番目ではなく、
**0番目**として取り出します。

topics[0] = ["HTML"]
JavaScript

この 0 から始まる感覚は、
配列でとても大事です。

配列数

length で配列の個数を確認できます

配列の中にいくつ値が入っているかは、
length で確認できます。

topics.length
JavaScript

今回の配列は、

const topics = ["HTML", "CSS", "JavaScript", "PHP"];
JavaScript

なので、topics.length は 4 になります。

配列の番号は0から始まりますが、length は個数です。
4個入っているなら length は4です。
ここは少し混ざりやすいので、分けて見ればOKです。

変数の意味

currentIndex で
“今どれを表示しているか”を持ちます

今回のコードでは、
currentIndex という変数を使っています。

let currentIndex = 0;
JavaScript

これは、
「今、配列の何番目を表示しているか」
を覚えておくための変数です。

最初は0なので、
topics[0]、つまり HTML が表示されます。

ボタンを押すたびに、

currentIndex = currentIndex + 1;
JavaScript

で番号を1つ進めています。

currentIndex を変化させる

最後まで進んだら、0番目に戻します

配列には最後があります。

今回の topics は4個なので、
使える番号は 0、1、2、3 です。

4番目はありません。

そのため、番号が配列の個数以上になったら、
0に戻す処理を入れています。

if (currentIndex >= topics.length) {
  currentIndex = 0;
JavaScript

これで、
“PHP” の次にもう一度 “HTML” に戻るようになります。

toshi
toshi

ここでは前回の if が使われています。
配列と if を組み合わせると、少し実用っぽい動きになります。

関数とは？

関数にまとめると、
クリック処理が読みやすくなります

次の項目を表示する処理は、
showNextTopic という関数にまとめています。

function showNextTopic() {
  currentIndex = currentIndex + 1;

  if (currentIndex >= topics.length) {
    currentIndex = 0;
  }

  topicText.textContent = "現在の項目：" + topics[currentIndex];
}
JavaScript

クリックされた時は、
この関数を呼び出しています。

nextButton.addEventListener("click", function() {
  showNextTopic();
});
JavaScript

これで、クリック処理の中が短くなり、
何をしているか見やすくなります。

少しだけ変えてみる（練習）
  • topics に “WordPress” を追加してみる
  • topics の順番を入れ替えてみる
  • topicText の表示文を変えてみる
  • currentIndex の初期値を 1 にしてみる
  • if の currentIndex = 0 を消すとどうなるか確認してみる

ここに /ボックス（事実整理）｜枠線 #9CA3AF｜追加CSSクラス：tl-learning-box tl-box-common tl-box-explain】
今回の練習では、
配列の中身を変えると、表示される内容も変わることを確認します。

特に、
配列に項目を追加しても、
topics.length が自動で個数を見てくれるところは便利です。

検証で確認

console.log で配列の中身を確認できます

配列の中身や現在の番号を確認したい時は、
console.log を使えます。

console.log(topics);
console.log("現在の番号：" + currentIndex);
console.log("現在の項目：" + topics[currentIndex]);
JavaScript

開発者ツールのコンソールを見ると、
配列の中身や現在の表示位置を確認できます。

配列は画面だけ見ても分かりにくいことがあります。
console.log で中身を見ると、かなり確認しやすくなります。

ここだけ確認

よくあるつまずき

Q
「つまずき①：topics[1] が最初の値だと思ってしまう」

JavaScriptの配列は0番目から始まります。

const topics = ["HTML", "CSS", "JavaScript"];
JavaScript

この場合、

・topics[0] → HTML
・topics[1] → CSS
・topics[2] → JavaScript

です。

最初の値は topics[0] です。

Q
「つまずき②：最後まで進むと undefined と表示される」

配列にない番号を取り出すと、undefined になることがあります。

今回のように、

if (currentIndex >= topics.length) {
  currentIndex = 0;
}
JavaScript

としておくと、
最後まで進んだあとに0番目へ戻せます。

Q
「つまずき③：length と最後の番号が混ざる」

length は個数です。

4個入っている配列なら、length は4です。

ただし、番号は0から始まるので、
最後の番号は3です。

・個数 → 4
・最後の番号 → 3

このように分けて見ると整理しやすいです。

Q
「つまずき④：配列の中身を追加したら表示がおかしい」

まずはカンマを確認します。

const topics = ["HTML", "CSS", "JavaScript", "PHP"];
JavaScript

値と値の間にはカンマが必要です。

カンマが抜けると、エラーになることがあります。

ここだけ押さえればOK

今回のまとめ

  • 配列は複数の値をまとめるためのもの
  • 配列は [ ] の中に値を並べる
  • 配列の番号は0番目から始まる
  • length は配列の個数を確認するために使える
  • 配列とボタンを組み合わせると、順番に表示を変えられる
できた判定

今日のゴール確認

ここまでできたらOKです。

  • 配列の入口が分かった
  • 複数の値を1つにまとめられた
  • 配列の中身を番号で取り出せた
  • ボタンで次の項目を表示できた
  • 次の JavaScript 3-1 に進む準備ができた
次に読む

JavaScript 2-4へ

次は、
関連するデータを名前つきでまとめるために、
オブジェクトの入口へ進みます。

配列が「順番でまとめるもの」だとすると、
オブジェクトは「名前・年代・好きなこと」のように、
関連する情報を1つの箱としてまとめる時に使いやすい考え方です。

次へ：JavaScript 2-4 オブジェクトの入口へ進む
zipについて

JavaScript 2-3 の一例

この記事の内容は、JavaScript 2-3 の一例として zip ファイルでも用意できます。

最初はそのまま開いて動きを確認し、
そのあとで配列の中身や表示される文章を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-02-03-example.zip
└─ javascript-02-03-example/
├─ index.html
├─ css/
│ 　└─ style.css
└─ js/
　　└─ script.js

javascript-02-03-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、条件分岐・関数・DOM操作あたりで少しつまずきやすいので、
必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました