JavaScript変数宣言(変数名の決め方・var, let, const)のポイントまとめ

KEISUKE KURITA

先日オライリーの『リーダブルコード』という本を読みました。この本は数あるブログ記事を読んでも良書として取り扱われていて、前々から読んでみたかったものです。読んでいて「なるほどなぁ」と納得する点が数々あり良い本だと感じましたので、著作権に触れない程度にその本から得たものをこのnoteに残しておきます。


リーダブルコード(英名：The Art of Readable Code)とは？

『リーダブルコード』はオライリージャパンが出版している書籍です。その名の通り「読むことが可能なコード」ということで、ある程度プログラミングに慣れてきた人が、さらにそのコードを読みやすいものにするためのポイントが詰まった本です。内容はとても簡単に書かれていましたが、重要なことがたくさん書かれていたなという印象です。

この本の中で紹介されているコードは主にC++, Python, JavaScript, Javaといったメジャーな言語で書かれていました。最近はひたすらJavaScriptを書いてたこともあって自分にとってはわかりやすくてラッキーでした。

このnoteでは、リーダブルコードを読んで感じたJavaScriptの変数宣言の際にポイントとなることについてまとめます。僕と同じような悩みを持っている方への手助けになれば幸いです。


変数などの名前の決め方について

コードを書いているときに変数の名前に悩むことが多くありませんか？少なくとも僕はネーミングセンスが皆無でして、変数の名前がコードの文脈とはかけ離れたひどい名前をつけることが多々あります。以前書いていたJavaScriptコードの中に下のようなものがありました。

// ダメな例
var consent = false;

プライバシーポリシーに同意したかどうかを格納する変数宣言の例ですが、コードを書いていた時はこれで自分も納得していました。しかしリーダブルコードの本を手に取った後にコードを読み返してみると「こうすればわかりやすいのかな」と下のものへ変更しました。

// 良い例
var isConsented = false;

ブール値を扱う変数の宣言の際は"is", "has"などの英単語があることでパッと見でわかりやすくなることが多々あります。こういうところは英語力との兼ね合いになってきそうです。プログラムを書いてれば英語力も多少は付いてくると思うので、英語の意味などを意識しながらコードを書くことは重要なのかもしれません。


JavaScriptの変数スコープついて

変数スコープは読みやすいコード云々以前にJavaScriptの仕様のことになってしまいますが、本の中でも触れていたので紹介します。

var personalData = {
    name : $('#name').val(),
    gender : $('#gender:checked').val(),
    birthDay : $('#birthDay').val(), 
}

このように個人情報を格納するオブジェクトがあるとします。JavaScriptでは変数宣言時に"var"などをつけますが、これがないと宣言した変数のスコープがグローバルとなってしまいます。例えば下のようにコードを書くと...

function saySomething(str) {
    something = str; // "var"をつけていない!
    console.log(something)
}
saySomething("hello"); // "hello"が表示される
console.log(something) // "hello"が表示される

こんな感じのことになってしまいます。somethingがグローバル変数となってしまうわけです。変数宣言時に"var"をつけていれば、関数外でのsomething変数の呼び出しはできません。


JavaScriptの変数宣言(var, let, const)について

JavaScriptでは基本的に"var", "let", "const"のいずれかで変数を宣言しますが、これらの違いは以下の通りです。

var : 関数スコープの変数を宣言する

let : 再宣言不可のブロックスコープの変数を宣言する

const : 再宣言・再代入不可のブロックスコープ定数(一度宣言したら変わらない変数)を宣言する

しかしこれがまた使い分けが難しいです。"const"や"let"で動くコードを全て"var"にしても動きますからね。これらの使い分けをリーダブルなコードを書くという視点から考えてみます。

var宣言は変数(代わりうる値)で使うものとして、"let", "const"を特別な変数宣言扱いとして考えれば使い分けが簡単になるのではないでしょうか。ここで、letを用いた変数宣言について考えてみます。letでは再宣言不可で再代入が可能なので下のコードのときなどに有効です。

let countError = 0;
for (true) {
    countError++;
}

letは何かのカウンターとして使うとリーダブルでわかりやすいですね。コードを読む人も「letだから再代入するのか」と連想するでしょう。JavaScriptにおいて変数宣言の文は、読みやすさに直結する重要なものです。


次にconstで宣言する場合を考えます。下のコードをご覧ください。

function isInputName() {
    if ($("#name").val()) {
        $("#status_area").html("OK").css("color": "green");
    } else {
        $("#status_area").html("Please fill in").css("color": "red");
    }
}

function isInputGender() {
    if ($("#gender").val()) {
        $("#status_area").html("OK").css("color": "green");
    } else {
        $("#status_area").html("Please fill in").css("color": "red");
    }
}

例えばHTMLのインプット状態を調べて、入力されていたら緑色で"OK"、入力されていなかったら赤色で"Please fill in"と表示したいとします。上のようなチェックをする箇所が複数あり、かつ「エラーの色をもうちょっと明るい色に変更したい」とかなると、コードの修正箇所も増えてしまいます。こんな場合にJavaScriptの変数(定数)宣言constを用いて色の設定変数を宣言します。

const textColor = {
    error : "red",
    success : "green"
}

function isInputName() {
    if ($("#name").val()) {
       $("#status_area").html("OK").css('color': textColor.success);
    } else {
        $("#status_area").html("Please fill in").css('color': textColor.error);
    }
}

// 省略

上記のようにテキストの色を再宣言も再代入もできない変数で宣言することで、「色を設定しているんだな」ということが直感的にわかるようになります。宣言された変数が再代入不可となる性質から、何かの設定変数としてしまえば良いわけです。読む人にとってわかりやすいものになるはずです。


ここではJavaScriptコードで紹介しましたが、リーダブルなコードを書くためには、その言語の性質を知る必要があります。そして言語の性質をより深く知るためには、本を読んだり実際にコードを書くことが欠かせません。やはり勉強あるのみですね...。


【2018/12/26】追記

ちょっぴり別記事にて追記しました。イマドキの変数宣言と関数宣言についてです。


この記事が気に入ったらサポートをしてみませんか？