Day 2：変数・定数と基本型
Day 2では、TypeScriptの「いちばんよく触る部分」である、変数・定数と基本型についてじっくり見ていきます。 昨日は名前や年齢を表示するところまで行きましたが、今日はそれをもう一歩進めて、「プロフィール情報」を少しだけ“ちゃんとした形”で扱えるようになることを目標にします。
変数と定数：let と const
まずは、TypeScript（というかJavaScript）でよく使うキーワード let と const から始めます。
let：あとで値を変えたいときに使う
let は「あとで値を変えてもいい変数」を作るためのキーワードです。
// let の例
let age: number = 20; // 最初は 20 歳
console.log("今の年齢:", age);
age = 21; // 年齢を更新する
console.log("来年の年齢:", age);
// ポイント
// - let で宣言した変数は、あとから別の値を代入できます
// - 「変わる可能性があるもの」に使うのが自然です
const：変えたくない値に使う
const は「一度決めたら変えない値」を作るためのキーワードです。 “constant（定数）”の略ですね。
// const の例
const country: string = "Japan"; // 国名は変えない前提
console.log("国:", country);
// country = "USA"; // これはエラーになる（const は再代入できない）
// ポイント
// - const で宣言した値は、あとから変更できません
// - 「変わるはずがないもの」に使うと、コードの意図が伝わりやすくなります
let と const、どちらを使うべきか
基本的なおすすめはこうです。
- まずは const を使う
- 「これは変わるな」と分かったときだけ let にする
このスタイルにすると、「どれが変わる値で、どれが変わらない値か」がコードから読み取りやすくなります。
基本型：string / number / boolean
次に、TypeScriptの基本型を3つだけ押さえます。 この3つは、ほぼ毎日使うと言ってもいいくらいの“主役”です。
string：文字列
string は「文字列」を表す型です。名前やメッセージ、好きな言葉などはだいたい string になります。
// string の例
const name: string = "Alice";
const favoriteWord: string = "Keep learning";
console.log("名前:", name);
console.log("好きな言葉:", favoriteWord);
// ポイント
// - ダブルクォーテーション "..." やシングルクォーテーション '...' で囲んだものが文字列
// - テンプレート文字列（`...`）も string 型です
number：数値
number は「数値」を表す型です。年齢、点数、金額などはだいたい number になります。
// number の例
let age: number = 25;
let score: number = 88.5; // 小数も OK
console.log("年齢:", age);
console.log("スコア:", score);
// ポイント
// - 整数も小数も、TypeScriptではどちらも number 型です
// - 数値計算（足し算・引き算など）に使います
boolean：真偽値
boolean は「true か false のどちらか」を表す型です。 「ログインしているか」「有効かどうか」など、Yes/No の情報を扱うときに使います。
// boolean の例
const isStudent: boolean = true;
const isAdmin: boolean = false;
console.log("学生ですか？", isStudent);
console.log("管理者ですか？", isAdmin);
// ポイント
// - true / false の2つだけが boolean 型の値です
// - 条件分岐（if 文など）でよく使われます
型注釈：型を「明示的に書く」
Day 1でも少し触れましたが、TypeScriptでは変数に「型注釈」を付けることができます。
型注釈の書き方
書き方はシンプルで、変数名のあとに : を付けて型を書くだけです。
// 型注釈の例
let name: string = "Alice"; // 名前は文字列
let age: number = 25; // 年齢は数値
let isStudent: boolean = true; // 学生かどうか（真偽値）
// ポイント
// - 変数名: 型 という形で書きます
// - 「この変数には何が入るのか」をコード上で宣言しているイメージです
型注釈のメリット
- 間違った型を入れようとすると、コンパイル時にエラーになる
- コードを読む人（未来の自分も含む）にとって、意図が分かりやすくなる
let age: number = 25;
// age = "25"; // これはコンパイルエラー（number に string は入れられない）
「型注釈は、コードの自己紹介」と思ってもらうと、イメージしやすいかもしれません。
型推論：TypeScriptが「いい感じに推測してくれる」
TypeScriptには、型推論という便利な機能があります。 これは、「わざわざ型を書かなくても、TypeScriptが中身を見て型を推測してくれる」仕組みです。
型推論の例
// 型を書いていないけれど…
let name = "Alice"; // TypeScript は「これは string だな」と推論する
let age = 25; // 「これは number だな」と推論する
let isStudent = true; // 「これは boolean だな」と推論する
console.log(typeof name); // 実行時には "string" と出る
console.log(typeof age); // "number"
console.log(typeof isStudent); // "boolean"
// ポイント
// - 代入された値から、TypeScriptが型を自動で決めてくれます
// - その後は、その型に合わない値を入れようとするとエラーになります
型注釈と型推論、どちらを使うべきか
おすすめの考え方はこうです。
- 基本的には型推論に任せてOK
- シンプルな変数なら、わざわざ
: stringと書かなくてもよい場面が多いです
- シンプルな変数なら、わざわざ
- 意味を強調したいときは型注釈を書く
- 関数の引数や戻り値など、「ここはちゃんと型を見せたい」というところには積極的に書く
// 型推論に任せる例
const name = "Alice"; // string と推論される
const age = 25; // number と推論される
// 型注釈を書く例（関数）
function greet(name: string): string {
return `Hello, ${name}`;
}
「TypeScriptは賢いので、全部を手取り足取り書かなくてもいい」というのが、型推論のありがたさです。
実践：プロフィール情報を作る
ここまでの内容をまとめて、「プロフィール情報」を扱う小さなプログラムを書いてみます。 Day 1では「表示するだけ」でしたが、Day 2では「型を意識したプロフィール」を作るイメージです。
ステップ1：基本のプロフィール変数を作る
// profile.ts
// プロフィール情報を扱うTypeScriptプログラム
// 1. プロフィールの基本情報を変数として用意する
// 名前（文字列）
const name: string = "Alice";
// 年齢（数値）
let age: number = 25;
// 学生かどうか（真偽値）
const isStudent: boolean = true;
// 好きな言葉（文字列）
const favoriteWord: string = "Keep learning";
// ポイント
// - 変わらないもの（名前・好きな言葉など）は const
// - 変わる可能性があるもの（年齢など）は let
// - それぞれに適切な型を付けて、意図を明確にしています
ステップ2：プロフィールを表示する
// 2. プロフィール情報を表示する
console.log("=== プロフィール情報 ===");
console.log("名前:", name);
console.log("年齢:", age);
console.log("学生ですか？", isStudent);
console.log("好きな言葉:", favoriteWord);
ここまでで、Day 1の「名前・年齢・好きな言葉を表示する」練習を、型付きで再構成できました。
ステップ3：まとめて1つのメッセージにする
少しだけレベルを上げて、「プロフィールを1つの文字列にまとめる」関数を作ってみます。
// 3. プロフィールを1つの文字列にまとめる関数
function buildProfileMessage(
name: string,
age: number,
isStudent: boolean,
favoriteWord: string
): string {
// 学生かどうかでメッセージを変える
const studentLabel = isStudent ? "学生" : "社会人";
// テンプレート文字列で読みやすい文章を作る
return `名前: ${name}（${studentLabel}, ${age}歳）/ 好きな言葉: "${favoriteWord}"`;
}
// 関数を使ってプロフィールメッセージを作る
const profileMessage: string = buildProfileMessage(
name,
age,
isStudent,
favoriteWord
);
// 結果を表示
console.log("まとめたプロフィール:");
console.log(profileMessage);
// ポイント
// - 関数の引数にも型注釈を付けることで、「何を受け取る関数なのか」が明確になります
// - 戻り値の型（: string）を書くことで、「この関数は文字列を返す」と宣言しています
// - boolean を使って条件分岐（isStudent ? "学生" : "社会人"）をしているのも、良い練習になります
ステップ4：型推論を少し混ぜてみる
同じコードを、型推論を活かして少しだけ短く書くこともできます。
// profile-inference.ts
// 型推論を活かした書き方の例
const name = "Alice"; // string と推論される
let age = 25; // number と推論される
const isStudent = true; // boolean と推論される
const favoriteWord = "Keep learning";
function buildProfileMessage(
name: string,
age: number,
isStudent: boolean,
favoriteWord: string
): string {
const studentLabel = isStudent ? "学生" : "社会人";
return `名前: ${name}（${studentLabel}, ${age}歳）/ 好きな言葉: "${favoriteWord}"`;
}
const profileMessage = buildProfileMessage(
name,
age,
isStudent,
favoriteWord
);
console.log(profileMessage);
// ポイント
// - 変数の宣言では型推論に任せている
// - 関数の引数・戻り値には型注釈を書いて、インターフェースを明確にしている
// - 「任せるところ」と「明示するところ」のバランスが大事です
Day 2のまとめ
Day 2では、TypeScriptの基礎中の基礎である次の内容を扱いました。
letとconstの違い（変わる値と変わらない値）- 基本型
string,number,booleanの役割 - 型注釈（変数や関数に型を明示的に書く）
- 型推論（TypeScriptが自動で型を決めてくれる仕組み）
- 実践として「プロフィール情報」を型付きで扱うプログラムを書く
ここまで理解できていれば、TypeScriptの“土台”はかなりしっかりしてきています。 次のDayでは、配列やオブジェクトといった「少しだけ複雑な型」に進んでいきますが、今日の内容は何度でも書き直して、自分の手に馴染ませていく価値があります。
「名前・年齢・好きな言葉」を、ぜひ自分の情報に置き換えて、何パターンかプロフィールを作ってみてください。 コードの中に、自分のストーリーが少しずつ増えていく感覚を楽しんでもらえたらうれしいです。
Day 2：変数・定数と基本型をじっくり触ってみる
Day 2では、TypeScriptの「いちばんよく触るところ」である変数・定数と基本型を、もう少し手触りよく理解していきます。 今日は、プロフィールっぽい情報——名前・年齢・身長・体重・学生かどうか・メールアドレス——を変数として作り、さらに「わざと間違った型を入れてみて、TypeScriptがどう止めてくれるか」を体験していきます。
let と const：変わるものと変わらないもの
まずは、変数・定数を作るときに使うキーワード let と const を整理します。
let：あとで変わる可能性がある値
let は「あとで値を変えてもいい変数」を作るためのキーワードです。
// let の例：年齢は変わるので let にする
let age: number = 20; // 最初は 20 歳
console.log("今の年齢:", age);
age = 21; // 年齢を更新する
console.log("来年の年齢:", age);
ポイント：
- 変わる可能性があるもの（年齢、体重など）には
letが自然です。 - 「あとで書き換えるかもしれない」という意図がコードから伝わります。
const：変えない前提の値
const は「一度決めたら変えない値」を作るためのキーワードです。
// const の例：名前やメールアドレスは基本的に変えない前提
const name: string = "Alice";
const email: string = "alice@example.com";
console.log("名前:", name);
console.log("メールアドレス:", email);
// name = "Bob"; // これはエラー（const は再代入できない）
ポイント：
- 変わらない前提のもの（名前、メールアドレスなど）には
constが向いています。 - 「これは固定の情報です」というメッセージをコードで表現できます。
どちらを優先して使うか
おすすめのスタイルは、
- まずは const を使う
- 「これは変わるな」と分かったときだけ let にする
というものです。 このルールにしておくと、「どれが変わる値で、どれが変わらない値か」がコードから読み取りやすくなります。
基本型：string / number / boolean のおさらい
次に、今日の主役である3つの基本型をもう一度整理します。
string：文字列
名前やメールアドレス、好きな言葉など、「文字の並び」はすべて string 型です。
const name: string = "Alice";
const email: string = "alice@example.com";
console.log("名前:", name);
console.log("メールアドレス:", email);
number：数値
年齢・身長・体重など、「数字で表す情報」は number 型です。
let age: number = 25;
let height: number = 170.5; // cm
let weight: number = 60.2; // kg
console.log("年齢:", age);
console.log("身長:", height);
console.log("体重:", weight);
boolean：真偽値（true / false）
「学生かどうか」のような、Yes/No の情報は boolean 型になります。
const isStudent: boolean = true;
console.log("学生ですか？", isStudent);
型注釈：型をはっきり書いてみる
TypeScriptでは、変数に「型注釈」を付けることで、「この変数には何が入るのか」を宣言できます。
プロフィール用の変数を型付きで作る
では、今日の練習テーマに沿って、プロフィール情報をすべて型付きで宣言してみます。
// profile.ts
// プロフィール情報を型付きで宣言する例
// 名前（文字列） -> 変わらない前提なので const
const name: string = "Alice";
// 年齢（数値） -> 変わる可能性があるので let
let age: number = 25;
// 身長（数値） -> cm 単位
let height: number = 170.5;
// 体重（数値） -> kg 単位
let weight: number = 60.2;
// 学生かどうか（真偽値）
const isStudent: boolean = true;
// メールアドレス（文字列）
const email: string = "alice@example.com";
// 確認のために表示してみる
console.log("=== プロフィール情報 ===");
console.log("名前:", name);
console.log("年齢:", age);
console.log("身長:", height, "cm");
console.log("体重:", weight, "kg");
console.log("学生ですか？", isStudent);
console.log("メールアドレス:", email);
ポイント：
- それぞれの変数に、「何の型なのか」を明示しています。
string,number,booleanの3種類だけで、かなり多くの情報を表現できることが分かります。
型推論：書かなくても分かってくれる場合
TypeScriptには、型推論という機能があり、値から型を自動で判断してくれます。
同じプロフィールを型推論で書いてみる
// profile-inference.ts
// 型推論を使った書き方の例
const name = "Alice"; // string と推論される
let age = 25; // number と推論される
let height = 170.5; // number と推論される
let weight = 60.2; // number と推論される
const isStudent = true; // boolean と推論される
const email = "alice@example.com"; // string と推論される
console.log("=== プロフィール情報（型推論版） ===");
console.log("名前:", name);
console.log("年齢:", age);
console.log("身長:", height, "cm");
console.log("体重:", weight, "kg");
console.log("学生ですか？", isStudent);
console.log("メールアドレス:", email);
ポイント：
- 型を書いていなくても、TypeScriptは「これは文字列だな」「これは数値だな」と判断してくれます。
- ただし、関数の引数や戻り値など、外から使われる部分には型注釈を書いた方が読みやすくなります。
わざと間違った型を代入してみる
ここからが今日の“お楽しみ”ポイントです。 TypeScriptの強みは「間違った型を入れようとすると止めてくれる」ことなので、あえてミスをしてみて、その様子を確認してみます。
例1：数値の変数に文字列を入れてみる
// wrong-type.ts
// わざと間違った型を代入してみる例
let age: number = 25;
// ここで、わざと文字列を代入してみる
// 下の行のコメントを外すと、コンパイルエラーになります
// age = "25"; // エラー: Type 'string' is not assignable to type 'number'.
ここでのポイント：
ageはnumberと宣言されています。"25"は文字列なので、TypeScriptは「それは number じゃないよ」と教えてくれます。- コンパイル時にエラーになるので、実行前にミスに気づけます。
例2：boolean に文字列を入れてみる
const isStudent: boolean = true;
// これもわざと間違える例
// isStudent = "true"; // エラー: Type '"true"' is not assignable to type 'boolean'.
ポイント：
boolean型はtrueかfalseだけです。"true"は文字列なので、別物として扱われます。- 「なんとなく意味は通じそうだけど、型としては違う」というところを、TypeScriptがきっちり区別してくれます。
例3：メールアドレス（string）に数値を入れてみる
let email: string = "alice@example.com";
// わざと数値を代入してみる
// email = 12345; // エラー: Type 'number' is not assignable to type 'string'.
ポイント：
- メールアドレスは文字列として扱うべき情報です。
12345は数値なので、TypeScriptは「それは string じゃない」と止めてくれます。- こうした「型のズレ」を早めに見つけてくれるのが、静的型付けの大きなメリットです。
練習用テンプレート：自分で書いて試せるコード
最後に、今日の内容をまとめた「練習用テンプレート」を用意します。 このままコピーして、自分の情報に書き換えたり、わざとミスを増やしてみたりして遊んでみてください。
// day2-practice.ts
// Day 2 練習：プロフィール用の変数を作り、わざと型を間違えてみる
// 正しい型で宣言するパート
const name: string = "ここに自分の名前";
let age: number = 0; // 自分の年齢
let height: number = 0; // 自分の身長（cm）
let weight: number = 0; // 自分の体重（kg）
const isStudent: boolean = true; // 学生なら true, 社会人なら false
const email: string = "ここに自分のメールアドレス";
console.log("=== 正しいプロフィール情報 ===");
console.log("名前:", name);
console.log("年齢:", age);
console.log("身長:", height, "cm");
console.log("体重:", weight, "kg");
console.log("学生ですか？", isStudent);
console.log("メールアドレス:", email);
// わざと間違った型を代入してみるパート
// 下の行のコメントを外して、コンパイルエラーを確認してみてください。
// age = "20"; // エラー: string を number に代入しようとしている
// height = "170"; // エラー: string を number に代入しようとしている
// isStudent = "true"; // エラー: string を boolean に代入しようとしている
// email = 12345; // エラー: number を string に代入しようとしている
おすすめの遊び方：
- まずは「正しい状態」でコンパイル・実行してみる。
- 次に、1行ずつコメントを外してコンパイルしてみて、「どんなエラーメッセージが出るか」を眺めてみる。
- エラーメッセージは最初は難しく見えますが、「どの行で」「どんな型が」「何に合わないと言われているか」を少しずつ読めるようになると、一気に楽になります。
Day 2のまとめ
Day 2では、次のポイントを押さえました。
letとconstの違い（変わる値と変わらない値）- 基本型
string,number,booleanを使ってプロフィール情報を表現する方法 - 型注釈で「この変数には何が入るのか」を明示することの意味
- 型推論で、TypeScriptが自動的に型を判断してくれる便利さ
- わざと間違った型を代入して、コンパイルエラーを体験することで、静的型付けのありがたさを実感すること
次のDayでは、配列やオブジェクトといった「もう少し複雑な形のデータ」に進んでいきます。 今日の練習は、ぜひ何度も書き直して、自分のプロフィールをいろいろなパターンで表現してみてください。 TypeScriptが「それは違うよ」と止めてくれる瞬間を、ちょっとした安心材料として楽しんでもらえたらうれしいです。