現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】変数の基本を解説|宣言方法・命名規則・スコープの仕組みを初心者向けに紹介

投稿日:2019年4月12日 更新日:

JavaScriptの変数とは?宣言方法・命名規則・スコープを初心者向けにわかりやすく解説

変数とは、値や式を一時的に保存しておくための「箱」のようなものです。
変数を使うことでコードが読みやすくなり、メンテナンス性も大きく向上します。

JavaScriptの変数には、次のような値を格納できます。

  • 数値
  • 文字列
  • 真偽値(true / false)
  • オブジェクト(配列、日付、ウィンドウなど)

例:ユーザーが入力した名前を変数に格納して表示する

var res = prompt(“名前を入力してください。”);
document.write(“こんにちは、” + res + “さん。”);



変数の記述方法

JavaScriptでは、変数を使う前に宣言するのが一般的です。
変数の宣言には var を使いますが、JavaScriptは初めて登場した単語を変数として扱うため、var を省略することも可能です。

ただし、var の有無で変数の有効範囲(スコープ)が変わるため、基本的には var を付けて宣言することを推奨します。



変数を宣言する

変数の宣言だけを行う場合:

var str;
var myNum;

複数の変数をまとめて宣言することもできます。

var str, myNum;

変数を宣言し、初期値を代入する

宣言と同時に値を代入することもできます。

var str = “ようこそ”;
var myNum = 10;

複数の変数を1行でまとめることも可能です。

var str = “ようこそ”, myNum = 10;

変数名の付け方(命名規則)

変数名は、命名規則に従っていれば自由に付けられます。

  • 使用できる文字:英字、数字、_$
  • 先頭に数字は使えない
  • 予約語は使用できない

例:res の代わりに henji としても問題ありません。

変数名は、どんな値が入っているか分かりやすい名前にすると可読性が上がります。

変数の有効範囲(スコープ)

変数には次の2種類があります。

  • グローバル変数:関数の外部や複数の関数で有効
  • ローカル変数:関数の内部でのみ有効

スコープは、変数がどこまで有効かを示す範囲のことです。

変数宣言のルール:

  • 関数内で var を付けて宣言 → ローカル変数
  • 関数外で宣言 → グローバル変数
  • 関数内で var を付けずに宣言 → グローバル変数(非推奨)

例:ローカル変数とグローバル変数の違い

a = 1; // グローバル変数

function showNum() {
    var a; // ローカル変数
    a = 3;
    document.write(a); // → 3
}

showNum();
document.write(a); // → 1

関数内で同名の変数を宣言すると、ローカル変数が優先されます。



まとめ

  • 変数は値を保存するための「箱」
  • var を使って宣言するのが基本
  • 変数名は命名規則に従う
  • スコープは「変数が有効な範囲」
  • ローカル変数とグローバル変数の違いを理解することが重要

関連リンク

-基礎
-

執筆者:

関連記事

【JavaScript入門】関数の基本|定義方法・引数・return・呼び出し方を初心者向けに解説

JavaScriptの関数とは?定義方法・引数・return・呼び出し方を初心者向けに解説 JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。関数 …

【JavaScript入門】オブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説

JavaScriptのオブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説 JavaScriptは「オブジェクトベース」のスクリプト言語です。 Webページを操作するうえで欠 …

【JavaScript入門】HTML要素内に直接スクリプトを書く方法|javascript: の使い方と注意点

JavaScriptをHTML要素内に直接記述する方法|javascript: の使い方と注意点を初心者向けに解説 JavaScriptをWebページに組み込む方法はいくつかあります。 HTML文書内 …

【JavaScript入門】new・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説

JavaScriptのnew・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説 JavaScriptでは、オブジェクトを作成したり削除したり、オブジェクト名を省略して …

【JavaScript入門】breakとcontinueの使い方|ループ処理を制御する基本構文を初心者向けに解説

JavaScriptのbreakとcontinueの使い方|繰り返し処理を制御する基本構文を解説 JavaScriptの繰り返し処理(for / while / do…while)や sw …