Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nomikazu_x(nomikazu)

【2024年最新】徹底解説！TypeScriptの超基本を超分かりやすく説明

Last updated at Posted at 2024-06-26

TypeScriptとは何か？

TypeScriptはJavaScriptを拡張した言語です。静的型付けにより、コードの間違いを早期に発見し、大規模なアプリケーション開発をスムーズに進めることができます。

JavaScriptのすべてのコードはTypeScriptで動作しますが、TypeScriptでは型を定義することでより安全にコードを管理できます。型の導入により、開発者は予期しないエラーを避け、より信頼性の高いソフトウェアを構築できます。

この言語は、Microsoftによって開発され、オープンソースで提供されています。初心者でも学びやすく、実践的なプログラミングスキルを身につけることが可能です。

TypeScriptの基本概念

TypeScriptの魅力は、その静的型付けにあります。これにより、コードに予期せぬエラーが少なくなり、開発効率が大幅に向上します。具体的には、以下の点が挙げられます。

  • 型安全性：変数や関数の型がコンパイル時にチェックされるため、実行前にエラーを発見しやすくなります。
  • 開発効率の向上：エディターが型情報を利用して、より精度の高いオートコンプリートやコードナビゲーションを提供します。
  • 互換性：JavaScriptのコードはそのままTypeScriptとしても機能します。これにより、既存のJavaScriptプロジェクトにTypeScriptを段階的に導入することができます。

また、TypeScriptはMicrosoftによって開発されたオープンソースプロジェクトであるため、全世界の開発者からの支持を受けています。この広範なコミュニティは、豊富なライブラリと定義ファイルを提供し、さまざまなフレームワークやライブラリとの連携を容易にします。

このように、TypeScriptは基本的なコンセプトを理解することで、より堅牢で管理しやすいアプリケーション開発が可能になります。これが、多くの現代の開発環境で選ばれる理由の一つです。この言語の基礎をしっかりと押さえ、効率的なプログラミングを目指しましょう。

JavaScriptとの違いとは？

TypeScriptはJavaScriptのスーパーセットとして設計されており、両者の間にはいくつか重要な違いが存在します。これらの違いを理解することは、TypeScriptの有効活用に繋がります。主な違いは以下の通りです。

  • 静的型付け：TypeScriptの最大の特徴は、静的型付けが可能である点です。これにより、変数や関数の引数、戻り値の型を厳密に定義でき、より安全で保守しやすいコードの実現が可能になります。
  • ツールのサポート：型情報が提供するメリットは、コードの自動補完やリファクタリングが容易であることにも表れています。これにより、開発プロセスがスムーズになり、生産性が向上します。
  • エラーチェックの厳密さ：コンパイル時に型チェックが行われるため、実行前に多くのエラーを発見できます。これに対して、JavaScriptでは実行時までエラーが明らかにならないケースが多く見受けられます。

これらの違いから、TypeScriptは特に大規模なプロジェクトや、チームでの開発においてその真価を発揮します。安全性が求められるアプリケーションの開発においても、TypeScriptの採用が推奨される理由の一つです。

JavaScriptが提供する柔軟性と、TypeScriptがもたらす安全性を組み合わせることで、エラーの少ない効率的な開発環境を構築できます。このような特性を踏まえ、適切なシナリオでの言語選定が求められるでしょう。

TypeScriptを導入するメリット

TypeScriptは多くの開発者に支持されているプログラミング言語で、そのメリットはたくさんあります。これらの特徴がTypeScriptを他の言語と区別し、特に大規模プロジェクトやチーム開発において優れた選択肢として位置づけられています。

静的型付けによるコード品質の担保

TypeScriptが開発者から高い評価を受けている理由の一つに、静的型付けの導入があります。この特徴がコードの品質と開発の効率をどのように向上させるかを具体的に見ていきましょう。

  1. エラーの早期発見：
    • 型の不一致や存在しないプロパティへのアクセスなど、様々なエラーをコーディング中に発見できます。
    • これにより、開発の初期段階で問題を修正できるため、後のデバッグ作業が軽減されます。
  2. コードの自動補完とリファクタリングの向上：
    • 開発環境が型情報を利用して、変数や関数の利用法を正確に示すことができます。
    • 安全かつ迅速なコードの改修が可能となり、リファクタリングが容易に行えます。
  3. プロジェクトのスケーラビリティ：
    • 静的型付けは、大規模なプロジェクトや複数人での開発において特にその価値を発揮します。
    • 型情報が整合性を保ちながら共有されるため、チームメンバー間でのコードの理解が進みます。
  4. 保守性と可読性の向上：
    • 型が明示されていることで、コードがより読みやすく、意図が明確になります。
    • 将来的にコードを見返した時や、新たなメンバーがプロジェクトに参加した際にも、スムーズな理解と取り組みが可能です。

これらの利点により、TypeScriptを使用することで、開発の初期段階から高い信頼性を持ったアプリケーションを構築できるようになります。確かな技術基盤の上で、より創造的な開発に集中することができるでしょう。

コードの堅牢性を高める機能

TypeScriptは、開発者がより堅牢なアプリケーションを構築するための複数の機能を提供します。これらの機能は、エラーを減少させ、プロジェクトの安定性を向上させることを目的としています。主要な機能を挙げてみましょう。

  1. 強力な型システム：
    • 基本的な型から高度なジェネリックス、ユニオン型、インターセクション型に至るまで、幅広い型をサポートしています。
    • コード内の変数や関数が予期せぬ型で使用されることを防ぎます。
  2. アクセス修飾子：
    • クラス内のメンバーに対して、public、private、protectedといったアクセス修飾子を使用できます。
    • カプセル化を強化し、クラスの外部からの不正なアクセスを防止します。
  3. 名前空間とモジュール：
    • コードの再利用性を高めつつ、グローバル名前空間の汚染を防ぐための名前空間やモジュールが利用できます。
    • 関連する機能やクラスを組織的に管理し、プロジェクトの構造を明確にします。
  4. 非同期処理のサポート：
    • Promiseやasync/awaitといった現代的な非同期処理がフルにサポートされており、非同期コードの可読性と信頼性が向上します。
    • コードの実行順序を簡潔に保ちつつ、効率的な処理が可能となります。

