フロントエンド開発のためのJavaScript入門 – 変数 | フルスタックエンジニアになりたくて

JavaScriptの変数の宣言方法と使い方について紹介していきます。

本記事では、let / const を用いた変数の宣言方法について紹介します。

var を用いた宣言方法については、以下の理由から紹介しません。

現在の開発において、使うべきではない
使うべきではない要因がいくつかあり、本記事で解説するのは長くなってしまう

詳しく知りたい方は、JavaScriptの変数って何? varで宣言や初期化をしてみよう!を参考にしてください。

また、本記事ではlet/constともにデータを保存しておくことができるという意味で変数として紹介しています。

letを用いた変数宣言

let (変数名) = (初期値)

という形式で変数を宣言することが出来ます。

変数の値は、変数名を指定するだけで、参照することが出来ます。

letで宣言した変数は、(変数名) = (値)と書くだけで、何度でも書き換えることが出来ます。

初期値はなくても構いませんが、初期値を与えずに参照すると「undefined」という特別な値になります。どうしてもという場合以外は、宣言と同時に初期値を設定した方がいいでしょう。

let age = 32; // 変数ageを32という値で初期化
console.log(age); // 変数名を指定してageの値を参照
age = 40; // 値の書き換えが可能
console.log(age); // 40

let userName; //初期値を与えずに、変数を宣言
console.log(userName); // undefined;

constを用いた変数宣言

const (変数名) = (値)

という形式で変数を宣言することが出来ます。

letの場合と同様に、変数名を指定するだけで、値を参照することが出来ます。

letの場合と違い、(変数名) = (値)と書いて、値を書き換えることが出来ません。

(値を書き換えることが出来ないので、定数として紹介されている記事や書籍もあります。)

値を書き換えることが出来ないと言いましたが、オブジェクトや配列の中身を書き換えることが出来ます。(オブジェクトや配列については、今後の記事で紹介します。)

正確にいうと、constで宣言された変数には、再代入が出来ません。

再代入を行うと、エラーが発生します。

また、宣言と同時に値を設定しなければなりません。

const userName = 'yohyoh'; // 定数nameを'yohyoh'という文字列で宣言
console.log(userName); // 定数名を指定して、値を参照
// name = 'unknown'; // 再代入できない。コメントアウトして、実行するとエラーが発生
const languages = ['JavaScript', 'TypeScript', 'Python', 'Ruby']; // 配列
console.log(languages) // ['JavaScript', 'TypeScript', 'Python', 'Ruby']
languages[3] = 'Elixir'; // 配列の中身を書き換える。エラーは発生しない
console.log(languages) // ['JavaScript', 'TypeScript', 'Python', 'Elixir']
// languages = ['Japanese', 'English', 'French'] // 配列でも再代入しようとすると、エラーが発生する

// const age; // 宣言と同時に値を設定していない。コメントアウトして、実行するとエラーが発生する

let / const のスコープについて

変数のスコープとは、変数を参照することができる範囲のことです。

スコープの外から、変数を参照しようとするとエラーが発生します。

let / const のスコープについて、押さえておくべき点は、以下の2点にです。

変数を宣言する前に、その変数を参照することは出来ない
ブロック({})の中で宣言された変数は、ブロック({})を抜けた後、参照することが出来ない

ブロックは、if文でのブロック、for文でのブロック、関数のブロックなどがあります。(if文、for文、関数については今後の記事で紹介します)

1. の例

// let
console.log(price) // 宣言されていない変数priceを参照。実行するとエラーが発生する
let price = 3000;

// const
console.log(email); // 宣言されていない変数emailを参照。実行するとエラーが発生する
const email = "example@example.com";

2.の例(ブロック単体)

// let
{
  let price = 3000;
  console.log(price); // ブロックの中なので、変数priceを参照することが出来る
}

// console.log(price); // ブロックの外なので、コメントアウトして実行するとエラーが発生する

// const
{
  const email = "example@example.com";
  console.log(email); // ブロックの中なので、変数emailを参照することが出来る
}
// console.log(email); // ブロックの外なので、コメントアウトして実行するとエラーが発生する

2.の例(if文のブロック)

// if文のブロック
// let
if (true) {
  let price = 3000;
  console.log(price); // ブロックの中なので、変数priceを参照することが出来る
}

// console.log(price); // ブロックの外なので、コメントアウトして実行するとエラーが発生する

// const
if (true) {
  const email = "example@example.com"; // ブロックの中なので、変数emailを参照することが出来る
  console.log(email);
}
// console.log(email); // ブロックの外なので、コメントアウトして実行するとエラーが発生する

変数の命名規則

変数名は、一般的にローワーキャメルケース記法(または、キャメルケース記法)で宣言します。

ローワーキャメルケース記法とは、

先頭単語の頭文字は小文字、それ以降の単語の頭文字は大文字

で記述する方法です。

ローワーキャメルケース以外の記法(パスカル記法、スネークケース記法など)で宣言することも可能ですが、コードが読みにくくなるのでおすすめしません。

例

// OK 
// ローワーキャメルケース記法
const userId = 1.08;
let totalAmount = 10000;

// NG
// スネーク記法
const user_id = 1.08;
// パスカル記法(または、アッパーキャメルケース記法)
let TotalAmount = 10000;

まとめ

JavaScriptで変数を宣言するときは、まずconst を使って宣言しましょう。

そして、どうしても値を変更しなければならない場合にlet を使いましょう。

理由は、変数の書き換えはバグの原因になったり、デバッグが大変になったりするからです。

また、他人に自分のコードを読んでもらうときに、読む側の負担になります。

他人が書いたコードを読むとき、const で宣言されているのを見ると、

「この後、この変数が書き換えられることがないんだな」

と分かり、書かれているロジックに集中出来ます。対して、let で宣言されているのを見ると、

「この後、この変数が書き換えられることがあるんだな」

「書き換えている場所は、どこだろう?」

「どんな値に書き換えられるのだろうか?」

とロジック以外のところも気をつけて読まなければなりません。

以上の理由から、JavaScriptで変数を宣言するときは、const > let の順番で使用するようにしましょう。

以上で、今回は終了です。

記事を読んでいただきありがとうございました。

読んだ感想や疑問、ご指摘などコメントしていただけると幸いです。

次回は、データ型について紹介していきます。