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

DAY 2：constとlet（前半）

DAY 2の前半では、「変数とは何か」「constとletは何が違うのか」「再代入とは何か」「命名規則とキャメルケース」という、モダンJavaScriptの超重要な基礎をじっくり固めていきます。 ここを丁寧に押さえておくと、Reactコンポーネントの中で値を扱うときに迷いにくくなり、バグもぐっと減っていきます。

変数とは

「値に名前をつけて、あとで使えるようにする仕組み」

プログラムの中では、数値・文字列・計算結果など、さまざまな「値」を扱います。 しかし、値をそのまま書いているだけだと、どこかで使いたいときに毎回同じ式を書かなければならず、とても不便です。

そこで登場するのが変数です。 変数は、値に名前をつけて「あとで使えるようにする入れ物」のようなものだとイメージすると分かりやすいです。

const userName = '山田';
console.log(userName); // 山田

const userName = '山田';
console.log(userName); // 山田

ここでは、

• userName という「名前」をつけた変数を作り、
• '山田' という文字列をその変数に入れ、
• console.log(userName) でその値を取り出して使っています。

「値に名前をつけることで、あとから何度でも使えるようにする」——これが変数の基本的な役割です。

constとは

「再代入しない変数」を表す宣言キーワード

const は 「一度値を入れたら、あとから別の値を入れ直せない変数」 を宣言するときに使います。 名前の由来は「Constant（定数）」ですが、実務では「再代入しない変数」と理解したほうがイメージしやすいです。

基本的な使い方

const price = 1200;
const taxRate = 0.1;

console.log(price);    // 1200
console.log(taxRate);  // 0.1

const price = 1200;
const taxRate = 0.1;

console.log(price);    // 1200
console.log(taxRate);  // 0.1

ここでのポイントは、

• const で宣言した変数は、宣言と同時に値を入れる必要があること
• その後、同じ変数に別の値を入れ直すこと（再代入）ができないこと

です。

constに再代入するとどうなるか

const score = 80;
score = 90; // ← ここでエラー

const score = 80;
score = 90; // ← ここでエラー

このコードを実行すると、次のようなエラーが出ます。

TypeError: Assignment to constant variable.

これは、「const で宣言した変数に再代入しようとしたので、JavaScriptが止めてくれた」という意味です。

なぜ「とりあえずconst」が推奨されるのか

モダンなJavaScriptでは、基本的にすべて const で書けないかをまず考え、どうしても値を変える必要があるときだけ let を使うというスタイルが推奨されています。

理由はシンプルで、

• 「この変数は途中で変わらない」とコードから読み取れると、安心して読める
• 間違って値を書き換えたときに、すぐエラーになって気づける
• 状態の変化が少ないほど、バグが入り込みにくくなる

からです。

「とりあえず const、変わるものだけ let」というルールは、初心者でもすぐに実践できて、コードの安全性を一気に高めてくれる強力な指針です。

letとは

「あとから値を書き換える変数」を表す宣言キーワード

let は、あとから値を書き換える必要がある変数を宣言するときに使います。 カウンター、合計値、フラグ（ON/OFF）など、「時間とともに変化する値」に向いています。

基本的な使い方

let count = 0;

console.log(count); // 0

count = count + 1;
console.log(count); // 1

count = count + 1;
console.log(count); // 2

let count = 0;

console.log(count); // 0

count = count + 1;
console.log(count); // 1

count = count + 1;
console.log(count); // 2

ここでは、

• 最初に 0 を入れておき、
• その後 count = count + 1 で値を更新し続けています。

let で宣言した変数は、再代入が許されるため、こうした「変化する値」を扱うのに向いています。

例：合計値を計算する

let totalPrice = 0;
const prices = [1200, 800, 500];

for (let i = 0; i < prices.length; i++) {
  totalPrice = totalPrice + prices[i];
}

console.log(totalPrice); // 2500

let totalPrice = 0;
const prices = [1200, 800, 500];

for (let i = 0; i < prices.length; i++) {
  totalPrice = totalPrice + prices[i];
}

console.log(totalPrice); // 2500

この例では、

• totalPrice が「合計値」という“変化する状態”を表すので let
• prices は「変わらない配列」として扱うので const

というように、役割に応じて const と let を使い分けています。

再代入とは

「同じ変数に、あとから別の値を入れ直すこと」

再代入とは、すでに値が入っている変数に対して、あとから別の値を入れ直すことです。

let quantity = 2;
console.log(quantity); // 2

quantity = 3;          // ← ここが再代入
console.log(quantity); // 3