これらの機能によって、TypeScriptはコードの堅牢性を大幅に向上させることができます。これにより、安全で保守が容易なアプリケーション開発が実現するのです。開発者はこれらのツールを駆使して、品質の高いソフトウェアを提供することが求められます。

大規模開発でのメリット

TypeScriptは大規模プロジェクトの開発において、多くのメリットを提供します。その型システムとツールセットが、複雑なアプリケーションの構築を支援し、効率的な開発プロセスを実現します。以下に、その主な利点を挙げます。

  1. コードの一貫性：
    • 型定義により、開発者がプロジェクト全体で一貫したコーディング規則を適用することが容易になります。
    • 変数や関数の意図しない使用を防ぎ、エラーのリスクを低減します。
  2. コラボレーションの向上：
    • 型情報がドキュメントの役割も果たすため、新規参加者がコードベースを理解するのに要する時間が短縮されます。
    • チーム間のコミュニケーションがスムーズになり、効率的な協働が促進されます。
  3. リファクタリングの安全性：
    • 型安全性が高いため、コードの大幅な改修時でも既存の機能を損なうリスクが低くなります。
    • 安心してコードの最適化や機能追加が行えます。
  4. ツールとの統合：
    • TypeScriptは多くのIDEやエディタで強力なサポートを受けており、静的解析やコード補完が充実しています。
    • 開発者はこれらのツールを利用して、より迅速かつ正確にコードを書くことができます。

このように、TypeScriptは大規模開発の環境において、コードの品質を保ちつつ開発速度を維持するための強力なサポートを提供します。それにより、大規模プロジェクトでも柔軟性と拡張性を持続可能に保つことができるのです。

デバッグとメンテナンスの容易さ

TypeScriptを使用することで、デバッグとメンテナンスの作業が格段に容易になります。この言語が提供する型システムとツールのサポートが、コードの問題点を迅速に特定し、効率的に修正することを可能にします。以下に、その主要な利点を詳述します。

  1. 型エラーの早期検出：
    • 静的型付けにより、開発段階で多くの一般的なエラーが検出されます。
    • これにより、実行時エラーが大幅に減少し、デバッグ時間が短縮されます。
  2. コードの可読性の向上：
    • 型定義がコード自体のドキュメントとして機能するため、その意図や機能が明確になります。
    • 新たにプロジェクトに参加する開発者も、既存のコードをすぐに理解しやすくなります。
  3. 自動リファクタリングの利点：
    • 静的型付けは、IDEやその他の開発ツールによるリファクタリングをより安全で確実なものにします。
    • コードの大規模な構造変更も、型の安全性を損なうことなく実施できます。
  4. エラートレースの明確化：
    • エラーが発生した場合、型情報を利用することで問題の根源を特定しやすくなります。
    • デバッグプロセスが合理化され、問題解決への道筋がはっきりとします。

以上の点から、TypeScriptは特に長期にわたるプロジェクトのメンテナンスや、複数人での開発環境において大きな強みを発揮します。開発者はこれらの機能を活用して、コードの品質を維持しつつ、効率的にシステムを運用し続けることができるでしょう。

具体的な導入方法

TypeScriptをプロジェクトに導入する最初のステップは、必要なモジュールのインストールから始まります。このプロセスを簡潔に、かつ明確に理解するための手順を以下に紹介します。

使用するモジュールのインストール

  • TypeScriptを使用する前に、Node.jsがシステムにインストールされていることを確認してください。
  • node -vコマンドを実行して、Node.jsのバージョンを確認することができます。
  • コマンドラインやターミナルを開いて、以下を実行します。
$ npm i -D typescript ts-node ts-node-dev

これは、TypeScript とその関連ツールをプロジェクトにインストールするためのものです。それぞれのモジュールの機能と役割を以下に説明します。

  1. typescript（TypeScript本体）：
    • TypeScriptのコンパイラ本体です。このモジュールをインストールすることで、TypeScriptのコードをJavaScriptにコンパイルする機能が利用可能になります。
    • TypeScriptはJavaScriptに対して静的型付けやクラスベースのオブジェクト指向を提供し、大規模なアプリケーション開発をサポートします。
  2. ts-node（TypeScript実行環境）：
    • .ts ファイルを直接コンパイルして実行するためのNode.js用の実行環境です。
    • ts-nodeは、開発中のテストやスクリプト実行を簡易にするために使われ、コンパイル作業なしにTypeScriptを実行できるようにします。
  3. ts-node-dev（開発用ツール）：
    • ts-nodeに依存する開発ツールで、ファイルの変更を検出して自動でリスタートする機能を提供します。
    • これにより、開発プロセスが大幅にスピードアップし、コードの変更がすぐに反映されるため、効率的な開発が可能となります。
    • 特に、開発中に頻繁に修正を加える場合に役立ち、リアルタイムでのテストやデバッグ作業をスムーズに行えます。

これらのツールを組み合わせることで、TypeScriptの開発環境はより強力かつ柔軟になります。開発者はこれらの便利なツールを利用して、プロジェクトの生産性を高めることができます。

package.jsonを編集

