TypeScriptのconstとletの書き方｜変数宣言の基本をやさしく解説
TypeScriptでコードを書き始めようとしたとき、最初に必ずぶつかるのが変数の書き方です。
この記事では、TypeScriptにおける変数宣言の基本、つまり const と let の書き方・使い分け・よくある落とし穴をひとつずつ整理していきます。型注釈や型推論についても自然な流れで触れますが、深掘りはしません。「まずコードが書けるようになる」ことを目標に読んでもらえればと思います。
この記事は次のような方におすすめです。
- TypeScriptの変数宣言の書き方を知りたい方
- constとletをどう使い分ければいいか迷っている方
- JavaScriptもまだそこまで慣れていないTypeScript初心者の方
- varを使い続けていいのか気になっている方
この記事を読むと、TypeScriptでの変数宣言の書き方と使い分けがわかり、「とりあえずどっちを使えばいいか」という判断基準が持てるようになります。
それでは、順を追って詳しく見ていきましょう！
- 未経験で後悔したくない
【実体験】未経験からITエンジニアに転職して後悔した話｜4社経験してわかった「最初の選択ミス」 - 年収が低くて不安
4年間ずっと年収260万だったエンジニアが、転職で510万になるまでの全記録
変数ってそもそも何？
TypeScriptに限らず、プログラミングでは「変数」と呼ばれる仕組みをよく使います。
変数とは、値を入れておくための箱のようなものです。たとえば「ユーザーの名前」や「年齢」「価格」といったデータをコードの中で扱いたいとき、変数に名前をつけて保管しておきます。
const userName = "Taro";
const age = 25;
このコードでは userName という変数に "Taro" という文字列を、age という変数に 25 という数値を入れています。あとは userName や age という名前でその値を呼び出せる、というイメージです。
const が、TypeScriptでよく使う変数宣言のキーワードです。では const と let の違いは何なのか、順番に見ていきます。
constとletの書き方
constの書き方（再代入しない変数）
const は「一度決めたら値を変えない変数」を宣言するときに使います。
const siteName = "nakamuuu.blog";
このように書くと、siteName には "nakamuuu.blog" という値が入り、以降この変数に別の値を代入しようとするとエラーになります。
const siteName = "nakamuuu.blog";
siteName = "other.blog"; // ❌ エラー：代入できない
「変えちゃいけないなら不便じゃないの？」と思うかもしれませんが、むしろ「変えてはいけない」ということをコードで明示できるのがconstの強みです。後から読んだときに「あ、この値は途中で変わらないんだ」とすぐわかります。
TypeScriptでは、変数に「この変数は文字列型だよ」と明示することができます。これを「型注釈」と言います。
const siteName: string = "nakamuuu.blog";
// ^^^^^^ これが型注釈
: string の部分がTypeScript固有の型注釈です。ただ、毎回型を明示しなくても大丈夫です。TypeScriptは "nakamuuu.blog" という値から「これは文字列だ」と自動で判断してくれます（これを「型推論」といいます）。
letの書き方（後から値を変える変数）
let は「後から値を書き換えられる変数」です。
let count = 0;
count = 1; // ✅ 問題なし
count = 2; // ✅ これも大丈夫
カウントアップしたり、ループの中で値を更新したりする場面では let が必要になります。
let message = "読み込み中...";
// 処理が完了したら
message = "読み込み完了！";
constと書き方はほぼ同じで、const を let に変えるだけです。
varはどうする？
変数宣言には var というキーワードも存在します。JavaScriptの古いコードでよく見かけます。
ただ、これからTypeScriptを書くなら、varは使わなくて大丈夫です。
理由はスコープ（変数が有効な範囲）の動作にあります。次のコードを見てください。
// varの場合
if (true) {
var message = "こんにちは";
}
console.log(message); // "こんにちは" ← if の外でも参照できてしまう
// letの場合
if (true) {
let greeting = "こんにちは";
}
console.log(greeting); // ❌ エラー：ブロックの外では参照できない
var は if や for のブロック（{} の中）に書いても、ブロックの外からアクセスできてしまいます。これが意図しないバグの原因になりやすく、let や const ではこの問題が起きません。
constとletの使い分け — 迷ったらconstから始める
「どっちを使えばいいかわからない」というときのシンプルな指針があります。
これだけです。
最初から let で書いてしまうと、「この変数は途中で変わるの？変わらないの？」が読み手にわかりにくくなります。constで宣言しておくと「この変数の値はここで固定だ」という意図がコードから伝わりやすくなります。
// ✅ よい例：用途に応じてconstとletを使い分ける
const MAX_COUNT = 100; // 上限値は変わらないのでconst
let currentCount = 0; // カウントは更新するのでlet
// 🤔 よくない例：全部letで書いてしまう
let maxCount = 100; // 変わらないのにletだと意図が伝わりにくい
let currentCount2 = 0;
実際のコードを書いていて「あ、ここで値を上書きしたい」と気づいたタイミングで const を let に変更すれば十分です。
constの注意点 — オブジェクト・配列の中身は変えられる
constを使うときに初心者がよくはまる落とし穴があります。それは、constで宣言したオブジェクトや配列の「中身」は変えられるという点です。
オブジェクトのプロパティへの再代入はconstでも通る
const user = {
name: "Taro",
age: 25,
};
user.age = 26; // ✅ エラーにならない！
console.log(user.age); // 26
「constにしたから変わらないはず」と思っていると驚くかもしれませんが、これは仕様通りの動作です。
constが禁止しているのは「変数自体への再代入」であって、「オブジェクトの中身の変更」ではありません。
const user = { name: "Taro", age: 25 };
user = { name: "Hanako", age: 20 }; // ❌ これはエラー（変数自体への再代入）
user.age = 26; // ✅ これはOK（中身の変更）
配列の要素追加・変更も同様
const fruits = ["apple", "banana"];
fruits.push("cherry"); // ✅ エラーにならない
fruits[0] = "grape"; // ✅ これも通る
console.log(fruits); // ["grape", "banana", "cherry"]
fruits = ["kiwi"]; // ❌ これはエラー（変数への再代入）
配列の中身を変えることはできますが、変数 fruits そのものに別の配列を代入しようとするとエラーになります。
as const という書き方を使います。
【付録】さらに学びを深めるためのリソース
さらにTypescriptの学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。
おすすめの書籍
ゼロからわかる TypeScript入門
技術評論社から出版されている「ゼロからわかる TypeScript入門」は、プログラミング初心者や本職プログラマーではない方を主な対象にした入門書です。
変数・条件分岐・ループといった基本から、クラスやインターフェース、モジュールまで段階的に学べる構成になっています。最終章ではWeb APIとJSONを使った非同期Webアプリの作成も体験できるので、「実際に動くものを作る」ところまで到達できます。
プロを目指す人のためのTypeScript入門
技術評論社の「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで」、通称 ブルーベリー本 です。
JavaScriptの仕様とTypeScript独自の機能を両方押さえつつ、リテラル型・ユニオン型・keyof型・ジェネリクスなど、高度な型表現まで踏み込んで解説しています。TypeScriptの型システムの表現力を本格的に学べる一冊です。
オンラインで参照できる公式ドキュメント
TypeScript公式ハンドブック
https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。
TypeScript Deep Dive
https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。
TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。
まとめ：constとlet、結局どう使えばいい？
TypeScriptにおけるconstとletの基本をおさらいします。
| キーワード | 再代入 | 使いどころ |
|---|---|---|
const |
❌ 不可 | 値が変わらない変数（基本これを使う） |
let |
✅ 可能 | ループや条件によって値が変わる変数 |
var |
✅ 可能 | 使わなくてOK（スコープの挙動が古い） |
ポイントをまとめると、次のようになります。
- 基本は
const、再代入が必要なときだけlet - 型注釈（
: stringのような記法）は毎回書かなくても型推論が補ってくれる constでもオブジェクト・配列の中身は変更できる点に注意
「constにしたのに値が変わった」というトラブルはよく見かけるパターンなので、オブジェクト・配列まわりの挙動だけでも頭の片隅に置いておくと役に立つと思います。実際にコードを書きながらエラーに出くわしたとき、この記事を思い出していただけると嬉しいです。
※本記事の本文案はAIを活用して作成していますが、記載している内容およびコードは筆者が実際に調査、検証・実行し、内容の正確性を確認した上で公開しています。
