TypeScriptの変数宣言(let・const)の使い分けを初心者向けに徹底解説!
生徒
「TypeScriptで変数を作るときに、letとかconstって見かけますけど、どう違うんですか?」
先生
「とてもいい疑問ですね。TypeScriptでは変数を宣言する方法がいくつかありますが、基本的にはletとconstを使います。」
生徒
「なるほど。でも、どっちを使えばいいのか迷います。」
先生
「それでは、初心者でも分かるように、letとconstの違いや使い分けについて、ゆっくり解説していきましょう。」
1. 変数とは?TypeScriptにおける役割
まず、「変数(へんすう)」とは、プログラムの中で値を一時的に保存しておく名前のついた箱のようなものです。たとえば、数字や文字などを入れておきたいときに使います。
TypeScriptでは、変数を宣言(せんげん)するときにletやconstを使います。
これは、英語で言うと「let(〜させて)」や「const(constant=変わらない)」の意味があります。
2. letの使い方と特徴
letは、後から中身(値)を変更できる変数を作るときに使います。
たとえば、年齢やスコアなど、時間とともに変わるような値に使うとよいでしょう。
let age = 18;
console.log(age); // 18
age = 21;
console.log(age); // 21
18
21
このように、letで作った変数は途中で別の値に書きかえることができます。
3. constの使い方と特徴
constは、一度だけ値を決めたら、変更できない変数を作るときに使います。
たとえば、税率(ぜいりつ)やアプリのバージョン番号など、ずっと同じでいてほしい値に使います。
const taxRate = 0.1;
console.log(taxRate); // 0.1
0.1
もし、constで宣言した変数の値を変えようとすると、エラーになります。
const price = 1000;
price = 2000; // エラー!
TypeError: Assignment to constant variable.
このように、変更してはいけない情報にはconstを使うと、安全なプログラムが作れます。
4. letとconstの違いを一覧で整理しよう
以下の表で、letとconstの違いを分かりやすくまとめました。
| 項目 | let | const |
|---|---|---|
| 値の変更 | 変更できる | 変更できない |
| 再宣言 | できない | できない |
| おすすめの使いどころ | 変わる可能性がある値 | 変わらない固定の値 |
5. 初心者がつまずきやすいポイント
はじめてプログラミングを学ぶ方が混乱しやすいのが、「constなのに中身が変わるように見えるケース」です。
実は、constでオブジェクトや配列を宣言したときは、中の内容を変えることができます。
これは、「変数そのもの」は変わっていないけれど、「箱の中身」は変えられるということです。
const fruits = ["りんご", "みかん"];
fruits.push("バナナ");
console.log(fruits);
[ 'りんご', 'みかん', 'バナナ' ]
このように、配列やオブジェクトの中身を追加・変更することはできますが、fruits = []のように、まるごと変えることはできません。
6. 実際にどう使い分ければいいの?
基本的なルールとして、constをデフォルトで使うことをおすすめします。
なぜなら、プログラムの中でうっかり変えてしまうミスを防げるからです。
「あとから値を変える必要がある」と分かっている場合だけ、letを使うようにすると、プログラムのミスが少なくなります。
7. まとめると
letは、あとで値が変わるものに使うconstは、変わらない値に使う- 配列やオブジェクトは
constで中身の変更は可能だけど、変数そのものは変更できない - 迷ったらまず
constを使おう
まとめ
ここまでの内容をふりかえってみると、TypeScriptにおける変数宣言という考え方は単純なようでいて、実際にはかなり奥深いものだと感じられたのではないでしょうか。とくに、letとconstのふたつがどのような違いを持ち、どのような場面で使い分ければよいのかという点は、初心者ほど迷いやすく、実際の開発現場でもよく議論になる部分です。変数というものは、ただ値を入れて保存するだけの仕組みのように見えますが、その宣言方法ひとつによって、プログラム全体の読みやすさや安全性、さらには保守しやすさまでもが変わってきます。だからこそ、基礎の段階でしっかりと理解しておくことには、とても大きな意味があります。
letは値を変更できる柔軟な変数として役割を果たし、時間の経過とともに変化する情報や、ユーザー入力によって値が変動するような状況にはとても適しています。一方で、constは一度決めた値をそのまま保持し続けるための宣言方法として、意図しない変更を防ぐための大きな味方となります。変わらない値をしっかり固定しておくことで、プログラム内部の整合性が保たれ、ひとつの値が不意に書き換えられることで起きる不具合や予期しない動作を避けることができます。特に、設定値や固定のパラメータを定義するときにconstを使うと、そのままプログラムの安定性にもつながります。
また、配列やオブジェクトといった複雑なデータ構造においても、constで宣言した変数は中身の要素を追加したり変更したりすることができる点は、多くの初心者がつまずく部分です。変数そのものが指す“箱”は変えられないけれど、その箱の中身を整理したり入れ替えたりすることはできるという仕組みは、実際にコードを書いて試してみることで直感的に理解が深まります。最初は「constなのに変えられるの?」と思ってしまうかもしれませんが、これもTypeScriptが大切にしている「意図が明確なコード」を促す特徴のひとつです。
そして、実務的な観点から言えば、基本的にはまずconstを使い、どうしても値を変える必要がある場面だけletを使うという流れがとても合理的です。この方法を採用することで、どの変数が動的で、どの変数が静的であるのかが一目でわかるようになり、コードを読む他の開発者にも意図が伝わりやすくなります。同時に、誤った値の書き換えを防ぐことができるため、意図しないバグの発生も軽減できます。TypeScriptは型を扱う言語として信頼性の高い開発を支えてくれる存在ですが、その基盤となるのが変数の宣言方法であり、letとconstの適切な使い分けがその第一歩となります。
ここで、もう一度基礎を振り返る意味も込めて、小さなサンプルコードを確認しておきましょう。以下のような短いコードでも、どの場面でどちらを使うべきかが自然と見えるようになります。
const appTitle = "サンプルアプリ";
let userScore = 0;
console.log(appTitle);
console.log(userScore);
userScore = userScore + 10;
console.log(userScore);
こうした短い例でも、constとletの性質がよく理解でき、今後大きなプログラムを作る際にも基礎として活かしていくことができます。小さなコードの積み重ねが、最終的には複雑な仕組みを扱う力につながっていくため、まずはシンプルな例をじっくり試しながら理解を深めていくのがおすすめです。
生徒
「先生、今日の勉強でletとconstの違いはだいぶ分かった気がします。でも、実際に書くと迷いそうです。」
先生
「最初は迷うものですが、まずはconstを中心に使って、必要になったときだけletに切り替えるという方法なら自然と慣れていきますよ。意図しない変更を防ぐためにも、とても効果的です。」
生徒
「なるほど。たしかに、変わらない値をしっかり守れるのは安心ですね。」
先生
「そうです。そして、配列やオブジェクトのような複雑な構造を扱うときは、中身の変更は可能でも変数そのものは変えられないという仕組みも忘れずに覚えておきましょう。ここが理解できているだけで、コードのトラブルをぐんと減らせます。」
生徒
「はい!実際に書いて試してみます。今日の内容のおかげで、自信が少し湧いてきました!」
先生
「その意気ですよ。少しずつ確実に理解していけば、知らないうちにとても強いスキルになっていますからね。」