プログラミング

初心者向けJavaScript入門！ 変数の使い方をわかりやすく解説

初心者向けJavaScript入門！ 変数の使い方をわかりやすく解説

JavaScriptは、ウェブサイトやアプリ開発で広く使われるプログラミング言語です。その中でも「変数」は、データを一時的に保存し、後で利用できるようにするための重要な仕組みです。本記事では、プログラミング初心者や子供でも理解できるように、JavaScriptの変数の基本から応用までをわかりやすく解説します。

目次

JavaScriptの変数とは？

JavaScriptの変数とは、プログラムの中でデータを保存し、後で再利用するための箱のようなものです。たとえば、「りんごの数」や「ユーザーの名前」などの情報を記憶し、プログラム内で使うことができます。

プログラムを作るときには、データを一時的に保存する必要があります。そのために変数があり、必要に応じて値を変更することができます。

変数を宣言する方法

JavaScriptでは、変数を宣言（新しく作ること）するために以下の3つのキーワードを使います。

  • var （昔からある変数の宣言方法）
  • let （現在推奨される変数の宣言方法）
  • const （変更できない値を持つ変数の宣言方法）

それぞれの違いを詳しく見ていきましょう。

JavaScriptの変数の種類と使い方

JavaScriptの変数には、大きく分けて var、let、const の3種類があります。それぞれの違いを理解し、適切に使い分けることが重要です。このセクションでは、それぞれの変数の特性と使い方について詳しく説明します。

varの使い方

var は、古いバージョンのJavaScriptで主に使われていた変数の宣言方法です。現在でも使用可能ですが、いくつかの欠点があるため、基本的には let や const を使用することが推奨されます。

var name = "太郎";
console.log(name); // "太郎"が表示される

varの特徴

  • 変数の再宣言が可能（同じ名前の変数を再度定義できる）
  • 関数スコープを持つ（関数の中でのみ有効になる）
  • ブロックスコープがない（ブロック {} の中で定義しても外からアクセスできる）
  • 予期しないバグを生む可能性がある（意図しない動作をすることがある）

letの使い方

let は、最新のJavaScriptで推奨される変数宣言の方法です。var の欠点を解消し、より安全にプログラムを書けるようになっています。

let age = 25;
console.log(age); // 25が表示される

letの特徴

  • 変数の再宣言は不可（同じ名前の変数を2回定義できない）
  • 値の変更が可能（変数の値を後から変更できる）
  • ブロックスコープを持つ（ブロック {} の中で定義すると、その中だけで有効）

constの使い方

const は、一度値を代入すると変更できない変数です。固定の値を保存する場合に使用します。

const pi = 3.14;
console.log(pi); // 3.14が表示される

constの特徴

  • 変数の再宣言が不可
  • 値の変更も不可（一度設定した値を変更できない）
  • ブロックスコープを持つ

変数のスコープとは？

変数の「スコープ」とは、その変数がどこで使えるのかを決めるルールのことです。スコープには以下の2種類があります。

グローバルスコープ

グローバルスコープとは、プログラムのどこからでもアクセスできる変数のことです。

var globalVar = "Hello";
function greet() {
    console.log(globalVar); // "Hello"
}
greet();

ローカルスコープ（ブロックスコープ）

ローカルスコープ（ブロックスコープ）とは、特定のブロック {} の中でのみ有効な変数のことです。

function example() {
    let localVar = "ローカル変数";
    console.log(localVar); // "ローカル変数"
}
// console.log(localVar); // エラー発生（外からアクセス不可）

変数の命名規則とベストプラクティス

変数の名前は、わかりやすく、読みやすいものにすることが重要です。

変数名のルール

  1. 数字で始めてはいけない (let 1number = 5; はNG)
  2. スペースを含めてはいけない (let my number = 5; はNG)
  3. 記号は _ と $ のみ使用可能
  4. JavaScriptの予約語は使用不可 (let function = 5; はNG)

ベストプラクティス

  • キャメルケースを使用する（例：userName）
  • 意味のある名前をつける（例：count ではなく itemCount）
  • 短すぎず長すぎない名前をつける

JavaScriptの変数を使った実践例

ここでは、実際にJavaScriptの変数を使って簡単なプログラムを作成する方法を紹介します。基本的な計算やユーザーの入力を処理するコードを書いてみましょう。

計算結果を保存する

let price = 1000;
let tax = 0.1;
let total = price + (price * tax);
console.log(total); // 1100

ユーザーの入力を変数に保存する

let userName = prompt("あなたの名前を入力してください:");
console.log("こんにちは, " + userName + "!");

まとめ

JavaScriptの変数は、データを管理する上で欠かせない要素です。var、let、const の違いを理解し、適切に使い分けることで、バグの少ないコードを書くことができます。

また、変数のスコープや命名規則も意識することで、より読みやすく管理しやすいプログラムを作ることができます。これからJavaScriptを学ぶ人は、変数の基本をしっかり身につけましょう！