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

JavaScript 90日で身につけるJavaScript
2026.08.24
スポンサーリンク
スポンサーリンク
  1. Day 2：変数とデータ ― 「値をしまっておく箱」を手に入れる
  2. 変数とは何か
    1. 「値をしまっておく箱」としてイメージする
    2. なぜ変数が必要なのか
  3. let と const ― 現代のJavaScriptで使う二つのキーワード
    1. まずは「let」と「const」だけ覚えればOK
  4. 変数の宣言と値の代入
    1. 「宣言」と「代入」をセットで覚える
    2. let と const の違い（ざっくり）
  5. 変数名のルールとコツ
    1. JavaScriptの変数名ルール（最低限おさえておきたいポイント）
    2. 読みやすい変数名のつけ方（キャメルケース）
    3. よくない変数名の例
  6. 実践1：自己紹介データを変数に保存する
    1. コンソールで「自己紹介セット」を作ってみる
  7. 実践2：商品名と価格を変数で管理する
    1. 「商品データ」を変数で持ってみる
  8. コードテンプレート：自己紹介＋商品管理ミニセット
    1. そのままコンソールに貼って遊べるテンプレート
  9. セキュリティ視点のちょっとした一言
  10. Day 2のまとめ：箱を手に入れたことで、コードがぐっと“プログラムらしく”なる
  11. Day 2：変数とデータ ― 自己紹介を「コードで話す」練習
  12. 変数とは何か ― 「ラベル付きの箱」として考える
    1. 値をしまっておく“箱”＋名前
  13. let と const ― まずはこの2つだけ覚えれば十分
    1. 現代のJavaScriptの基本セット
    2. ざっくりした使い分け
  14. 値の代入 ― 「箱に中身を入れる」動き
    1. 宣言＋代入の基本形
    2. let の再代入（中身を入れ替える）
  15. 変数名のルール ― 「読める名前」をつけることが大事
    1. 技術的なルール（最低限）
    2. 読みやすい名前のつけ方（キャメルケース）
    3. よくない名前・よい名前
  16. ミニ課題：名前・年齢・趣味・好きな食べ物を変数に入れて表示する
    1. ステップ1：ブラウザのコンソールを開く
    2. ステップ2：自己紹介用の変数を宣言する
    3. ステップ3：変数の中身を表示する
    4. ステップ4：年齢を更新してみる（おまけ）
  17. 練習用テンプレートコード ― そのまま貼って書き換えられる形
    1. コメント付きテンプレート
  18. セキュリティ視点のひとこと
  19. Day 2のまとめ ― 「自分の情報をコードで表現する」第一歩

Day 2：変数とデータ ― 「値をしまっておく箱」を手に入れる

JavaScript入門90日コースの2日目では、プログラミングの世界で超・基本になる「変数」と「データ」についてじっくり学んでいきます。 昨日は console.log() で文字を表示するところまで体験しましたが、今日は「値をしまっておく箱」を手に入れて、少しだけ“プログラムっぽさ”が増していきます。

変数とは何か

「値をしまっておく箱」としてイメージする

変数（へんすう）は、ひと言でいうと「値をしまっておく箱」です。 その箱に、名前をつけて、好きな値（文字・数字など）を入れておくことができます。

  • 名前がついた箱 → 変数名
  • 箱の中身 → 値

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

  • userName という箱に「山田太郎」という文字を入れておく
  • age という箱に「30」という数字を入れておく

こうしておくことで、あとからその箱を開いて中身を取り出したり、別の値に入れ替えたりできます。

なぜ変数が必要なのか

変数がない世界を想像してみると、すべての値を「生のまま」書き続けることになります。

  • ユーザー名を何度も表示したいとき、毎回 "山田太郎" と書く
  • 商品価格を計算するとき、毎回 1980 と書く

これだと、値を変更したいときに、コードのあちこちを探して書き換えないといけません。 変数を使えば、値を1か所にまとめて管理できるので、変更や再利用がとても楽になります。

