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

生徒

「TypeScriptを始めたばかりですが、どんな書き方から覚えたらいいですか？」

先生

「まずはTypeScriptの基本構文から覚えるのが一番だよ。変数の書き方や条件分岐、繰り返しなど、よく使う書き方を一緒に見ていこう。」

生徒

「それなら安心です！ひとつひとつ教えてください！」

先生

「もちろん！初心者でもわかるように、丁寧に説明していくよ。」

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

TypeScriptでは、変数を宣言するときに型（Type）を指定して、どんなデータを入れるのかを明確にできます。型が決まっていることで、意図しない値が入ってしまうミスを防ぎやすくなり、初心者でも安心してコードを書けるようになります。まずはよく使う基本的な型から見ていきましょう。


let name: string = "田中";      // 文字列（string）
let age: number = 25;           // 数値（number）
let isStudent: boolean = true;  // true / false を扱う型（boolean）

stringは文字、numberは数値、booleanは「true / false」を表す型です。TypeScriptの良いところは、誤って違う種類の値を入れようとすると、その場でエラーが出て教えてくれる点です。

たとえば次のように、型とは違う値を入れようとすると警告されます。


age = "二十歳";
// ❌ エラー：number型の変数に文字列は入れられません

このように、型を決めておくことで「どんな値が入る想定なのか」がはっきりし、読みやすくて安全なコードにつながります。プログラミング初心者ほど恩恵を感じやすい、大切な基礎のひとつです。

2. 条件分岐（if文）

if文は、「条件に応じて処理を変える」ための基本的な書き方です。人の年齢や点数、入力された値などに応じて結果を切り替えたいときに非常によく使われます。TypeScriptでは型が決まっているため、条件に使う値が予想外の型になってしまう心配が少なく、初心者でもわかりやすく扱えるのが特徴です。


let age: number = 18;

if (age >= 20) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}


未成年です。

この例では、変数 age が数値だと指定されているので、誤って文字列を入れてしまうとエラーで気づけます。条件分岐はとても柔軟で、複数の条件を追加したり、条件を細かく分けたりすることもできます。

例えば、年齢によって表示するメッセージをさらに細かくしたい場合は次のように書けます。


let age: number = 16;

if (age >= 20) {
    console.log("成人として扱われます。");
} else if (age >= 18) {
    console.log("高校生以上ですが、まだ成人ではありません。");
} else {
    console.log("18歳未満です。");
}

このように、if → else if → else の順に条件を重ねていくことで、直感的に読みやすい分岐処理を書けます。条件分岐はプログラムの「考える力」を表現する重要な構文なので、最初のうちから慣れておくと後の学習がぐっと楽になります。

3. 繰り返し処理（for文）

for文は、「同じ処理を決められた回数だけ繰り返す」ための基本構文です。挨拶を複数回出したり、配列の中身を順番に処理したりと、あらゆる場面で登場します。書き方さえ覚えてしまえば、プログラムの幅が一気に広がる便利な仕組みです。


for (let i = 1; i <= 5; i++) {
    console.log("こんにちは " + i + "回目");
}


こんにちは 1回目
こんにちは 2回目
こんにちは 3回目
こんにちは 4回目
こんにちは 5回目

ここでは、i という変数が 1 から 5 まで 1 ずつ増えていき、そのたびに挨拶が表示されています。i++ は「i を 1 増やす」というおなじみの書き方です。

さらに TypeScript では型が指定されているため、数字以外の値をループ用のカウンタに誤って入れてしまう心配がありません。初心者でも安心して「繰り返し」の考え方に集中できます。

もう少し実用的な例として、1〜10 の中で偶数だけを表示するループを見てみましょう。


for (let n: number = 1; n <= 10; n++) {
    if (n % 2 === 0) {
        console.log(n + " は偶数です");
    }
}

このように、for文の中で if文と組み合わせることで、条件を満たすものだけを抽出することもできます。繰り返し処理はTypeScriptを学ぶうえで欠かせない重要な構文なので、少しずつ慣れていくと良いでしょう。

4. 関数の作り方

関数とは、よく使う処理をひとまとめにして再利用できる便利な仕組みです。毎回同じ処理を書く必要がなくなるため、コードがすっきりし、ミスも減らせます。初心者のうちは「ひとつの動作に名前をつけて覚えておく」と考えると理解しやすいでしょう。


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

greet("さくら");


こんにちは、さくらさん！

上の例では greet という関数に「名前を受け取って挨拶する」という役割を持たせています。voidは「何も値を返さない」という意味で、挨拶するだけの用途にはぴったりです。

関数の良さがもっとわかりやすくなるように、簡単な計算を行う関数も見てみましょう。


function add(a: number, b: number): number {
    return a + b;
}

let result = add(3, 7);
console.log("合計は " + result + " です");


合計は 10 です

