JavaScriptは動的に型を定義しているので、実行するまでエラーが分からなかったり、デバッグ時にも間違いに気付きにくかったりという欠点があります。特に大規模開発になり、複数人で分担して開発を進めるようになってくると、この型の違いや名前空間の衝突など、実行してみて初めて気付く障害が多くなっていきます。そのため、記述力の向上や、静的な型定義機能などによるコーディング品質の均一化および向上を図った代替プログラミング言語が多数開発されており、その総称を「altJS」と言います。altJSでは、別の言語を使って実装を行い、JavaScriptにコンパイルして使用します。

 今回はそのうちの一つであるMicrosoftが開発した「TypeScript」を使用して実装してみます。TypeScriptは上記のようなaltJSとしての特徴を持つため、品質向上に一役買うだけではなく、将来のJavaScriptの仕様とされるECMAScript 2015(ECMAScript6、ES6)の仕様を一部取り込んでおり、将来のJavaScriptとの互換性も持っているともいえます。

TypeScriptのインストール

 それではまずTypeScriptの環境を整える準備をしましょう。TypeScriptのコンパイルにはいくつか方法があります。「Play Ground」というブラウザー上でリアルタイムにコンパイルするアプリケーションも提供されていますので、簡単なコードであればこちらを使えます。

 実際の開発では大量のコードをコンパイルする必要があるため、ローカルにコンパイル環境を整えます。コンパイル環境は「Node.js」に付随する「npm」を使用してインストールできます。Node.jsがインストールされていない場合は、下記を参考にNode.jsをインストールしてください。

手軽にHTML5/JavaScript開発を始めるための環境構築法

 npm install –g typescriptを実行するとTypeScriptのコンパイル環境をインストールできます。

TypeScriptのファイルの作成

 TypeScriptのコンパイル環境が準備できたら、コーディングします。TypeScriptのファイルは.tsという拡張子でファイルを作成します。今回は、既にitpro/report/complete/typescriptフォルダの下にindex.tsとutil.tsというファイルが作成済みです。


export function formatDateWithHyphen(date: Date): string {
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var mStr = m < 10 ? '0' + m : m.toString();
	var d = date.getDate();
	var dStr = d < 10 ? '0' + d : d.toString();
	return h5.u.str.format('{0}-{1}-{2}', y, mStr, dStr);
}

コード例:TypeScriptでの関数の定義(util.ts 85行目)

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら