基礎から学ぶJavaScript 90日コース | JavaScriptを動かして慣れる － Day 2：変数とデータ

Day 2：変数とデータ（前半）

Day 2前半では、JavaScriptの中でも特に重要な「変数」と「データ」の扱い方を学んでいきます。 Day 1で「Hello JavaScript」を表示し、コンソールに文字を出せるようになりましたが、そこに「値を覚えておく力」が加わると、プログラムは一気に表現力を増します。 ここでは、let と const の違い、変数とは何か、値の代入、変数名のルールを、初心者向けに丁寧にかみ砕いて解説し、最後に自己紹介データと商品データを変数で扱う実践まで進めます。

変数とは何か

データを入れておく「名前付きの箱」

変数とは、値を一時的に保存しておくための「名前付きの箱」だと考えると分かりやすいです。 プログラムの中で扱う「名前」「年齢」「商品名」「価格」などの情報を、この箱に入れておくことで、あとから何度でも参照したり、変更したりできます。

例えば、次のようなイメージです。

• name という箱に「Taro」という文字列を入れる
• age という箱に 20 という数値を入れる
• productName という箱に「JavaScript入門書」という文字列を入れる
• productPrice という箱に 1980 という数値を入れる

この「箱」に名前を付けておくことで、コードの中でその値を簡単に扱えるようになります。

変数を使う理由

変数を使う理由は、主に次の3つです。

• 値を覚えておくため： 一度計算した結果や、ユーザーが入力した情報を保存しておき、あとで再利用できます。
• コードを読みやすくするため： 「1980」という数字だけが並んでいるよりも、productPrice という名前が付いている方が意味が分かりやすくなります。
• 変更に強いコードにするため： 値を直接書き込むのではなく変数にしておくことで、後から値を変えたいときに1か所を直すだけで済みます。

let と const

「変わるか・変わらないか」で考える

JavaScriptでは、変数を宣言するときに主に let と const を使います。

• let：あとから値を変更してもよい変数
• const：一度代入したら原則として変更しない変数

初心者のうちは、次のように覚えておくと分かりやすいです。

• 「基本的には const を使う」
• 「どうしても値を変えたいときだけ let を使う」

const の例

// const は「変えない値」を扱うときに使います
const name = 'Taro';      // 名前（途中で勝手に変わらない前提）
const birthYear = 2000;   // 生まれ年（固定の情報）

console.log(name);       // コンソールに「Taro」と表示されます
console.log(birthYear);  // コンソールに「2000」と表示されます

// const は「変えない値」を扱うときに使います
const name = 'Taro';      // 名前（途中で勝手に変わらない前提）
const birthYear = 2000;   // 生まれ年（固定の情報）

console.log(name);       // コンソールに「Taro」と表示されます
console.log(birthYear);  // コンソールに「2000」と表示されます

const で宣言した変数は、あとから次のように書き換えようとするとエラーになります。

const name = 'Taro';

// const で宣言した変数を変更しようとするとエラーになります
name = 'Hanako'; // ここでエラー

const name = 'Taro';

// const で宣言した変数を変更しようとするとエラーになります
name = 'Hanako'; // ここでエラー

これは、「一度決めたものを勝手に変えない」という安全なルールです。 セキュリティやバグ防止の観点からも、変える必要のない値は const にしておくことが推奨されます。

let の例

// let は「変わる可能性のある値」を扱うときに使います
let age = 20;      // 今の年齢
console.log(age);  // 20 と表示されます

// 1年後の年齢に更新します
age = 21;
console.log(age);  // 21 と表示されます

// let は「変わる可能性のある値」を扱うときに使います
let age = 20;      // 今の年齢
console.log(age);  // 20 と表示されます

// 1年後の年齢に更新します
age = 21;
console.log(age);  // 21 と表示されます

let で宣言した変数は、あとから値を変更できます。 年齢、在庫数、カウンターなど、時間とともに変化する値には let が向いています。

値の代入

「宣言」と「代入」をセットで考える

変数を使うときは、次の2つのステップがあります。

1. 宣言する（箱を用意する）
2. 代入する（箱に値を入れる）

宣言と代入を同時に行う例

