プログラミング初心者の壁TypeScript

2024-08-20

プログラミングを始めたばかりの頃は、「おっ、JavaScriptでアプリ開発できるぞ！」って感じでワクワクすることが多いと思います。自分もそうでした。

ところが、ちょっと進むと、「ん？TypeScriptって何？」という壁にぶち当たるわけです。なんと、実際の現場では TypeScript が主流だったりするんです！びっくりですよね。でもご安心を。TypeScriptとJavaScriptは、まったく違うわけじゃないんです。

TypeScriptは、JavaScriptに「型付け」という機能を追加したスーパーセット。例えるなら、「Nintendo Switch」と「Nintendo Switch（有機ELモデル）」みたいな関係。つまり、TypeScriptはJavaScriptをパワーアップさせたものなんです。

さて、ここで重要なのが「静的型付け言語」という機能。ここで「静的型付け言語」と「動的型付け言語」の違いについて、ちょっと説明させてください。

静的型付け言語 vs 動的型付け言語 静的型付け言語：コンパイル時に、変数の型が決まるんです。つまり、コードを書いてる段階で「この変数、間違ってるよ！」って教えてくれる親切設計。 動的型付け言語：実行時に型が決まるんです。プログラムを動かしてみるまで「おやおや、ここでエラーが出るとは…」ということがしばしば。 要は、静的型付け言語 は、エディターでコードを書いてる間にエラーを見つけてくれるけど、動的型付け言語 は実際に動かしてみるまで気付かないことも多い、というわけです。自分で言うのもなんですが、静的型付けはちょっと「ツンデレ」みたいな感じ。最初は厳しいけど、後々ありがたみを感じるタイプ。

** 例: JavaScript vs TypeScript ** 例えば、名前や年齢、メールアドレスを持つオブジェクトを作りたいとき、JavaScriptではこんな感じで書きますよね。

const alice  ={
    name: 'Alice',
    age: 25,
    email: 'alice@example.com',
  };

これをTypeScriptで書くと、少し長くなりますがこうなります。

type User = {
  name: string;
  age: number;
  email: string;
};

const alice : User ={
    name: 'Alice',
    age: 25,
    email: 'alice@example.com',
  };

なんだかんだでTypeScriptだと「User」という型を定義して、「このオブジェクトはこういう型だよ！」って教えてるわけです。だからちょっと長いんですけど、これが後々役に立つんです。

例えば、「alice」のプロパティにアクセスしようとして、もしスペルミスがあったらどうなるでしょう？

console.log(alice.aga) //agaなんてプロパティはない！

JavaScriptだと、このミスに気付くのはコードを実行してから。ちょっとドキドキしますよね。でも、TypeScript だと、コードを書いてる時点で「おいおい、'aga'なんてプロパティないぞ」って怒られてしまいます。親切だなぁ。しかも、alice. って書くだけで、エディターが「こんなプロパティがあるよ！」ってコード補完で、教えてくれるんです。便利でしょ？

TypeScriptのメリット 最初は「うーん、TypeScript、めんどくさそう…」って思うかもしれません。実際、自分もそうでした。でも、大規模な開発をする時にはこの型定義のおかげでバグが激減するんです。これは本当に便利で、安全で、TypeScriptの恩恵を受けると感動すら覚えますよ。信じてください。

参考書籍 TypeScriptについてざっくり説明しましたが、まだまだ深い世界が広がってます。実は自分も結構苦戦しました。でも、初心者の頃に読んだ書籍にかなり助けられましたので、ここで共有しますね。この本、実際にコードを書きながら学べるので理解しやすいんです。ぜひ参考にしてみてください！ 手を動かしながら学ぶ TypeScript