モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 2：constとlet

React 60日で身につけるReact
2026.08.20
スポンサーリンク
スポンサーリンク
  1. Day 2：constとletで「変数の基本」をしっかり押さえる
  2. 変数とは：データを入れておく「名前付きの箱」
    1. 変数のイメージ
    2. 変数を使う簡単な例
  3. constとは：再代入できない「固定の箱」
    1. constの基本的な意味
    2. constは「中身が絶対に不変」ではない
  4. letとは：値をあとから変えられる「可変の箱」
    1. letの基本的な意味
    2. letとconstの使い分けの基本方針
  5. 再代入とは：変数の中身を「別の値に入れ替える」こと
    1. 再代入のイメージ
    2. constとletの再代入の違い
  6. 命名規則とは：変数名の「ルール」と「お作法」
    1. JavaScriptの基本的な命名ルール
  7. キャメルケースとは：単語の区切りを「大文字のこぶ」で表す書き方
    1. キャメルケースの基本
    2. なぜキャメルケースが大事なのか
  8. Day 2のまとめ：constとletで「意図の見えるコード」を書く
  9. Day 2：constとletで「変数」と仲良くなる
  10. 変数とは：データをしまっておく「名前付きの箱」
    1. 変数のイメージをつかむ
  11. constとは：再代入できない「固定の箱」
    1. constの基本
    2. 「中身」と「変数そのもの」の違い
  12. letとは：あとから値を変えられる「可変の箱」
    1. letの基本
    2. constとletの使い分けの基本方針
  13. 再代入とは：変数の中身を「別の値に入れ替える」こと
    1. 再代入のイメージ
    2. constとletの再代入の違い
  14. 命名規則とは：変数名の「ルール」と「お作法」
    1. 文法上のルール
    2. 慣習的なルール（お作法）
  15. キャメルケースとは：単語の区切りを「大文字のこぶ」で表す書き方
    1. キャメルケースの基本
    2. キャメルケースが大事な理由
  16. ミニ課題：自己紹介データを変数で管理する
    1. 自己紹介テンプレートコード
    2. 課題のポイント
  17. Day 2のまとめ

Day 2：constとletで「変数の基本」をしっかり押さえる

JavaScriptでプログラムを書くうえで、いちばんよく登場するのが「変数」です。 Day 2では、この変数をモダンJavaScriptらしく扱うためのキーワード const と let を、丁寧にかみ砕いて解説していきます。

「再代入って何？」「varはもう使わないって本当？」といったモヤモヤも、ここで一気に整理してしまいましょう。

変数とは：データを入れておく「名前付きの箱」

変数のイメージ

変数は、値（データ）を入れておくための“箱”に名前を付けたものだとイメージすると分かりやすいです。

  • 名前：userName
  • 中身："山田太郎"
  • 名前：age
  • 中身：28

この「箱」に入っている値を、あとから取り出したり、別の値に入れ替えたりしながらプログラムを動かしていきます。

変数を使う簡単な例

// 名前を入れておく箱（変数）を用意します
let userName = "山田太郎";

// 年齢を入れておく箱を用意します
let age = 28;

// 変数の中身を使ってメッセージを表示します
console.log("ユーザー名：" + userName);
console.log("年齢：" + age);
JavaScript

ここでは let を使っていますが、モダンJavaScriptでは「変数をどう扱いたいか」によって const と let を使い分けるのが基本スタイルになります。

constとは：再代入できない「固定の箱」

constの基本的な意味

const は「constant（定数）」の略で、一度代入したら“再代入できない”変数を作るためのキーワードです。

「この値は途中で変わらないよ」という意図を、コードでハッキリ示すために使います。

// 消費税率のように、基本的に変わらない値は const で宣言します
const taxRate = 0.1;

// メッセージも変えないのであれば const でOKです
const welcomeMessage = "ようこそ、React入門コースへ！";

console.log(taxRate);        // 0.1
console.log(welcomeMessage); // ようこそ、React入門コースへ！
JavaScript

constは「中身が絶対に不変」ではない

ここでひとつ、初心者がよく誤解しやすいポイントがあります。

constは「変数そのものを別の値に付け替えられない」という意味であって、 オブジェクトや配列の“中身”まで完全に不変になるわけではありません。

たとえば、配列を const で宣言しても、配列の要素を追加することはできます。

// ユーザーのリストを表す配列を const で宣言します
const users = ["Alice", "Bob"];

// 配列の「中身」は変更できます（要素を追加）
users.push("Charlie");

console.log(users); // ["Alice", "Bob", "Charlie"]

// ただし、変数そのものを別の配列に置き換えることはできません
// users = ["Dave"]; // ← これはエラーになります
JavaScript
  • OK：users.push("Charlie") のように、中身を操作すること
  • NG：users = ["Dave"] のように、変数自体を別の値に差し替えること

この違いを早めに理解しておくと、Reactで状態管理をするときにも混乱しにくくなります。

letとは：値をあとから変えられる「可変の箱」

letの基本的な意味

let は、「あとから値を変える可能性がある変数」を宣言するときに使います。 カウンター、フラグ、ループのインデックスなど、「変化することが前提」の値に向いています。

// カウンターを表す変数。あとから増やしたり減らしたりするので let を使います
let count = 0;

console.log("初期値：" + count); // 0

// 1回イベントが発生したので、カウントを1増やします
count = count + 1;

console.log("イベント後：" + count); // 1
JavaScript

letとconstの使い分けの基本方針

モダンJavaScriptでは、次のような考え方が推奨されています。

  • 基本は const を使う 「この値は変えないつもりだ」というものは、まず const で宣言する。
  • どうしても値を変える必要があるときだけ let にする カウンター、ループ、状態の更新など、明らかに変化させる用途のときに let を選ぶ。

この「まず const、必要なら let」というスタイルは、 意図がコードにハッキリ表れるので、バグを減らしやすいというメリットがあります。

再代入とは：変数の中身を「別の値に入れ替える」こと

再代入のイメージ

再代入とは、すでに値が入っている変数に、別の値をもう一度代入することです。

let message = "こんにちは";

// ここで一度、message には「こんにちは」が入っています
console.log(message); // こんにちは

// 再代入：中身を別の文字列に入れ替えます
message = "こんばんは";

console.log(message); // こんばんは
JavaScript
  • 最初の代入：let message = "こんにちは";
  • 再代入：message = "こんばんは";

constとletの再代入の違い

// constで宣言した変数
const siteName = "React入門サイト";

// letで宣言した変数
let currentPage = "トップページ";

// const変数を再代入しようとするとエラーになります
// siteName = "JavaScript入門サイト"; // ← これはエラー

// let変数は再代入できます
currentPage = "記事一覧ページ";

console.log(siteName);    // React入門サイト
console.log(currentPage); // 記事一覧ページ
JavaScript
  • const：再代入できない（「この変数は変えない」という宣言）
  • let：再代入できる（「この変数は変わる可能性がある」という宣言）

この違いを意識して使い分けることで、 「うっかり値を上書きしてしまった」という事故を防ぎやすくなります。

命名規則とは：変数名の「ルール」と「お作法」

JavaScriptの基本的な命名ルール

JavaScriptには、変数名に関する文法上のルールと、慣習的なルール（お作法）があります。

文法上のルール（守らないとエラーになるもの）

  • 使える文字：英字（a〜z, A〜Z）、数字（0〜9）、_（アンダースコア）、$（ドル記号）
  • 先頭に使える文字：英字、_、$（数字は先頭に使えません）
  • 予約語（let, const, if, else, function など）は変数名に使えません
  • 大文字・小文字は区別されます（userName と username は別物）
// 有効な例
let myVariable = 10;
let _name = "John";
let $count = 5;

// 無効な例（コメントに理由を書いています）
// let 1stPlace = "Invalid"; // 先頭に数字は使えません
// let my-variable = 3;      // ハイフンは使えません
// let if = true;            // 予約語は使えません
JavaScript

慣習的なルール（守ると読みやすくなるもの）

  • 意味のある名前を付ける（userAge や totalPrice など）
  • 変数・関数にはキャメルケースを使う
  • 定数（変えない値）は大文字＋アンダースコアで書くことも多い（MAX_COUNT など）

