第5話「TypeScriptって何だろう？」 • frontendBaby

どうしてもVue.jsが分からないので森の博士の研究所に押しかけてみたら、人生が激変した子タヌキの話

注

この物語は、フロントエンド技術を楽しく学ぶことを目的に、生成AIを活用して執筆されています。技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。

登場人物紹介

フロントエンド博士: 森の奥の研究所に住む、フロントエンドのことなら何でも知っている物知り博士。ポン吉の素朴な疑問にいつも優しく（そして面白おかしく）答えてくれる。
ポン吉: 好奇心旺盛な子タヌキ。将来の夢はフロントエンドエンジニア。最近Vue.jsを学び始めたが、その奥深さに興味津々。新しい知識をゲットすると、思わず「ポン！」と飛び跳ねる特技あり。

第5話🦝「TypeScriptって何だろう？」

数日後、ポン吉は少し困った顔で研究所にやってきた。

ポン吉: 「博士、こんにちは…。ちょっと聞きたいことがあるんです。」

博士: 「おお、ポン吉。どうしたんじゃ、神妙な顔をして。」

ポン吉: 「この前、自分で簡単な計算をする関数を作ってみたんです。でも、時々おかしなことになるんです…」

ポン吉は博士に自分の書いたコードを見せた。

// ２つの数字を足すつもりの関数
function add(a, b) {
  return a + b;
}

// ポン吉の実行例
console.log(add(5, 3));      // -> 8  （これはOK！）
console.log(add("5", "3"));    // -> "53" （あれれ？）

ポン吉: 「数字の5と3を足したら8になるのに、文字の"5"と"3"を足したら、くっついて"53"になっちゃうんです。僕としては、エラーになって教えてほしいのに…」

博士は優しく微笑んだ。

博士: 「ポン吉よ、それこそが、我々が今日から学ぼうとしているTypeScriptの魔法が必要な理由なんじゃ。」

ポン吉: 「TypeScript…？」

博士: 「うむ。今ポン吉が書いているのはJavaScriptという言語じゃな。JavaScriptはとても自由で柔軟な言語なんじゃが、今の例のように、意図しない動きをすることがある。『数字』と『文字列』を+でつなぐと、JavaScriptは気を利かせて、両方を文字列として連結してしまうんじゃよ。」

ポン吉: 「気を利かせて…。でも、僕にとっては迷惑です…。」

博士: 「そうじゃろう。そこで登場するのがTypeScriptじゃ。TypeScriptは、JavaScriptに『型』というルールを加えた、いわばJavaScriptの兄貴分のようなものじゃな。」

ポン吉: 「型…？昨日博士が言っていた、データに札を付けるっていう…」

博士: 「その通り！TypeScriptを使うと、さっきの関数をこう書くことができる。」

博士はポン吉のコードを書き換えた。

// TypeScriptで書いたadd関数
function add(a: number, b: number): number {
  return a + b;
}

// 実行例
add(5, 3);      // -> 8 (OK!)
add("5", "3");    // -> エラー！「型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。」

ポン吉: 「わ！: numberっていうのが増えてます！そして、文字の”5”と”3”を入れたら、ちゃんとエラーが出てる！」

博士: 「そうじゃ。この: numberというのが『型注釈』と呼ばれるもので、『この変数aにはnumber（数字）しか入れたらダメだよ』という札を付けているんじゃ。だから、そこにstring（文字列）を入れようとすると、TypeScriptが『型が違うよ！』と実行する前に教えてくれる。」

ポン吉: 「実行する前に…？すごい！これなら、さっきみたいな間違いが防げますね！」

博士: 「その通りじゃ。TypeScriptの主な目的は３つある。」

博士は黒板に書き出した。

エラーの早期発見: 実行する前に、コードの間違いを見つけられる。
コードの可読性向上: : numberと書いてあるだけで、その関数が何をしたいのか分かりやすくなる。
高度なエディタ支援: エディタが型を理解し、入力補完などが強力になる。

ポン吉: 「なるほどー！JavaScriptの自由さもいいけど、TypeScriptみたいに厳しいルールがあった方が、大きなアプリを作るときには安心ですね！」

博士: 「まさにその通りじゃ、ポン吉。特に、Vue.jsのようなコンポーネントをたくさん組み合わせて作るアプリケーションでは、TypeScriptの『型』による安全性が、開発の助けになるんじゃよ。」

ポン吉: 「なんだか、TypeScriptって頼もしい味方みたいですね！もっと知りたいです！ポン！」

博士: 「うむ。では次回は、我らがcreateApp関数が、TypeScriptの世界でどんな『型』を持っているのか、その定義を一緒にのぞいてみることにしよう。」

ポン吉: 「createAppにも型があるんですか！？はい、楽しみです！」

こうしてポン吉は、プログラミングの世界をより安全に冒険するための、新しい魔法の地図を手に入れたのだった。

🌟 今日のまとめ

JavaScript は自由で柔軟だが、意図しない動きをすることがある。
TypeScript は、JavaScriptに 『型』 のルールを追加した言語。
型とは、データに「これは数字(number)」「これは文字列(string)」といった札を付ける仕組み。
TypeScriptを使うと、コードを実行する前に間違いを見つけられ、安全に開発を進めることができる。

次回予告　「createAppの型を見てみよう」

いつも使っているcreateApp関数。その正体を、TypeScriptの型定義ファイルからのぞき見します！ポン吉はどんな発見をするのでしょうか？

👨‍🏫 博士からの補足

ポン吉は今日、TypeScriptがもたらす『型』による安全性の素晴らしさに気づいてくれたようじゃな。JavaScriptの自由さも魅力じゃが、大きなものを作る時には、こうしたルールがいかに我々を助けてくれるか、よく分かったことと思う。

じゃが、面白いことに、フロントエンドの世界には色々な考え方があって、必ずしもすべての道具が同じ魔法を使うわけではないんじゃよ。

例えば、Svelteという、わしが注目しておるもう一つの強力な道具がある。Svelteは「コンパイラ」としての性質が強く、「できるだけ素のHTMLやJavaScriptに近い感覚で書ける」ことを大切にしておる。そのため、Vueがlang="ts"と書くことでTypeScriptを手厚く歓迎するのとは少し違って、必ずしも最初からTypeScriptを強制するわけではないんじゃ。

これはどちらが優れているという話ではないんじゃよ。

Vueが「大きなアプリケーションでも安全に作れるように、最初からしっかりとした『型』という鎧を着込もう」という考え方だとすれば、Svelteは「まずは素のJavaScriptで身軽に開発を始めて、プロジェクトが大きくなったり、より堅牢さが必要になった時に、後からTypeScriptという鎧を装着することも想定されているんじゃ」という考え方なんじゃな。

道具によって、得意なことや哲学が違う。今日我々が学んだのは、Vueという道具がなぜTypeScriptを大切にしているか、その理由の一端じゃ。この先、ポン吉が色々な道具に出会った時、この「道具ごとの哲学の違い」を思い出してくれると嬉しいぞい。

第5話おわり