// 変数を宣言しながら、同時に値を代入しています
const name = 'Taro';  // name という箱に 'Taro' を入れる
let age = 20;         // age という箱に 20 を入れる

// 変数を宣言しながら、同時に値を代入しています
const name = 'Taro';  // name という箱に 'Taro' を入れる
let age = 20;         // age という箱に 20 を入れる

宣言と代入を分ける例

// まず箱だけ用意します（中身はまだありません）
let price;

// あとから値を入れます
price = 1980;

console.log(price); // コンソールに「1980」と表示されます

// まず箱だけ用意します（中身はまだありません）
let price;

// あとから値を入れます
price = 1980;

console.log(price); // コンソールに「1980」と表示されます

「=」は「等しい」ではなく「代入」

let price = 1980;

let price = 1980;

この = は、「等しい」という意味ではなく、右側の値を左側の変数に代入するという意味です。

• 「price に 1980 を入れる」
• 「price という箱に 1980 という中身をセットする」

というイメージで捉えると、誤解しにくくなります。

変数名のルール

基本的なルール

JavaScriptの変数名には、いくつかのルールがあります。

• 使える文字： アルファベット（a〜z、A〜Z）、数字（0〜9）、_（アンダースコア）、$ が使えます。
• 先頭に使える文字： 先頭には、アルファベット、_、$ が使えます。 数字を先頭に使うことはできません。
• スペースは使えない： 変数名にスペース（空白）は使えません。 例えば、user name はNGで、userName のように書きます。
• 記号は基本的に使わない： - や @ などの記号は変数名には使えません。

OKな名前とNGな名前

OKな例

// 何を表しているかが分かる、良い変数名の例です
const userName = 'Taro';      // ユーザー名
let productPrice = 1980;      // 商品価格
const _secretKey = 'abc123';  // 秘密鍵（例）
let $count = 5;               // カウンター（例）

// 何を表しているかが分かる、良い変数名の例です
const userName = 'Taro';      // ユーザー名
let productPrice = 1980;      // 商品価格
const _secretKey = 'abc123';  // 秘密鍵（例）
let $count = 5;               // カウンター（例）

NGな例

// 先頭に数字は使えません
let 1stUser = 'Taro';

// ハイフンは変数名には使えません
let user-name = 'Taro';

// スペースも使えません
let user name = 'Taro';

// 先頭に数字は使えません
let 1stUser = 'Taro';

// ハイフンは変数名には使えません
let user-name = 'Taro';

// スペースも使えません
let user name = 'Taro';

意味のある名前を付ける

変数名は、「何を表しているか」が分かる名前にすることが大切です。

• x や y のような名前は、短いですが意味が分かりにくいです。
• userName や productPrice のように、「何の値か」が分かる名前にすると、コードが読みやすくなります。

「後から自分が読み返しても意味が分かるか？」を基準に名前を付けると、自然と良い名前になっていきます。

実践1：自己紹介データを変数に保存する

ここからは、実際にコードを書きながら、Day 2前半の内容を体験していきます。 まずは、自己紹介に使う情報を変数に保存し、コンソールに表示してみます。

コンソールに表示する自己紹介

index.html（自己紹介・コンソール表示）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 前半：自己紹介データ</title>
</head>
<body>
  <h1>Day 2：変数とデータ（自己紹介・前半）</h1>

  <script>
    // 自己紹介に使うデータを変数に保存します
    // これらはプログラムの実行中に勝手に変わるものではないので const を使います
    const name = 'Taro';          // 名前
    const age = 20;               // 年齢
    const hobby = '読書';         // 趣味
    const favoriteFood = 'カレー'; // 好きな食べ物

    // コンソールに自己紹介データを表示します
    console.log('自己紹介データを表示します');
    console.log('名前：', name);
    console.log('年齢：', age);
    console.log('趣味：', hobby);
    console.log('好きな食べ物：', favoriteFood);
  </script>
</body>
</html>

このコードで意識したいポイント

• 自己紹介の基本情報は、プログラムの実行中に勝手に変わるものではないため、すべて const を使っています。
• console.log() を使って、変数の中身を確認しています。 これは、変数が正しく代入されているかをチェックする基本的な方法です。

実践2：商品名と価格を変数で管理する

次は、商品名と価格を変数で管理する例です。 これは、ショッピングサイトや在庫管理システムなどでよく使われる考え方です。