キャメルケースとは：単語の区切りを「大文字のこぶ」で表す書き方

キャメルケースの基本

キャメルケース（camelCase）とは、 単語の区切りを「途中の単語の先頭を大文字にする」ことで表現する書き方です。

  • userName
  • totalPrice
  • firstName
  • backgroundColor

最初の単語は小文字、2つ目以降の単語の先頭を大文字にするのがポイントです。

// キャメルケースで書かれた変数名の例
let userName = "田中";
let totalPrice = 1500;

console.log(userName);   // 田中
console.log(totalPrice); // 1500
JavaScript

「大文字の部分がラクダのこぶに見える」ことから、camel（ラクダ）という名前が付いています。

なぜキャメルケースが大事なのか

JavaScriptでは、変数や関数の名前にキャメルケースを使うのが一般的です。

  • 読みやすくなる：totalPrice のほうが totalprice よりも単語の区切りが分かりやすい
  • 意味が伝わりやすい：userAge のように、何を表している変数なのかが一目で分かる
  • チーム開発で混乱しにくい：みんなが同じルールで書くことで、コード全体の統一感が出る

たとえば、次の2つを比べてみると違いがよく分かります。

// あまりよくない例（意味が分かりにくい）
let a = 100;

// 良い例（何を表しているかが分かる）
let userAge = 100;

console.log(a);       // 100（何の100？となりがち）
console.log(userAge); // 100（ユーザーの年齢だと分かる）
JavaScript

「あとで自分が読み返したとき」「他の人が読んだとき」に分かりやすい名前を付けることは、 プログラミングの上達に直結する大事な習慣です。

Day 2のまとめ：constとletで「意図の見えるコード」を書く

Day 2で押さえておきたいポイントを、最後に整理しておきます。

  • 変数とは データを入れておく「名前付きの箱」。あとから中身を取り出したり、入れ替えたりできる。
  • constとは 一度代入したら再代入できない変数を作るキーワード。 「この値は変えない」という意図をコードで表現できる。
  • letとは 値をあとから変える可能性がある変数を作るキーワード。 カウンターや状態の更新など、「変化する値」に向いている。
  • 再代入とは すでに値が入っている変数に、別の値をもう一度代入すること。 constは再代入不可、letは再代入可。
  • 命名規則とは 変数名の文法上のルール（使える文字・予約語など）と、 読みやすさのための慣習（意味のある名前・キャメルケース・定数の大文字など）のこと。
  • キャメルケースとは userName や totalPrice のように、単語の区切りを大文字で表す書き方。 JavaScriptでは変数や関数にキャメルケースを使うのが一般的。

次のステップでは、これらの const / let を使いながら、 条件分岐やループの中での変数の扱い方、そしてReactでよく使う「状態（state）」とのつながりを見ていく流れに進んでいきます。

「基本は const、必要なときだけ let」 この合言葉を頭の片隅に置きつつ、少しずつコードを書いて慣れていってください。

Day 2：constとletで「変数」と仲良くなる

モダンJavaScriptの2日目は、プログラムの土台になる「変数」と、その宣言に使う const と let をじっくり見ていきます。 さらにミニ課題として「自己紹介データを変数で管理する」コードも一緒に作っていきます。

変数とは：データをしまっておく「名前付きの箱」

変数のイメージをつかむ

変数は、値（データ）を入れておく箱に名前を付けたものだと考えると分かりやすいです。

  • 名前：userName → 中身："山田太郎"
  • 名前：age → 中身：28

この箱に入れた値を、あとから取り出したり、別の値に入れ替えたりしながらプログラムを動かしていきます。

// 名前を入れておく箱（変数）を用意します
let userName = "山田太郎";

// 年齢を入れておく箱を用意します
let age = 28;

// 変数の中身を使ってメッセージを表示します
console.log("ユーザー名：" + userName);
console.log("年齢：" + age);
JavaScript

ここでは let を使っていますが、モダンJavaScriptでは const と let を使い分けるのが基本スタイルになります。

constとは：再代入できない「固定の箱」

constの基本