プロジェクトのpackage.jsonファイルは、プロジェクトの依存関係やスクリプトの実行など、重要な情報を管理します。TypeScriptをプロジェクトに組み込むための設定を行いましょう。

また、package.jsonファイル内のscriptsセクションには、プロジェクトの様々なコマンド操作を簡略化するスクリプトを定義できます。TypeScriptを使用する際には、開発効率を高めるためのスクリプトを設定することが推奨されます。

  • 依存関係の追加：

    • TypeScriptや必要なTypeScript関連ツール（ts-nodeなど）をdevDependenciesに追加します。
    • npm install --save-dev typescript ts-nodeコマンドを実行し、これらのパッケージをインストールします。

  • スクリプトの設定：

    • package.json内のscriptsセクションにビルドや実行のスクリプトを設定します。
    • 例えば、"build": "tsc"というスクリプトを追加すると、npm run buildでTypeScriptのコンパイルを実行できます。
    • 今回は以下を追加しましょう。
    "scripts": {
    "dev": "ts-node-dev --respawn"
  }

  • 開発用スクリプトの追加：

    • ts-node-devを使用することで、ソースコードの変更がリアルタイムで反映される開発環境を構築できます。
    • "dev": "ts-node-dev --respawn"をscriptsに追加します。これにより、npm run devコマンドを実行すると、ソースファイルの変更が即座に反映され、自動でプロセスが再起動します。

ここでの--respawnオプションは、ファイルに変更があった際に自動でプロセスを再起動する機能を有効にするためのものです。この設定は特に、頻繁に変更を加える開発段階において非常に有効で、コードのテストやデバッグを迅速に行うことが可能になります。

以上の設定を行うことで、TypeScriptを用いた開発プロセスがよりスムーズかつ効率的に進行します。プロジェクトのスケーラビリティとメンテナンス性を向上させるためにも、これらのスクリプトの活用をお勧めします。

tsconfig.jsonを作成

tsconfig.jsonファイルは、TypeScriptコンパイラの設定を管理するためのファイルです。このファイルを適切に設定することで、TypeScriptのコンパイルプロセスを細かく制御できます。

  • ファイルの作成：
    • プロジェクトのルートディレクトリにtsconfig.jsonファイルを新規作成します。
    • 今回は以下を実行しましょう。基本的な設定が記載されたファイルが生成されます。
    $ npx tsc --init
  • 主要な設定項目：
    • compilerOptions内のtargetやmoduleをプロジェクトのニーズに応じて調整します。
    • ソースファイルが置かれているディレクトリや、コンパイル後のファイルが出力されるディレクトリの指定も行います。

これらの設定を適切に行うことで、TypeScriptの導入とその運用が格段に効率的かつ効果的になります。プロジェクトの品質向上を図るためにも、これらのステップを丁寧に実施してください。

TypeScriptのコード例

  • ファイルの作成：
    • sample.tsという名前のファイルを作成し、以下のコードを記述します。
    export {}

let hello: string = "こんにちは";
console.log(hello);

export {}は、ファイルをモジュールとして扱うための記述です。これにより、スコープの汚染を防ぎます。

  • コードの内容：
    • let hello: string = "こんにちは";では、helloという変数に文字列型（string）を明示的に指定し、日本語の挨拶「こんにちは」を代入しています。
    • console.log(hello);は、コンソールにhello変数の内容を出力します。

このように、TypeScriptでは変数に型を指定することで、エラーを未然に防ぎやすくなります。開発の初期段階でバグを発見しやすくなるため、効率的な開発が可能です。

コードの実行

作成したTypeScriptのコードを実行するための手順を説明します。ここでは、npm run devコマンドを使用します。

  • スクリプトの設定：
    • 前述したように、package.jsonのscriptsセクションに"dev": "ts-node-dev --respawn"を追加しておく必要があります。
    • これにより、ファイルの変更を検知して自動的に再起動する環境が整います。
    $ npm run dev sample.ts

// こんにちは
  • コマンドの実行：
    • ターミナルでnpm run dev sample.tsを入力し、実行します。
    • このコマンドは、sample.tsファイル内のTypeScriptコードを即座にコンパイルして実行し、結果をコンソールに表示します。

以上の手順を踏むことで、TypeScriptを効果的に導入し、プログラムの動作確認が行えます。初心者でもこのプロセスを通じて、TypeScriptの基本的な使い方とその利点を体験できるでしょう。

TypeScriptの型

TypeScriptの基本である、型について一気に説明していきます。

number型

number型は数値を表し、整数も浮動小数点数もこの型に含まれます。

let age: number = 30;

string型

文字列を扱う場合に使用するstring型は、ダブルクォートまたはシングルクォートで囲まれた文字列を代入します。

let name: string = "山田太郎";

boolean型

真偽値を取るboolean型は、条件式や制御フローに欠かせない型です。trueまたはfalseのみを持ち、ロジックの分岐点で役立ちます。

let isActive: boolean = true;

array型

複数の要素を一つの変数で扱うにはarray型を使用します。同一の型の要素をまとめて管理できるため、データの操作が簡単になります。

let numbers: number[] = [1, 2, 3]

tuple型

異なる型の要素を固定の順序で格納するtuple型は、厳密な構造を要求する場合に便利です。各要素の型が保証され、安全なアクセスが可能です。

let person: [string, number] = ["鈴木", 25];

any型

型の制約を受けたくない場合に限り、any型が使用されます。使用を控えるべきであり、型安全性を低下させる要因となります。

let uncertain: any = "テキスト";と後で型を決定することも可能ですが、リスクを伴います。

interface型

オブジェクトの構造を定義するためにinterface型が使用されます。

interface User {
  name: string;
  age: number;
}

let object: User = {
  name: '山田太郎',
  age: 30
}

void型