コンソールに表示する商品データ

index.html（商品データ・コンソール表示）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 前半：商品データ</title>
</head>
<body>
  <h1>Day 2：変数とデータ（商品・前半）</h1>

  <script>
    // 商品名と価格を変数に保存します
    // 商品名と元の価格は基本的に固定の情報なので const を使います
    const productName = 'JavaScript入門書'; // 商品名
    const productPrice = 1980;              // 価格（円）

    // コンソールに商品情報を表示します
    console.log('商品情報を表示します');
    console.log('商品名：', productName);
    console.log('価格：', productPrice, '円');

    // 割引後の価格を計算するための変数を用意します
    // 割引後の価格は計算結果として変わる可能性があるので let を使います
    let discountedPrice = productPrice - 300; // 300円割引した価格

    console.log('割引後の価格：', discountedPrice, '円');
  </script>
</body>
</html>

このコードで意識したいポイント

• 商品名と元の価格は、基本的には固定の情報なので const を使っています。
• 割引後の価格は、計算結果として変わる可能性があるため let を使っています。
• discountedPrice = productPrice - 300; のように、既存の変数を使って新しい値を計算しています。

Day 2前半のまとめ

Day 2前半では、JavaScriptの基礎である「変数」と「データ」について学びました。

• 変数は「名前付きの箱」であり、値を保存しておくために使うこと
• let は値を変更できる変数、const は原則として変更しない変数であること
• 宣言と代入の流れ、= が「代入」を意味すること
• 変数名にはルールがあり、意味のある名前を付けることが大切であること
• 自己紹介データを変数に保存し、コンソールに表示する実践例
• 商品名と価格を変数で管理し、割引後の価格を計算する実践例

この内容が理解できていると、次のステップで学ぶ「データ型（文字列・数値・真偽値など）」や「演算」「条件分岐」にスムーズにつながっていきます。

Day 2：変数とデータ（後半）

Day 2後半では、前半で学んだ「変数」「let／const」「値の代入」「変数名のルール」を、より実践的な形で深掘りしていきます。 コンソールに表示するだけでなく、画面に表示したり、値を更新したりしながら、「変数が生きている」という感覚をつかんでいくことを目標にします。

変数を「動かす」視点で理解し直す

一度きりではなく、何度も使われる存在

前半では、変数に値を入れてコンソールに表示するところまでを体験しました。 後半では、「変数は一度使って終わりではなく、何度も参照・更新されるもの」という視点で考えていきます。

例えば、自己紹介ページで次のようなことをしたいとします。

• 最初は「年齢：20歳」と表示しておく
• ボタンを押すと「1年後の年齢」を表示する

このとき、「今の年齢」と「1年後の年齢」を計算するために、変数が活躍します。

let と const を実践で使い分ける

「変わるもの」と「変わらないもの」をコードで分ける

Day 2後半では、let と const の使い分けを、実際のコードの中で意識していきます。

• 変わらないもの： 名前、商品名、初期設定値など → const
• 変わるもの： 年齢のカウンター、在庫数、割引後の価格など → let

この区別ができると、コードの意図がはっきりし、バグや意図しない変更を防ぎやすくなります。

実践1：自己紹介データを変数に保存して画面に表示する

コンソール＋画面表示で「変数の中身」を確認する

前半では、自己紹介データを変数に保存し、コンソールに表示しました。 後半では、そのデータを画面にも表示し、さらにボタンで「1年後の年齢」を扱う動きを追加してみます。

index.html（自己紹介・後半）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 後半：自己紹介データ</title>
  <style>
    /* 画面の見た目を少し整えます */
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      margin-bottom: 10px;
    }

    .label {
      font-weight: bold;
    }

    .output {
      color: #007acc;
    }

    button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Day 2：変数とデータ（自己紹介・後半）</h1>

  <!-- 自己紹介データを表示する枠を用意します -->
  <p><span class="label">名前：</span> <span id="nameOutput" class="output"></span></p>
  <p><span class="label">年齢：</span> <span id="ageOutput" class="output"></span></p>
  <p><span class="label">趣味：</span> <span id="hobbyOutput" class="output"></span></p>
  <p><span class="label">好きな食べ物：</span> <span id="favoriteFoodOutput" class="output"></span></p>

  <!-- 1年後の年齢を表示するためのボタン -->
  <button id="addAgeButton">1年後の年齢を表示</button>

  <!-- JavaScriptファイルを読み込みます -->
  <script src="profile.js"></script>
