フロントエンジニアを目指す初心者向け　TypeScriptの基礎を解説

TypeScriptを学ぶ理由は、型システムによるバグ抑制とコードの堅牢化により、開発効率と信頼性を大幅に向上させ、長期的なコスト削減を実現できるからです。この記事の目的は、初心者にもわかりやすくTypeScriptの基礎から実践的な使い方までを解説し、TypeScriptを使ったコーディングに必要な知識を身につけてもらうことです。

TypeScriptとは？

TypeScriptは、Microsoftが開発したJavaScriptのスーパーセットです。つまり、JavaScriptのコードはすべてTypeScriptでも動作します。さらに、TypeScriptは型システムや最新のECMAScript機能のサポートなど、JavaScriptにはない機能を提供します。これらの機能により、大規模なアプリケーション開発において、より堅牢でメンテナンスしやすいコードを書くことができます。

JavaScriptとの関係性

TypeScriptは「JavaScriptに型を加える」ことで知られています。しかし、それだけではありません。TypeScriptは、開発者がより効率的にコードを書き、バグを早期に発見し、大規模プロジェクトをより簡単に管理できるようにするための多くの機能を備えています。

JavaScriptは、あらゆるブラウザやNode.jsで動作します。一方、TypeScriptはこれらの環境で動作するJavaScriptコードにコンパイルされます。

TypeScriptの機能

TypeScriptは、あなたが既に知っているJavaScriptに少しプラスαを加えたものです。このプラスαとは、主に「変数などにあらかじめ型を指定する」機能のことです。この機能により、プログラムがより安全に、予測可能な方法で動作するようになります。

JavaScriptとの主要な違い

• 型付け

  TypeScriptでは、「変数などにあらかじめ型を指定する」ことができます。これにより、数値や文字列など、特定の種類のデータのみを変数に割り当てることが可能になり、エラーを減らすことができます。

• 高度な型機能

  TypeScriptでは、より複雑で柔軟な型の指定が可能です。例えば、「ユニオン型」を使えば、変数に文字列または数値を許容するなど、柔軟な型指定ができます。

  let id: number | string;
  id = 101; // OK
  id = "202"; // これもOK

• モジュールシステム

  TypeScriptは、コードをモジュールとして整理することをサポートしています。これにより、プロジェクトが大きくなっても、コードをきれいに整理しやすくなります。

型システムの利点

型システムには、以下のような多くの利点があります。

型システムの利点を示す表

このように、TypeScriptはJavaScriptに対する安全な拡張機能を提供し、開発者がより効率的に、エラーの少ないコードを書くためのサポートをしてくれます。

TypeScriptの基礎

TypeScriptを使うと、変数や関数、さらにはクラスやインターフェースにまで型を指定することができます。これにより、コードがより読みやすく、エラーが減少します。ここでは、TypeScriptでの型の宣言方法と、基本的な演算子の使用例、そして関数、クラス、インターフェースの定義方法について見ていきます。

TypeScriptの基礎用語表

2.1 変数、型、演算子

型の宣言方法

TypeScriptで変数を宣言する際には、変数名の後にコロン（:）と型名を記述します。

let message: string = "Hello, TypeScript!"; // 文字列型の変数宣言
let total: number = 100; // 数値型の変数宣言
let isComplete: boolean = false; // 真偽値型の変数宣言

基本的な型

• string

  文字列を表す。

• number

  数値（整数及び浮動小数点）を表す。

• boolean

  真偽値（trueまたはfalse）を表す。

演算子の使用例

TypeScriptではJavaScriptと同様に算術演算子や比較演算子、論理演算子を使用できます。

let message: string = "Hello, TypeScript!"; // 文字列型の変数宣言
let total: number = 100; // 数値型の変数宣言
let isComplete: boolean = false; // 真偽値型の変数宣言

2.2 関数、クラス、インターフェース

関数の型宣言

関数においては、引数と戻り値に型を指定できます。

function greet(name: string): string { // 引数と戻り値に型を指定
    return "Hello, " + name + "!";
}

クラス

TypeScriptでクラスを定義する際には、プロパティやメソッドにも型を指定できます。

class Person {
    name: string; // プロパティに型を指定
    age: number; // プロパティに型を指定

    constructor(name: string, age: number) { // コンストラクタで型を指定
        this.name = name;
        this.age = age;
    }