let quantity = 2;
console.log(quantity); // 2

quantity = 3;          // ← ここが再代入
console.log(quantity); // 3

let ではこのような再代入ができますが、const ではできません。

constとletの再代入の違い

const itemName = 'ノート';
let quantity = 2;

console.log(itemName);           // ノート
console.log(quantity);           // 2
console.log(180 * quantity);     // 360

quantity = 3;                    // letなので再代入OK
console.log(180 * quantity);     // 540

// itemName = 'ペン';           // constなので再代入NG（エラー）

const itemName = 'ノート';
let quantity = 2;

console.log(itemName);           // ノート
console.log(quantity);           // 2
console.log(180 * quantity);     // 360

quantity = 3;                    // letなので再代入OK
console.log(180 * quantity);     // 540

// itemName = 'ペン';           // constなので再代入NG（エラー）

このように、

• 変わらない値 → const
• 変わる値 → let

と分けることで、「どの変数が途中で変わるのか」がコードから一目で分かるようになります。

再代入を許す変数を最小限にすることが、バグの少ないコードを書くうえで非常に重要なポイントです。

命名規則

「何を表す値なのかが分かる名前」をつける

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

良い例・避けたい例

• 良い例：userName → 「ユーザーの名前」であることが分かる
• 良い例：totalPrice → 「合計金額」であることが分かる
• 良い例：isLoggedIn → 「ログインしているかどうか」の真偽値だと分かる
• 避けたい例：x, y, data, value → 何を表しているのかが分からない
• 避けたい例：price2, flag → 役割が曖昧で、後から読んだときに意味を思い出しにくい

「未来の自分や他の人が読んだときに、説明なしで意味が分かる名前」を目指すと、コードの読みやすさが一気に上がります。

変数名に使える文字

JavaScriptでは、変数名に使える文字にもルールがあります。

• 先頭に使えるもの：英字（a〜z, A〜Z）、$、_
• 先頭に使えないもの：数字（1name などはエラー）
• 予約語（let, class, return など）は変数名に使えない

例：

const name = 'Taro';      // OK
const $price = 1200;      // OK
const _privateValue = 10; // OK

// const 1user = 'NG';    // 先頭が数字なのでエラー
// const let = 5;         // 予約語なのでエラー

const name = 'Taro';      // OK
const $price = 1200;      // OK
const _privateValue = 10; // OK

// const 1user = 'NG';    // 先頭が数字なのでエラー
// const let = 5;         // 予約語なのでエラー

キャメルケース

「単語の区切りを大文字で表現する」書き方

JavaScriptでは、複数の単語からなる変数名にキャメルケース（camelCase）という書き方を使うのが一般的です。

キャメルケースのルール

• 先頭の単語は 小文字 で始める
• 2語目以降の先頭を 大文字 にする

例：

const firstName = 'Taro';
const totalPrice = 1500;
const maxCount = 10;
const isLoggedIn = true;

const firstName = 'Taro';
const totalPrice = 1500;
const maxCount = 10;
const isLoggedIn = true;

このように書くことで、

• 単語の区切りが目で見て分かりやすくなる
• JavaScriptの「文化」に沿った書き方になる

というメリットがあります。

よくあるスタイルとの違い

他の言語では、別のスタイルが使われることもあります。

• スネークケース：first_name（Pythonなど）
• パスカルケース：UserProfile（クラス名などに使われることが多い）

JavaScriptでは、

• 変数・関数 → camelCase
• クラス → PascalCase

というスタイルがよく使われます。

DAY 2（前半）のまとめと後半へのつながり

DAY 2の前半では、

• 変数とは「値に名前をつけて、あとで使えるようにする仕組み」であること
• const は「再代入しない変数」を宣言するためのキーワードであること
• let は「あとから値を書き換える変数」を宣言するためのキーワードであること
• 再代入とは、同じ変数に別の値を入れ直すことであること
• 命名規則として、意味のある名前をつけることが重要であること
• キャメルケースがJavaScriptの標準的な変数名スタイルであること

を確認しました。

後半では、

• const と let の「スコープ（有効範囲）」の違い
• var がなぜモダンJavaScriptでは避けられるのか
• 実際のReactコンポーネントの中で const と let をどう使い分けるか

といった内容を、さらに具体的なコード例とテンプレートを交えながら解説していきます。 「とりあえず const、変わるものだけ let、意味のある名前をキャメルケースで」という3つの軸を頭の片隅に置きながら、DAY 2後半へ進んでいきましょう。

DAY 2：constとlet（後半）

DAY 2の後半では、前半で学んだ「変数」「const」「let」「再代入」「命名規則」「キャメルケース」を、もう一歩“実務寄り”の視点で深掘りしていきます。 特に、「どの場面でconstを使い、どの場面でletを使うのか」をReactのコードに近い形でイメージできるようになることを目標にします。

変数とは（「状態」を表すという視点）

値だけでなく「状態」を表すものとして考える

前半では、「値に名前をつけて、あとで使えるようにする入れ物」として変数を説明しました。 後半では、もう一歩進んで、変数を「状態（state）を表すもの」として考えてみます。

let isLoggedIn = false;

console.log(isLoggedIn); // false

isLoggedIn = true;       // ログインしたので状態が変わる
console.log(isLoggedIn); // true

let isLoggedIn = false;

console.log(isLoggedIn); // false

isLoggedIn = true;       // ログインしたので状態が変わる
console.log(isLoggedIn); // true

ここで isLoggedIn は、「ログインしているかどうか」という状態を表しています。 Reactでは、この「状態」をコンポーネントの中で扱い、画面の表示を切り替えることが非常に多いです。

const（「変わらないもの」をはっきりさせる）

変わらないものにconstを使うと、コードが安心して読める

const は「再代入しない変数」を宣言するためのキーワードでしたが、後半では「変わらないものをはっきりさせるための道具」として意識してみます。

const TAX_RATE = 0.1;
const SHIPPING_FEE = 500;

const price = 1200;
const total = price + price * TAX_RATE + SHIPPING_FEE;

console.log(total);

const TAX_RATE = 0.1;
const SHIPPING_FEE = 500;

const price = 1200;
const total = price + price * TAX_RATE + SHIPPING_FEE;

console.log(total);

ここでは、

• TAX_RATE（税率）
• SHIPPING_FEE（送料）
• price（商品の価格）

など、「途中で変わる必要がない値」をすべて const で宣言しています。

こうしておくと、コードを読む人は「これらの値は途中で変わらないんだな」と安心して読み進めることができます。

Reactコンポーネント内でのconstの使い方

Reactコンポーネントの中でも、const は頻繁に登場します。

function PriceInfo() {
  const TAX_RATE = 0.1;
  const price = 1200;
  const total = price + price * TAX_RATE;

  return (
    <div>
      <p>商品価格: {price}円</p>
      <p>税込価格: {total}円</p>
    </div>
  );
}

function PriceInfo() {
  const TAX_RATE = 0.1;
  const price = 1200;
  const total = price + price * TAX_RATE;

  return (
    <div>
      <p>商品価格: {price}円</p>
      <p>税込価格: {total}円</p>
    </div>
  );
}

ここでのポイントは、

• コンポーネントの中で使う「計算に必要な値」を const で宣言していること
• それらの値が途中で変わる必要がないので、let ではなく const を選んでいること

です。 Reactでは、「表示に使う固定値」「計算結果」「propsから受け取った値」など、再代入しないものは基本的にすべて const で書くと覚えておくとよいです。

let（「変化するもの」にだけ使う）

変化するものを最小限にする

let は「あとから値を書き換える変数」を宣言するためのキーワードでした。 後半では、「変化するものを最小限にする」という視点で let を見ていきます。

let remaining = 3;

console.log(`残り回数: ${remaining}`);

remaining = remaining - 1;
console.log(`残り回数: ${remaining}`);

remaining = remaining - 1;
console.log(`残り回数: ${remaining}`);

let remaining = 3;

console.log(`残り回数: ${remaining}`);

remaining = remaining - 1;
console.log(`残り回数: ${remaining}`);

remaining = remaining - 1;
console.log(`残り回数: ${remaining}`);

ここで remaining は、「残り回数」という“変化する状態”を表しています。 このように、「時間とともに変わるもの」「ユーザーの操作によって変わるもの」にだけ let を使うのが理想です。

Reactの外側でのletと、Reactの内側での状態

Reactコンポーネントの中では、状態の変化は useState などのフックで扱うことが多く、let を直接使う場面はそれほど多くありません。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 状態はuseStateで管理

  const handleClick = () => {
    setCount(count + 1); // ここで状態を更新
  };

  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <p>現在のカウント: {count}</p>
    </div>
  );
}

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 状態はuseStateで管理

  const handleClick = () => {
    setCount(count + 1); // ここで状態を更新
  };

  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <p>現在のカウント: {count}</p>
    </div>
  );
}