</body>
</html>

profile.js（自己紹介ロジック）

// 自己紹介に使うデータを変数に保存します
// 途中で勝手に変わるものではないので、基本的に const を使います
const name = 'Taro';          // 名前
let age = 20;                 // 年齢（変化させる可能性があるので let）
const hobby = '読書';         // 趣味
const favoriteFood = 'カレー'; // 好きな食べ物

// HTMLの要素を取得します（表示する場所を特定します）
const nameOutputElement = document.getElementById('nameOutput');
const ageOutputElement = document.getElementById('ageOutput');
const hobbyOutputElement = document.getElementById('hobbyOutput');
const favoriteFoodOutputElement = document.getElementById('favoriteFoodOutput');
const addAgeButton = document.getElementById('addAgeButton');

console.log('自己紹介スクリプトが読み込まれました');

// 画面に初期状態の自己紹介データを表示します
nameOutputElement.textContent = name;
ageOutputElement.textContent = age + '歳';
hobbyOutputElement.textContent = hobby;
favoriteFoodOutputElement.textContent = favoriteFood;

// ボタンがクリックされたときの処理を登録します
addAgeButton.addEventListener('click', () => {
  // 1年後の年齢を計算します（今の age に 1 を足します）
  const nextAge = age + 1;

  // 画面に「1年後の年齢」を表示します
  ageOutputElement.textContent = nextAge + '歳（1年後）';

  // コンソールにも表示しておくと、動作確認がしやすくなります
  console.log('1年後の年齢：', nextAge);
});

// 自己紹介に使うデータを変数に保存します
// 途中で勝手に変わるものではないので、基本的に const を使います
const name = 'Taro';          // 名前
let age = 20;                 // 年齢（変化させる可能性があるので let）
const hobby = '読書';         // 趣味
const favoriteFood = 'カレー'; // 好きな食べ物

// HTMLの要素を取得します（表示する場所を特定します）
const nameOutputElement = document.getElementById('nameOutput');
const ageOutputElement = document.getElementById('ageOutput');
const hobbyOutputElement = document.getElementById('hobbyOutput');
const favoriteFoodOutputElement = document.getElementById('favoriteFoodOutput');
const addAgeButton = document.getElementById('addAgeButton');

console.log('自己紹介スクリプトが読み込まれました');

// 画面に初期状態の自己紹介データを表示します
nameOutputElement.textContent = name;
ageOutputElement.textContent = age + '歳';
hobbyOutputElement.textContent = hobby;
favoriteFoodOutputElement.textContent = favoriteFood;

// ボタンがクリックされたときの処理を登録します
addAgeButton.addEventListener('click', () => {
  // 1年後の年齢を計算します（今の age に 1 を足します）
  const nextAge = age + 1;

  // 画面に「1年後の年齢」を表示します
  ageOutputElement.textContent = nextAge + '歳（1年後）';

  // コンソールにも表示しておくと、動作確認がしやすくなります
  console.log('1年後の年齢：', nextAge);
});

重要ポイントの深掘り

なぜ name は const で age は let なのか

• name は、プログラムの中で勝手に変わるものではないため const にしています。
• age は、「今の年齢」「1年後の年齢」など、計算の基準として使うため let にしています。

ここでは age 自体は書き換えていませんが、「変化する可能性がある値」として let を選んでいます。 後のDayで、「実際に age を更新する」ようなコードを書くときにも、この区別が役立ちます。

nextAge を const にしている理由

const nextAge = age + 1;

const nextAge = age + 1;

nextAge は、「このイベントの中で一度計算したら変えない値」です。 そのため、const を使っています。

• 「変化する軸」→ age（let）
• 「計算結果として一度だけ使う値」→ nextAge（const）

このように、「役割」に応じて let と const を使い分けると、コードの意図がより明確になります。

実践2：商品名と価格を変数で管理し、画面とコンソールで確認する

割引や在庫数を絡めて「変わる値」を意識する

