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

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

基礎

【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 を使って宣言するのが基本
  • 変数名は命名規則に従う
  • スコープは「変数が有効な範囲」
  • ローカル変数とグローバル変数の違いを理解することが重要

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-基礎
-

執筆者:

関連記事

【JavaScript入門】noscript要素の使い方|非対応ブラウザへの配慮とHTML5での変更点

noscript要素の使い方|JavaScript非対応ブラウザへの配慮とHTML5での変更点 ユーザーの中には、JavaScriptを無効にしていたり、スクリプトをサポートしないブラウザ(ユーザーエ …

【JavaScript入門】条件分岐の基本|if文・else文・switch文の使い方を初心者向けに解説

JavaScriptの条件分岐|if文・else文・switch文の使い方を初心者向けに解説 JavaScriptのプログラムは通常、上から順番に処理されます。しかし、実際のアプリケーションでは「条件 …

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

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

【JavaScript入門】初心者向けに特徴・歴史・できることをわかりやすく解説

JavaScriptとは?初心者向けに特徴・歴史・できることをわかりやすく解説 Web制作やWebシステム開発の現場で必ず触れる機会がある JavaScript。久しぶりに触ると「こんな書き方だったっ …

【JavaScript入門】色の指定方法まとめ|16進数・色名・CSS指定の違いを初心者向けに解説

JavaScriptで色を指定する方法|16進数・色名・CSS指定を初心者向けに解説 JavaScriptで色を指定する方法は、HTML/CSS と同様に複数あります。代表的なのは次の2つです。 16 …