関数が値を返さない場合にvoid型を指定します。

function logMessage(): void {
  console.log("実行完了!");
}

null型

null型は、変数が「何も持たない」状態を明示的に示します。他の型と共に用いることで、変数が意図的に空の状態を取ることを許可します。

let absence: null = null;

undefined型

初期化されていない変数のデフォルトの型です。初期値が設定されていないことを表し、バグの発見に役立ちます。

let data: undefined = undefined;

never型

never型は、値が決して発生しないことを表す型です。主にエラーを投げる関数や絶対に終了しない関数に使用されます。

以下の例では、関数が常に例外を投げるため、戻り値の型としてneverが適切です。

function error(message: string): never {
  throw new Error(message);
}

object型

object型は、非プリミティブ型の値（数値、文字列、真偽値ではないもの）を指します。より具体的なオブジェクトの形状を定義する際には、interfaceやtypeが推奨されます。

let person: object = { name: "佐藤", age: 28 };

型エイリアス(Type Aliases)

特定の型に名前を付けることができます。複雑な型を簡単に再利用でき、コードの可読性が向上します。

以下では、数値型にUserIDというより具体的な名前を割り当てることが可能です。

type UserID = number;

unknown型

unknown型は、任意の値を受け入れるが、その値を使用する前に型チェックを強制する型です。any型よりも型安全性が高いとされています。

以下のようにvalueの具体的な型が不明な場合に使用します。

let value: unknown = getValue();

使用する際は、以下のようにif文で型を絞って使用することが多いです。

if (typeof value === 'number') {
  let sumValue = value + 1;
}

intersection型

複数の型を組み合わせて、すべての型の特性を持つ新しい型を作ることができます。複数のインターフェースを一つの型に結合する場合に便利です。

以下では、Person型とPayable型の特性を両方持つEmployee型を定義しています。

type Employee = Person & Payable;

union型

二つ以上の型のうち、どれか一つの型を取り得ることを表します。（OR文に似た考え方）
関数の引数や戻り値で、複数の型の可能性がある場合に使用されます。

以下のように、複数の文字列リテラルから一つを選ぶことができます。

type WindowStates = "open" | "closed" | "minimized";

Literal型

特定の値に厳密に限定される型です。コード内での予期せぬ値の使用を防ぐために役立ちます。

以下では、buttonTypeは"submit"または"reset"のみを許可します。

let buttonType: "submit" | "reset";

enum型

列挙型（enum）は、一連の固定された値を効果的に管理するために使用されます。コードの意図を明確にし、魔法の文字列や数値を避けることができます。

以下のように、色を列挙し、Color.Redなどでアクセスします。

enum Color {
  Red, Green, Blue
}

TypeScriptでの関数の基本

TypeScriptにおける関数の基本的な使い方と型付けの利点について解説します。この言語の型システムは関数の利用をより安全かつ効果的にします。

関数の定義方法

TypeScriptでは、関数を定義する際にパラメータと戻り値の型を明示的に指定できます。

以下のように記述すると、引数と戻り値が数値であることが保証されます。

function add(x: number, y: number): number {
  return x + y;
}

// function 関数名(引数名: 引数の型定義): returnで返される型定義 {処理}

関数の各パラメータに型を設定することで、意図しない型のデータが渡されることを防ぎます。これにより、コンパイル時にエラーを検出しやすくなり、ランタイムエラーの発生を減少させることができます。

アロー関数の使用

TypeScriptでは、ES6から導入されたアロー関数も型付けが可能です。以下のように記述します。この形式は、より簡潔で、特にラムダ式として利用する際に便利です。

const subtract = (a: number, b: number): number => a - b;

オーバーロードの定義

オーバーロードとは、同じ関数名で異なる引数の型や数に対応する複数の関数定義を提供することです。

これにより、異なる型の引数に基づいて異なる処理を実行する関数を一つの名前で複数定義できます。TypeScriptでは、同じ名前の関数に複数の型定義を提供することが可能です。

以下は、formatDateという関数のオーバーロードの例です。この関数は、日付を文字列として受け取るか、Dateオブジェクトとして受け取るかに応じて、異なる処理を行います。

// オーバーロードのシグネチャ
function formatDate(date: Date): string;
function formatDate(date: string): string;

// 実装部分
function formatDate(date: Date | string): string {
  if (typeof date === "string") {
      return new Date(date).toLocaleDateString();
  } else {
      return date.toLocaleDateString();
  }
}

この例では、最初に関数のシグネチャを二つ定義しています。一つ目のシグネチャでは、引数としてDateオブジェクトを受け取り、戻り値として文字列を返します。二つ目のシグネチャでは、引数として文字列を受け取り、同様に文字列を戻り値として返します。

実装部分では、引数の型をチェックして、それに応じた処理を行います。dateが文字列の場合は、Dateオブジェクトに変換し、そのローカルの日付表記を文字列で返します。Dateオブジェクトが直接渡された場合は、そのローカルの日付表記を直接文字列で返します。

このようにオーバーロードを使用することで、関数の柔軟性が高まり、様々なシナリオで再利用が可能になります。また、型の安全性を保ちつつ、異なる型の引数に基づいた処理を明確に区別できるため、バグの発生を防ぎやすくなります。

オプショナルパラメータとデフォルトパラメータ

TypeScriptでは、必要に応じて関数の引数をオプショナルにしたり、デフォルト値を設定することも可能です。

以下のように記述すると、第二引数を省略可能にし、デフォルト値を用いることができます。

function greet(name: string, greeting: string = "Hello"): string {
  return greeting + " " + name;
}

無名関数の関数定義

TypeScriptにおける無名関数（または匿名関数）は、名前を持たない関数です。