let と const ― 現代のJavaScriptで使う二つのキーワード

まずは「let」と「const」だけ覚えればOK

JavaScriptには、変数を宣言するためのキーワードがいくつかありますが、現代の書き方では基本的に次の2つだけを覚えれば十分です。

  • let：あとで中身を変える可能性がある箱
  • const：中身を変えない箱（定数）

昔からある var というキーワードもありますが、初心者のうちは「使わない」と覚えてしまって構いません。 この90日コースでは、let と const を中心に使っていきます。

変数の宣言と値の代入

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

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

  1. 宣言：箱を用意して、名前をつける
  2. 代入：箱の中に値を入れる

JavaScriptでは、この2つをまとめて書くことが多いです。

let の基本形

// let を使って変数を宣言し、値を代入する基本形です
let userName = "山田太郎";
JavaScript
  • let：変数を宣言するキーワード
  • userName：変数名（箱の名前）
  • =：代入（値を入れる）ための記号
  • "山田太郎"：代入する値（文字列）

const の基本形

// const を使って「変えない値」を宣言する基本形です
const birthYear = 1995;
JavaScript
  • const：定数（中身を変えない変数）を宣言するキーワード
  • birthYear：変数名
  • 1995：代入する値（数字）

let と const の違い（ざっくり）

  • let：あとで中身を変えてもよい箱
  • const：一度入れたら中身を変えない箱

実際に「中身を変える」例を見てみましょう。

// let で宣言した変数は、あとから中身を変えることができます
let score = 10;
console.log(score); // 10 が表示されます

// 値を上書き（再代入）しています
score = 20;
console.log(score); // 20 が表示されます
JavaScript
// const で宣言した変数は、あとから中身を変えることができません
const maxScore = 100;
console.log(maxScore); // 100 が表示されます

// 下の行はエラーになるので、実際に試すときはコメントアウトしておきましょう
// maxScore = 200; // エラー：const で宣言した変数は再代入できません
JavaScript

基本的な方針としては、

  • 変える予定がない値 → const
  • 変える可能性がある値 → let

と覚えておくと、コードが安全で読みやすくなります。

変数名のルールとコツ

JavaScriptの変数名ルール（最低限おさえておきたいポイント）

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

  1. 使える文字
    • アルファベット（a〜z, A〜Z）
    • 数字（0〜9）
    • _（アンダースコア）
    • $（ドル記号）
  2. 先頭に数字は使えない
    • user1 はOK
    • 1user はNG（エラーになります）
  3. スペースは使えない
    • user name はNG
    • userName のように単語をつなげて書きます
  4. 記号はほとんど使えない
    • - や @ などは変数名には使えません

読みやすい変数名のつけ方（キャメルケース）

JavaScriptでは、複数の単語をつなげるときに「キャメルケース」と呼ばれる書き方がよく使われます。

  • 最初の単語はすべて小文字
  • 2つ目以降の単語の先頭を大文字にする

例：

  • userName
  • favoriteFood
  • productPrice
  • birthYear

こうしておくと、「何を表している変数なのか」がひと目でわかりやすくなります。

よくない変数名の例

let a = "山田太郎";      // 何を表しているのか分かりにくい
let x1 = 30;            // 意味が伝わりにくい
let data = "ラーメン";  // 何のデータなのか曖昧
JavaScript
let userName = "山田太郎";   // ユーザー名だと分かる
let age = 30;                // 年齢だと分かる
let favoriteFood = "ラーメン"; // 好きな食べ物だと分かる
JavaScript

変数名は「自分のため」でもあり、「あとから読む人のため」でもあります。 少し長くなっても、意味が伝わる名前をつけるクセをつけておくと、後々とても楽になります。

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

コンソールで「自己紹介セット」を作ってみる

ここからは、Day 1と同じくブラウザのコンソールを使って、実際にコードを書いていきます。 テーマは「自己紹介データを変数に保存する」です。

ステップ1：基本の自己紹介変数を作る

// 自己紹介用の変数をいくつか用意してみましょう

// 名前（変わる可能性は低いので const でも OK です）
const userName = "山田太郎";

// 年齢（変わる可能性があるので let にしても良いです）
let age = 30;

// 好きな食べ物
const favoriteFood = "カレーライス";

// 趣味
const hobby = "読書";

// 住んでいる地域
const city = "東京";

// それぞれの変数をコンソールに表示してみます
console.log("名前：" + userName);
console.log("年齢：" + age);
console.log("好きな食べ物：" + favoriteFood);
console.log("趣味：" + hobby);
console.log("住んでいる地域：" + city);
JavaScript

ここでは、文字列の結合に + を使っています。

  • "名前：" + userName → 「名前：」という文字列と、userName の中身をつなげて1つの文字列にしています。

ステップ2：年齢を更新してみる（let の再代入）

// 年齢を1歳増やしてみる例です
console.log("現在の年齢：" + age);

// 誕生日が来たと仮定して、年齢を 1 増やします
age = age + 1;

// 更新後の年齢を表示します
console.log("誕生日後の年齢：" + age);
JavaScript
  • age = age + 1; → 「今の age に 1 を足した値を、もう一度 age に入れ直す」という意味です。

このように、let で宣言した変数は、あとから中身を更新することができます。

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

「商品データ」を変数で持ってみる

次は、少しビジネス寄りのイメージで「商品名」と「価格」を変数で管理してみます。 ECサイトやレジアプリなどをイメージすると、変数の役割がぐっと分かりやすくなります。

ステップ1：商品名と価格を変数にする

// 商品名と価格を変数で管理する例です

// 商品名（変わらない前提なら const）
const productName = "JavaScript入門ブック";

// 価格（キャンペーンで変わる可能性があるなら let）
let productPrice = 1980;

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

ステップ2：セール価格に変更してみる

// セールで価格を値下げする例です

console.log("通常価格：" + productPrice + "円");

// 20%オフにしてみましょう（ざっくり計算）
productPrice = productPrice * 0.8;

// セール価格を表示します
console.log("セール価格：" + productPrice + "円");
JavaScript
  • productPrice * 0.8 → 価格に 0.8 を掛けて、20%オフの値段を計算しています。

このように、変数を使うと「値を計算して更新する」という流れが自然に書けるようになります。

コードテンプレート：自己紹介＋商品管理ミニセット

そのままコンソールに貼って遊べるテンプレート

ここまでの内容をまとめて、初心者向けのコメント付きテンプレートとして用意してみました。 ブラウザのコンソールに貼り付けて、少しずつ書き換えながら練習してみてください。

// ==============================
// Day 2：変数とデータ 練習テンプレート
// ==============================

// --- 自己紹介データを変数に保存するセクション ---

// 名前（基本的に変わらないので const にしています）
const userName = "山田太郎";

// 年齢（時間とともに変わるので let にしています）
let age = 30;

// 好きな食べ物
const favoriteFood = "カレーライス";

// 趣味
const hobby = "映画鑑賞";

// 住んでいる地域
const city = "東京";

// 自己紹介をコンソールに表示してみます
console.log("=== 自己紹介 ===");
console.log("名前：" + userName);
console.log("年齢：" + age);
console.log("好きな食べ物：" + favoriteFood);
console.log("趣味：" + hobby);
console.log("住んでいる地域：" + city);

// 年齢を1歳増やしてみる（誕生日が来たイメージ）
age = age + 1;
console.log("誕生日後の年齢：" + age);

// --- 商品データを変数で管理するセクション ---

// 商品名
const productName = "JavaScriptスターターキット";

// 通常価格
let productPrice = 2980;

// 商品情報を表示
console.log("=== 商品情報 ===");
console.log("商品名：" + productName);
console.log("通常価格：" + productPrice + "円");

// セールで 30% オフにしてみる
productPrice = productPrice * 0.7;

// セール価格を表示
console.log("セール価格：" + productPrice + "円");