const は「constant（定数）」の略で、一度代入したら再代入できない変数を作るためのキーワードです。 「この値は途中で変わらないよ」という意図をコードでハッキリ示すために使います。

// 消費税率のように、基本的に変わらない値は const で宣言します
const taxRate = 0.1;

// ウェルカムメッセージも変えないのであれば const でOKです
const welcomeMessage = "ようこそ、React入門コースへ！";

console.log(taxRate);        // 0.1
console.log(welcomeMessage); // ようこそ、React入門コースへ！
JavaScript

「中身」と「変数そのもの」の違い

よくある誤解が、「constなら中身も一切変えられない」と思ってしまうことです。 正しくは、変数そのものを別の値に付け替えられないという意味であって、配列やオブジェクトの“中身”は変更できます。

// ユーザーのリストを表す配列を const で宣言します
const users = ["Alice", "Bob"];

// 配列の「中身」は変更できます（要素を追加）
users.push("Charlie");

console.log(users); // ["Alice", "Bob", "Charlie"]

// ただし、変数そのものを別の配列に置き換えることはできません
// users = ["Dave"]; // ← これはエラーになります
JavaScript
  • OK：users.push("Charlie") のように、中身を操作すること
  • NG：users = ["Dave"] のように、変数自体を別の値に差し替えること

letとは：あとから値を変えられる「可変の箱」

letの基本

let は、「あとから値を変える可能性がある変数」を宣言するときに使います。 カウンター、フラグ、ループのインデックスなど、「変化することが前提」の値に向いています。

// カウンターを表す変数。あとから増やしたり減らしたりするので let を使います
let count = 0;

console.log("初期値：" + count); // 0

// 1回イベントが発生したので、カウントを1増やします
count = count + 1;

console.log("イベント後：" + count); // 1
JavaScript

constとletの使い分けの基本方針

モダンJavaScriptでは、次のような考え方が推奨されています。

  • 基本は const を使う 「この値は変えないつもりだ」というものは、まず const で宣言する。
  • どうしても値を変える必要があるときだけ let にする カウンター、ループ、状態の更新など、明らかに変化させる用途のときに let を選ぶ。

この「まず const、必要なら let」というスタイルは、意図がコードにハッキリ表れるので、バグを減らしやすくなります。

再代入とは：変数の中身を「別の値に入れ替える」こと

再代入のイメージ

再代入とは、すでに値が入っている変数に、別の値をもう一度代入することです。

let message = "こんにちは";

// ここで一度、message には「こんにちは」が入っています
console.log(message); // こんにちは

// 再代入：中身を別の文字列に入れ替えます
message = "こんばんは";

console.log(message); // こんばんは
JavaScript
  • 最初の代入：let message = "こんにちは";
  • 再代入：message = "こんばんは";

constとletの再代入の違い

// constで宣言した変数
const siteName = "React入門サイト";

// letで宣言した変数
let currentPage = "トップページ";

// const変数を再代入しようとするとエラーになります
// siteName = "JavaScript入門サイト"; // ← これはエラー

// let変数は再代入できます
currentPage = "記事一覧ページ";

console.log(siteName);    // React入門サイト
console.log(currentPage); // 記事一覧ページ
JavaScript
  • const：再代入できない
  • let：再代入できる

この違いを意識して使い分けることで、「うっかり値を上書きしてしまった」という事故を防ぎやすくなります。

命名規則とは：変数名の「ルール」と「お作法」

文法上のルール

JavaScriptには、変数名に関する文法上のルールがあります。

  • 使える文字：英字（a〜z, A〜Z）、数字（0〜9）、_、$
  • 先頭に使える文字：英字、_、$（数字は先頭に使えません）
  • 予約語（let, const, function, if など）は変数名に使えません
  • 大文字・小文字は区別されます（userName と username は別物）
// 有効な例
let myVariable = 10;
let _name = "John";
let $count = 5;

// 無効な例（コメントに理由を書いています）
// let 1stPlace = "Invalid"; // 先頭に数字は使えません
// let my-variable = 3;      // ハイフンは使えません
// let if = true;            // 予約語は使えません
JavaScript

慣習的なルール（お作法）