これは、一度限りの使用や、直接他の関数に渡すために使用されることが多いです。無名関数は、簡潔な構文を提供し、特にイベントハンドラやコールバック関数として便利です。

// 無名関数を変数に割り当てる例
const greet = function(name: string): void {
  console.log(`こんにちは、${name}さん!`);
};

// 無名関数を直接呼び出す
greet("山田");


// イベントリスナーなどに無名関数を直接渡す例
document.getElementById("myButton").addEventListener("click", function() {
  console.log("ボタンがクリックされました!");
});

この例では、最初にgreetという変数に無名関数を割り当てています。この関数は引数として文字列を受け取り、コンソールに挨拶メッセージを表示します。次に、greet関数を呼び出しています。

また、addEventListenerメソッドに無名関数を直接渡す例を示しています。この無名関数は、指定されたボタンがクリックされたときに実行されるため、特定のイベントに対して動作をカスタマイズするのに適しています。

無名関数の特徴

  • スコープ: 無名関数はその定義された場所でのみアクセス可能で、外部からは参照できません。
  • 再利用性: 名前がないため、直接参照して再利用することはできませんが、変数に割り当てることで複数回使用することは可能です。
  • 利便性: 一時的な処理や簡潔なコードが必要な場合に便利です。

TypeScriptでは、これらの無名関数にも型を指定することができるため、関数の引数や戻り値に対する型の安全性を確保しつつ、柔軟に関数を利用することが可能です。これにより、JavaScriptの利便性はそのままに、型の安全性が強化されたプログラミングが行えます。

RESTパラメータの設定

TypeScriptにおけるRestパラメータは、関数が不定数の引数を配列として受け取ることを可能にします。これは、関数が任意の数の引数を安全に処理するための強力な機能です。

RESTパラメータの基本的な使用法

RESTパラメータを使用するには、パラメータ名の前にスプレッド演算子（...）を置きます。このパラメータは関数内で配列として扱われます。以下に具体的な例を示します。

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, current) => acc + current, 0);
}

const total = sum(5, 10, 15, 20);
console.log(total); // 出力: 50

この例では、sum関数は任意の数の引数を取り、それらをnumbers配列として受け取ります。reduceメソッドを使用して、すべての数値を合計しています。

RESTパラメータの利点

  • 柔軟性: 関数が予め定義された引数の数に依存しないため、任意の数の引数を受け入れることができます。
  • 可読性とメンテナンス: コードがよりクリーンで理解しやすくなり、メンテナンスが容易になります。
  • 型安全性: TypeScriptでは、RESTパラメータに型注釈を付けることができるため、受け取る引数の型を厳密に制御できます。

使用上の注意点

RESTパラメータは関数定義で最後に置く必要があります。また、一つの関数につき一つのRESTパラメータしか使用できません。

typescriptCopy codefunction buildName(firstName: string, ...middleNames: string[]): string {
  return firstName + " " + middleNames.join(" ");
}

const name = buildName("John", "Paul", "George", "Ringo");
console.log(name); // 出力: "John Paul George Ringo"

この例では、buildName関数は最初の引数として名前を受け取り、残りの中間名を配列として処理します。joinメソッドを使って、これらの名前を空白で連結しています。

Restパラメータは、関数が可変数の引数を扱う際に非常に便利で、TypeScriptの型システムによってその安全性がさらに向上します。

TypeScriptにおけるクラスの基本

JavaScriptのES6で導入されたクラス構文を拡張し、より強力なオブジェクト指向プログラミングを実現します。TypeScriptでは、型の安全性を確保しつつ、クラスを用いて複雑なアプリケーションを効率的に構築できます。

クラスの定義方法

TypeScriptにおけるクラスの定義は、JavaやC#など他のオブジェクト指向言語に似ており、非常に直感的で理解しやすいものです。クラスはカプセル化、継承、多様性など、オブジェクト指向の核心的な特徴を提供します。

クラスの定義

クラスはclassキーワードを用いて定義されます。クラス名は通常、大文字で始まるキャメルケースを用いて表記されます。

以下は、クラスの最も基本的な構造を示す例です。

class Car {
}

この例ではCarという名前の空のクラスを作成しています。これは最も単純な形のクラスで、まだ何のプロパティやメソッドも持っていません。

コンストラクタの定義

クラスのインスタンスが生成される際に自動的に実行される特別なメソッドがコンストラクタです。コンストラクタはクラス内で一つだけ定義することができ、任意の初期化処理を行うのに用いられます。

class Car {
  constructor(public brand: string) {
    this.brand = brand;
  }
}

この例では、Carクラスにbrandというパブリックプロパティを持たせ、コンストラクタを通じて初期化しています。publicキーワードは、このプロパティがクラスの外部からもアクセス可能であることを示しています。

メソッドの追加

クラスにメソッドを追加することで、クラスが持つデータに対して操作を行うことができます。メソッドはクラス内で定義され、クラスのインスタンスを通じて呼び出すことが可能です。

class Car {
  constructor(public brand: string) {
    this.brand = brand;
  }

  display(): void {
    console.log(`This car is a ${this.brand}.`);
  }
}

この例では、displayというメソッドをCarクラスに追加しています。このメソッドはクラスのbrandプロパティをコンソールに表示します。

インスタンス生成の基本

クラスからインスタンスを生成するにはnewキーワードを使用します。newを使用することで、クラスの新しいオブジェクトがメモリ上に作成され、コンストラクタが呼び出されます。これにより、初期化処理が行われるとともに、クラスのプロパティやメソッドへのアクセスが可能となります。

以下に、Carクラスからインスタンスを生成し、そのメソッドを呼び出す例を示します。

class Car {
  constructor(public brand: string) {
    this.brand = brand;
  }