// --- 自由に書き換えてみましょう ---
// 下の行を、自分の好きな商品名や価格に書き換えて練習してみてください

// 例：別の商品を追加してみる
const anotherProductName = "HTML & CSS入門ブック";
let anotherProductPrice = 1500;

console.log("別の商品名：" + anotherProductName);
console.log("別商品の価格：" + anotherProductPrice + "円");
JavaScript

このテンプレートをベースに、

  • 自分の本当の名前や年齢に変える
  • 好きな食べ物や趣味を変える
  • 架空の商品をいくつか追加してみる

など、自由に遊んでみると、変数の感覚がぐっと身近になります。

セキュリティ視点のちょっとした一言

まだDay 2の段階ですが、セキュリティの観点からも「変数名や値の扱い」は地味に大事です。

  • パスワードや秘密情報を、むやみにコンソールに表示しない
  • 公開してはいけない値を、ブラウザ側のコードにベタ書きしない

といった意識は、少しずつ頭の片隅に置いておくと良いです。 今は「自己紹介」や「商品情報」のような安全なデータで練習しながら、後々セキュリティの話も深めていきましょう。

Day 2のまとめ：箱を手に入れたことで、コードがぐっと“プログラムらしく”なる

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

  • 変数は「値をしまっておく箱」
  • let は中身を変える可能性がある箱、const は中身を変えない箱
  • = は「代入」の記号で、値を箱に入れるときに使う
  • 読みやすい変数名をつけることが大事（userName, productPrice など）
  • 自己紹介データや商品データを変数に保存して、コンソールに表示してみた

昨日の「ただ文字を表示するだけ」から一歩進んで、「値を管理する」ことができるようになりました。 この「箱を使って値を扱う感覚」は、これから学ぶ条件分岐やループなど、あらゆるプログラミングの基礎になります。

Day 2：変数とデータ ― 自己紹介を「コードで話す」練習

JavaScript入門90日コースのDay 2では、「変数」と「データ」をテーマに、ミニ課題として自己紹介をコードで表現していきます。 名前・年齢・趣味・好きな食べ物を変数に入れて表示するだけですが、ここにプログラミングの大事なエッセンスがぎゅっと詰まっています。

変数とは何か ― 「ラベル付きの箱」として考える

値をしまっておく“箱”＋名前

変数は、プログラミングの世界で「値をしまっておく箱」のような存在です。 その箱には名前（ラベル）をつけておき、あとからその名前を使って中身を取り出したり、入れ替えたりできます。

  • 変数名：箱につける名前
  • 値：箱の中に入れる中身（文字・数字など）

たとえば、自己紹介ならこんな感じです。

  • name という箱に「山田太郎」という文字を入れる
  • age という箱に「25」という数字を入れる
  • hobby という箱に「映画鑑賞」という文字を入れる
  • favoriteFood という箱に「ラーメン」という文字を入れる

こうしておくと、あとから console.log() で表示したり、別の処理に使ったりできます。

let と const ― まずはこの2つだけ覚えれば十分

現代のJavaScriptの基本セット

JavaScriptで変数を宣言するときに使うキーワードはいくつかありますが、今の標準的な書き方では次の2つを押さえておけば大丈夫です。

  • let：あとで中身を変える可能性がある変数
  • const：中身を変えない（変えるつもりがない）変数

昔からある var というキーワードもありますが、初心者のうちは「使わない」と覚えてしまって構いません。

ざっくりした使い分け

  • 変える予定がない値 → const 例：名前、誕生日、固定の設定値など
  • 変える可能性がある値 → let 例：年齢、スコア、残り時間、在庫数など

自己紹介のミニ課題では、年齢は変わる可能性がありますが、他の項目は基本的に変わらない前提で考えてもよいので、こんな使い方ができます。

// 名前・趣味・好きな食べ物は const
const name = "山田太郎";
const hobby = "映画鑑賞";
const favoriteFood = "ラーメン";