文法上はOKでも、読みやすさのために守ったほうがよい「お作法」もあります。

  • 意味のある名前を付ける（userAge, totalPrice など）
  • 変数・関数にはキャメルケースを使う
  • 変えない値は大文字＋アンダースコアで書くことも多い（MAX_COUNT など）

キャメルケースとは：単語の区切りを「大文字のこぶ」で表す書き方

キャメルケースの基本

キャメルケース（camelCase）とは、 最初の単語を小文字で書き、2つ目以降の単語の先頭を大文字にする書き方です。

  • userName
  • totalPrice
  • firstName
  • backgroundColor
// キャメルケースで書かれた変数名の例
let userName = "田中";
let totalPrice = 1500;

console.log(userName);   // 田中
console.log(totalPrice); // 1500
JavaScript

キャメルケースが大事な理由

JavaScriptでは、変数や関数の名前にキャメルケースを使うのが標準的なスタイルです。

  • 単語の区切りが分かりやすくなる
  • 何を表している変数なのかが一目で分かる
  • チーム開発でもコードの統一感が出る
// あまりよくない例（意味が分かりにくい）
let a = 100;

// 良い例（何を表しているかが分かる）
let userAge = 100;

console.log(a);       // 100（何の100？となりがち）
console.log(userAge); // 100（ユーザーの年齢だと分かる）
JavaScript

ミニ課題：自己紹介データを変数で管理する

最後に、Day 2の内容を使って「自己紹介データ」をコードで表現してみます。 ここでは、変わらない情報は const、変わる可能性がある情報は let で宣言する、という意識を持って書いてみましょう。

自己紹介テンプレートコード

// --- 自己紹介データを変数で管理するミニ課題 ---
// ここでは、名前や年齢、趣味などを変数に入れて管理してみます。

// 1. 基本的に変わらない情報は const で宣言します
const userName = "山田太郎";        // 名前
const birthPlace = "東京都";        // 出身地
const favoriteLanguage = "JavaScript"; // 好きなプログラミング言語

// 2. 変わる可能性がある情報は let で宣言します
let age = 28;                       // 年齢（時間とともに変わります）
let currentJob = "Webデザイン勉強中"; // 現在の状態（職業や肩書き）
let hobby = "ゲーム";               // 趣味（変わるかもしれません）

// 3. 自己紹介メッセージを作って表示してみます
console.log("=== 自己紹介 ===");
console.log("名前：" + userName);
console.log("出身地：" + birthPlace);
console.log("年齢：" + age);
console.log("現在：" + currentJob);
console.log("趣味：" + hobby);
console.log("好きな言語：" + favoriteLanguage);

// 4. 時間が経って、状況が変わったと仮定して再代入してみます
age = 29;                           // 1年経ったので年齢が変わりました
currentJob = "フロントエンドエンジニア見習い"; // 状態が変わりました
hobby = "キャンプ";                // 趣味も変わりました

console.log("=== 1年後の自己紹介 ===");
console.log("名前：" + userName);   // constなので変わりません
console.log("出身地：" + birthPlace); // これも変わりません
console.log("年齢：" + age);        // letなので更新されています
console.log("現在：" + currentJob);
console.log("趣味：" + hobby);
console.log("好きな言語：" + favoriteLanguage);
JavaScript

課題のポイント

  • constで宣言したものは再代入できない 名前や出身地など、基本的に変わらない情報に向いています。
  • letで宣言したものは再代入できる 年齢や現在の肩書き、趣味など、時間とともに変わる可能性がある情報に向いています。
  • キャメルケースで意味のある名前を付ける userName, birthPlace, favoriteLanguage など、何を表しているかが分かる名前にすると読みやすくなります。

Day 2のまとめ

  • 変数は「名前付きの箱」で、データをしまっておくために使います。
  • constは「再代入できない箱」、letは「再代入できる箱」です。
  • 基本は const を使い、値が変わると分かっているものだけ let にするのがモダンな書き方です。
  • 命名規則とキャメルケースを意識すると、コードがぐっと読みやすくなります。
  • ミニ課題では、自己紹介データを const / let で管理しながら、再代入のイメージをつかみました。
次へ
12
スポンサーリンク
タイトルとURLをコピーしました