  display(): void {
    console.log(`This car is a ${this.brand}.`);
  }
}

// インスタンスの生成
let myCar = new Car("Toyota");

// インスタンスのメソッドを呼び出し
myCar.display();  // 出力: "This car is a Toyota."

  • インスタンス生成時の動作

    • メモリ割り当て：newキーワードがクラス名とともに呼び出されると、まず必要なメモリ空間が割り当てられます。
    • コンストラクタの実行：割り当てられたメモリにクラスのコンストラクタが実行され、インスタンスの初期化が行われます。コンストラクタはクラス定義の一部であり、インスタンスのプロパティを設定するために使用されます。
    • インスタンスの使用：コンストラクタが完了すると、生成されたインスタンスに対してプロパティの読み書きやメソッドの呼び出しなどの操作が可能となります。

  • インスタンスの特性

    • 独立性：各インスタンスは独立した状態とプロパティを持ちます。したがって、一つのインスタンスの状態の変更が他のインスタンスに影響を与えることはありません。
    • 型安全性：TypeScriptでは、インスタンスがクラスの型に基づいて正しく生成されることが保証されます。これにより、型不一致によるエラーをコンパイル時に検出することが可能です。

アクセス修飾子の使用

アクセス修飾子は、クラスのプロパティやメソッドの可視性を制御するために使用されます。TypeScriptではpublic、private、および protected の三種類のアクセス修飾子が利用可能です。

  • public：
    • メンバーにはデフォルトでpublicが設定されており、どこからでもアクセス可能です。
    • 明示的にpublicキーワードを使用することもできますが、通常は省略されます。
  • private：
    • privateキーワードを使用したメンバーは、そのクラス内部からのみアクセス可能です。
    • 例：private id: number; このプロパティには、クラス外部からはアクセスできません。
  • protected：
    • protectedメンバーは、そのクラス自身と派生クラスからアクセス可能です。
    • これにより、サブクラスでのみ利用するプロパティやメソッドを設定することができます。

アクセス修飾子を適切に使用することで、オブジェクトのカプセル化が強化され、意図しないデータの露出や変更を防ぎながら、クラスの継承構造を活用することが可能です。

コード例

class Vehicle {
    public make: string;      // public: どこからでもアクセス可能
    private model: string;    // private: Vehicleクラス内からのみアクセス可能
    protected year: number;   // protected: Vehicleクラスおよび派生クラスからアクセス可能

    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    public displayMake(): void {
        console.log(`This vehicle is made by: ${this.make}`);
    }
    
    private displayModel(): void {
        console.log(`This vehicle model is: ${this.model}`);
    }

    protected displayYear(): void {
        console.log(`This vehicle was made in: ${this.year}`);
    }
}

class Car extends Vehicle {
    constructor(make: string, model: string, year: number) {
        super(make, model, year);
    }

    displayInfo(): void {
        this.displayMake();  // OK: 'public' method is accessible
        // this.displayModel();  // Error: 'private' method is not accessible from subclass
        this.displayYear();   // OK: 'protected' method is accessible from subclass
    }
}

let myCar = new Car("Toyota", "Corolla", 2020);
myCar.displayInfo();
myCar.displayMake();  // OK: public method
// myCar.displayModel();  // Error: private method cannot be accessed from outside
// console.log(myCar.year);  // Error: protected property cannot be accessed from outside

説明

  • Public Access Modifier (public):
    • public修飾子を持つメンバーは、クラスのインスタンスを通じてどこからでもアクセスできます。
    • 上の例では、makeプロパティとdisplayMakeメソッドが公開されています。
  • Private Access Modifier (private):
    • private修飾子を持つメンバーは、そのクラス内部からのみアクセスが可能です。他のクラスやそのインスタンスからはアクセスできません。
    • modelプロパティとdisplayModelメソッドはVehicleクラス内でのみ利用可能です。
  • Protected Access Modifier (protected):
    • protected修飾子を持つメンバーは、定義されたクラスとその派生クラス内でのみアクセスが可能です。
    • yearプロパティとdisplayYearメソッドはVehicleクラスとそのサブクラスであるCarクラスからアクセスできます。

constructorの便利な書き方

TypeScriptにおけるコンストラクタの便利な書き方として、特に注目すべきは、コンストラクタパラメータに直接アクセス修飾子を付ける方法です。このシンタックスを利用することで、クラスのプロパティを定義し、同時にそれらを初期化することができます。この方法はコードを簡潔にし、冗長なプロパティの宣言を避けることができます。

便利なコンストラクタの書き方

通常、クラスのプロパティを定義してコンストラクタで初期化する際には、プロパティを一度宣言し、その後でコンストラクタ内で値を割り当てる必要があります。しかし、TypeScriptではこのプロセスを一行で行うことができます。

通常の書き方

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

簡潔な書き方（パラメータプロパティを使用）

class Person {
    constructor(public name: string, public age: number) {
    }
}

この簡潔な書き方では、constructorの引数にpublicキーワードを直接指定することで、nameとageがPersonクラスの公開プロパティとして自動的に宣言され、外部からアクセス可能になります。privateやprotectedなど他のアクセス修飾子も同様に使用可能です。

メリット

  1. コードの簡潔化: 重複するコードを削減し、クラス定義を読みやすく、維持しやすくします。
  2. 直感的なプロパティ初期化: プロパティの宣言と初期化を一箇所で行うことができ、エラーの可能性を低減します。
  3. 柔軟なアクセス制御: プロパティにpublic、private、protectedを適用することで、アクセスレベルを直感的に制御できます。

getter（ゲッター）とsetter（セッター）

