🍊

JavaScript:変数・定数編

2023/03/01に公開

変数・定数とは

定数とは値が変化しないもの。定まっているもの。
(例:箱の中にミカンを入れた後、他の果物を入れる事が出来ず、最後までミカンが入っています。)

変数とは値が変化するもの。定まっていないもの。
(例:箱の中にミカンを入れた後、リンゴを入れることも可能です。)

変数

「変数の名前」と「変数の型」を指定する必要があります。 これを変数の宣言と言います。
変数の宣言には『let』『const』『var』 の3つがあります。

let const var
初期値 あり・なし 必須 あり・なし
再宣言 不可能 不可能 可能
再代入 可能 不可能 可能
スコープ ブロックスコープ ブロックスコープ 関数スコープ
繰り返し構文 可能 不可能 可能

再宣言:一度宣言した変数名で再度宣言すること。
再代入:既に値や文字が入っているものに上書きで代入すること。

複数の変数を宣言する場合はカンマ(,)で区切ります。
変数の宣言と同時に何らかの値を代入しておくことを初期化と言います。

言葉で説明だけだと分かりにくいので、実際に見てみましょう。

変数(let)

let 変数名;          // 定義方法(初期値なし)
let 変数名 = 初期値;  // 定義方法(初期値あり)

初期値・複数の変数を宣言

let title;                          //変数の名前に"title"を宣言
let title, JavaScript, point;  //複数の変数を宣言(カンマで区切る)

初期値・再代入

let a = 3;  //aを3で初期化(初期値あり)
a = a + 2;  //a+2=5になるので、この行の後はaの値は5になる(再代入)

変数(const)

変数の値を変更しない時は『const』を使用。

const 変数名 = 初期値;

初期値・再代入

const a = 3; //変数aを定数3で初期化
a = 5;       //再代入するとエラーが生じます

変数(var)

『variable(ヴァリアブル=変数)』の略です。
『var』はJavaScriptで使える変数の中で最も影響範囲が広いのが特徴です。
さまざまな場面で利用できる反面、エラーにつながる可能性があります。

var 変数名;         //定義方法(初期値なし)
var 変数名 = 初期値;  //定義方法(初期値あり)

初期値

var number;        //初期値がnull(空白の場合)
var number = 123;    //宣言と同時に初期値を入れることが可能

再宣言

var title = "赤";
var title;        // →この時点では「赤」のまま
var title = "青"; // 変数titleの値は「青」へと上書きされる

変数名に使える名前のルール

変数や関数の宣言時に付ける名前にはルールが存在します。(命名規則)

OKなこと

  • 名前には半角アルファベット、_(アンダースコア)、$(ドル)、数字が使用できる。
  • 大文字小文字は区別される
const $;           // OK
const _js;         // OK
const javascript;  // OK *この二つは別の変数として区別される
const JAVASCRIPT;  // OK *この二つは別の変数として区別される
const js_2023:     // OK

NGなこと

  • 数字(0から9)から始まる名前にすること。
  • JavaScriptで用意している機能名に使用されているもの(予約語と同じ名前)
  • ひらがなや一部の漢字など変数名に使用できるが、全角文字は非推奨
const 2023_js;      // 数字からは始まる名前はNG
const let;          // 予約語(JavaScriptが用意している機能の名前)と同じはNG
const zeenを使用中;  // OK(だが全角が混在すると扱いにくい場合があるため非推奨)

変数名・定数名の命名記法

プログラムの中では変数名の名前の付け方が統一されているとわかりやすくなります。
そこで、一般的に使われている変数名や関数名などの命名記法についてご紹介します。

キャメルケース(ローワーキャメルケース)

キャメルケースとは最初の単語はすべて小文字として、 2つ目以降の単語は先頭の文字を大文字にしてそれ以外は小文字で記述する方法です。

let userName;
let helloWorld;

パスカルケース(アッパーキャメルケース)

パスカルケースとはすべての単語の先頭文字を大文字にしてそれ以外は小文字で記述する方法です。

let UserName;
let HelloWorld;

スネークケース

スネークケースとはすべての単語を小文字にして、単語と単語をアンダーバー(_)でつなげて記述する方法です。

let user_name;
let hello_world;

定数

定数名ではすべての文字を大文字にして、単語と単語をアンダーバー(_)でつなげて記述する方法がよくつかわれています。

const USER_NAME = apple;

Discussion