【JS基礎】JavaScriptの変数をマスターしよう

Hello World🌍

JavaScriptで変数を使う方法や種類、機能、規則について詳しく解説します。

変数とは？

変数とは文字列や数値などのデータが入った名前つきの箱です。

JavaScriptだけでなく他のプログラミング言語にも変数という概念は存在します。

データを変数に入れることで変数はそのデータの代わりになってくれ、プログラムの至るところで変数を繰り返し使い回すことができます。

また変数を使うことで、変数名からその変数の役割を明確にするというメリットもあります。

変数の使い方

さきほど変数とは中身のデータの代わりになって、プログラムの至るところで使いまわせると説明しました。

具体的な使用例を見てみましょう。

‘こんにちは’という文字列をconsole.logで出力してみます。

console.log('こんにちは'); // こんにちは

続けて’こんにちは、ぽじぱん’という文字列も出力したくなったとします。

console.log('こんにちは'); // こんにちは
console.log('こんにちは、ぽじぱん') // こんにちは、ぽじぱん

‘こんにちは’という値を2回使っています。
もし’こんにちは‘を’おはよう‘にしたくなったら2ヶ所変更を加えなければなりません。100回使っていれば100ヶ所です😱

console.log('おはよう'); // おはよう
console.log('おはよう、ぽじぱん') // おはよう、ぽじぱん

このように同じ値を複数回使いたい時に変数を使うと便利です。

変数にgreetingという名前をつけ、’こんにちは’という値を入れます。
文字列’こんにちは’を変数greetingに置き換えてみましょう。

let greeting = 'こんにちは';
console.log(greeting); // こんにちは
console.log(greeting + '、ぽじぱん') // こんにちは、ぽじぱん

このように変数を使うことで’こんにちは’という文字列をプログラムの至るところで使えるようになりました！

もし’こんにちは‘を’おはよう‘にしたくなったら変更点は1ヶ所、変数の値を変えるだけでいいのです。

let greeting = 'おはよう';
console.log(greeting); // おはよう
console.log(greeting + '、ぽじぱん') // おはよう、ぽじぱん

変数の定義方法について

変数の宣言・代入

JavaScriptでは変数を使用する前に、letやconstといったキーワードを用いてあらかじめ変数を定義することを「変数を宣言する」といいます。letやconstといったキーワードについては次の章で詳しく説明いたします。

// letキーワードを用いた変数の宣言
let greeting;

変数を宣言して初めて、その変数を使用することができます。

また、カンマ「,」区切りで複数の変数を宣言することもできます。

// 複数の変数を宣言
let greeting,
     name;

// 上記と同義
let greeting;
let name;

宣言した変数に値を入れることを「変数に値を代入する」といいます。
以下の例ではletキーワードを用いた変数greetingに’Hello World!’という文字列を代入しています。

let greeting = 'Hello World!';

letやconstキーワード + 変数名に続き、代入演算子の「=」の右辺に値を入れ、セミコロン「;」で閉じます。

JavaScriptにおいて「=」は等しいという意味ではないので注意してください。

[キーワード] [変数名] = [値];

通常は上記例のように変数の宣言と代入を同時に行います。
これを「変数を定義する」といいます。

変数の再宣言

1度宣言した変数をキーワードを用いて、再び変数宣言をすることを「変数を再宣言する」といいます。

ただ、letやconstキーワードでは変数を再宣言することはできません。
以下のコードはエラーになり、エラー以降のコードは実行されないので注意してください。

let greeting = 'こんにちは';
let greeting = 'おはよう'; // エラー
console.log(greeting) // エラー

変数の再宣言は次章で紹介するvarキーワードで行うことはできるのですが、varキーワードの使用は非推奨となっています。

実質、変数の再宣言はできないものと考えて良いでしょう。

変数の再代入

1度定義した変数に別の値を入れることを「変数を再代入する」といいます。

変数の再代入は以下のように行います。値を書き換えるイメージです。
再代入にキーワードは用いません。

let greeting = 'こんにちは';
greeting = 'おはよう'; // ← letはいらない
console.log(greeting) // おはよう

JavaScriptの変数は3種類

JavaScriptの変数定義の際に用いられるキーワードには、let, const, varの3種類があります。

それぞれの動きの違いは以下の表の通りです。

詳しく見ていきましょう。

let

letキーワードは変数の再代入が可能なため、変数の値が変わる可能性がある場合に使います。

変数の再代入はできますが、再宣言や再定義はできません。

// 変数の定義
let greeting = 'Hello World!';

// 変数の再代入（OK）
greeting = 'Good Morning!';
console.log(greeting); // Good Morning!

