1日目のゴールと今日やること
1日目のテーマは
「TypeScript に触りながら、“型って怖くない”を体で覚える」
ことです。
今日のゴールは 3 つだけです。
- 「型って何をしてくれる存在なのか」をイメージでつかむ
- 変数・関数に“ゆるい型”を付けてみて、エラーに慣れる
- 小さなミニアプリ（足し算アプリ）を TypeScript で書いてみる
「完璧に理解する」ではなく、
「あ、これ便利かも」くらいの感覚を持てれば 100 点です。
型ってそもそも何？を“怖くない言葉”で説明する
型は「コンピュータに対する約束ごと」
TypeScript でいう「型」は、
“この変数には、こういう種類の値が入りますよ”という約束
のことです。
例えば、次のようなイメージです。
- 年齢 → 数字だけ
- 名前 → 文字だけ
- ログインしているかどうか → true / false だけ
JavaScript では、ここが全部ゆるゆるです。
let age = 20;
age = "二十歳です"; // これも通ってしまう
TypeScript では、ここに 「ルール（型）」 を付けます。
let age: number = 20;
age = "二十歳です"; // エラーになる
深掘りポイント：エラーは「怒られている」のではなく「守られている」
TypeScript のエラーは、
「あなたがバグを仕込む前に止めてくれている」
だけです。
- 本番で壊れるより
- ユーザーに迷惑をかけるより
- デバッグで数時間溶かすより
書いているその場で「それ危ないよ」と言ってくれる。
それが「型」の一番の価値です。
まずは「型なし」と「型あり」を比べてみる
JavaScript だけの世界（型なし）
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add("1", "2")); // "12"
console.log(add(1, "2")); // "12"
数字を足したいつもりでも、
文字列が混ざると「結合」になってしまいます。
しかも、エラーにならない ので気づきにくい。
TypeScript の世界（型あり）
function add(a: number, b: number): number {
return a + b;
}
add(1, 2); // OK
add("1", "2"); // エラー
add(1, "2"); // エラー
ここで大事なのは、
「エラーが出るから TypeScript は怖い」ではなく
「エラーが出るから安全」
という感覚に少しずつ慣れていくことです。
1日目のミニアプリ：足し算アプリを TypeScript で書いてみる
HTML は超シンプルでいい
<input id="a" />
<input id="b" />
<button id="addButton">足す</button>
<div id="result"></div>
ここに TypeScript でロジックを書きます。
TypeScript で変数に型を付けてみる
まずは「型を付けない」書き方
const aInput = document.getElementById("a");
const bInput = document.getElementById("b");
const addButton = document.getElementById("addButton");
const resultDiv = document.getElementById("result");
これでも動きますが、TypeScript 的には
「これ何の要素かわからないな…」という状態です。
型を付けた書き方
const aInput = document.getElementById("a") as HTMLInputElement;
const bInput = document.getElementById("b") as HTMLInputElement;
const addButton = document.getElementById("addButton") as HTMLButtonElement;
const resultDiv = document.getElementById("result") as HTMLDivElement;
ここでやっていることは、
- aInput は「入力欄（HTMLInputElement）」だよ
- addButton は「ボタン（HTMLButtonElement）」だよ
と TypeScript に教えてあげているだけです。
深掘りポイント：as は「これはこういう型だよ」と教える道具
as HTMLInputElement は、
「この値は HTMLInputElement として扱っていいよ」
という宣言です。
これを付けることで、
- aInput.value と打ったときに補完が効く
- 間違ったプロパティを呼ぶとエラーになる
という「開発体験の良さ」が一気に上がります。
足し算のロジックを TypeScript で書く
まずは素直に書いてみる
addButton.addEventListener("click", () => {
const aValue = aInput.value;
const bValue = bInput.value;
const aNumber = Number(aValue);
const bNumber = Number(bValue);
const sum = aNumber + bNumber;
resultDiv.textContent = `結果: ${sum}`;
});
ここまでは JavaScript とほぼ同じです。
でも TypeScript は、
「aNumber は number 型だね」
とちゃんと理解してくれます。
関数に型を付けて“エラーに強いコード”にする
足し算部分を関数に切り出す
function addNumbers(a: number, b: number): number {
return a + b;
}
イベントの中で使う
addButton.addEventListener("click", () => {
const aNumber = Number(aInput.value);
const bNumber = Number(bInput.value);
const sum = addNumbers(aNumber, bNumber);
resultDiv.textContent = `結果: ${sum}`;
});
深掘りポイント：関数に型を付けると何が嬉しいか
- addNumbers に文字列を渡そうとすると、その場でエラー
- 戻り値が number だとわかっているので、
その後の処理も安心して書ける - 「この関数は何を受け取って、何を返すのか」が一目でわかる
これは、「未来の自分へのメモ」 でもあります。
あえてエラーを出して「型のありがたさ」を体感する
わざと間違えてみる
addNumbers("1", 2); // エラー
TypeScript はこう言ってきます（ざっくり言うと）：
“addNumbers は number を受け取るって言ってたのに、
文字列渡してるよ？ それ危ないよ？”
ここで大事なのは、
「怒られている」のではなく「守られている」
という感覚です。
1日目のまとめ
今日あなたがやったことを、感覚ベースで整理するとこうです。
- 型は「コンピュータとの約束ごと」
- TypeScript のエラーは「バグを事前に止めてくれるガードマン」
- 変数や関数に型を付けると、
「何が入るか・何が返るか」がハッキリする - HTML 要素にも型を付けることで、
補完が効いて書きやすくなる - 足し算アプリを通して、
「型付きの関数」を実際に書いてみた
今日いちばん深く理解してほしいこと
1日目の本質は、
「TypeScript は“難しいルール”ではなく、“自分を守ってくれる安全装置”だ」
という感覚です。
まだ「型の種類を全部覚える」必要はまったくありません。
- number
- string
- boolean
この 3 つと、
関数に型を付ける感覚が少しでも掴めていたら、
1日目としては十分すぎるくらいです。
2日目では、
- オブジェクトに型を付ける
- 配列に型を付ける
- 「型エイリアス」という便利な仕組み
を使って、
「ちょっとしたミニアプリ」から
「ちゃんとしたデータ構造を持つアプリ」
へ一歩進めていきます。