TypeScriptでのgetter（ゲッター）とsetter（セッター）は、クラス内のプロパティのアクセスと代入を制御するための特別なメソッドです。これらを利用することで、プロパティへの直接的なアクセスを抑制し、プロパティの値が変更される際に追加のロジックを実行できるようになります。これにより、オブジェクトのデータの整合性と安全性が向上します。

ゲッターとセッターの基本的な使用法

ゲッターとセッターは、それぞれプロパティの値を読み出すためのgetメソッドと、値を設定するためのsetメソッドとして定義されます。これらは関数のように定義されますが、プロパティにアクセスするような形で使用されます。

コード例

class Person {
    private _name: string;

    constructor(name: string) {
        this._name = name;
    }

    // ゲッター: _nameプロパティを取得する
    get name(): string {
        return this._name;
    }

    // セッター: _nameプロパティを設定する
    set name(value: string) {
        if (value.length > 0) {
            this._name = value;
        } else {
            console.error("Invalid name.");
        }
    }
}

let person = new Person("John");
console.log(person.name);  // ゲッターを通して値を読み出す
person.name = "Jane";      // セッターを通して値を設定する

ゲッターとセッターのメリット

  1. カプセル化の強化:
    • ゲッターとセッターを使用することで、クラスのプロパティへのアクセスを細かく制御できます。これにより、クラス外部からの不適切な値の設定を防ぐことが可能です。
  2. 追加ロジックの実行:
    • セッターでは値が設定される際に、特定の検証処理や計算を行うことができます。例えば、無効な入力値のチェックや、他のプロパティの自動更新などが含まれます。
  3. バリデーションの実施:
    • プロパティに設定される値が特定の条件を満たすように、セッター内でバリデーションを実施することができます。これにより、不正なデータがクラスの内部状態に影響を与えるのを防ぎます。

readonly修飾子

TypeScriptにおけるreadonly修飾子は、プロパティが初期化後に変更されないことを保証するために使用されます。この修飾子をプロパティに適用することで、そのプロパティは読み取り専用となり、値の再代入が不可能になります。これにより、不変の値を持つオブジェクトを作成する際に非常に便利です。

readonly修飾子の基本的な使用法

readonlyプロパティは、クラスのコンストラクタ内でのみ値が設定できます。コンストラクタの外部からは、その値を変更することができません。これは、定数のような振る舞いをプロパティに与えるため、特に設定値や構成値に対して使用されます。

class Car {
    readonly make: string;
    readonly model: string;
    readonly year: number;

    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    displayDetails(): void {
        console.log(`Car: ${this.make} ${this.model}, Year: ${this.year}`);
    }
}

let myCar = new Car("Toyota", "Corolla", 2020);
console.log(myCar.make);  // "Toyota"
// myCar.make = "Honda";  // エラー: cannot assign to 'make' because it is a read-only property

この例では、Carクラスに3つのreadonlyプロパティがあり、それぞれ車のメーカー、モデル、年式を表しています。これらのプロパティは、インスタンス生成時にコンストラクタを通じてのみ値が設定され、その後は変更不可能です。

readonly修飾子のメリット

  1. データの安全性: readonlyプロパティは、オブジェクトが初期化された後に不変であることを保証するため、予期せぬ変更からデータを保護します。
  2. プログラムの予測可能性: プロパティが読み取り専用であることが明示されているため、コードの振る舞いがより予測可能になり、デバッグが容易になります。
  3. 使用の明確化: クラスの使用者に対して、どのプロパティが変更可能でどのプロパティが読み取り専用であるかを明確に示すことができます。

###静的メンバ（static member）の定義

TypeScriptでの静的メンバ（static member）の定義は、クラスレベルで共有されるプロパティやメソッドを設定する際に使用されます。静的メンバはクラスのインスタンスではなく、クラス自体に属しています。

これにより、クラスのインスタンスを生成することなく、直接クラス名を通じてアクセスできます。静的メンバは、特にユーティリティ関数や定数、シングルトンパターンの実装などに有用です。

静的メンバの基本的な使用法

静的メンバは、staticキーワードを使用してクラス内で定義されます。静的プロパティは、クラスがロードされる時に初期化され、静的メソッドはクラス名を使ってどこからでも呼び出すことが可能です。

コード例

class MathUtils {
    static PI: number = 3.14159;

    static add(x: number, y: number): number {
        return x + y;
    }

    static subtract(x: number, y: number): number {
        return x - y;
    }
}

console.log(MathUtils.PI); // 3.14159 を出力
console.log(MathUtils.add(10, 5)); // 15 を出力
console.log(MathUtils.subtract(10, 5)); // 5 を出力

この例では、MathUtilsクラスには静的プロパティPIと二つの静的メソッドaddおよびsubtractが定義されています。これらはインスタンスを生成せずに直接アクセスすることができます。

静的メンバのメリット

  1. 共有リソースの管理: 静的メンバはすべてのインスタンス間で共有されるため、クラスレベルでのデータや関数を管理するのに適しています。
  2. メモリ効率の向上: 各インスタンスがプロパティのコピーを持つ代わりに、静的プロパティはクラス全体で一つだけ存在します。これにより、メモリ使用量が削減されます。
  3. ユーティリティやヘルパー関数の提供: 静的メソッドは、そのクラスの特定のインスタンスに依存しない操作を行うために利用されることが多いです。これにより、再利用可能なヘルパー関数やユーティリティ関数を提供できます。

クラス継承

TypeScriptでのクラスの継承は、JavaScriptのプロトタイプベースの継承をより理解しやすく、強力にする機能です。継承を使うことで、一つのクラス（基底クラスまたはスーパークラス）のプロパティやメソッドを別のクラス（派生クラスまたはサブクラス）が引き継ぎ、拡張することができます。

