1. ホーム
  2. 記事一覧
  3. フロントエンジニアを目指す初心者向け TypeScriptの基礎を解説

2024.03.30

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

  • エンジニア
  • フロントエンド
  • JavaScript
  • 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は、コードをモジュールとして整理することをサポートしています。これにより、プロジェクトが大きくなっても、コードをきれいに整理しやすくなります。

型システムの利点

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

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

利点説明
エラーの早期発見型が合わない場合にプログラム実行前にエラーを検出できます。
コードがわかりやすくなる型が書かれていると、そのコードの目的や扱うデータの種類が明確になります。
リファクタリングが容易型情報をもとに、コードの変更時の影響範囲を容易に把握できます。
コーディングのサポートIDEが型情報を利用して、コード補完や提案を行います。

このように、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ファイルの例です。targetmoduleoutDirなどの設定項目があります。この設定により、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

エンベーダー編集部

エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。 「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。

RareTECH 無料体験授業開催中! オンラインにて実施中! Top10%のエンジニアになる秘訣を伝授します! RareTECH講師への質疑応答可

関連記事

2020.02.25

完全未経験からエンジニアを目指す爆速勉強法

USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話

  • キャリア・学習法
  • エンジニア

2024.03.24

JavaScriptって何?レベルの初心者がとりあえず触ってみるハンズオン

このハンズオンを通じて、プログラミング初心者やJavaScriptに苦手意識を持つ方でも、JavaScriptの使い方を基礎から簡単に学べます。特別な経験や知識は一切必要ありません。パソコンとインターネットの基本操作ができれば、準備は完了です。わからないことがあっても大丈夫。一旦はこういうものだと思って進めてみてください。

  • ハンズオン
  • JavaScript
  • フロントエンド

2024.03.31

【超入門】Reactの基礎を30分で学べる!インストールから基本コンポーネントまで

この記事は、フロントエンドエンジニアを目指したいけど何をすればいいかわからないといった人に、とりあえずReactという技術を用いて雰囲気を知ってもらうために作成しました。

  • エンジニア
  • フロントエンド
  • ハンズオン
  • React
  • JavaScript

2024.04.01

15分で理解!エンジニア初心者向け Vue.js導入ガイド

Vue.jsは、Webアプリケーションのユーザーインターフェース(UI)を構築するためのプログレッシブJavaScriptフレームワークです。簡単に使い始められる一方で、複雑なアプリケーションにも柔軟に対応できるのが特徴です。

  • エンジニア
  • フロントエンド
  • vue