最新のWeb開発を学ぼうとすると、高頻度で「TypeScript」の文字を目にすることが増えています。 ReactやNext.jsなどの入門記事を見て、「JavaScriptではなくTypeScriptだから」という理由で諦めたことはありませんか？
そろそろ本腰を入れて、TypeScriptの学習を始めてみるのも良い選択かもしれません。
本記事では、TypeScriptの概要とその利点を紹介し、初めてのプロジェクトを始めるための環境構築手順を丁寧に解説します。
目次
対象読者
必須要件
- JavaScriptの基本は押さえている
- エディタやIDEの基本的な使い方を知っている
推奨要件（当てはまれば尚良し）
- レームワーク（React.jsなど）の使用経験
- Node.js、npmの使用経験
- 他言語（Javaなど）の学習経験
TypeScriptの利点と特徴
TypeScriptはMicrosoftによって開発・メンテナンスされているオープンソースのプログラミング言語で、JavaScriptのスーパーセット（※1）として機能します。
以下に、TypeScriptの主な利点と特徴をいくつか紹介します。
- 型安全性の向上: TypeScriptは静的型付けをサポートしており、コードをコンパイルする前に型の整合性をチェックします。これにより、実行時エラーを減少させ、バグの早期発見が可能となります。
- 大規模プロジェクトへの対応: TypeScriptはクラスやモジュール、インターフェースなどのオブジェクト指向プログラミングの機能をサポートしており、大規模プロジェクトでも管理しやすい構造化コードを書けます。
- JavaScriptとの互換性: TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptコードをそのまま使用でき、自身のスキル成長に合わせて徐々にTypeScriptに移行することが可能です。
Node.jsのダウンロードとインストール
TypeScriptを使用するためには、Node.jsが必要です。
Node.jsをインストールする方法はいくつかありますが、本記事では2種類の方法を提示します。
ご自身の学習方法に適したいずれかの方法を選択いただき、実施してください。
方法1：nvm-windowsを使ったインストール
早いバージョンアップに合わせて環境を切り替えて使いたい方は、nvm-windowsを使用したインストールがお勧めです。
nvm-windowsでのインストールを実施される場合は、こちらのリンク先を参照ください。
方法2：インストーラーを使ったインストール
インストーラーを使ったインストールを実施される場合は、こちらのリンク先からNode.jsのLTSバージョンをダウンロードいただき、インストールまで進めてください。
インストールの確認
コマンドプロンプトを開き、次のコマンドで、Node.js本体が正常にインストールされているかを確認します。
node -v結果として、以下のようにインストールしたNode.jsのバージョンNo.が表示されれば成功です。
※ バージョンはダウンロードした時期により変わります。
v22.14.0続いて、次のコマンドで、NPM（Node Package Manager）が正常にインストールされているかを確認します。
npm -v結果として、以下のようにインストールしたNPMのバージョンNo.が表示されれば成功です。
※ バージョンはダウンロードした時期により変わります。
10.9.2TypeScriptのインストール
npmコマンドを使用してTypeScriptをインストールします。
コマンドプロンプトを起動し、次のコマンドを実行してください。
npm install -g typescriptインストールが完了したら、次のコマンドで正常にインストールされていることと、TypeScriptコンパイラ（tsc）のバージョンを確認します。
tsc -vTypeScriptでHello World
ファイルの作成とコーディング
任意のディレクトリ（フォルダ）を作成し、VS Codeなどのエディタでファイル「hello.ts」を作成してください。
「.ts」とは、TypeScriptファイルの拡張子です。
ファイル「hello.ts」を作成したら、次のようにコーディングしてください。
const message: string = "Hello TypeScript!";
console.log(message);「: string」の個所がTypeScript固有の静的型付けを表しており、JavaScriptでは実現できないデータ型の指定（今回の場合は文字列型）を行っています。
コンパイルと実行
コンパイル
コンパイルするためのコマンドは次の通りです。
tsc hello.tsVS Codeを使用している場合は、「ctrl + @」のショートカットでターミナルが開きます。そこで上記コマンドを実行することでコンパイルできます。
コマンドプロンプトでファイル「hello.ts」があるディレクトリ（フォルダ）に移動し、次のコマンドを実行してもOKです。
コンパイルに成功すると、対象ディレクトリ（フォルダ）に「hello.js」ファイルが作成されます。
「hello.js」ファイルが作成されない場合は、プログラムにミスがあるはずなので、コードを見直してみてください。
実行
次のコマンドで、プログラムを実行します。
node hello.js実行した結果、以下のように表示されれば成功です。
Hello TypeScript！静的型付けを試す
プログラムを次のように修正して、再度コンパイルしてみてください。
const message: string = 100;
console.log(message);以下のようなエラーがターミナルのコンソールに表示されたはずです。
hello.ts:1:7 - error TS2322: Type 'number' is not assignable to type 'string'.
1 const message: string = 100;
~~~~~~~
Found 1 error in hello.ts:1赤色マーカー部分がエラーメッセージで、「型 ‘number’ は型 ‘string’ に割り当てることができません。」と言っています。
このように、実行する前の段階でコンパイラーがエラーを発見し、原因究明することができます。
まとめ
本記事では、TypeScriptの主な利点と特徴を紹介し、初めてTypeScriptを使用するための環境構築手順を詳しく解説しました。
TypeScriptを導入することで、開発プロセスがより効率的で信頼性の高いものとなります。是非、この機会にTypeScriptを学び、最新のWeb開発に役立てていただければ幸いです。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメントください。
それでは、最後までお読みいただき、ありがとうございます。
コメント