これにより、コードの再利用が促進され、大規模なアプリケーションの開発が容易になります。

クラスの継承を利用するには、extendsキーワードを使用します。このキーワードは派生クラスが基底クラスのメンバーを継承することをTypeScriptに伝えます。

基底クラスの定義

まずは、継承の基礎となる基底クラスを定義します。

class Animal {
    constructor(public name: string) {}

    move(distanceInMeters: number): void {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

このAnimalクラスは、すべての動物が共通して持つべき特性や行動を定義します。例えば、すべての動物は名前を持ち、移動する能力があります。

派生クラスの定義

基底クラスを継承して新たな派生クラスを作成します。

class Snake extends Animal {
    constructor(name: string) {
        super(name); // 基底クラスのコンストラクタを呼び出す
    }

    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) {
        super(name); // 基底クラスのコンストラクタを呼び出す
    }

    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

Snake と Horse は Animal クラスを継承しています。これにより、name プロパティと move メソッドを継承し、move メソッドはそれぞれの動物の特性に合わせてオーバーライド（再定義）されています。

継承のメリット

  1. コードの再利用: 既存のクラスの機能を拡張することで、新しいクラスを効率的に作成できます。
  2. 階層的なクラス構造: クラス間の関係を階層的に整理することで、より理解しやすく管理しやすいコードベースを構築できます。
  3. 多様性と柔軟性: 継承されたメソッドをオーバーライドすることで、同じ基底クラスを持つオブジェクトが異なる振る舞いを示すことができます。

抽象クラスと抽象メソッド

TypeScriptでの抽象クラスと抽象メソッドは、クラスの階層設計において柔軟性を提供する重要な概念です。これらは主に、実装が固定されていない基本的なクラス構造（抽象クラス）を定義し、そのクラスのすべての派生クラスが実装しなければならないメソッド（抽象メソッド）を指定するために使われます。

抽象クラス

抽象クラスはabstractキーワードを使用して定義されます。

abstract class Animal {
    abstract makeSound(): void;  // 抽象メソッド

    move(): void {
        console.log("roaming the earth...");
    }
}

この例では、Animalクラスは抽象クラスであり、makeSoundという抽象メソッドを含んでいます。moveメソッドは具体的な実装を持っており、すべての動物が地球上を動き回ることを示していますが、どのような音を出すかは動物によって異なります。

抽象メソッド

抽象メソッドは、具体的な実装を持たず、派生クラスにその実装を強制します。抽象メソッドは、抽象クラス内でのみ定義できます。

派生クラスは抽象クラスで定義されたすべての抽象メソッドを実装しなければなりません。

class Dog extends Animal {
    makeSound(): void {
        console.log("Woof! Woof!");
    }
}

class Cat extends Animal {
    makeSound(): void {
        console.log("Meow");
    }
}

この例では、DogとCatはAnimalクラスから派生しており、抽象メソッドmakeSoundに対して具体的な実装を提供しています。

抽象クラスと抽象メソッドのメリット

  1. 一貫性と強制性: 派生クラスが基底クラスで定義された特定のメソッドを実装することを強制することで、一貫性のあるインターフェースを保証します。
  2. コードの再利用: 共通のロジックを基底クラスに保持しながら、特定の操作については派生クラスに実装の自由を与えます。
  3. 設計の柔軟性: 抽象クラスを使用することで、柔軟な階層構造を設計でき、将来の変更に容易に対応できます。

インターフェースとリターンズ

TypeScriptでは、「インターフェース」はコードの構造を定義するための強力なツールです。特に関数の型定義において、関数がどのような値を返すべきかを明確に指定する「リターンタイプ」を定義することができます。これにより、より安全で予測可能なコードを書くことが可能になります。

インターフェースの基本

インターフェースは、特定のプロパティやメソッドのシグネチャを持つオブジェクトやクラスに対する契約のようなものです。これにより、実装するオブジェクトがインターフェースで定義された構造に従うことが保証されます。

インターフェースの定義例

interface Greeting {
    message: string;
    sender: string;
}

このインターフェースGreetingは、任意のオブジェクトがmessageとsenderという二つのプロパティを持つべきだと定義しています。

リターンタイプの使用

関数のリターンタイプを定義することで、関数が返す値の型を明確に指定することができます。これは、特に公開APIを設計する際に重要です。

関数のリターンタイプの定義例

function getGreeting(): Greeting {
    return { message: "Hello", sender: "TypeScript" };
}

この関数getGreetingは、Greetingインターフェースに従ってオブジェクトを返します。これにより、関数の使用者は返されるオブジェクトがどのようなプロパティを持っているかを確実に知ることができます。

インターフェースのリターンタイプのメリット

  1. 型の安全性: 関数が予期される型の値を返すことを保証し、ランタイムエラーのリスクを減少させます。
  2. コードの可読性: リターンタイプを使用することで、関数の挙動がより明確になり、コードの可読性が向上します。
  3. ドキュメントとしての役割: インターフェースとリターンタイプは、コードに対する自己文書化の役割を果たし、新たな開発者がコードベースに迅速に慣れるのを助けます。

まとめ

この記事を通じて、TypeScriptの強力な型システムとオブジェクト指向の特徴を理解し、効率的かつ安全なソフトウェア開発を行うための基礎を学びました。

TypeScriptはJavaScriptを拡張する強力なツールであり、大規模なアプリケーション開発においてその真価を発揮します。

補足：おすすめの教材

JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2024年最新版

フリーランスエンジニア必見！

最後に、フリーランスエンジニアの方にご案内です。
あなたに今だけご紹介できる限定の案件があります！

気になる方は公式ラインの追加をお願いします👇
https://bit.ly/3xLrLGw

12
10
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?