    greet(): string { // メソッドの戻り値に型を指定
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

インターフェース

インターフェースを使って、オブジェクトが持つべき形を定義できます。これはクラスに対しても、関数の引数に対しても使用できます。

interface IPerson {
    name: string; // 必須のプロパティ
    age: number; // 必須のプロパティ
    greet(): string; // メソッドのシグネチャ
}

function introduce(person: IPerson): void { // インターフェースを使用して型を指定
    console.log(person.greet());
}

const person: IPerson = { // インターフェースに沿ったオブジェクトを定義
    name: "John",
    age: 30,
    greet() { // greetメソッドの実装
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
};

introduce(person); // インターフェース型のオブジェクトを関数に渡す

これらの基礎をマスターすることで、TypeScriptを使ったプログラミングの基本が身につきます。変数の型指定から始めて、徐々に関数やクラス、インターフェースの定義に慣れていくと良いでしょう。

TypeScript開発環境のセットアップ

おすすめのIDEとツール

• Visual Studio Code (VS Code)

  軽量で高速なエディタ。TypeScriptのサポートが組み込まれており、デバッグ機能、Git統合、シンタックスハイライト、インテリセンス（コード補完）、スニペットなどが利用可能。豊富な拡張機能でカスタマイズできる。 https://code.visualstudio.com/

• WebStorm

  JavaScript、TypeScriptに特化した強力なIDE。自動リファクタリング、コードナビゲーション、高度なコード解析機能を提供し、大規模なプロジェクトに適しています。 https://www.jetbrains.com/webstorm/

• Atom, Sublime Text

  拡張性に富んだテキストエディタ。プラグインをインストールすることでTypeScriptの開発環境を構築できる。軽量でカスタマイズ可能。 https://en.wikipedia.org/wiki/Atom https://www.sublimetext.com/

上記のIDE/ツールはそれぞれ異なる特徴を持つので、自分の開発スタイルやプロジェクト規模に合ったものを選ぶことが重要です。

• 初心者向け

  VS Codeは比較的導入が簡単で、豊富な拡張機能によって使い勝手を向上できるため、初心者におすすめです。

• 大規模プロジェクト

  WebStormは強力な機能が豊富に搭載されているため、大規模なプロジェクトや複雑なコードを扱う場合におすすめです。

• カスタマイズ性

  AtomやSublime Textは自由度の高いカスタマイズ性を持つため、自分の使いやすい環境を作りたい人におすすめです。

Node.jsとTypeScriptのインストール

Node.jsのインストール

Windows

1. Node.js公式ウェブサイトからダウンロード

   https://nodejs.org/en/download

2. ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを進めます。

macOS/Linux

ターミナルを開き、以下のコマンドを実行します。

brew install node

上記のコマンドは、macOSの場合です。Linuxの場合は、使用するディストリビューションに合わせてコマンドを適宜変更してください。

TypeScriptコンパイラ

Linux/macOS

ターミナルを開き、以下のコマンドを実行します。

sudo npm install -g typescript

sudo コマンドは、管理者権限でコマンドを実行するものです。必要に応じてパスワードを入力してください。

Windows

コマンドプロンプトを開き、以下のコマンドを実行します。

npm install -g typescript

Windowsの場合、sudo コマンドは不要です。

確認

Node.jsとTypeScriptコンパイラがインストールされていることを確認するには、以下のコマンドを実行します。

node -v
typescript -v

これらのコマンドを実行すると、それぞれNode.jsとTypeScriptコンパイラのバージョンが表示されます。

TypeScriptのコンパイル方法と設定

基本的なコンパイル方法

// hello.ts

function helloWorld() {
  console.log("Hello, world!");
}

helloWorld();

上記はhello.tsという名前のTypeScriptファイルです。このファイルをJavaScriptにコンパイルするには、以下のコマンドを実行します。

tsc hello.ts

このコマンドを実行すると、hello.jsという名前のJavaScriptファイルが生成されます。

// hello.js

function helloWorld() {
  console.log("Hello, world!");
}

helloWorld();

生成されたJavaScriptファイルは、ブラウザやNode.jsで実行できます。

コンパイル時のオプション

上記のtsc hello.tsコマンドは、デフォルトの設定でコンパイルを行います。コンパイル時にオプションを指定することで、出力ファイルの場所や形式などを変更できます。

オプション例

tsc hello.ts --outDir ./dist --target es5 --module commonjs

• --outDir ./dist

  コンパイル後のファイルを./distディレクトリに保存します。

• --target es5

  ES5形式のJavaScriptを生成します。

• --module commonjs

  CommonJSモジュールシステムを使用します。

tsconfig.jsonの設定

上記のように、コンパイル時に毎回オプションを指定するのは面倒です。そこで、tsconfig.jsonという設定ファイルを使用して、コンパイルオプションをまとめて設定することができます。

設定例

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

上記はtsconfig.jsonファイルの例です。target、module、outDirなどの設定項目があります。この設定により、TypeScriptコンパイラは指定されたオプションに従ってコンパイルを行います。

tsconfig.jsonファイルを作成したら、tscコマンドを実行するだけで、設定ファイルに基づいてコンパイルが行われます。

tsc

設定ファイルで指定したディレクトリにhello.jsファイルがコンパイルされていることが確認できます。

学んだことのまとめ

ここまでを通して、TypeScriptを使った開発の基礎を学びました。TypeScriptはJavaScriptに静的型付けの利点を加え、大規模プロジェクトでも生産性を維持できる言語です。以下にポイントをまとめます。

1. TypeScriptの概要

   TypeScriptはJavaScriptのスーパーセットで、型付け、クラス、インターフェースなどの機能を追加しています。

2. 推奨の開発環境

   コード補完やデバッグ機能に優れたIDE(Visual Studio CodeやWebStormなど)を紹介しました。

3. 環境設定

   Node.jsのインストール方法と、TypeScriptコンパイラのインストール手順を解説しました。

4. コンパイル方法

   基本的なコンパイルコマンド、オプション設定、プロジェクトレベルの設定方法を説明しました。

5. TypeScriptの基本

   • 変数・型・演算子
   • 関数・クラス・インターフェースの定義方法

この基礎を習得することで、安全で効率的なコーディングが可能になります。今後は、TypeScriptの高度な機能やフレームワーク(Angular、React)との連携なども学習すると良いでしょう。

参考資料

https://www.typescriptlang.org/docs/handbook/ https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html