こちらは「2つの数字を受け取り、その合計を返す」関数です。返す値があるので、型はnumberになります。TypeScriptでは引数の型・戻り値の型を指定することで、計算ミスや文字列との混在などを未然に防げます。

関数は慣れてくると「処理をまとめてわかりやすく整理できる」強力な道具になります。どんな小さな処理でも関数化しておくと、コード全体の見通しがぐっと良くなるでしょう。

5. 配列の使い方

配列（はいれつ）は、複数の値をまとめて扱うための箱です。


let fruits: string[] = ["りんご", "バナナ", "みかん"];

for (let fruit of fruits) {
    console.log(fruit);
}


りんご
バナナ
みかん

string[]という書き方で、「文字の配列です」と型を指定できます。

6. オブジェクトの書き方

オブジェクトは、名前と値をセットでまとめる入れ物です。人の情報などをまとめて扱うときに便利です。


let person: { name: string; age: number } = {
    name: "山田",
    age: 30
};

console.log(person.name + "さんは" + person.age + "歳です。");


山田さんは30歳です。

このように、{ name: string; age: number }と書くことで、オブジェクトの中身の型を明示できます。

7. 定数（const）の使い方

constを使うと、「値を変更できない変数（定数）」を作れます。変わらない情報に使うと安全です。


const taxRate: number = 0.1;
let price: number = 1000;
let total = price + (price * taxRate);

console.log("合計金額は" + total + "円です。");


合計金額は1100円です。

constは一度値を入れたら、あとから書き換えられません。

8. コメントの書き方

コメントは、プログラムの中に説明を書いておくためのものです。実行には関係ありませんが、後で見直すときにとても役立ちます。


// これは1行コメントです

/*
これは
複数行にわたる
コメントです
*/

コメントを使って、何のためにそのコードを書いたか説明すると、より読みやすくなります。

まとめ

TypeScriptの基本構文をひと通り学ぶと、日常的によく使う処理がどのように書けるのか自然とイメージできるようになります。変数の宣言では型を指定することで間違いを防ぎ、条件分岐では入力された値に応じて柔軟に処理を切り替えられます。繰り返し処理は日常のコードでも頻繁に登場するため、実際に手を動かして慣れておくほど後々の理解が深まります。関数は複数の処理をまとめて再利用性を高め、配列やオブジェクトは複数の情報を一括して扱うための基礎として欠かせません。特にオブジェクトの型指定はTypeScriptらしい書き方であり、開発規模が大きくなるほど恩恵を実感できる部分です。

また、定数を使うことで値の意図しない変更を防ぎ、コードの信頼性を高めることができます。そしてコメントは、読み返したときに「なぜその書き方をしたのか」を思い出す手がかりになるため、初心者の段階から丁寧に書いておくと後で大きな助けになります。こうした基本構文が自然と身についてくると、エディタの補完機能もより活かしやすくなり、コードを書くスピードや正確さも徐々に向上していくはずです。

ここでは、記事の内容をもう少し実践しやすいように、複数の要素を組み合わせたサンプルも載せておきます。変数、関数、条件分岐、そして配列とオブジェクトをひとまとめで扱うことで、より実際のプログラムに近い形を体験できるはずです。

サンプルプログラムで理解を深める


type Student = { name: string; score: number };

const students: Student[] = [
    { name: "さくら", score: 82 },
    { name: "たろう", score: 91 },
    { name: "みどり", score: 74 }
];

function judge(student: Student): string {
    if (student.score >= 90) {
        return student.name + "さんは優秀です！";
    } else if (student.score >= 75) {
        return student.name + "さんは合格です。";
    } else {
        return student.name + "さんは再挑戦が必要です。";
    }
}

for (let s of students) {
    console.log(judge(s));
}

このように、型で守られたデータ構造を扱いながら条件分岐や関数を組み合わせることで、TypeScriptの良さを実感できます。何気ない処理でも型をつけることで意図しないミスを減らし、後から見ても読みやすいコードになります。特に初心者ほど型の予防効果を強く感じられ、学べば学ぶほど「書きやすい」「安心できる」言語であることを体験できるでしょう。

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

生徒

「基本構文をひと通り学んでみて、思った以上にわかりやすいと感じました！型があるおかげで、安心して書ける部分が多いですね。」

先生

「そうだね。TypeScriptは型でコードを守ってくれるから、実際のプロジェクトでもエラーを見つけやすいし、とても扱いやすい言語なんだ。」

生徒

「関数や配列、オブジェクトを組み合わせると、急に本格的なプログラムに見えてきてワクワクしました！」

先生

「その調子だよ。小さいコードでも組み合わせることで自由に動かせるようになる。次は型エイリアスやインターフェースなど、もっと便利な書き方も学んでいこう。」

生徒

「はい！もっとTypeScriptを使いこなせるように練習してみます！」