このように、Reactの中では「変化するもの」は useState に任せることが多く、 通常の変数はほとんど const で書く、というスタイルになります。

一方で、Reactの外側（ユーティリティ関数や単純なスクリプト）では、カウンターや合計値などを let で扱う場面もあります。 「変化するものを最小限にする」という意識を持つことで、let の使いどころが自然に絞られていきます。

再代入（「変化させる責任」を意識する）

再代入は「その変数の意味を変える行為」

再代入とは、同じ変数に別の値を入れ直すことでした。 後半では、「再代入はその変数の意味を変える行為だ」という視点で考えてみます。

let status = '準備中';
console.log(status); // 準備中

status = '実行中';
console.log(status); // 実行中

status = '完了';
console.log(status); // 完了

let status = '準備中';
console.log(status); // 準備中

status = '実行中';
console.log(status); // 実行中

status = '完了';
console.log(status); // 完了

ここで status は、「処理の状態」を表しています。 再代入によって、「準備中 → 実行中 → 完了」と意味が変わっていきます。

再代入を乱用しないためのコツ

再代入を許す変数が多すぎると、次のような問題が起きやすくなります。

• どこで値が変わったのか追いづらい
• 意図しないタイミングで値が書き換えられてバグになる
• 「この変数は今何を表しているのか」が分かりにくくなる

これを防ぐために、

• まずは const で書いてみる
• どうしても途中で意味を変える必要があるときだけ let にする

という順番で考えると、再代入を乱用せずに済みます。

命名規則（「未来の自分へのメッセージ」としての名前）

名前は「コードを読む人への説明」

命名規則は、単なるルールではなく、未来の自分や他の開発者へのメッセージだと考えるとしっくりきます。

const userName = 'Taro';
const totalPrice = 1500;
const isLoggedIn = true;

const userName = 'Taro';
const totalPrice = 1500;
const isLoggedIn = true;

これらの名前は、

• userName → 「ユーザーの名前」
• totalPrice → 「合計金額」
• isLoggedIn → 「ログインしているかどうか」

という意味が、説明なしでも伝わります。

一方で、次のような名前は意味が曖昧です。

const data = 1500;
const value = true;
const flag = false;

const data = 1500;
const value = true;
const flag = false;

これらは、「何のデータなのか」「何の値なのか」「何のフラグなのか」が分かりません。 命名規則の本質は、「変数名だけで役割が分かるようにすること」です。

真偽値（true/false）の命名パターン

真偽値（true / false）を扱う変数には、次のような命名パターンがよく使われます。

• isLoggedIn
• hasError
• isVisible
• isActive

先頭に is や has をつけることで、「〜かどうか」「〜を持っているかどうか」という意味が明確になります。

キャメルケース（「読みやすさ」を支えるスタイル）

単語の区切りを大文字で表現する

キャメルケース（camelCase）は、複数の単語からなる変数名を読みやすくするためのスタイルでした。 後半では、もう少し具体的なパターンを見ていきます。

const userName = 'Taro';
const userEmailAddress = 'taro@example.com';
const maxLoginAttempts = 3;
const totalItemCount = 10;

const userName = 'Taro';
const userEmailAddress = 'taro@example.com';
const maxLoginAttempts = 3;
const totalItemCount = 10;

ここでのポイントは、

• 先頭の単語は小文字で始める
• 2語目以降の先頭を大文字にする
• 単語の区切りが目で見て分かる

という点です。

Reactコンポーネント名との違い

Reactコンポーネント名は、先頭も大文字にする（PascalCase）のが一般的です。

function UserProfile() {
  // ...
}

function CourseList() {
  // ...
}

function UserProfile() {
  // ...
}

function CourseList() {
  // ...
}

• 変数・関数 → camelCase（例：userName, getUserName）
• コンポーネント → PascalCase（例：UserProfile, CourseList）

という使い分けを覚えておくと、Reactのコードがぐっと読みやすくなります。

DAY 2（後半）のまとめと次へのつながり

DAY 2の後半では、

• 変数を「状態」を表すものとして捉えること
• const は「変わらないもの」をはっきりさせるための道具であること
• let は「変化するもの」にだけ使うべきであり、変化するものを最小限にすることが大事であること
• 再代入は「その変数の意味を変える行為」であり、乱用するとバグの原因になること
• 命名規則は「未来の自分や他の人へのメッセージ」であり、意味のある名前をつけることが重要であること
• キャメルケースとPascalCaseの使い分けが、JavaScriptとReactのコードの読みやすさを支えていること

を確認しました。