// 変数の再定義はできない（NG）
let greeting = 'Good Morning!'; // エラー
console.log(greeting); // エラー

letキーワードでは変数の宣言と代入を分けて行うことができます。

// 変数の宣言
let greeting;

// 変数の代入（OK）
greeting = 'Hello World!';
console.log(greeting); // Hello World!

以下は0〜9の数値をconsole.logで出力する例です。
変数iに、値が1ずつ増えたものが再代入されるのでletキーワードを使っています。

for (let i = 0; i < 10; i++) {
  console.log(i);// 0〜9の数値が出力される
}

const

constキーワードは再代入できない変数を定義する時に使います。

// 変数の定義
const greeting = 'Hello World!';
console.log(greeting); // Hello World!

// 変数の再代入はできない
greeting = 'Good Morning!'; // エラー
console.log(greeting); // エラー

// 変数の再定義もできない
const greeting = 'Good Morning!'; // エラー
console.log(greeting); // エラー

constキーワードを使うことで、意図しない変数の値変更を防ぐことができます。

値が変化する可能性がない場合はconstキーワードを使いましょう。

constの注意点

constキーワードで定義した変数には、再代入も再定義もできないと説明しました。

1度定義した変数が常に同じ値を示すものを定数（ていすう）といいます。

constは定数のような役割を果たしますが、定数ではありません。

以下のようにconstキーワードで定義した配列やオブジェクトの値は変更可能です。

// 変数に配列値を定義
const people = ['Taro', 'Hanako', 'John', 'Mary'];
console.log(people[0]); // Taro

people[0] = 'Bob';
console.log(people[0]);　// Bob

// 配列の内容を変更できる
console.log(people); // ["Bob","Hanako","John","Mary"]

// 変数にオブジェクト値を定義
const fruits = {
  red: 'りんご',
  yellow: 'バナナ',
  orange: 'オレンジ'
}
console.log(fruits['red']); // りんご

// redの値を'りんご' → 'いちご'に変更
fruits['red'] = 'いちご';
console.log(fruits['red']); // いちご

// オブジェクトの内容が変更できる
console.log(fruits);
// {
//   red: 'いちご',
//   yellow: 'バナナ',
//   orange: 'オレンジ'
// }

var（非推奨）

varは変数の再宣言と再代入ができます。
しかし現在では、varキーワードでの変数定義は非推奨とされています。

varは再宣言やif文内で定義した変数の読み込みができてしまいます。

コードが数行程度ならばあまりデメリットはありませんが、コード量が膨大になると意図しない動作やバグを生み出しかねません。

極力使わないようにしましょう。

// 変数の定義
var greeting = 'Hello World!';

// 変数の再定義
var greeting = 'Good Morning!';
console.log(greeting); // Good Morning!
.
.
.
.
.
// 変数の再再定義
var greeting = 'Hey Hey Hey!';
console.log(greeting); // Hey Hey Hey!

命名規則（ルール）

変数の名前のつけ方には以下のような命名規則（ルール）があります。ユーザー定義関数名についても同様です。
また変数名やユーザー定義関数名のことを識別子（しきべつし）といいます。

予約語とはそのプログラミング言語の構文で使われているものを指します。そのため、変数定義のキーワードであるlet, const, var、制御処理をするifなどは変数名として使えません。

// アルファベット
let greeting = 'Hello World'; // NG

// アルファベット、後ろに数字を混ぜる
let greeting4649 = 'よろしく';

// 数字から始める
let 321 = 'ダー！'; // NG
let 20centuries = 1999; // NG

// 予約語を使う
let for = 'ループ'; // NG
let const = '変数'; // NG

変数名は命名規則に従いさえすればどんな名前でもつけることができます。

しかしある程度規則性を設け、名前から何をしている変数なのか分かりやすいものにしておくと、数ヶ月先の自分自身だけでなく他の開発者のためにもなります。

変数名の記法について

一般的に使われている変数名の命名記法を3つ紹介します。

キャメルケース（camelCase）

キャメルケース（camelCase）は最初の単語を小文字、2つ目以降の単語の先頭を大文字にする命名記法です。

一般的にJavaScriptではこの記法で書かれていることが多いです。

let userName = 'ぽじぱん';
let maxTextLength = 10;

スネークケース（snake_case）

スネークケース（snake_case）は全ての単語を小文字にし、アンダーバー(_)でつなげる命名記法です。

let user_name = 'ぽじぱん';
let max_text_length = 10;

パスカルケース（PascalCase）

パスカルケース（PascalCase）は全ての単語の先頭を大文字にする命名記法です。

let UserName = 'ぽじぱん';
let MaxTextLength = 10;

まとめ