var？let？const？JavaScriptの変数を使い分けよう
JavaScriptに限った話ではないですが、多くのプログラミング言語では変数を使います。
変数とはデータを入れる箱のようなものです。
変数については「おしえて！JavaScriptの書き方」でも解説していますのでわからない方はこちらもご参照ください。
変数を宣言する時は「var 変数名 = 入れるデータ」などのような文法になるのですが、「var」の部分は「let」や「const」に置き換えることができます。
今回はその使い分けをまとめようと思います。
constの特徴
歴史的には「var」が一番古いのでそこから説明したほうがいいのかもしれませんが、おそらくconstから説明したほうがわかりやすいと思うのでこちらから解説します。
constの特徴は以下のとおりです。
- 定数である
- ローカル変数である
- 再宣言できない
どういうことなのかわからない方もいると思います。
一つずつ見ていきましょう。
定数とは
データが変わることができない変数のことを定数といいます。
変数にデータを入れることを代入といいますが、定数には再代入ができません。
（constはおそらくconstantという英単語が由来になっています。constantは日本語で「不変の」などの意味になります。）
つまり、constで定義された変数には再代入ができません。
実験してみましょう。
HTML
<html>
<head>
<script>
window.onload = function() {
const text = 'テスト'
text = 'テスト2'
}
</script>
</head>
<body>
</body>
</html>
window.onloadは画面が読み込まれた時に発動するイベントです。
上記の場合、画面表示時にtextという変数に「テスト」を代入して、その後「テスト2」という値を再代入しようとしています。
ブラウザでHTMLを開いたら開発者ツールを開いてみましょう。
Windowsであれば「F12」キー、Macであれば「command」+「option」+「i」キーの同時押しで開きます。
開発者ツールを開けたらConsoleタブを開いてみましょう。
画像はGoogle Chromeの開発者ツール画面ですが、赤文字で英語が表示されています。
これは「test.htmlの6行目で定数に再代入してますよ、ダメです。」という意味になります。
このように定数に再代入するとプログラムエラーになります。エラーが起きるとプログラムが正しく動作できないので見つけたら直しましょう。
上記のように再代入したい場合は変数を「var」か「let」で定義しましょう。
ローカル変数とは
プログラムにはスコープというものがあります。
スコープとは変数などが参照可能な範囲のことをいいます。
JavaScriptでは主に「{」「}」で囲まれた範囲のことをブロックといいますが、基本的にはブロックの中で定義された変数はブロックの外からは参照できません。そういう変数のことローカル変数といいます。
文章だとわかりづらいのでサンプルコードを見てみましょう。
HTML
<html>
<head>
<script>
window.onload = function() {
const text = 'テスト'
if (true) {
document.getElementById('test-input').value = text
}
}
</script>
</head>
<body>
<input type="text" id="test-input">
</body>
</html>
画面に入力欄を表示して、JavaScriptから入力欄に「テスト」と入力しています。
変数textはonloadのブロックの中で定義しています。
その中にif文のブロックがあってその中で入力欄に「テスト」と入力しています。
ブロックの中であれば、別ブロックがあっても参照可能です。
ではちょっと書き換えてブロックの外側から参照させてみましょう。
JavaScript
window.onload = function() {
if (true) {
const text = 'テスト'
}
document.getElementById('test-input').value = text
}
今度はif文の中で変数を定義して、if文の外から参照しようとしています。
結果はエラーになり、入力欄には何も入力されませんでした。
エラーの内容は「test.htmlの8行目で参照している変数textは定義されていません。」というものです。
つまり、「document.getElementById(‘test-input’).value = text」の行からはtextっていう変数どこにあるの？という状態です。
if文の中に定義された変数はif文の中でしか見えません。
if文の外にある上記のプログラムからは見えません。
再宣言できない？
JavaScript
window.onload = function() {
const text = 'テスト'
const text = 'テスト2'
document.getElementById('test-input').value = text
}
再宣言とは変数名が同じ変数を再び宣言することです。
上記を実行した結果、エラーになりましたがこれは「test.htmlの6行目で定義済のtest変数を宣言してますよ。ダメです。」という意味になります。
constで定義された変数には以上のような性質があります。
const変数は再代入する必要がない場合に使いましょう。
そしてconst変数を参照する場合はスコープ内にしましょう。
letの特徴
基本的にはconst変数と同じですが、let変数は再代入が可能です。
JavaScript
window.onload = function() {
let text = 'テスト'
text = 'テスト2'
document.getElementById('test-input').value = text
}
text変数をletで定義しました。
宣言時は「テスト」という文字を入れており、その直後に「テスト2」という文字を入れ直しています。
結果、入力欄には入れ直した「テスト2」という文字が入っています。
const変数だったらエラーになってましたね。
varの特徴
さて最後のvar変数ですが、const、letとは違って再代入・再宣言ができます。
それとローカル変数ではなくグローバル変数になります。
グローバル変数とは
ローカル変数はブロックの外から参照することができませんでした。
グローバル変数はブロック外からでも、つまりどこからでも参照ができます。
JavaScript
window.onload = function() {
if (true) {
var text = 'テスト'
}
document.getElementById('test-input').value = text
}
if文の中に定義したtext変数がif文の外からも参照でき、入力欄に「テスト」という文字が入っています。
var変数はどこからでも参照可能なグローバル変数であり、再代入、再宣言も可能です。つまり一番制約がなく何でもアリな変数です。
まとめ
JavaScriptにはもともとvar変数しかありませんでしたが、途中で仕様が変わりlet、constが登場しました。
一見すると何でもアリなvar変数が使い勝手がいいじゃないか、エラーが起きるくらいならvar変数使っときなさいよと思われるかもしれませんが、僕は基本的に変数の宣言はconstがいいと思っています。再代入の必要がある場合はletを、どうしてもどこからでも参照させたい場合の最終手段としてvarを、という順番で使い分けています。
この記事で紹介したような簡単なサンプルコードであればvarでも構わないと思いますが、プログラミングというものはだいたい作り込んでいくとソースコード量が増えていくものです。
ソースコード量が増えていくとそれだけプログラムミスや仕様の不備によってバグ（不具合のこと）が発生する可能性が高まります。
どこからでも参照でき、再代入、再宣言が可能なvar変数には自分が意図しないところでデータを書き換えてしまっている危険性、参照してはいけないデータを参照してしまっている危険性を含んでいます。これらがあるとアプリの誤動作に繋がります。
こういう事故を防ぐためにletやconstがあると思っています。
上記のようにエラーを出してくれているというのは悪いことではなくて、開発の段階で事故を未然に防いでくれているものだと思っています。
必要な場面にだけ参照させる、データを書き換えさせるというように変数の影響範囲を絞らせておいたほうが規模が大きくなった時のミスを減らせることができるのでそういった心掛けでプログラミングをすることをおすすめします。
したっけ！
- constは再宣言・再代入不可のローカル変数
- letはconstが再代入可能になった変数
- varは上記の制約がなくなったグローバル変数
- const > let > varの順番で採用するといいと思う
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy