Blue Archive ✨

Search

SearchSearch

TypeScriptの導入

Apr 04, 2024, 7 min read

第1章 TypeScriptの導入

こんにちは、新入生諸君！これからTypeScriptの世界に飛び込むことになる君たちに、心からエールを送りたい。TypeScriptは、Microsoftが開発したオープンソースのプログラミング言語で、JavaScriptに型システムを導入したものだ。型システムによって、コードの品質と保守性が飛躍的に向上する。実際、TypeScriptを採用する企業は年々増加しており、今やWebアプリケーション開発には欠かせない存在となっている。

この章では、TypeScriptの基本的な概念と利点を理解し、開発環境のセットアップ方法を学ぶ。最後には、Hello, TypeScript!プログラムを作成して、TypeScriptの世界への第一歩を踏み出そう。

1.1 TypeScriptとは

TypeScriptは、JavaScriptにオプショナルな静的型システムを追加したプログラミング言語だ。JavaScriptはもともと動的型付け言語で、変数の型はランタイムに決定される。一方、TypeScriptでは、変数やメソッドの型を事前に宣言することができる。これにより、コンパイル時に型エラーを検出し、バグを早期に発見できる。

TypeScriptのコードは、最終的にJavaScriptにトランスパイルされる。つまり、TypeScriptで書かれたコードは、JavaScriptが動作する環境であればどこでも実行可能だ。ブラウザ、Node.js、iOS、Androidなど、様々なプラットフォームで動作するアプリケーションをTypeScriptで開発できる。

1.2 TypeScriptの特徴と利点

TypeScriptには、以下のような特徴と利点がある。

  • 静的型チェック：コンパイル時に型エラーを検出できるため、ランタイムエラーを防げる。
  • 強力な型推論：型を明示的に宣言しなくても、TypeScriptは変数の型を推論してくれる。
  • クラスベースのオブジェクト指向プログラミング：クラス、インターフェース、継承、モジュールなどの機能を提供。
  • 優れたツールサポート：インテリセンス、コードナビゲーション、リファクタリングなど、生産性を向上させる機能が豊富。
  • 大規模開発に適している：型システムによって、コードの可読性とメンテナンス性が向上する。
  • JavaScriptとの互換性：既存のJavaScriptライブラリを型定義ファイル（.d.ts）で拡張できる。

これらの特徴により、TypeScriptは大規模なWebアプリケーション開発に最適な言語となっている。

1.3 開発環境の準備

TypeScriptで開発を始めるには、Node.jsとTypeScriptコンパイラが必要だ。以下の手順で、開発環境をセットアップしよう。

1.3.1 Node.jsのインストール

Node.jsは、JavaScriptをサーバーサイドで実行するためのランタイム環境だ。TypeScriptのコンパイルや各種ツールの実行に必要となる。公式サイト（https://nodejs.org/）から、自分のOSに合ったバージョンをダウンロードしてインストールしよう。

インストールが完了したら、ターミナルで以下のコマンドを実行し、バージョンを確認する。

node -v
npm -v

それぞれ、Node.jsとNode Package Manager (npm)のバージョンが表示されれば、インストールは成功だ。

1.3.2 TypeScriptのインストール

TypeScriptコンパイラ（tsc）は、npmを使ってグローバルにインストールする。ターミナルで以下のコマンドを実行しよう。

npm install -g typescript

インストールが完了したら、以下のコマンドでバージョンを確認する。

tsc -v

TypeScriptのバージョンが表示されれば、インストールは成功だ。

1.3.3 IDEの選択とセットアップ

TypeScriptの開発には、優れたIDEを使うことをお勧めする。代表的なIDEには、以下のようなものがある。

  • Visual Studio Code (VSCode)：Microsoftが開発したオープンソースのIDE。豊富な拡張機能と優れたTypeScriptサポートが特徴。
  • WebStorm：JetBrains社の商用IDE。Web開発に特化した機能が豊富。
  • Atom：GitHubが開発したオープンソースのテキストエディタ。拡張機能によってTypeScriptをサポート。

ここでは、VSCodeを例に、セットアップ方法を説明する。

  1. 公式サイト（https://code.visualstudio.com/）からVSCodeをダウンロードし、インストールする。
  2. VSCodeを起動し、拡張機能タブ（Ctrl+Shift+X）を開く。
  3. 検索バーに「TypeScript」と入力し、「TypeScript and JavaScript Language Features」という拡張機能をインストールする。

以上で、TypeScriptの開発環境が整った。

1.4 Hello, TypeScript!

それでは、最初のTypeScriptプログラムを作成してみよう。

  1. 適当なディレクトリに「hello.ts」というファイルを作成する。
  2. 以下のコードを記述し、保存する。
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}
 
const userName = "TypeScript";
greet(userName);

このコードでは、greet関数がnameという文字列型の引数を受け取り、コンソールに挨拶を出力する。userName変数に”TypeScript”を代入し、greet関数に渡している。

  1. ターミナルで、以下のコマンドを実行し、TypeScriptをJavaScriptにトランスパイルする。
tsc hello.ts

hello.jsというファイルが生成されたことを確認しよう。

  1. 以下のコマンドで、トランスパイルされたJavaScriptを実行する。
node hello.js

コンソールに「Hello, TypeScript!」と表示されれば成功だ。

これで、TypeScriptの基本的な使い方を学んだ。型の記法や、コンパイルの方法など、TypeScriptならではの要素に注目しよう。

以上が、第1章「TypeScriptの導入」の内容だ。TypeScriptの概要と特徴を理解し、開発環境のセットアップ方法を学んだ。また、最初のTypeScriptプログラムを作成し、コンパイルから実行までの一連の流れを体験した。

次の章では、TypeScriptの基本文法について詳しく解説していく。変数の型、関数、クラス、インターフェースなど、TypeScriptの主要な機能を一つずつ見ていこう。TypeScriptの型システムを効果的に活用することで、より堅牢で保守性の高いコードを書けるようになる。

それでは、次の章に進もう！

Graph View

Backlinks