はじめに
この連載は、以下のように進んでいきます。
| 連載回数 | 説明 |
|---|---|
| 第1回 | JavaScriptと比較してTypeScriptの基礎を学ぶ |
| 第2回 | TypeScriptで型を扱おう |
| 第3回 | TypeScriptで多様なデータに対応しよう |
| 第4回 | 既存JavaScriptをTypeScriptに移行しよう |
| 第5回 | 外部のパッケージやその他の情報 |
第1回の今回は、JavaScriptで起きるミスを実感して、「こうだったらいいのに」という欲求をTypeScriptで叶えていきます。今回の記事は、次のような章立てで進みます。
| 章立て | 内容 |
|---|---|
| 第1章 | JavaScriptで起こりがちなミス事例 |
| 第2章 | TypeScriptとは何か？ なぜ必要か？ |
| 第3章 | 環境構築 |
| 第4章 | TypeScriptコードを書いてみる |
| 第5章 | tsconfig.jsonを設定する |
| 第6章 | 冒頭のミスをTypeScriptで防いでみよう |
第1章 JavaScriptで起こりがちなミス事例
プログラムを書いていると、よくあるミスを何度もしませんか。それは凡ミスであったり、勘違いであったり、入力ミスだったりします。そうしたミスのうち、JavaScriptで起きそうなミスを、まずは見ていきましょう。
その1 プロパティ名ミス
オブジェクトのプロパティ名を間違えるというミスは非常に多いです。例を示します。
// ユーザー情報の保存
function saveUser(user) {
console.log("Name:", user.name);
console.log("Email:", user.email);
}
// 呼び出し側
saveUser({
neme: "佐藤太郎", // タイプミス
email: "tarou@example.com"
});
Saving user: undefined Email: tarou@example.com
どこが間違っているのか分かるでしょうか。引数のオブジェクトのプロパティが、nemeになっています。正しくはnameです。
こうしたミスは多いですが、目で見て気づくのは大変です。
その2 型ミス
数値で欲しい値を文字列で受け取ってしまい処理を進めてしまうミスは、JavaScriptでよくしてしまいます。例を示します。
// 設定
function setup(config) {
console.log("Config:", config);
}
// 呼び出し側
setup({
retry: "3", // numberなのに、stringで渡した
timeout: 5000
});
Config: { retry: '3', timeout: 5000 }
retryの値が文字列になっています。関数側の意図としては、数値で受け取りたいところです。しかし文字列で受け取ってしまっています。
その3 プロパティを間違えて扱う
オブジェクトのプロパティのネストが深いときに、undefinedであることに気が付かず、関数などを呼び出してしまうことは多いです。その例を示します。
// プロフィールの表示
function displayProfile(user) {
console.log("Name:", user.name);
console.log("Age:", user.age.toFixed(0)); // ageが未定義の可能性がある
}
// 呼び出し側
displayProfile({
name: "太郎" // ageは未設定
});
Name: 太郎
～\main.js:4
console.log("Age:", user.age.toFixed(0));
^
TypeError: Cannot read properties of undefined (reading 'toFixed')
ageが設定されていないため、ageの値はundefinedです。そのためtoFixedは使えずにエラーが発生します。
なぜミスが起きるのか？どうしたら防げるのか？
こうしたミスは、なぜ起きるのでしょうか。原因の多くは、正しい値を受け渡せていないことや、検証していない値を利用していることにあります。
不正な値の問題は、変数に入る値の型や、関数で入出力する値の型をチェックすることで、かなりの部分を防ぐことができます。
しかしJavaScriptには、そのための仕様が存在しません。そうしたJavaScriptの仕様上の弱い部分を補うのがTypeScriptです。