// 年齢は let（時間が経てば変わる可能性があるため）
let age = 25;
JavaScript

値の代入 ― 「箱に中身を入れる」動き

宣言＋代入の基本形

変数を使うときは、「宣言」と「代入」をセットで覚えると分かりやすいです。

  1. 宣言：箱を用意して名前をつける
  2. 代入：箱の中に値を入れる

JavaScriptでは、この2つをまとめて書くことが多いです。

// let を使って変数を宣言し、値を代入する基本形です
let age = 25;

// const を使って変数（定数）を宣言し、値を代入する基本形です
const name = "山田太郎";
JavaScript
  • let / const：変数を宣言するキーワード
  • age / name：変数名（箱の名前）
  • =：代入（値を入れる）ための記号
  • 25 / "山田太郎"：代入する値

let の再代入（中身を入れ替える）

let で宣言した変数は、あとから中身を入れ替えることができます。

// 年齢を表す変数を宣言します
let age = 25;
console.log("今の年齢：" + age);

// 1年後の年齢に更新してみます
age = age + 1; // age に 1 を足した値を、もう一度 age に代入しています
console.log("1年後の年齢：" + age);
JavaScript

const は一度代入したら中身を変えられないので、「変えない値」に使うのが基本です。

変数名のルール ― 「読める名前」をつけることが大事

技術的なルール（最低限）

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

  • 使える文字
    • アルファベット（a〜z, A〜Z）
    • 数字（0〜9）
    • _（アンダースコア）
    • $（ドル記号）
  • 先頭に数字は使えない
    • user1 はOK
    • 1user はNG
  • スペースは使えない
    • user name はNG
    • userName のように単語をつなげて書きます
  • 記号はほとんど使えない
    • - や @ などは変数名には使えません

読みやすい名前のつけ方（キャメルケース）

複数の単語をつなげるときは、「キャメルケース」と呼ばれる書き方がよく使われます。

  • 最初の単語は小文字
  • 2つ目以降の単語の先頭を大文字にする

例：

  • favoriteFood
  • userName
  • birthYear

自己紹介のミニ課題なら、こんな変数名が分かりやすいです。

const name = "山田太郎";
let age = 25;
const hobby = "映画鑑賞";
const favoriteFood = "ラーメン";
JavaScript

よくない名前・よい名前

// よくない例（意味が分かりにくい）
let a = "山田太郎";
let x1 = 25;
let d = "映画鑑賞";

// よい例（何を表しているか分かる）
const name = "山田太郎";
let age = 25;
const hobby = "映画鑑賞";
JavaScript

変数名は「未来の自分」と「他の人」が読むことを想定してつけると、自然と良い名前になります。

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

ステップ1：ブラウザのコンソールを開く

Day 1と同じように、ブラウザの開発者ツールからコンソールを開きます。

  1. ブラウザで適当なWebページを開く
  2. F12 や Ctrl + Shift + I（ブラウザによって異なります）で開発者ツールを開く
  3. 「Console」タブをクリックする

コンソールが開いたら、そこにJavaScriptコードを書いていきます。

ステップ2：自己紹介用の変数を宣言する

// ==============================
// Day 2 ミニ課題：自己紹介を変数に入れて表示する
// ==============================

// 名前（基本的に変わらないので const にしています）
const name = "山田太郎";

// 年齢（時間とともに変わるので let にしています）
let age = 25;

// 趣味
const hobby = "映画鑑賞";

// 好きな食べ物
const favoriteFood = "ラーメン";
JavaScript

ここまでが「変数の宣言＋値の代入」です。 この時点では、まだコンソールには何も表示されません。 次に、console.log() を使って表示していきます。

ステップ3：変数の中身を表示する

// 自己紹介をコンソールに表示してみます

console.log("=== 自己紹介 ===");

// 文字列と変数を + でつなげて表示しています
console.log("名前：" + name);
console.log("年齢：" + age);
console.log("趣味：" + hobby);
console.log("好きな食べ物：" + favoriteFood);
JavaScript

コンソールに次のような表示が出れば成功です。

=== 自己紹介 ===
名前：山田太郎
年齢：25
趣味：映画鑑賞
好きな食べ物：ラーメン

ステップ4：年齢を更新してみる（おまけ）

ミニ課題の範囲を少しだけ広げて、「年齢を1歳増やす」処理も試してみましょう。

// 年齢を1歳増やしてみる（誕生日が来たイメージ）

console.log("今の年齢：" + age);

// age に 1 を足した値を、もう一度 age に代入しています
age = age + 1;

console.log("誕生日後の年齢：" + age);
JavaScript

このように、let で宣言した変数は、あとから中身を更新できます。

練習用テンプレートコード ― そのまま貼って書き換えられる形

コメント付きテンプレート

以下は、初心者向けにコメントをたっぷり入れた練習用テンプレートです。 ブラウザのコンソールにそのまま貼り付けて、自分の情報に書き換えながら使ってみてください。

// ==============================
// Day 2：変数とデータ ミニ課題テンプレート
// ==============================

// 1. 自己紹介用の変数を宣言する

// 名前（自分の名前に書き換えてみましょう）
const name = "山田太郎"; // ここを自分の名前に変更してOKです

// 年齢（数字だけを書きます）
let age = 25; // ここを自分の年齢に変更してOKです

// 趣味（複数あってもOKです）
const hobby = "映画鑑賞"; // 例：ゲーム、読書、音楽鑑賞 など

// 好きな食べ物
const favoriteFood = "ラーメン"; // 例：カレー、寿司、パスタ など

// 2. 変数の中身をコンソールに表示する

console.log("=== 自己紹介 ===");

// 文字列と変数を + でつなげて表示しています
console.log("名前：" + name);
console.log("年齢：" + age);
console.log("趣味：" + hobby);
console.log("好きな食べ物：" + favoriteFood);

// 3. 年齢を1歳増やしてみる（おまけ）

console.log("今の年齢：" + age);

// age に 1 を足した値を、もう一度 age に代入しています
age = age + 1;

console.log("1年後の年齢：" + age);

// 4. 自由に追加してみましょう
// 例：好きな音楽ジャンルや職業などを変数にして表示してみてください

const favoriteMusic = "ロック";
const job = "エンジニア";

console.log("好きな音楽ジャンル：" + favoriteMusic);
console.log("職業：" + job);
JavaScript

このテンプレートをベースに、

  • 名前・年齢・趣味・好きな食べ物を自分仕様に変える
  • 新しい項目（好きなゲーム、よく行く場所など）を追加する
  • 変数名を工夫してみる

といった遊び方をすると、変数の扱いに自然と慣れていきます。

セキュリティ視点のひとこと

まだ自己紹介レベルのデータですが、セキュリティの観点からも「何をコードに書くか」は少し意識しておくと良いです。

  • パスワードやクレジットカード番号など、機密情報をコードに直接書かない
  • 公開される可能性がある場所（共有するコードなど）には、個人情報を入れすぎない

今は練習なので問題ありませんが、「コードに書いたものは他人の目に触れる可能性がある」という感覚を早めに持っておくと、後々安全なコードを書きやすくなります。

Day 2のまとめ ― 「自分の情報をコードで表現する」第一歩

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

  • 変数は「値をしまっておく箱」で、名前（変数名）と中身（値）をセットで考える
  • let は中身を変える可能性がある変数、const は中身を変えない変数
  • = は「代入」の記号で、値を箱に入れるときに使う
  • 変数名にはルールがあり、意味が伝わる名前をつけることが大事
  • ミニ課題として、名前・年齢・趣味・好きな食べ物を変数に入れて表示した

昨日の「ただ文字を表示する」から一歩進んで、「自分の情報をコードで表現する」ことができるようになりました。 この感覚は、今後の学習で「ユーザーの情報」「商品情報」「設定値」などを扱うときにも、そのまま生きてきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました