JavaScriptの変数とは?初心者向けに定義方法とよく使うデータ型を解説
生徒
「先生、JavaScriptで“変数”ってよく出てくるんですけど、それって何なんですか?」
先生
「変数は、プログラムの中でデータを一時的にしまっておく箱のようなものだよ。数字や文字など、いろいろな情報を入れておけるんだ。」
生徒
「その箱はどうやって作るんですか?特別なルールがあるんですか?」
先生
「あるよ!JavaScriptではletやconstなどを使って変数を作るんだ。それぞれの意味や使い方を一緒に見ていこう!」
1. 変数とは?JavaScriptでの役割
JavaScriptにおける変数とは、数字・文字・計算結果などのデータを一時的に保存するための名前付きの入れ物です。
例えば、温度を表すデータをtemperatureという名前で管理すれば、あとからそのデータを呼び出して使うことができます。
2. 変数を定義する3つのキーワード
JavaScriptで変数を作るには、以下の3つのキーワードのどれかを使います。
- var:古い書き方。初心者は使わなくてもOK。
- let:現在よく使われている変数の定義方法。
- const:定数(中身をあとから変えない)を作るときに使う。
通常はletかconstを使えば十分です。
3. 変数の基本的な書き方
JavaScriptの変数は次のように書きます。
let name = "たろう";
const age = 20;
letで作った変数nameには文字列「たろう」、constで作ったageには数字20が入っています。
4. 変数の中身を使うには?
変数の中身を表示したいときは、console.log()を使います。
let message = "こんにちは";
console.log(message);
これでコンソール画面に「こんにちは」と表示されます。
5. よく使うデータ型(型)とは?
変数に入れるデータには種類(データ型)があります。JavaScriptでよく使われるのは以下の3つです。
- 文字列(String):文章や文字。「"」や「'」で囲む
- 数値(Number):整数や小数
- 真偽値(Boolean):
true(正しい)、false(間違い)
6. 文字列(String)の例
let fruit = "りんご";
これは「りんご」という文字列を変数に入れている例です。文字列は必ず " や ' で囲む必要があります。
7. 数値(Number)の例
let price = 150;
数値は「"」や「'」では囲みません。囲んでしまうと文字列扱いになるので注意しましょう。
8. 真偽値(Boolean)の例
let isOnline = true;
let isSleeping = false;
trueやfalseは、「はい・いいえ」や「オン・オフ」などを表すときに使います。
9. 変数名の付け方のルールとコツ
変数名をつけるときには次のルールがあります:
- 英文字(a〜z、A〜Z)、数字(0〜9)、アンダースコア(_)、ドル記号($)が使える
- 数字から始めてはいけない(例:
1nameはNG) - キーワード(let、ifなど)は使えない
また、何を入れている変数かがわかる名前にすることが大切です。
まとめ
JavaScriptの変数について改めて振り返ると、変数はプログラムの中で欠かせない大切な要素であり、数字や文字列、真偽値といったさまざまなデータを扱うための基本的な機能であることがよく分かります。変数は「データを保存するための箱」とよく例えられますが、この表現は非常に的確で、実際にプログラムを書くときにも「この変数にはどんな情報が入っているか」を意識することが理解を深める鍵になります。JavaScriptでは、変数を作るために使用するキーワードとして let と const が主に使われ、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 の使い分けはしっかり覚えておいた方が良さそうですね。定数は変えられないっていう意味もよく分かりました!」
先生
「うん、そこはとても大事なポイントだよ。どんなデータが変わるのか、どんな値が固定なのかを意識して変数を作ると、理解がぐっと深まるよ。」
生徒
「今日のまとめを読んで、変数がどう使われているのかイメージがつきました!自分でもたくさん書いて練習してみます!」
先生
「その調子!変数の使い方が分かると、条件分岐や関数もどんどん理解しやすくなるから、次のステップも頑張ってみようね。」