はじめに
JavaScript は Web ブラウザで実行されるデファクトスタンダードな言語として有名です。また、サーバーサイドで動かすことも可能です。
JavaScript は汎用性が高く、ブラウザとテキストエディタさえあれば開発が可能な言語なのですが、動的型付け言語（変数に型がない）であること、プロトタイプベース（*1）のオブジェクト指向言語ということもあり、使いにくさを感じる開発者もいます。
そこで、JavaScript の動的型付けや文法の分かりにくさなどを緩和することを目的とした、AltJS（代替 JavaScript 言語）という、コンパイル（正確にはトランスパイルと呼ぶ）すると JavaScript のコードを生成できる言語が登場しました。
AltJS には CoffeeScript や PureScript といったものもあります。
本連載で取り扱う TypeScript も AltJS の1つで、Microsoft が 2012 年 10 月に発表した言語です。
今回は、TypeScript のはじめの一歩としてその特徴や開発環境の構築について説明します。
*1:プロトタイプと呼ばれるベースとなるオブジェクトをコピーする形で新規のオブジェクトを生成する
目次
TypeScriptの特徴
「はじめに」でも述べたように TypeScript はAltJSの1つです。
TypeScript は JavaScriptと同様の構文を使用することができますし、JavaScriptから TypeScript のコードを呼び出すこともできます。
TypeScript は JavaScriptの標準となっているES2015に対応しているとともに、静的型付けやアクセス修飾子がサポートされています。これにより厳密な型のチェックが行われるため、保守が必要な大規模開発も行うことが可能です。
また、 TypeScript で書いたコードはコンパイルすることで、JavaScriptを生成することができます。
開発環境の構築
Node.js のインストール
はじめに Node.js をインストールします。Node.js はサーバーサイドで動くJavaScript環境です。この Node.js をインストールすることで、TypeScriptのコンパイラをインストールするために必要な npm というコマンドが使用できるようになります。
Node.js の公式サイト https://nodejs.org/ja/ よりインストーラをダウンロードしてインストールしてください（Windows 用、Mac OS 用、Linux 用などがあります）。
インストールが完了したら、Macの場合はターミナル、Windowsの場合はコマンドプロンプトで、「node -v」と入力して[Enter]キーを押し、バージョンが表示されることを確認してください。バージョンが表示されればインストールは完了です。
TypeScript コンパイラのインストール
次に、TypeScriptのコンパイラをインストールするために、次のコマンドを実行します。
npm install -g typescript
Visual Studio Codeのインストール
TypeScript の開発環境は、Visual Studio や Eclipseなどがありますが、ここではVisual Studio Codeを使用することとします。
Visual Studio Codeは公式サイト（https://azure.microsoft.com/ja-jp/products/visual-studio-code/）からダウンロードしてインストールをしてください。
開発をはじめよう
ここではTypeScriptの開発の進め方について説明します。
はじめに開発用のフォルダーを1つ作成してください。
ここでは MyProject というフォルダーを例として説明をします。
tsconfig.jsonの作成
Visual Studio Codeで「エクスプローラー」を選択し、[フォルダー]を開くをクリックして「MyProject」を選択してください。
続いて、[新しいファイル]ボタンをクリックして「tsconfig.json」というファイルを作成して、以下のコードを入力します。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
簡単なサンプルの作成
それではTypeScriptのサンプルコードを作成してみましょう。
以下は「Hello, TypeScript!!」と表示する関数を作成して実行するだけのコードです。MyProjectフォルダー直下に新規で「hello.ts」ファイルを作成して、以下のように編集してください。
function hello() {
console.log("Hello, TypeScript!!");
}
hello();
コードのビルドと実行
[F1]キーを押すとコマンドパレットが表示されますので「configure task」と入力して[Enter]キーを押します。
続いて、「tsc: ビルド」を選択して実行します。
以下のように「.vscode」フォルダと「tasks.json」ファイルが生成されることを確認してください。
続いて[ctrl]+[shift]+[B]キーを押して、「tscビルド」を実行します。
ビルドに成功すると以下のように「hello.js」と「hello.map」が生成されます。
デバッグの実行
[F5]キーを押すと、デバッグ実行が開始されコンソールに「Hello, TypeScript!!」と表示されます。メニューの[デバッグ]-[デバッグの開始]でもデバッグを開始することができます。
次に「構成の追加」をしてみましょう。構成の追加とは、どのようにデバッグをするかの設定ファイルの作成です。
デバッグの欄を見ると、以下のように「構成がありません」となっています。隣の歯車アイコンをクリックすると「launch.json」というデバッグ時の設定ファイルが作成されます。
「launch.json」を開くと、[構成の追加]というボタンが表示されますので、クリックすることで様々な機能を追加することができます。追加できる機能については今後の記事で紹介することとします。
続いて、作成した「hello.ts」ファイルにブレークポイントをつけてみましょう。
ブレークポイントを付けると、デバッグ実行時にブレークポイントをつけた行で止められるようになります。
ブレークポイントの設定は簡単で、行番号の左側をクリックするだけです。ブレークポイントを設定すると赤い丸が付きます。ブレークポイントを解除するには、赤い丸をクリックします。
ブレークポイントを設定したら、[F5]を押して実行してみましょう。
ブレークポイントに到達すると、コードが停止します。あとは、上部に表示されたアイコンでステップ実行やステップオーバーなどを使用することができます。
まとめ
今回は、TypeScriptの特徴と環境設定について説明しました。現時点ではTypeScriptの構文等については触れていませんので、その良さをお伝えすることはできていません。
次回以降、TypeScriptについてより深く紹介をしていきます。
コメント