次は、商品名と価格を変数で管理し、割引後の価格や在庫数を扱う例です。 ここでは、「変わる値」と「変わらない値」をはっきり分けてコードを書いてみます。

index.html（商品データ・後半）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 後半：商品データ</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      margin-bottom: 10px;
    }

    .label {
      font-weight: bold;
    }

    .output {
      color: #007acc;
    }

    button {
      margin-top: 10px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <h1>Day 2：変数とデータ（商品・後半）</h1>

  <!-- 商品情報を表示する枠 -->
  <p><span class="label">商品名：</span> <span id="productNameOutput" class="output"></span></p>
  <p><span class="label">価格：</span> <span id="productPriceOutput" class="output"></span></p>
  <p><span class="label">在庫数：</span> <span id="stockOutput" class="output"></span></p>

  <!-- 割引と購入のボタン -->
  <button id="discountButton">300円割引を適用</button>
  <button id="buyButton">1つ購入する</button>

  <!-- JavaScriptファイルを読み込みます -->
  <script src="product.js"></script>
</body>
</html>

product.js（商品ロジック）

// 商品名と元の価格は固定の情報なので const を使います
const productName = 'JavaScript入門書'; // 商品名
const originalPrice = 1980;             // 元の価格（円）

// 現在の価格と在庫数は変化する可能性があるので let を使います
let currentPrice = originalPrice; // 現在の価格（最初は元の価格と同じ）
let stock = 10;                   // 在庫数（最初は 10 個とします）

// HTMLの要素を取得します（表示する場所を特定します）
const productNameOutputElement = document.getElementById('productNameOutput');
const productPriceOutputElement = document.getElementById('productPriceOutput');
const stockOutputElement = document.getElementById('stockOutput');
const discountButton = document.getElementById('discountButton');
const buyButton = document.getElementById('buyButton');

console.log('商品スクリプトが読み込まれました');

// 初期状態の商品情報を画面に表示します
productNameOutputElement.textContent = productName;
productPriceOutputElement.textContent = currentPrice + '円';
stockOutputElement.textContent = stock + '個';

// 「300円割引を適用」ボタンがクリックされたときの処理
discountButton.addEventListener('click', () => {
  // 現在の価格から 300 円引きます
  currentPrice = currentPrice - 300;

  // 画面に割引後の価格を表示します
  productPriceOutputElement.textContent = currentPrice + '円（割引後）';

  // コンソールにも表示しておきます
  console.log('割引後の価格：', currentPrice);
});

// 「1つ購入する」ボタンがクリックされたときの処理
buyButton.addEventListener('click', () => {
  // 在庫が 1 以上あるかを確認します
  if (stock > 0) {
    // 在庫を 1 減らします
    stock = stock - 1;

    // 画面に残り在庫を表示します
    stockOutputElement.textContent = stock + '個';

    // コンソールにも表示しておきます
    console.log('1つ購入しました。残り在庫：', stock);
  } else {
    // 在庫が 0 の場合は、購入できないことをコンソールに表示します
    console.log('在庫がありません');
  }
});

// 商品名と元の価格は固定の情報なので const を使います
const productName = 'JavaScript入門書'; // 商品名
const originalPrice = 1980;             // 元の価格（円）

// 現在の価格と在庫数は変化する可能性があるので let を使います
let currentPrice = originalPrice; // 現在の価格（最初は元の価格と同じ）
let stock = 10;                   // 在庫数（最初は 10 個とします）

// HTMLの要素を取得します（表示する場所を特定します）
const productNameOutputElement = document.getElementById('productNameOutput');
const productPriceOutputElement = document.getElementById('productPriceOutput');
const stockOutputElement = document.getElementById('stockOutput');
const discountButton = document.getElementById('discountButton');
const buyButton = document.getElementById('buyButton');

console.log('商品スクリプトが読み込まれました');

// 初期状態の商品情報を画面に表示します
productNameOutputElement.textContent = productName;
productPriceOutputElement.textContent = currentPrice + '円';
stockOutputElement.textContent = stock + '個';

// 「300円割引を適用」ボタンがクリックされたときの処理
discountButton.addEventListener('click', () => {
  // 現在の価格から 300 円引きます
  currentPrice = currentPrice - 300;

  // 画面に割引後の価格を表示します
  productPriceOutputElement.textContent = currentPrice + '円（割引後）';

  // コンソールにも表示しておきます
  console.log('割引後の価格：', currentPrice);
});

// 「1つ購入する」ボタンがクリックされたときの処理
buyButton.addEventListener('click', () => {
  // 在庫が 1 以上あるかを確認します
  if (stock > 0) {
    // 在庫を 1 減らします
    stock = stock - 1;

    // 画面に残り在庫を表示します
    stockOutputElement.textContent = stock + '個';

    // コンソールにも表示しておきます
    console.log('1つ購入しました。残り在庫：', stock);
  } else {
    // 在庫が 0 の場合は、購入できないことをコンソールに表示します
    console.log('在庫がありません');
  }
});

重要ポイントの深掘り

originalPrice と currentPrice の役割の違い

• originalPrice は、「元の価格」を表す固定値です。 → 変わらないので const
• currentPrice は、「現在の価格」を表す値です。 割引やキャンペーンによって変化するため、let を使っています。

このように、「元の値」と「現在の値」を分けて管理することで、後から元の値に戻したり、別の割引を適用したりしやすくなります。

stock を let にしている理由

在庫数は、購入や入荷によって増減する値です。 そのため、let stock = 10; のように、変更可能な変数として宣言しています。

stock = stock - 1;

stock = stock - 1;

このように、stock の値を更新することで、「状態の変化」を表現しています。

変数名のルールを「良い名前・悪い名前」で体感する

読みやすさ・安全性の観点から考える

Day 2後半では、変数名のルールを「実際のコードの読みやすさ」という観点からもう一度見直してみます。

良い名前の例

const productName = 'JavaScript入門書'; // 商品名
const originalPrice = 1980;             // 元の価格
let currentPrice = originalPrice;       // 現在の価格
let stock = 10;                         // 在庫数

const productName = 'JavaScript入門書'; // 商品名
const originalPrice = 1980;             // 元の価格
let currentPrice = originalPrice;       // 現在の価格
let stock = 10;                         // 在庫数

• 何を表しているかが一目で分かる
• 「元の価格」と「現在の価格」が区別されている
• 在庫数は stock という分かりやすい名前になっている

悪い名前の例

const a = 'JavaScript入門書';
const b = 1980;
let c = b;
let d = 10;

const a = 'JavaScript入門書';
const b = 1980;
let c = b;
let d = 10;

• a、b、c、d が何を表しているか分からない
• コードを読むたびに「これは何だっけ？」と考えなければならない
• バグが発生したときに原因を追いづらい

セキュリティ・品質の観点からの一言

変数名が分かりやすいコードは、バグや脆弱性を見つけやすいコードでもあります。 逆に、意味の分からない名前が多いコードは、意図しない挙動やセキュリティ上の問題を見逃しやすくなります。

• 「自分だけが分かる名前」ではなく、「他の人が読んでも分かる名前」を意識する
• 「後から自分が読み返しても分かるか？」を基準にする

この意識は、プロの現場でも非常に重要です。

Day 2後半のまとめ

Day 2後半では、前半で学んだ「変数」と「データ」を、より実践的な形で深掘りしました。

• 変数は「何度も使われ、更新されるもの」という視点で捉え直したこと
• let と const を、「変わるもの」と「変わらないもの」で使い分ける感覚を養ったこと
• 自己紹介データを画面に表示し、ボタンで年齢を扱うコードを書いたこと
• 商品名・価格・在庫数を変数で管理し、割引や購入による変化を表現したこと
• 変数名の良し悪しを具体例で比較し、「意味のある名前を付ける重要性」を確認したこと

ここまでできていると、「ただ動くだけのコード」から「状態を持ち、変化するコード」へと一歩進んだと言えます。

ミニ課題：名前・年齢・趣味・好きな食べ物を変数に入れて表示する

ここからは、実際にコードを書きながら、Day 2の学習内容をミニ課題としてまとめていきます。

コンソールに表示するバージョン

まずは、Day 1で使ったようなシンプルな index.html に、自己紹介データを変数として保存し、コンソールに表示してみます。

index.html（ミニ課題用テンプレート）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 ミニ課題：自己紹介（コンソール）</title>
</head>
<body>
  <h1>Day 2：変数とデータ（ミニ課題）</h1>

  <script>
    // 名前・年齢・趣味・好きな食べ物を変数に保存します
    // これらはプログラムの実行中に勝手に変わるものではないので const を使います
    const name = 'Taro';          // 名前
    const age = 20;               // 年齢
    const hobby = '読書';         // 趣味
    const favoriteFood = 'カレー'; // 好きな食べ物

    // コンソールに自己紹介データを表示します
    console.log('自己紹介データを表示します');
    console.log('名前：', name);
    console.log('年齢：', age);
    console.log('趣味：', hobby);
    console.log('好きな食べ物：', favoriteFood);
  </script>
</body>
</html>

このコードで意識したいポイント

• 自己紹介の基本情報は、プログラムの実行中に勝手に変わるものではないため、すべて const を使っています。
• console.log() を使って、変数の中身を確認しています。 これは、変数が正しく代入されているかをチェックする基本的な方法です。

画面に表示するバージョン

次に、同じデータを画面にも表示してみます。 HTMLの要素とJavaScriptの変数を組み合わせることで、「コードで自己紹介ページを作る」感覚をつかめます。

index.html（画面表示用テンプレート）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 2 ミニ課題：自己紹介（画面表示）</title>
  <style>
    /* 画面の見た目を少し整えます */
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      margin-bottom: 10px;
    }

    .label {
      font-weight: bold;
    }

    .output {
      color: #007acc;
    }
  </style>
