第1回 TypeScriptの概要TypeScriptで学ぶJavaScript入門(4/4 ページ)

» 2014年05月28日 16時22分 公開
[羽山博,]
前のページへ 1|2|3|4       

TypeScriptの開発環境

 TypeScriptを使ったプログラムの開発には、この連載で使うPlaygroundの他、Visual Studio 2012以降を使う方法や、Node.jsの環境でコマンドラインコンパイラー(tscコマンド)を使う方法などがある。TypeScriptの学習や簡単なプログラムの作成だけならPlaygroundで十分だが、HTMLやスタイルシートと連携させたり、大規模な開発を行ったりする場合にはこういった本格的な開発環境が必要になってくる。以下、開発環境を整え、それぞれの環境でプログラムを作成し、実行する方法を簡単に紹介しておく。

Visual Studio 2012以降を使う場合

 Visual Studioを利用する場合は、以下の2つの方法がある。

  • Visual Studio 2012またはVisual Studio Express 2012 for Webがインストールされている環境にTypeScript 1.0 Tools for Visual Studio 2012を追加インストールする
  • Visual Studio 2013 Update 2以降を利用する(TypeScript 1.0 Toolsがあらかじめ含まれている)

 TypeScript 1.0 Tools for Visual Studio 2012は、TypeScriptのサイト(これまでに使ってきたPlaygroundのページで構わない)の[download]にマウスポインターを移動し、[for VS2012]をクリックするとダウンロードページが表示されるので、そのページからダウンロードできる。

 同様に、[VS2013]をクリックするとVisual Studio 2013 Update 2のダウンロードページが表示されるので、Visual Studio 2013を使っている場合はこれをインストールしよう。

 ソフトウェアをダウンロードしてインストールすると、TypeScriptのプロジェクトが作成できる。以下、Visual Studio 2012 for WebにTypeScript 1.0 Toolsを追加した場合の画面で、プログラムの作成から実行までを見てみよう。

 メニューバーから[ファイル]−[新しいプロジェクト]を選択すると、新しいプロジェクトのテンプレートを選択するダイアログボックスが表示される。ここで左側のペーンから[TypeScript]を選択すると中央のペーンにはTypeScriptプロジェクトのテンプレートが選択された状態で表示されるので、[名前]ボックスにプロジェクト名を入力する。

図9 Visual Studio 2012でTypeScriptのプロジェクトを作成する 図9 Visual Studio 2012でTypeScriptのプロジェクトを作成する

 [OK]ボタンをクリックすると、TypeScriptのプロジェクトが作成され、サンプルコードが表示される(図10)。

図10 プロジェクトが新規に作成され、TypeScriptのサンプルコードが表示される 図10 プロジェクトが新規に作成され、TypeScriptのサンプルコードが表示される

 [実行]ボタン(ツールバーにある、ブラウザー名が表示されているボタン)をクリックするとサンプルコードがそのまま実行できる。しばらくすると、ブラウザーが起動し、現在の日時が表示されるはずだ。サンプルコードを削除して、今回使ったコードを入力すれば、これまでに見た例と同様のことができる。

Node.jsとコマンドラインコンパイラーを使う方法

 Node.jsはサーバー側で利用できるJavaScriptの実行環境である。Node.jsのWebサイトにアクセスして、Node.jsのサイトを表示し、[Install]ボタンをクリックし、ダウンロードされたファイルを開いて、インストーラーを実行するだけで現在の環境にNode.jsがインストールされる。その後、コマンドプロンプトで以下のコマンドを入力すると、TypeScriptのコンパイラがインストールされる。

npm i -g typescript


npm(Node Package Manager)からのTypeScriptのインストール

 TypeScriptのコードは好みのテキストエディターで入力すればよい。コードが入力できたら、「.ts」という拡張子を付けてファイルを保存する。保存時の文字コードはUTF-8にしておこう。BOM(Byte Order Mark)を付けるか付けないかを選択できる場合は、付けないようにしておいたほうが無難だ。続いて、コマンドラインから以下のコマンドを実行すると、コンパイルが実行され、JavaScriptのソースコードが作成される。

tsc ファイル名


tscコマンドでの.tsファイルのコンパイル

 コンパイルにより作成されるファイルの名前はTypeScriptのソースコードと同じで、拡張子が「.js」となる。以下の図では、HelloTypeScript.tsファイルをコンパイルした結果、HelloTypeScript.jsファイルが作成されていることが分かる。

図11 TypeScriptのプログラムをコンパイルする 図11 TypeScriptのプログラムをコンパイルする

 あとは、このファイルを読み込むようなHTMLファイルを作成し、それをブラウザーで開けば動作確認できる。今回のプログラムであれば、特にWebページ内のドキュメントを利用しないので、以下のようなHTMLファイルで構わない。ここでは、コンパイルされたJavaScriptのソースコードのファイル名が「HelloTypeScript.js」で、HTMLファイルと同じフォルダーにあるものとしている(Internet Explorerの場合、「このWebページはスクリプトやActiveXコントロールを実行しないように制限されています」などとメッセージが表示される場合がある。そのときには[ブロックされているコンテンツを許可]ボタンをクリックしよう)。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="HelloTypeScript.js"></script>
</head>
<body>
</body>
</html>

HTMLファイルにJavaScriptのコードを読み込ませる

 なお、これらの開発環境の利用方法は将来、変更される可能性もある。詳細については、http://www.typescriptlang.org/を参照してほしい。


 今回はTypeScriptの簡単な概要と開発の手順を紹介するにとどめた。次回からは変数、演算子、条件分岐、繰り返し処理、配列、関数、クラス……と順を追って詳しい説明に入りたいと思う。

「TypeScriptで学ぶJavaScript入門」のインデックス

TypeScriptで学ぶJavaScript入門

前のページへ 1|2|3|4       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。