神戸ホームページ制作プロ公式ブログ
2.82025
JavaScript用語「TypeScript」を全部教えます
こんにちはハナちゃん！今日はJavaScriptの仲間、TypeScriptについてお話しするよ。TypeScriptは、JavaScriptをもっと使いやすくしてくれる素敵な言語なんだ。簡単な文法や型チェックがあって、プログラミングが楽しくなるよ！これから一緒にTypeScriptについて詳しく見ていこうね。わからないことがあったら、いつでも聞いてね！
このブログは、JavaScriptに興味のある女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。
TypeScriptとは何ですか？
ハナ: TypeScriptとは何ですか？
リュウ: TypeScriptは、JavaScriptをもっと使いやすくしたバージョンなんだよ。例えば、JavaScriptが自転車だとしたら、TypeScriptはその自転車にカゴやベルをつけたような感じ。だから、もっと色々なことができるようになったり、間違いを見つけやすくなるんだ。
ハナ: へえ～、それってどういう風に使うの？
リュウ: TypeScriptはプログラミングをする時に使う工具箱みたいなもので、特に大きなプロジェクトやチームで作業する時に役立つんだ。たくさんの人が一緒に使うと、どこで間違っているか探しやすくなるよ。
ハナ: ふーん、じゃあJavaScriptと何が違うの？どっちがいいの？
リュウ: そうだね、JavaScriptは軽やかで自由な自転車だけど、TypeScriptはしっかりしたカゴを持つから、たくさんの荷物を運ぶ時には便利なんだ。小さなものを作るならJavaScriptもいいし、もっと大きなものを作るにはTypeScriptがいいかもしれないね。
ハナ: わかった！ でも、TypeScriptって難しそう。どうしたら上手に使えるようになるの？
リュウ: TypeScriptを使いこなすには、まずはJavaScriptをしっかり理解することが大切だよ。プログラムを書いて、エラーを直しながら少しずつ慣れていけば、どんどん上手になれると思うよ。まるで自転車の練習みたいに、何度もチャレンジすることが大事なんだ。
TypeScriptの主な特徴は何ですか？
ハナ: TypeScriptの主な特徴は何ですか？
リュウ: TypeScriptの主な特徴は、JavaScriptに似ているけど、もっと色々なことができるところなんだ。たとえば、自転車にカゴをつけるみたいに、TypeScriptでは「型」と呼ばれるものを使って、変数がどんなデータを持つかを決めることができるんだよ。これで、間違えにくくなって安全にプログラミングできるんだ。
ハナ: 型って、どういうことなの？もうちょっと教えて！
リュウ: 型は、ちょうどキャラメルとチョコレートのように、それぞれのキャンディーに味があるのと同じように、変数にもそれぞれ特別な種類があるってことなんだ。たとえば、数字は数字の型、文字は文字の型という具合に。それまでは、全部自由に使えるけど、TypeScriptではどのデータがどの型に属するかをはっきりさせているんだよ。
ハナ: それって、どうして大切なの？
リュウ: 型があると、間違って違うデータを使ってしまうことを防げるんだ。たとえば、ジュースの瓶にお茶を入れたら大変なことになるよね。TypeScriptはそんな間違いをあらかじめ防ぐ手助けをしてくれるんだ。それに、チームで作業するときも、みんながどんなデータを使ってるのか分かりやすくなるよ。
ハナ: なるほど！他に特徴はあるの？
リュウ: もちろん！TypeScriptは、実際のJavaScriptのコードを元にしているから、JavaScriptの良さを持ちながら、さらに便利な機能を追加してくれるんだ。たとえば、クラスという概念があるけど、これはおもちゃのセットのように、似たようなおもちゃをまとめて管理しやすくするために使うんだよ。これも、プログラムを大きくするのに役立つんだ。
ハナ: クラスって楽しいね！まだまだ教えてほしいことがあるな。
リュウ: いつでも気軽に聞いてね、ハナさん。TypeScriptについてもっと知りたいことがあれば、どんなことでも大丈夫だから！
TypeScriptとJavaScriptの違いは何ですか？
ハナ: TypeScriptとJavaScriptの違いは何ですか？
リュウ: いい質問だね、ハナさん！JavaScriptは、ウェブページを動かすための言葉なんだ。たとえば、ウェブページでボタンを押したときに何かが起こるのは、JavaScriptのおかげだよ。
リュウ: それに対してTypeScriptは、JavaScriptにちょっと特別なルールを追加したものなんだ。例えば、TypeScriptでは、絵を描くときに下書きをするみたいに、先に「これは何になる」って決めておけるんだ。こうすることで、間違いを減らすことができるんだよ。
ハナ: なるほど！それなら、TypeScriptは安全にプログラムを作るための手助けをしてくれるってこと？
リュウ: その通りだよ！ハナさん、よく理解できたね。TypeScriptは、間違いを見つけやすくしてくれるから、プログラムを作るときも安心なんだ。でも最終的には、TypeScriptもJavaScriptに変わるから、どちらの言葉も大事なんだよ。
ハナ: そうなんだ！でも、TypeScriptを使うと難しそうな気がするんだけど、そんなことない？
リュウ: そう思うかもしれないけど、TypeScriptは実は、先にルールを決めてからプログラムを作れるから、後からの修正が楽になるんだ。それに、簡単に使えるツールもたくさんあるから、安心して挑戦できるよ。最初はJavaScriptから始めてもいいし、徐々にTypeScriptに移っていくこともできるんだ。
ハナ: そっか、じゃあ、少しずつ慣れていけば良さそうだね！他に何かTypeScriptの良いところはあるの？
リュウ: いい質問だね！TypeScriptには、コードを整理するのが得意な「型」という考え方があるんだ。たとえば、お菓子の箱を種類別に分けておくと、後で何を探すかすぐ分かるように、TypeScriptもコードを分かりやすくしてくれるんだよ。こうすれば、友達と一緒に作業するときも、みんなが迷わず作業できるようになるんだ。
ハナ: すごい！それなら、TypeScriptを使ったら、お友達と一緒に楽しくプログラムできそう！
リュウ: ハナさん、そう言ってもらえると嬉しいよ！楽しみながら学んでいくことが一番大事だから、これからもどんどん挑戦してね。
TypeScriptを使うメリットは何ですか？
ハナ: TypeScriptを使うメリットは何ですか？
リュウ: TypeScriptはJavaScriptの上に作られたもので、使うとちょっとした魔法のような力を発揮するんだよ！たとえば、TypeScriptを使うと、プログラムを書くときに間違いを早く見つけやすくなるんだ。これを、パズルのピースをはめるときに、正しい形のピースを先に探しておくイメージだよ。そうすると、完成したときにバランスが崩れないし、すごく楽しいんだ。
ハナ: それって、どうして間違いを早く見つけられるの？
リュウ: よく分かったね！TypeScriptは、プログラムの中で使う変数や関数の型を決めることができるんだ。これを、学校の算数の授業で使うノートに数字の計算を書くことに例えると、正しい場所に正しい数を書くから間違えにくくなるよ。JavaScriptだと、何でも書けちゃうけど、TypeScriptなら、事前に決めたルールに沿って書くから、間違いを見つけやすくなるんだ。
ハナ: 他にメリットはあるの？
リュウ: もちろん！TypeScriptはコードが大きくなっても、整理された状態を保つのが得意なんだ。たとえば、自分の部屋がすっきり片付いていると、どこに何があるか一目でわかるよね。それと同じように、TypeScriptを使うと、大きなプログラムの中でもどこに何があるのかがわかりやすくなるんだ。これもすごく便利だと思うよ。
ハナ: なるほど！でも、TypeScriptを学ぶのは難しいのかな？
リュウ: 気になることだね！最初はちょっと新しいルールが増えるから、少しだけ難しく感じるかもしれないけど、徐々に慣れてくるよ。自転車の練習をしているときみたいに、最初はバランスを取るのが難しいけど、乗れるようになると楽しくなるよね。だから、TypeScriptも少しずつ練習すれば、どんどん楽しくなってくるよ！
TypeScriptのデメリットは何ですか？
ハナ: TypeScriptのデメリットはなんですか？
リュウ: TypeScriptのデメリットは主に二つあるよ。一つは、最初に学ぶのがちょっと難しいかもしれないってこと。お絵かきの時に、色や形を決めないといけないように、TypeScriptではちゃんとしたルールを守らなきゃいけないんだ。
ハナ: ルールがあるのは分かったけど、他にはなんかあるの？
リュウ: もう一つは、時間がかかることだね。JavaScriptに比べて、書くのが少し遅くなることがあるんだ。お料理で、すごく新しいレシピを試しているとき、いつも通りの料理より時間がかかることがあるでしょ？それと同じ感じなんだ。
ハナ: なるほど、ちょっと難しいし時間もかかるんだね！じゃあ、TypeScriptを使う意味って何があるの？
リュウ: TypeScriptを使う意味は、安心感と大きいプロジェクトに向いているからだよ。例えば、大きなパズルを作るとき、最初に全体の絵を見ておかないと、どのピースがどこに入るかわからないよね。TypeScriptはその絵を見せてくれるから、間違いを見つけやすくなるんだ。もっと大きな作品を作るときには特に役立つよ。
ハナ: そうなんだ！じゃあ、どっちを選んでもそれぞれの良さがあるんだね！
TypeScriptをインストールする方法は？
ハナ: TypeScriptをインストールする方法は？
リュウ: TypeScriptをインストールするのはとっても簡単だよ！まず、Node.jsっていうのをパソコンに入れないといけないんだ。Node.jsは、まるでお料理するための道具みたいなものなんだよ。これがないとTypeScriptが使えないの。
ハナ: Node.jsってどうやってインストールするの？
リュウ: いい質問だね！Node.jsは公式のサイトからダウンロードできるよ。サイトに行って、「ダウンロード」ってボタンを押すと、自分のパソコンに合ったバージョンが選べるんだ。それをクリックして、ウィザードに従ってインストールすればOKだよ。
ハナ: インストールしたら、TypeScriptはどうするの？
リュウ: Node.jsのインストールが終わったら、次はTypeScriptをインストールする準備だよ。ターミナルやコマンドプロンプトを開いて、「npm install -g typescript」って打つだけ。これでTypeScriptが手に入るんだ。言うなれば、レシピを手に入れるみたいな感じかな。
ハナ: それが終わったら、どうやって使うの？
リュウ: 使い方は簡単だよ！TypeScriptファイルは「.ts」っていう拡張子を付けるんだ。例えば、「hello.ts」って感じね。そのファイルを作ったら、またターミナルで「tsc hello.ts」って打つと、TypeScriptのコードがJavaScriptに変換されるの。まるで自分の作った作品が形になるみたいな感じだね。
ハナ: じゃあ、TypeScriptがどんなことができるか教えてほしいな。
リュウ: もちろん！TypeScriptはJavaScriptをもっと便利にするための道具だよ。たとえば、間違ってもすぐに教えてくれるから、何か違うことを書くと、「あれ？それはおかしいよ！」って感じで教えてくれるんだ。これでコードを書くときに、ふりかえりやすくなるんだよ。
ハナ: すごく楽しそう！もっと勉強したいかも！
TypeScriptの基本的な文法はどのようになっていますか？
ハナ: TypeScriptの基本的な文法はどんな感じなの？
リュウ: TypeScriptはJavaScriptの友達みたいなもので、もっとしっかりしたお手紙を書くための道具だよ。例えば、変数を作るときは「let」や「const」を使うのが一般的なんだ。そして、変数にどんな種類のデータが入るかを決めることができるんだよ。例えば、「number」や「string」みたいに。分かるかな？
ハナ: 変数ってどんなの？もうちょっと教えて！
リュウ: もちろん！変数は、何かを入れるための箱みたいなものだよ。例えば、お菓子を入れる箱を想像してみて。お菓子が「数」だったり「名前」だったりするわけだね。箱の名前を決めて、その中に入れるものを決める、そんな感じなんだ。まだ何か知りたいことあるかな？
ハナ: なるほど！他にどんなことができるの？
リュウ: TypeScriptでは関数というのも使うよ。関数はお料理のレシピのようなもので、何か特別な仕事をするための手順をまとめるんだ。たとえば、料理するための材料を集めて、どうやって料理するかを決める感じだよ。関数を使うと、同じことを何回も繰り返しやすくてとっても便利なんだ。これについてもっと知りたいかな？
ハナ: すごく面白い！でも、関数を作るのはどうやるの？
リュウ: とても良い質問だね。関数は「function」という言葉で始めるよ。例えば、お菓子を作る関数を作るとしたら、こんな風に書くよ。
“`typescript
function makeCookie() {
// クッキーを作る手順がここにあるよ
}
“`
この場合、「makeCookie」が関数の名前で、箱の名前みたいなものなんだ。この中にお菓子作りの手順を書くと、いつでもその手順を呼び出してクッキーを作れるってこと。どうかな、分かった？
“`typescript
function makeCookie() {
// クッキーを作る手順がここにあるよ
}
“`
この場合、「makeCookie」が関数の名前で、箱の名前みたいなものなんだ。この中にお菓子作りの手順を書くと、いつでもその手順を呼び出してクッキーを作れるってこと。どうかな、分かった？
ハナ: わかった！でも、もしすっごく簡単な言葉でまとめてくれたら嬉しいな！
リュウ: それなら、こう考えてみてね！TypeScriptはお絵かきの道具で、色を塗ったり形をはっきりさせたりして絵をより良く描くためのものなんだ。ただの線画をもっと素敵にする手助けをしてくれるってことだね。もっと知りたいことがあったら教えてね！
TypeScriptで型を定義する方法は？
ハナ: TypeScriptで型を定義する方法は？
リュウ: 型を定義するのは、君が友達にどんな遊びをするか説明するみたいなものだよ。たとえば、友達に「これ、猫だよ！」って言うときに、猫じゃないものを混ぜたらダメだよね。TypeScriptでは、変数にどんな種類のデータが入るかを決めておくことができるんだ。たとえば、「let age: number = 10;」って書くと、ageには数字しか入らないよって教えてあげるんだ。
ハナ: へー、なるほど！じゃあ、他にどんな種類の型があるの？
リュウ: いい質問ですね！型にはいくつか種類があるよ。たとえば、「string」は文字の集まり、つまり言葉みたいなものだね。「let name: string = ‘ハナ’;」ってすると、nameには言葉が入るってわかるね。あとは、数字が入るときは「number」、真偽値、つまり「はい」か「いいえ」というのは「boolean」っていうよ。すごくわかりやすいでしょ？
ハナ: なるほど！その型はどうやって使うの？
リュウ: 使い方は簡単だよ！たとえば、料理をする時に材料をちゃんと分けるでしょう？具材が違うと、美味しい料理は作れないからね。TypeScriptも同じで、型を使うことで、間違ったデータを渡さないようにするんだよ。たとえば、「let score: number = ‘十’;」ってやると、「あれ？これは数じゃないよ！」って教えてくれるの。
ハナ: 型を使うとミスが減るんだね！それってどうしてなの？
リュウ: うん、そうなんだ！型を使うと、コンピュータが何を期待しているかを理解しやすくなるから、間違ったことをしにくくなるんだ。まるで、遊びのルールを決めるみたいなものだね。ルールがあると、みんなが楽しく遊べるでしょ？
ハナ: なるほど！型って大事なんだね。もっと色々やってみたいな！
リュウ: その意気だね！TypeScriptを使って、どんなことを作りたいのかな？興味があったら、どんどん質問してね！
TypeScriptのインターフェースとは何ですか？
ハナ: TypeScriptのインターフェースって何なの？
リュウ: インターフェースは、おもちゃの説明書みたいなものだよ。おもちゃの仕様や使い方、パーツの形を教えてくれるんだ。インターフェースを使うと、どんな種類のデータを使うか事前に決められるんだよ。これによって、プログラムがちゃんと動くかどうか分かりやすくなるんだ。
ハナ: じゃあ、インターフェースを使うとどんなメリットがあるの？
リュウ: それは、レゴブロックを使うみたいな感じだね。レゴには特定の形や色のブロックがあって、それを組み合わせると、思い通りのものが作れる。同じように、インターフェースを使うことで、プログラムの中でどんな形のデータを使うかがはっきりするから、他の人が見たときも理解しやすくなるんだよ。
ハナ: ふーん、そうなんだ！じゃあ、インターフェースはどうやって書くの？
リュウ: インターフェースを書くのは、レシピを作るようなものだよ。材料やその使い方を書いていく感じ。TypeScriptでは、「interface」と書いて、が必要なデータの名前や種類（例えば、数字や文字）を指定していくんだ。こうすることで、どんなデータを使うかをキチンと定義できるよ。
TypeScriptのジェネリクスとは何ですか？
ハナ: TypeScriptのジェネリクスとは何ですか？教えて！
リュウ: ジェネリクスっていうのは、型を柔軟に扱える仕組みのことなんだ。たとえば、お菓子の箱を考えてみて。箱にはキャンディやクッキーを入れられるけど、どんなお菓子でも入れられるように、箱のサイズや形を変えられると便利だよね。ジェネリクスは、関数やクラスが特定の型に依存しないで、さまざまな型を使えるようにするためのものなんだよ。
ハナ: それって、お菓子の箱を選ぶみたいな感じ？
リュウ: そうそう！お菓子の箱を選ぶときに、いろんな種類のお菓子に対応できるようにしておくと、友達が来てもみんなの好みに合わせられるよね。つまり、ジェネリクスを使うと、同じコードでいろんなデータ型に対応できるから、とても便利なんだ。
ハナ: じゃあ、ゼリーやアイスもその箱に入れられるの？
リュウ: その通り！ゼリーやアイスも箱に入れられるように、ジェネリクスを使うとそれぞれのデータ型に合わせて機能を変えられるんだ。たとえば、数字の箱や文字列の箱を同じように扱えるっていう感じだね。
ハナ: それはすごい！もっと具体的な例とかある？
リュウ: もちろん！たとえば、数を足す関数を作るとするよ。普通の関数だと「数字しか足せない」と決まっているけど、ジェネリクスを使うと「数でも文字でも足せるようにできる！」って感じなんだ。こうすると、使うときにいろんなデータ型に対応できて、自分の好きなように使えるんだよ。
ハナ: なるほど、そういうことなんですね！他にも知りたいことがあったら教えてください！
TypeScriptでクラスを作成する方法は？
ハナ: TypeScriptでクラスを作成する方法はどうするの？
リュウ: いい質問だね、ハナさん！TypeScriptでクラスを作るのは、とても楽しいよ。まず、クラスの基本的な作り方はこんな感じなんだ。クラスを作るには「class」という言葉を使って、その後にクラスの名前を書いて、中に色々な機能を入れるんだよ。例えば、こんな風に書くことができるんだ。
“`typescript
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log(`${this.name}が鳴いているよ！`);
}
}
“`
これで「Animal」というクラスができたんだ。クラスの中には、動物の名前を持つための場所と、鳴くための機能があるよ。何か分からないところがあったら教えてね！
“`typescript
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log(`${this.name}が鳴いているよ！`);
}
}
“`
これで「Animal」というクラスができたんだ。クラスの中には、動物の名前を持つための場所と、鳴くための機能があるよ。何か分からないところがあったら教えてね！
ハナ: クラスの中の機能って、どういうこと？
リュウ: いい質問だね！クラスの中の機能は、クラスが何をするかを決めるお手伝いをするものだよ。たとえば、私たちが動物クラスを作った時、動物が「鳴く」ことができるっていうのがその機能なんだ。だから、動物たちが何かアクションをするために、その機能を使うことができるんだよ。どう思う？もう少し詳しく知りたいことがあれば教えてね！
ハナ: じゃあ、クラスを使って犬や猫を作れるの？
リュウ: その通り！クラスは、犬や猫を作るための型みたいなものなんだよ。さっきの「Animal」クラスを使って、犬や猫を作ることができるんだ。例えば、犬のために「Dog」という新しいクラスを作ることもできるし、Animalクラスを使って犬として特別な特徴を持たせることもできるんだ。こうすることで、色んな動物のクラスを簡単に作れるよ。どうかな？もっと具体的に知りたいことがあれば言ってね！
ハナ: それって、どうやって実際に犬のクラスを作るの？
リュウ: いいよ、ハナさん！犬のクラスを作るのは簡単だよ。Animalクラスを元にして、Dogというクラスを作ってみるといいよ。こんな風に書けるんだ：
“`typescript
class Dog extends Animal {
bark() {
console.log(`${this.name}がワンワンって鳴いているよ！`);
}
}
“`
ここでは「extends」を使って、Animalクラスを継承しているんだ。これでDogクラスもAnimalの特徴を持つようになるんだよ。Dogクラスの中に「bark」という新しい機能を追加して、犬が吠えることができるようにしているんだ。動物と同じように、犬も自分の特別な行動を持てるんだよ。試してみたくなったかな？
“`typescript
class Dog extends Animal {
bark() {
console.log(`${this.name}がワンワンって鳴いているよ！`);
}
}
“`
ここでは「extends」を使って、Animalクラスを継承しているんだ。これでDogクラスもAnimalの特徴を持つようになるんだよ。Dogクラスの中に「bark」という新しい機能を追加して、犬が吠えることができるようにしているんだ。動物と同じように、犬も自分の特別な行動を持てるんだよ。試してみたくなったかな？
TypeScriptのモジュールとは何ですか？
ハナ: TypeScriptのモジュールとは何ですか？
リュウ: モジュールってのは、まるでおもちゃのブロックみたいなものなんだ。たくさんのブロックがあって、それを組み合わせて一つの大きなおもちゃを作るでしょ？TypeScriptのモジュールも同じように、プログラムの中で特定の機能を持った部分を分けて作ることで、大きなプログラムを作りやすくしているんだよ。
ハナ: じゃあ、どうやってそのモジュールを使うの？
リュウ: モジュールを使うのは、まるで宝箱から欲しいおもちゃを取り出すみたいだね。作ったモジュールを使いたいときは「インポート」っていう方法で、他の場所からそのモジュールを呼び出して使うんだ。そうすることで、プログラムをもっと簡単に整理できるんだよ。
ハナ: 他の人が作ったモジュールも使えるの？
リュウ: もちろんだよ！他の人が作ったモジュールは、まるで色んなデザインのブロックを借りることができる感じなんだ。パソコンの中にはたくさんの便利なモジュールがあるから、自分が作りたいものに合わせて使うことができるんだ。自分だけの作品を作るのにとても便利だよ。
ハナ: どうやって自分のモジュールを作るの？
リュウ: 自分のモジュールを作るのは、好きなおもちゃの形を考えて作るみたいなものなんだ。まずは、そのモジュールが何をするものかを考えて、必要な機能を組み合わせて作るんだ。それから、他の部分から使えるようにしてあげれば、自分だけの特別なモジュールが完成するよ。すごく楽しいよね！
TypeScriptの非同期処理はどのように行いますか？
ハナ: TypeScriptの非同期処理ってどうやってやるの？
リュウ: 非同期処理をやるには、主に「Promise」と「async/await」を使うんだよ。Promiseは約束みたいなもので、何かの作業が終わったら教えてくれるんだ。例えば、友達に「遊びに行くから待っててね」って言って、遊びに行ったら連絡くれるみたいな感じだね。
ハナ: その約束ってどうやって使うの？
リュウ: いい質問だね！Promiseを使うには、新しいPromiseを作って、非同期の処理を書くんだ。例えば、お菓子を焼くのに時間がかかるとしたら、焼き上がったら「お菓子ができたよ！」って知らせるみたいに、resolveっていう機能で結果を返すんだよ。これで、焼きあがるのを待っている間に他のことをしていることができるんだ。
ハナ: じゃあ、async/awaitは何なの？
リュウ: async/awaitはこの約束をもっと簡単に使える方法なんだ。新しいお菓子を焼くときに、「焼けたら教えてね」って言うだけで、何をするか簡単に書けるんだよ。asyncをつけると、その中でawaitを使って、焼きが終わるのを待てるんだ。これで、まるでお菓子が焼き上がるのを見てるかのように、簡単に書けるの。
ハナ: へぇ、じゃあコードの例を見せてほしいな！
リュウ: わかった！例えばこんな感じだよ。
“`typescript
async function makeCookie() {
const cookie = await bakeCookie();
console.log(`${cookie}ができたよ！`);
}
function bakeCookie(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(“クッキー”);
}, 2000);
});
}
makeCookie();
“`
ここでは、2秒待ってから「クッキーができたよ！」って表示されるんだ。待ってる間は他のことも見れちゃうよ。どう、イメージできるかな？
“`typescript
async function makeCookie() {
const cookie = await bakeCookie();
console.log(`${cookie}ができたよ！`);
}
function bakeCookie(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(“クッキー”);
}, 2000);
});
}
makeCookie();
“`
ここでは、2秒待ってから「クッキーができたよ！」って表示されるんだ。待ってる間は他のことも見れちゃうよ。どう、イメージできるかな？
TypeScriptでのエラーハンドリングはどうするべきですか？
ハナ: TypeScriptでのエラーハンドリングはどうするべきなの？
リュウ: エラーハンドリングは、プログラムがうまくいかないときの対処法だよ。例えば、風船を膨らませようとして破れちゃった時を考えてみて。風船が破れたら、どうする？別の風船を使ったり、破れたところを直したりするよね。それがエラーハンドリング。TypeScriptでは、`try`と`catch`という魔法の言葉を使ってエラーをキャッチするんだ。まずは`try`の中にうまくいくコードを書いて、もしエラーが起こったら`catch`でそのエラーを受け取ることができるんだ。
ハナ: なるほど！それって簡単にできるの？
リュウ: うん、とても簡単だよ！たとえば、次のように書くとするよ。
“`typescript
try {
// ここにうまくいくコードを書く
console.log(“風船を膨らませるよ！”);
} catch (error) {
// もしエラーが起こったらここに入る
console.log(“風船が破れちゃった！新しい風船にするね。”);
}
“`
こんなふうにすれば、何か問題があった時にどうするかをあらかじめ考えておくことができるんだ。ハナさんもやってみたい？
“`typescript
try {
// ここにうまくいくコードを書く
console.log(“風船を膨らませるよ！”);
} catch (error) {
// もしエラーが起こったらここに入る
console.log(“風船が破れちゃった！新しい風船にするね。”);
}
“`
こんなふうにすれば、何か問題があった時にどうするかをあらかじめ考えておくことができるんだ。ハナさんもやってみたい？
ハナ: うん、やってみたい！でも、どんなエラーがよく起こるの？
リュウ: 良い質問だね！エラーはいろんな状況で起こるよ。例えば、データが見つからない、計算が間違っている、ネットがつながらないといったことがあるんだ。たとえば、レシピを作ろうとして、必要な材料が足りないとするよね。その時、レシピを続けることができなくなるよね。それに似たことがプログラムでもあるんだ。そういう風に、どう対処するか考えることが重要なんだよ。
ハナ: そっか！エラーが起きても対処の仕方があるんだね。もう一つ教えてもいい？
リュウ: もちろん、何でも聞いてね！どんなことが知りたいのかな？
TypeScriptの型推論機能はどのように働くのですか？
ハナ: TypeScriptの型推論機能ってどうやって働くの？
リュウ: 型推論は、TypeScriptが変数や関数のデータの種類を自動的に判断してくれる仕組みなんだ。たとえば、君が「let age = 10;」って書くと、TypeScriptは「age」という変数が数字だと理解するの。オモチャの箱に何が入っているかを見ずに推測するのと似てるんだよ。
ハナ: ヒントもなくて、自分で考える感じなんだね！じゃあ、どんなときに型推論が役に立つの？
リュウ: 型推論は、プログラムを書くときにとても役立つよ。たとえば、間違った種類のデータを使うとエラーになったりするから、間違いを未然に防いでくれる。イメージとしては、道を間違えないように道しるべがある感じだね。
ハナ: ああ、道しるべみたいに助けてくれるんだ。でも、型を自分で指定する必要もあるの？
リュウ: そうだね、場合によっては自分で型を指定した方が分かりやすいこともあるよ。例えば、特定の条件がある場合や、特別なデータを使いたいときには、型を明示的に指定することで間違いを減らすことができる。それは、地図を見て行き先を正確に探すみたいなことなんだ。
ハナ: なるほど！じゃあ、型推論があっても、たまには自分で考えて指定することもあるんだね！もっと知りたいんだけど、型推論にはどんな種類があるのかな？
リュウ: 型推論にはいくつか種類があるけれど、主に「初期化時の型推論」と「文脈による型推論」があるよ。初期化時の型推論は、変数を初めて定義したときにそのデータタイプを判断するもので、文脈による型推論は、関数の引数や戻り値の状況から自動的にデータタイプを決めることなんだ。これらはどちらも、君が楽しくプログラミングできる手助けをしてくれるんだよ。
TypeScriptの装飾子（デコレーター）とは何ですか？
ハナ:デコレーターって何なの？教えて！
リュウ:デコレーターというのは、簡単に言うと、オブジェクトやクラスの機能をちょっとだけ変えたり、追加したりするための飾りみたいなものだよ。例えば、君がクッキーを焼くときに、飾りをつけたりチョコを追加したりするのと似てるんだ。デコレーターを使うことで、コードをもっと便利にしたり、見た目を良くすることができるんだよ。
ハナ:すごい！じゃあ、どうやって使うの？難しいの？
リュウ:使い方は色々あるけど、基本的には関数の前に@をつけて、その後にデコレーターの名前を書くんだ。たとえば、君が「特別なクッキー」として飾りだけのクッキーを作ったら、そのクッキーのレシピのタイトルの前に「特別」と書く感じかな。簡単でしょ？
ハナ:なるほど！でも、デコレーターにはどんな種類があるの？
リュウ:デコレーターにはいくつかの種類があって、例えば「クラスデコレーター」、「メソッドデコレーター」、「プロパティデコレーター」なんかがあるよ。それぞれが異なる部分を飾ってくれるんだ。クラスデコレーターはそのクラス全体を飾る感じ、メソッドデコレーターはそのクラスの中の特定の機能を飾る感じだよ。だから、自分がどれを使いたいかによって選ぶことができるんだ。
ハナ:面白そう！でも、どんな時にデコレーターを使ったらいいの？
リュウ:例えば、クラスを使って何かを作っている時に、そのクラスの特徴を強調したいときや、特別なルールを追加したいときに使うといいよ。君が自分の好きなアニメキャラクターの衣装を作るときに、そのキャラクターの特徴を加えたりするのと同じように、デコレーターもオブジェクトに個性を与えるのに役立つんだ。
ハナ:なるほど！じゃあ、デコレーターを使うと何が便利になるの？
リュウ:デコレーターを使うことで、コードがもっときれいに整理されて、他の人が見ても理解しやすくなるんだ。だから、みんなで協力してプロジェクトを作るときにすごく役立つよ。君が友達と一緒に何かを作るとき、自分のアイデアを上手に伝えるのに似ているかもしれないね。
ハナ:わかった！ほんとに面白そうだね。もっと知りたいな！
TypeScriptの型の拡張方法は？
ハナ: TypeScriptの型の拡張方法はどうやるの？
リュウ: 型の拡張って聞くとちょっと難しそうに思えるけど、簡単に言うと、新しい型を作ることで、既存の型に新しい特性を足すことなんだ。たとえば、猫という型があるとするよね。それに「毛の色」っていう特性を追加したい場合、猫型を拡張して新しい猫型を作ればいいんだよ。この新しい型は毛の色を持つ猫の情報を含めることができるの。
ハナ: へぇ、そうなんだ！でも、どうやって猫型を作るの？
リュウ: まずは、基本の猫型を定義して、それを使って新しい猫型を作るよ。例えば、次のように書くんだ。
“`typescript
type Cat = {
name: string;
age: number;
};
type ColorfulCat = Cat & {
color: string;
};
“`
ここで、「Cat」は普通の猫の型で、「ColorfulCat」は毛の色も持っている猫の型になるよ。「&」を使って、２つの型を組み合わせているんだ。
“`typescript
type Cat = {
name: string;
age: number;
};
type ColorfulCat = Cat & {
color: string;
};
“`
ここで、「Cat」は普通の猫の型で、「ColorfulCat」は毛の色も持っている猫の型になるよ。「&」を使って、２つの型を組み合わせているんだ。
ハナ: なるほど！じゃあ、これだと色々な猫が作れるってことだね？もっと例を教えてー！
リュウ: そうそう、賢いね！たとえば、家で飼っている猫とサバンナにいる野生の猫、両方を作りたいとするよね。色を追加することで、どっちの猫も同じデータ形式を使えるから、管理が楽になるんだ。こんなふうにクラスを使っても拡張できるよ。
“`typescript
class Cat {
constructor(public name: string, public age: number) {}
}
class ColorfulCat extends Cat {
constructor(name: string, age: number, public color: string) {
super(name, age);
}
}
“`
これなら、ColorfulCatのインスタンスが作れるし、普通のCatも残せるから便利だよ。
“`typescript
class Cat {
constructor(public name: string, public age: number) {}
}
class ColorfulCat extends Cat {
constructor(name: string, age: number, public color: string) {
super(name, age);
}
}
“`
これなら、ColorfulCatのインスタンスが作れるし、普通のCatも残せるから便利だよ。
ハナ: わぁ、すごい！でも、今のままだと猫の名前と年齢しか分からないよね。どうやって色を考慮するの？
リュウ: いい質問だね！ColorfulCatのインスタンスを作るときに、色も指定しなきゃいけないよ。こんなふうに使うといいよ。
“`typescript
const myCat = new ColorfulCat(“ミケ”, 3, “白”);
“`
これで、「ミケ」という名前の3歳の白い猫が作れる！色を考えることで、もっと具体的な猫の情報が得られるね。
“`typescript
const myCat = new ColorfulCat(“ミケ”, 3, “白”);
“`
これで、「ミケ」という名前の3歳の白い猫が作れる！色を考えることで、もっと具体的な猫の情報が得られるね。
ハナ: わかりやすい！じゃあ、他の動物にもこれが使えるの？
リュウ: もちろん！犬とか、ウサギとか、どんな動物にも同じように型を作って拡張できるよ。それぞれの特徴を追加すれば、もっと詳しい情報が管理できるし、便利だよね。興味のある動物があったら、一緒に考えてみてもいいよ！
TypeScriptの型エイリアスとは何ですか？
ハナ: TypeScriptの型エイリアスって何なの？教えて！
リュウ: 型エイリアスというのは、TypeScriptで新しい名前を作ることなんだ。たとえば、君が「お菓子」という単語を「スイーツ」と呼びたい時、スイーツという名前を作って、その名前を使う感じだよ。型エイリアスを使うと、プログラムの中でデータの種類を分かりやすくすることができるんだ。
ハナ: じゃあ、型エイリアスを使うと、プログラムがどんな風に良くなるの？
リュウ: 良い質問だね！たとえば、君が描く絵に名前を付けることで、どんな絵か簡単にわかるでしょ？型エイリアスも同じように、データの種類に名前を付けることで、どんなデータを使っているかがはっきりするんだ。これによって、プログラムを読んだり書いたりするのが楽になるんだよ。
ハナ: なるほど！じゃあ、型エイリアスってどうやって書くの？
リュウ: 型エイリアスを書くのは簡単だよ。「type」って言葉を使って、新しい名前を作るの。たとえば、「type スイーツ = string;」って書いたら、「スイーツ」という名前が「文字」を意味することになるんだ。これで、スイーツって名前を使えば、文字のことを簡単に表せるようになるよ。
ハナ: それって、学校の授業で習ったことに似てるかな？
リュウ: 確かに似ているね！学校で新しい言葉を覚えたり、友達にニックネームを付けたりするのと同じだよ。型エイリアスを使えば、君のプログラムがもっと整理されて、わかりやすくなるんだ。何か他にも聞きたいことはあるかな？
TypeScriptでのユニオン型と交差型の違いは何ですか？
ハナ: TypeScriptでのユニオン型と交差型の違いは何ですか？
リュウ: ユニオン型と交差型は、いろんな種類のデータを使う時にすごく便利だよ。ユニオン型は「AまたはB」という感じで、どちらの型も使えるの。例えば、りんごとバナナ、どっちかを選べるってことね。交差型は「AかつB」、つまり両方の特徴を持っている必要があるんだ。例えば、赤いりんごで、かつ大きいっていう条件がある感じだね。
ハナ: もっと具体例を教えて！ユニオン型はどんな感じ？
リュウ: いいよ！例えば、ユニオン型では「もも」と「すいか」という果物の型を考えると、これを使うと「もも」か「すいか」のどちらかを選ぶことができるんだ。「フルーツ」という型にできるよ。でも、交差型は「大きさが大きいフルーツかつ甘い」って感じで、両方の条件を満たさないといけないんだ。だから、甘くて大きいフルーツだけになるね。
ハナ: なるほど～！それじゃあ、交差型も具体的な例がほしいな！
リュウ: もちろん！たとえば「ペット」と「犬」という交差型にすると、「犬」っていう動物で、さらに「ペット」として飼われているっていう条件がつくよ。犬を飼っているなら、それが交差型の条件を満たしているってことになるね。
ハナ: そうか、交差型は条件が厳しいんだね！ユニオン型は楽に選べる感じ？
リュウ: その通り！ユニオン型は自由に選んで楽しむことができるけど、交差型はしっかり条件に合ったものだけを選ばないといけないんだ。この違いを覚えておくと、プログラミングがもっと楽しめるよ！
TypeScriptのコンパイラオプションにはどのようなものがありますか？
ハナ: TypeScriptのコンパイラオプションにはどんなものがあるの？
リュウ: TypeScriptのコンパイラオプションはたくさんあるよ！例えば、「target」というオプションは、どのJavaScriptのバージョンに変換するかを決められるんだ。これは、ライオンを小さな子犬に変えるみたいな感じで、動物の大きさを選ぶことができるんだよ。
ハナ: 他にもあるの？
リュウ: もちろん！「strict」オプションっていうのもあるよ。これは、厳密にルールを守るってことなんだけど、例えば、道をしっかり横断歩道で渡るかどうかみたいな感じだね。ルールを守ると、安全に渡れるよね。
ハナ: なるほど、だから厳格になるのか！他には何かある？
リュウ: そうだね、「outDir」ってオプションも面白いよ。これは、コンパイルしたファイルをどこに置くか決めるんだ。まるで、おもちゃをしまう場所を決めるみたいなもので、どこに置いたら分かりやすいか考える感じだね。
ハナ: おもちゃの収納みたいなんだ！もっと知りたいな。
リュウ: じゃあ、「module」ってオプションもあるよ。これは、どうやってコードをまとめるかを決めるんだ。たとえば、友達と遊ぶときに、どの道具を使うか選ぶのと似てるよ。みんなが使いたい道具で楽しく遊ぶために、決めるんだ。
ハナ: わー、楽しそう！それって、どんな道具がいいとか決めるんだね。他にも教えて！
リュウ: はい、最後に「jsx」ってオプションもあるよ。これは、Reactというライブラリを使うときに、HTMLをTypeScriptの中に書けるようにするものなんだ。たとえば、工作で新しいおもちゃを作る時に、どんなパーツを使うか選ぶようなものだよ。素敵なおもちゃを作るために、パーツを選ぶのが大切だね。
ハナ: おもちゃを作るみたいに、組み合わせるのが面白そう！リュウさん、たくさん教えてくれてありがとう！
TypeScriptでの型定義ファイルとは？
ハナ: TypeScriptでの型定義ファイルって何だろう？
リュウ: 型定義ファイルは、TypeScriptの世界で「なんの種類のものがあるか」を教えてくれる大事なものなんだ。例えば、学校でみんなの名前を書いた名簿があるとするよね。その名簿には「ハナさん」「リュウさん」っていう名前が書いてあって、誰が誰かが分かるよね。それと同じように、型定義ファイルがあると、どんなデータがどの場所にあるのかが分かるんだよ。これがあるから、誤って違う種類のデータを使ったりすることが少なくなるんだ。
ハナ: なるほど、名簿みたいなんだね！それってどうやって作るの？
リュウ: そうだね、名簿を作るのと同じように、型定義ファイルもルールに従って書く必要があるよ。たとえば、「名前」があるとしたら、その名前が「文字列」だってことを教えてあげるんだ。「年齢」もあったら「数字」だよね。こんなふうに、「これは何の種類だよ」って説明して、コンピュータに分かってもらうためのファイルを作るんだ。
ハナ: じゃあ、その型定義ファイルがあると、プログラムが間違えにくくなるってこと？
リュウ: その通り！型定義ファイルがあることで、もし間違ったデータを使おうとすると警告が出たりして、気づくことができるんだ。まるで、宿題で間違った答えを書いた時に、先生が「それは違うよ！」って教えてくれるような感じだね。
ハナ: 面白い！じゃあ、型定義を使うメリットは他にもある？
リュウ: もう一つの大きなメリットは、みんなが一緒に協力してプログラムを書くときに、どんなデータを使っているのかが明確になることだよ。たとえば、友達と一緒に遊ぶ時にルールを決めるのと同じ。ルールがはっきりしているから、みんなが楽しく遊べるんだ。これが型定義ファイルがあることで、チームのみんながスムーズに作業できる理由なんだよ。
ハナ: そういうことなんだ！もっと型定義ファイルについて知りたくなっちゃった！