</head>
<body>
  <h1>Day 2：変数とデータ（ミニ課題・画面表示）</h1>

  <!-- ここに自己紹介データを表示するための枠を用意します -->
  <p><span class="label">名前：</span> <span id="nameOutput" class="output"></span></p>
  <p><span class="label">年齢：</span> <span id="ageOutput" class="output"></span></p>
  <p><span class="label">趣味：</span> <span id="hobbyOutput" class="output"></span></p>
  <p><span class="label">好きな食べ物：</span> <span id="favoriteFoodOutput" class="output"></span></p>

  <script>
    // 自己紹介データを変数に保存します
    const name = 'Taro';          // 名前
    const age = 20;               // 年齢
    const hobby = '読書';         // 趣味
    const favoriteFood = 'カレー'; // 好きな食べ物

    // HTMLの要素を取得します（表示する場所を特定します）
    const nameOutputElement = document.getElementById('nameOutput');
    const ageOutputElement = document.getElementById('ageOutput');
    const hobbyOutputElement = document.getElementById('hobbyOutput');
    const favoriteFoodOutputElement = document.getElementById('favoriteFoodOutput');

    // 取得した要素に、変数の値を表示します
    nameOutputElement.textContent = name;
    ageOutputElement.textContent = age + '歳';
    hobbyOutputElement.textContent = hobby;
    favoriteFoodOutputElement.textContent = favoriteFood;

    // コンソールにも表示しておくと、動作確認がしやすくなります
    console.log('画面にも自己紹介データを表示しました');
  </script>
</body>
</html>

重要ポイントの深掘り

• 変数とHTML要素の橋渡し： document.getElementById('nameOutput') のように、HTML側で用意した要素をJavaScriptで取得し、textContent に変数の値を代入することで、画面に表示しています。
• コンソールと画面の両方で確認する： コンソールにログを出しつつ、画面にも表示することで、「変数の中身」と「表示結果」が一致しているかを確認できます。

まとめ：Day 2で身につけておきたい感覚

Day 2では、次のようなポイントを押さえました。

• 変数は「名前付きの箱」であり、値を保存しておくために使うこと
• let は値を変更できる変数、const は原則として変更しない変数であること
• 宣言と代入の流れ、= が「代入」を意味すること
• 変数名にはルールがあり、意味のある名前を付けることが大切であること
• ミニ課題として、名前・年齢・趣味・好きな食べ物を変数に入れて表示するコードを書いたこと
• 自己紹介データを、コンソールと画面の両方に表示する練習をしたこと

ここまでできていると、「値を覚えておく」「値を表示する」という基本的な流れが身についています。 次のステップでは、この変数に入る「データの種類（文字列・数値・真偽値など）」を整理し、より厳密にデータを扱うための基礎を築いていきます。