JavaScriptの基礎はもう身につけた。
でも 次のステップ に進みたいと思っていませんか？
そんなあなたに最適なのが TypeScript — JavaScriptをそのままパワーアップさせる言語です。
この記事では、TypeScriptの 必要性・導入方法・基本の型や書き方 を丁寧に解説。
JavaScriptで感じていた不安 — 「実行時までバグが見つからない…」 — を解消し、より 堅牢で予測可能なコード を書けるようになります。
JavaScript習得の次のステップへ、プロジェクト・チーム開発・大規模アプリでも怖くない自信を手に入れましょう！
Contents
TypeScriptとは？
TypeScriptは、Microsoftが開発したJavaScriptに型システムを追加したプログラミング言語です。
JavaScriptのスーパーセット（上位互換）なので、既存のJavaScriptコードはそのままTypeScriptとして動作します。
なぜTypeScriptを使うのか？
JavaScriptの課題：バグが実行時まで分からない（公開後にバグの存在に気づくことが多くなる。）
JavaScript
// JavaScriptではこんなバグが実行時まで分からない
function greet(name) {
return "Hello, " + name.toUpperCase();
}
greet(123); // 実行時エラー！name.toUpperCase is not a function
TypeScriptなら：開発過程でコンパイル時に問題を発見できる。
TypeScript
function greet(name: string) {
return "Hello, " + name.toUpperCase();
}
greet(123); // コンパイル時にエラー！型が違うと教えてくれる
TypeScriptの3つのメリット
- バグの早期発見：コードを書いている段階でエラーに気づける
- コードの可読性向上：型情報が「このコードは何をするか」を明確にする
- 開発効率UP：エディタの補完機能が強力になる
環境構築
必要なもの
- Node.js（バージョン14以上推奨）
- テキストエディタ（Cursor, Visual Stuio Codeなど）
Node.jsやnpmコマンドの学習がまだの場合は、事前にNode.js入門に目を通してみてください。
インストール
Bash
# TypeScriptをグローバルにインストール
npm install -g typescript
# バージョン確認
tsc --version
「tsc」は、TypeScriptコンパイラの略でコンパイラコマンドとして言語実行します。
プロジェクトの初期化
Bash
# プロジェクトフォルダを作成
mkdir typescript-tutorial
cd typescript-tutorial
# package.jsonを作成
npm init -y
# TypeScriptをプロジェクトにインストール
npm install --save-dev typescript
# tsconfig.jsonを生成
npx tsc --init
TypeScriptの基本的な型
プリミティブ型
JavaScriptの基本的なデータ型に型を付けられます。
TypeScript
// 文字列
let username: string = "太郎";
// 数値
let age: number = 25;
// 真偽値
let isActive: boolean = true;
// null と undefined
let empty: null = null;
let notDefined: undefined = undefined;
配列
TypeScript
// 数値の配列
let numbers: number[] = [1, 2, 3, 4, 5];
// 文字列の配列
let fruits: string[] = ["apple", "banana", "orange"];
// ジェネリック記法（同じ意味）
let colors: Array<string> = ["red", "blue", "green"];
オブジェクト
TypeScript
// オブジェクトの型定義
let user: { name: string; age: number } = {
name: "花子",
age: 30
};
// より複雑なオブジェクト
let product: {
id: number;
name: string;
price: number;
inStock: boolean;
} = {
id: 1,
name: "ノートPC",
price: 120000,
inStock: true
};
関数
TypeScript
// 引数と戻り値に型を付ける
function add(a: number, b: number): number {
return a + b;
}
// アロー関数
const multiply = (a: number, b: number): number => {
return a * b;
};
// 戻り値がない場合はvoid
function logMessage(message: string): void {
console.log(message);
}
Union型（複数の型を許可）
TypeScript
// 文字列または数値を受け取れる
let id: string | number;
id = "ABC123"; // OK
id = 999; // OK
// id = true; // エラー！
// 関数での使用例
function printId(id: string | number): void {
console.log("ID:", id);
}
printId("ABC"); // OK
printId(123); // OK
型エイリアス（Type Alias）
同じ型定義を再利用できます。
TypeScript
// 型に名前を付ける
type User = {
name: string;
age: number;
email: string;
};
let user1: User = {
name: "太郎",
age: 25,
email: "taro@example.com"
};
let user2: User = {
name: "花子",
age: 30,
email: "hanako@example.com"
};
インターフェース（Interface）
オブジェクトの形を定義する別の方法です。
TypeScript
interface Product {
id: number;
name: string;
price: number;
description?: string; // ?を付けるとオプショナル（省略可能）
}
let laptop: Product = {
id: 1,
name: "ノートPC",
price: 120000
// descriptionは省略可能
};
let smartphone: Product = {
id: 2,
name: "スマートフォン",
price: 80000,
description: "最新モデル"
};
実践例：簡単なTodoアプリの型定義
TypeScript
// Todoの型定義
type Todo = {
id: number;
title: string;
completed: boolean;
createdAt: Date;
};
// Todoリスト
let todos: Todo[] = [];
// Todoを追加する関数
function addTodo(title: string): void {
const newTodo: Todo = {
id: todos.length + 1,
title: title,
completed: false,
createdAt: new Date()
};
todos.push(newTodo);
}
// Todoを完了にする関数
function completeTodo(id: number): void {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = true;
}
}
// 使用例
addTodo("TypeScriptを学ぶ");
addTodo("記事を書く");
completeTodo(1);
console.log(todos);
TypeScriptファイルの実行
方法1：コンパイルしてから実行
Bash
# TypeScriptをJavaScriptにコンパイル
tsc app.ts
# 生成されたJavaScriptを実行
node app.js
方法2：ts-nodeで直接実行
Bash
# ts-nodeをインストール
npm install --save-dev ts-node
# TypeScriptを直接実行
npx ts-node app.ts
よく使う型のTips
型推論を活用する
TypeScriptは賢いので、明らかな場合は型を省略できます。
TypeScript
// 型を明示的に書く
let message: string = "Hello";
// 型推論に任せる（推奨）
let message2 = "Hello"; // 自動的にstring型と推論される
// 配列も同様
let numbers = [1, 2, 3]; // number[]と推論される
anyを避ける
TypeScript
// ❌ 避けるべき（TypeScriptの利点が失われる）
let data: any = "文字列";
data = 123; // なんでも代入できてしまう
// ✅ 適切な型を使う
let data: string | number = "文字列";
data = 123; // OK
配列やオブジェクトの型チェック
TypeScript
// 配列の要素にアクセス
const fruits = ["apple", "banana"];
const first = fruits[0]; // string型
// オブジェクトのプロパティにアクセス
const user = { name: "太郎", age: 25 };
const userName = user.name; // string型
まとめ
この記事では、TypeScriptの基礎を学びました。
今回学んだこと
- TypeScriptとは何か、なぜ使うのか
- 環境構築の方法
- 基本的な型：string, number, boolean, 配列, オブジェクト
- 関数の型定義
- Union型で複数の型を許可する方法
- Type AliasとInterfaceでコードを整理する方法
- 実践的なTodoアプリの例
次回以降で深掘りする内容
- ジェネリクス：より柔軟な型定義
- 高度な型操作：Mapped Types, Conditional Typesなど
- クラスとオブジェクト指向
- 型ガードとタイプナローイング
- 実践的なプロジェクト構成
まずはこの記事の内容を実際に試してみて、TypeScriptの便利さを体感してください！
次回は、これらの基礎を踏まえて、より高度な型システムの機能を学んでいきます！
