カテゴリ: JavaScript 更新日: 2025/11/26

JavaScriptの変数とは?初心者向けに定義方法とよく使うデータ型を解説

JavaScriptの変数とは?初心者向けに定義方法とよく使うデータ型を解説
JavaScriptの変数とは?初心者向けに定義方法とよく使うデータ型を解説

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで“変数”ってよく出てくるんですけど、それって何なんですか?」

先生

「変数は、プログラムの中でデータを一時的にしまっておく箱のようなものだよ。数字や文字など、いろいろな情報を入れておけるんだ。」

生徒

「その箱はどうやって作るんですか?特別なルールがあるんですか?」

先生

「あるよ!JavaScriptではletconstなどを使って変数を作るんだ。それぞれの意味や使い方を一緒に見ていこう!」

1. 変数とは?JavaScriptでの役割

1. 変数とは?JavaScriptでの役割
1. 変数とは?JavaScriptでの役割

JavaScriptにおける変数とは、数字・文字・計算結果などのデータを一時的に保存するための名前付きの入れ物です。

例えば、温度を表すデータをtemperatureという名前で管理すれば、あとからそのデータを呼び出して使うことができます。

2. 変数を定義する3つのキーワード

2. 変数を定義する3つのキーワード
2. 変数を定義する3つのキーワード

JavaScriptで変数を作るには、以下の3つのキーワードのどれかを使います。

  • var:古い書き方。初心者は使わなくてもOK。
  • let:現在よく使われている変数の定義方法。
  • const:定数(中身をあとから変えない)を作るときに使う。

通常はletconstを使えば十分です。

3. 変数の基本的な書き方

3. 変数の基本的な書き方
3. 変数の基本的な書き方

JavaScriptの変数は次のように書きます。


let name = "たろう";
const age = 20;

letで作った変数nameには文字列「たろう」、constで作ったageには数字20が入っています。

4. 変数の中身を使うには?

4. 変数の中身を使うには?
4. 変数の中身を使うには?

変数の中身を表示したいときは、console.log()を使います。


let message = "こんにちは";
console.log(message);

これでコンソール画面に「こんにちは」と表示されます。

5. よく使うデータ型(型)とは?

5. よく使うデータ型(型)とは?
5. よく使うデータ型(型)とは?

変数に入れるデータには種類(データ型)があります。JavaScriptでよく使われるのは以下の3つです。

  • 文字列(String):文章や文字。「"」や「'」で囲む
  • 数値(Number):整数や小数
  • 真偽値(Boolean)true(正しい)、false(間違い)

6. 文字列(String)の例

6. 文字列(String)の例
6. 文字列(String)の例

let fruit = "りんご";

これは「りんご」という文字列を変数に入れている例です。文字列は必ず " や ' で囲む必要があります。

7. 数値(Number)の例

7. 数値(Number)の例
7. 数値(Number)の例

let price = 150;

数値は「"」や「'」では囲みません。囲んでしまうと文字列扱いになるので注意しましょう。

8. 真偽値(Boolean)の例

8. 真偽値(Boolean)の例
8. 真偽値(Boolean)の例

let isOnline = true;
let isSleeping = false;

truefalseは、「はい・いいえ」や「オン・オフ」などを表すときに使います。

9. 変数名の付け方のルールとコツ

9. 変数名の付け方のルールとコツ
9. 変数名の付け方のルールとコツ

変数名をつけるときには次のルールがあります:

  • 英文字(a〜z、A〜Z)、数字(0〜9)、アンダースコア(_)、ドル記号($)が使える
  • 数字から始めてはいけない(例:1nameはNG)
  • キーワード(let、ifなど)は使えない

また、何を入れている変数かがわかる名前にすることが大切です。

まとめ

まとめ
まとめ

JavaScriptの変数について改めて振り返ると、変数はプログラムの中で欠かせない大切な要素であり、数字や文字列、真偽値といったさまざまなデータを扱うための基本的な機能であることがよく分かります。変数は「データを保存するための箱」とよく例えられますが、この表現は非常に的確で、実際にプログラムを書くときにも「この変数にはどんな情報が入っているか」を意識することが理解を深める鍵になります。JavaScriptでは、変数を作るために使用するキーワードとして letconst が主に使われ、var は過去の書き方として扱われています。特に、const は一度値を設定したら変更できないため、固定した値を扱うときに非常に便利です。 また、変数の中身として扱われるデータ型についても理解しておくことが重要です。文字列(String)、数値(Number)、真偽値(Boolean)という基本的な型は、プログラム中で最もよく使われる要素であり、どれも書き方に特徴があります。例えば、文字列は必ず " "' ' で囲む必要があり、数値は囲まずにそのまま書きます。そして真偽値は true または false という特別な値であり、条件分岐や状態管理のために使われます。これらの使い分けを正しく理解することで、より自然にコードを書くことができるようになります。 さらに、変数名を付けるときのルールもJavaScriptにおいて非常に重要です。数字から始めないこと、キーワードを使わないこと、意味のある名前にすることなど、基本的なルールを守ることで読みやすく、ミスの少ないコードを書くことができます。プログラムは自分だけでなく他の人が読むことも多いため、分かりやすい名前を付ける習慣は後々の開発でも大きく役立つポイントです。 以下では、記事中で学んだ内容を踏まえたサンプルプログラムを紹介し、変数・データ型・表示方法の流れをもう一度確認できるようにしています。

サンプルプログラムで学ぶ変数とデータ型


// 文字列・数値・真偽値を使った例
let userName = "たろう";
const userAge = 20;
let isActive = true;

// 変数を使ってメッセージを表示
console.log("名前:" + userName);
console.log("年齢:" + userAge);
console.log("アクティブ状態:" + isActive);

// 変数の更新(letなら更新できる)
userName = "はなこ";
console.log("更新後の名前:" + userName);

このコードでは、文字列・数値・真偽値の三つの基本データ型がそれぞれ変数に保存され、console.log を使って表示されます。また、let で作った変数は値を変更できますが、const で作った変数は変更できないため、固定した値を扱うときに適しています。JavaScriptにおける変数の扱いはプログラミングの基礎そのものであり、この記事で学んだ内容を理解しておくことで、今後の学習でも大きな助けになります。変数はデータを保存するだけでなく、計算、条件判定、関数との連携などさまざまな場面で使われるため、早いうちにしっかり慣れておくとスムーズにレベルアップできます。 また、変数名には意味を持たせることも大切で、ただ「a」「b」と付けるよりも「price」「message」「isOnline」など、入っている情報がひと目で伝わる名前を付けることで、読みやすいコードに近づきます。実際の開発では他の人がコードを読む場面も多いため、こうした小さな気配りが大きな価値につながります。 JavaScriptの変数はシンプルに見えますが、扱い方やルールを正しく理解することで、より複雑なプログラムへと進んだときにも迷わず使えるようになります。今回の記事で紹介した基礎知識を繰り返し練習しながら、変数の理解を深めていきましょう。

先生と生徒の振り返り会話

生徒

「変数ってただの箱だと思っていたけど、データ型とか名前の付け方とか、思っていたより奥が深いんですね!」

先生

「そうだね。変数はプログラムの基礎だからこそ、丁寧に理解しておくと後がすごく楽になるんだよ。」

生徒

「特に let と const の使い分けはしっかり覚えておいた方が良さそうですね。定数は変えられないっていう意味もよく分かりました!」

先生

「うん、そこはとても大事なポイントだよ。どんなデータが変わるのか、どんな値が固定なのかを意識して変数を作ると、理解がぐっと深まるよ。」

生徒

「今日のまとめを読んで、変数がどう使われているのかイメージがつきました!自分でもたくさん書いて練習してみます!」

先生

「その調子!変数の使い方が分かると、条件分岐や関数もどんどん理解しやすくなるから、次のステップも頑張ってみようね。」

関連記事:
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう