先生と生徒の会話形式で理解しよう

生徒

「プログラミングを始めたいんですが、TypeScriptってどんな言語なんですか？」

先生

「TypeScriptは、JavaScriptをベースにしたプログラミング言語です。JavaScriptに型（タイプ）の仕組みを加えて、もっと安全にプログラムを書くことができますよ。」

生徒

「型って何ですか？難しそうですね…」

先生

「大丈夫です。型というのは『これは数字です』『これは文字です』というように、データの種類を表すものなんですよ。それでは、TypeScriptの基本をひとつずつやさしく見ていきましょう！」

1. TypeScriptとは？

TypeScript（タイプスクリプト）は、マイクロソフトが開発したプログラミング言語です。TypeScriptは、JavaScriptを拡張したもので、JavaScriptの書き方がそのまま使えます。

ただし、TypeScriptには型（タイプ）というルールがあり、「この変数は数字しか入れてはいけない」「この関数には文字を渡す」など、ミスを防ぐ助けになります。

初心者にとっても、ルールがあることで安心してコードを書くことができるのが特徴です。

2. 変数の宣言と型の指定

TypeScriptでは、変数を使ってデータを一時的に保存します。変数には名前をつけて、あとから使うことができます。

基本的な書き方は以下のとおりです。


let age: number = 25;
let name: string = "太郎";
let isStudent: boolean = true;

letは「変数を作ります」という命令で、: numberは「これは数字の型ですよ」という意味です。これを型注釈（アノテーション）といいます。

3. 基本的なデータ型

TypeScriptでよく使われる基本のデータ型は次のとおりです。

number型：整数や小数などの数値
string型：文字列（文章や名前など）
boolean型：true（はい）またはfalse（いいえ）

それぞれの使い方を簡単に見てみましょう。


let price: number = 1200;
let productName: string = "りんご";
let inStock: boolean = true;

4. 配列とその型

配列とは、複数の値をひとつにまとめて扱える箱のようなものです。たとえば、好きな果物をまとめて保存できます。


let fruits: string[] = ["りんご", "バナナ", "みかん"];
let scores: number[] = [80, 90, 100];

string[]は「文字列の配列」、number[]は「数値の配列」です。

5. 条件分岐（if文）

TypeScriptでは、条件によって処理を変えるためにif文を使います。たとえば、年齢によって表示を変えることができます。


let age = 18;
if (age >= 20) {
    console.log("お酒が飲めます");
} else {
    console.log("未成年です");
}


未成年です

6. 関数の基本

関数（かんすう）とは、よく使う処理をひとまとめにする仕組みです。「あいさつを表示する」などの動作を関数にしておけば、何度でも使いまわせます。


function greet(name: string): void {
    console.log("こんにちは、" + name + "さん！");
}

greet("花子");


こんにちは、花子さん！

name: stringは「nameは文字列ですよ」、: voidは「何も返さない関数ですよ」という意味です。

7. コンパイルとは？

TypeScriptで書いたコードは、そのままではブラウザで動きません。JavaScriptに変換（これをコンパイルといいます）してから動かします。

以下のように、ターミナルでtscコマンドを使ってコンパイルします。


tsc index.ts

このコマンドを実行すると、index.jsというファイルが生成され、中にはJavaScriptに変換されたコードが入っています。

8. コンソールへの出力

TypeScriptでプログラムの動きを確認するには、console.logという命令を使って、コンソールにメッセージを表示させます。


let message: string = "はじめてのTypeScript！";
console.log(message);


はじめてのTypeScript！

このようにして、プログラムの中の値や動作を確認できます。

まとめ

TypeScriptの基本を体系的に学んできましたが、あらためて振り返ってみると、プログラミング初心者が最初に身につけておきたい知識がどれほど幅広く、そして実際の開発でどれほど重要なのかがよく分かります。特に、型という考え方はTypeScriptを理解するうえで欠かせないポイントであり、データの種類を明確にしながら安全にコードを書けるという魅力があります。また、変数の宣言、配列、条件分岐、関数の基本など、JavaScriptとも共通する部分を押さえながら、より丁寧でわかりやすい書き方ができることもTypeScriptの特徴です。さらに、実際にプログラムを実行するためにはコンパイルが必要であり、コンソールへの出力を通してプログラムの動作を確認するプロセスも学びました。これらの基礎はWebアプリ開発、バックエンド処理、フロントエンドのUI動作などあらゆる場面で必ず役に立ちます。ここでは、今回の学びを応用しやすいように、TypeScriptの特徴を活かしたサンプルプログラムも合わせて掲載しておきます。

■ TypeScriptの基本を活かした実践サンプルコード

以下は、TypeScriptの「型」「配列」「条件分岐」「関数」を組み合わせたサンプルです。学習内容を実際のプログラムとしてまとめることで、さらに理解が深まります。


type User = {
    name: string;
    age: number;
    hobbies: string[];
};

function introduce(user: User): void {
    console.log(`こんにちは、${user.name}さん！年齢は${user.age}歳ですね。`);
    if (user.hobbies.length > 0) {
        console.log("趣味は次のとおりです：");
        user.hobbies.forEach((hobby) => {
            console.log("・" + hobby);
        });
    } else {
        console.log("趣味が登録されていません。");
    }
}

const userData: User = {
    name: "太郎",
    age: 22,
    hobbies: ["サッカー", "読書", "プログラミング"]
};

introduce(userData);

このサンプルでは、型エイリアスUserを使ってユーザー情報を管理し、配列・条件分岐・関数の組み合わせにより、読みやすく整理されたコードを実現しています。TypeScriptの強みである型による安全性を保ちながら、複雑なデータでも扱いやすいのが特徴です。また、関数を使うことで「自己紹介を表示する」という処理をひとまとめにし、何度でも再利用できる形にしています。実務の開発でも、こうした関数の設計は非常に重要で、保守性の高いコードを書くための第一歩となります。

■ TypeScriptを学ぶ意義と今後のステップ

TypeScriptを学び始めると、はじめは「型って難しそう…」と感じることもありますが、実際にはコードのミスを減らし、安心してプログラムを組み立てられる頼もしい仕組みです。特にプロジェクトが大きくなるほど、型があることでバグが発見しやすくなり、メンテナンス性も向上します。今後さらにスキルを伸ばすためには、インターフェース、クラス、非同期処理、ジェネリクスなど新しい概念にも触れていくとよいでしょう。それらもすべて今回学んだ基礎の上に成り立っています。

先生と生徒の振り返り会話

生徒

「TypeScriptって最初は難しいと思っていたけど、基本をひとつずつ知ると意外と理解しやすいんですね！」

先生

「そうですね。特に型の仕組みを知ると、コードがすごく整理されて書きやすくなりますし、エラーも減りますよ。」

生徒

「関数や条件分岐もTypeScriptで書けて、JavaScriptと似ている部分も多いから安心しました。」

先生

「その通りです。JavaScriptの知識も生かせますし、より正確で読みやすいコードにできるのがTypeScriptの強みです。」

生徒

「今日のまとめコードも、自分のプロジェクトで応用できそうです！」

先生