カテゴリ: TypeScript 更新日: 2025/11/14

TypeScriptで最初に覚えたい基本構文まとめ

TypeScriptで最初に覚えたい基本構文まとめ
TypeScriptで最初に覚えたい基本構文まとめ

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

生徒

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

先生

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

生徒

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

先生

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

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

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

TypeScriptでは、変数を宣言するときに型(Type)を指定することができます。型とは、「この変数にはどんな種類のデータが入るのか」をあらかじめ決めておくものです。


let name: string = "田中";
let age: number = 25;
let isStudent: boolean = true;

stringは文字、numberは数値、booleanは「true(正しい)」「false(間違い)」のどちらかを意味します。

2. 条件分岐(if文)

2. 条件分岐(if文)
2. 条件分岐(if文)

if文は、「条件に応じて処理を分ける」ための書き方です。


let age: number = 18;

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

未成年です。

このように、ifelseを使うことで、条件に合わせた動きを作ることができます。

3. 繰り返し処理(for文)

3. 繰り返し処理(for文)
3. 繰り返し処理(for文)

同じ処理を何度も繰り返したいときは、for文を使います。回数を決めて実行できます。


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

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

このように、forを使うと、「繰り返し」が簡単に書けます。

4. 関数の作り方

4. 関数の作り方
4. 関数の作り方

関数とは、よく使う処理をひとまとめにして、名前をつけて再利用できる仕組みです。


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

greet("さくら");

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

voidは「何も返さない」という意味の型です。関数には「何かを返すもの」と「返さないもの」があります。

5. 配列の使い方

5. 配列の使い方
5. 配列の使い方

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


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

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

りんご
バナナ
みかん

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

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

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

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


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

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

山田さんは30歳です。

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

7. 定数(const)の使い方

7. 定数(const)の使い方
7. 定数(const)の使い方

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


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

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

合計金額は1100円です。

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

8. コメントの書き方

8. コメントの書き方
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を使いこなせるように練習してみます!」

カテゴリの一覧へ
新着記事
TypeScriptのEnum(列挙型)の使い方を解説!初心者でもわかる定数のグループ化
TypeScriptとは?JavaScriptとの違いと導入メリットを徹底解説
TypeScriptとJavaScriptでの変数宣言の違い(型注釈あり/なし)
TypeScriptのインターフェース(interface)とは?基本構文と使い方
人気記事
No.1
Java&Spring記事人気No1
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.3
Java&Spring記事人気No3
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.4
Java&Spring記事人気No4
JavaScriptのMathオブジェクトの基本メソッド一覧と使い方