こんにちは、キャスレーコンサルティング SI(システム・インテグレーション)部の清水(皓)です。

私はこれまで、業務システムSEとしてキャリアを積んできましたが、
フロントエンドアプリやプロトタイプ言語に携わることは殆どありませんでした。

そのため、フロントエンドの言語も使えるようになっておこうということで、
オブジェクト指向でJavaScriptを書くようなことができるTypeScriptを覚えようと思い、
学習したことを書いていきたいと思います。

今回は、TypeScriptを始めるための入門編です。

TypeScriptとは

TypeScriptは、大規模なJavaScriptアプリケーション開発のためにMicrosoftによって作成された言語です。

詳細はTypeScriptの公式HPに記載されていますが、英語のため、読めない方もいらっしゃると思います。
私も英語は読めませんが、以下のようなことが書いてあることが調べたところ分かりました。

JavaScriptで始まり、JavaScirptで終わる

TypeScriptは、JavaScriptと同様の構文が使えます。

既存のJavaScriptコードが利用でき、ポピュラーなJavaScriptのライブラリが組み込まれていて、
TypeScriptコードをJavaScriptコードから呼び出すこともできます。
シンプルできれいなJavaScritpコードがコンパイルされ、様々なブラウザ、Node.jsやJavaScriptエンジンで実行できます。

大規模アプリのための強力なツール

JavaScriptアプリを開発する際に、
静的チェックやコードリファクタリングのようなこともできるため、生産性が高くなります。
型推論では、型アノテーションによりコードの静的検証に大きな影響を与えます。
コンポーネント間のインターフェイスを定義し、既存のJavaScriptライブラリの動作を把握することもできます。

最先端のJavaScript

JavaScriptの最新機能や今後提供予定の機能をサポートし(サポートする予定)、
堅牢なコンポーネントをつくることができます。
これらの特徴は信頼性の高いアプリ開発に利用可能で、
コンパイル時にはECMAScript3以降に準拠したシンプルなJavaScriptが出力されます。

開発環境(VS Code)の準備

TypeScriptの開発環境としては、IDEとしてVisual StudioやEclipseなど、
エディタとしてはVisual Studio Code、AtomやSublime Textなどがあります。
今回は、TypeScriptはMicrosoftが作った言語であることと、
無料でクロスプラットフォームで利用可能なMicrosoftのVisual Studio Codeを使っていきたいと思います。

インストール

Visual Studio Codeは、http://code.visualstudio.com/からインストーラをダウンロードして実行します。
Node.jsは、http://nodejs.org/en/からインストーラをダウンロードして実行します。
TypeScriptは以下のコマンドを実行することでインストールできます。
npm install -g typescript

VS CodeでのTypeScriptの書き方(トランスパイル&デバッグ実行)

TypeScriptの開発環境がインストールできたと思います。これから、TypeScriptを書いて実行していきます。

Visual Studio Codeの設定

まずは、setting.jsonの編集方法です。お好みに合わせて設定を編集してください。
ファイル(F)→基本設定(P)→設定(S)を選択すると、setting.jsonが開き、編集できます。

setting.jsonの開き方

setting.json編集画面

プロジェクトフォルダの作成

ファイル(F)→フォルダを開く(Ctrl⁺K Ctrl⁺O)からプロジェクトフォルダを選択できます。
プロジェクトフォルダを作成していない場合は、新規作成して選択します。

プロジェクトフォルダを開く

プロジェクトフォルダの選択

tsconfig.jsonの作成

TypeScriptコードのコンパイル設定ファイルである、tsconfig.jsonを作成します。
新しいファイルのアイコンをクリックしてtsconfig.jsonを作成し、コンパイラオプションを設定します。
補完機能が働いてくれるので、どのような設定があるか確認することも可能です。
tsconfig.jsonはプロジェクトルートに一つ作成しておきます。

tsconfig.jsonの作成

tsconfig.jsonの編集

{
    "compilerOptions":{
        "target":"es5",
        "sourceMap":true,
        "module":"commonjs"
    }
}

今回のtsconfig.jsonは、詳細な設定は行っていません。
アプリケーションやテスト環境の構成などに合わせて設定を行うことで、
コンパイル時に細やかな制御が可能です。(今回は割愛します)

簡単なプログラムの作成

おなじみのHello,Worldを表示するプログラムを作成しましょう。
さきほどと同じ要領で新規ファイルを作成し、HelloWorld.tsとして保存します。
HelloWorld.tsの作成

function main()
{
    console.log("Hello,World.");
}

main();

ビルド

F1キーを押下してコマンドパレットが表示されたら、configure taskと入力してEnterキーを押下し、
「TypeScriptプロジェクトをコンパイル」をクリックします。

configure_taskの実行

.vscodeフォルダとtasks.jsonファイルが生成されたら、Ctrl⁺Shift⁺Bを押下し、ビルドタスクを実行します。

tasks.jsonの生成

これで、HelloWorld.jsとHelloWorld.js.mapが生成され、実行・デバッグの準備ができました。

ビルドタスク実行

デバッグ

Debugビューを表示し、F5キーを押下すると、環境の選択を求められますので、Node.jsを選択します。

デバッグの準備

Launch.jsonが表示されますので、
今回の構成に合わせて”program”:”${workspaceRoot}/HelloWorld.js”に書き換えて保存します。
最後に、F5キーを押下するとデバッグ実行が開始されます。デバッグコンソールに「Hello,World.」が表示されます。

デバッグ実行

TypeScriptの特徴

最後に、TypeScriptの特徴を紹介します。
言語の特徴を把握することで、どのようにコードを書いていくとよいのかがわかってくると思います。

既存のJavaScriptがそのままTypeScriptになる

例外がいくつかありますが、TypeScriptファイルにJavaScriptのコードをコピペしても問題ありません。
そのため、既存のJavaScriptコードという資産を活用することができ、
JavaScriptからTypeScriptへの移行も容易になると思います。

例外としては、変数へ代入する値の型と変数の型が合わない場合、TypeScriptではエラーとなります。
また、strictモードで許可されていない、一般的に危険とされている、などの理由により、with文が使用できません。

型チェック
with文使用不可

変数の宣言と型指定

JavaScriptでは、varキーワードを使用せずに変数を宣言するとグローバル変数を作成できます。
しかし、TypeScriptではvarキーワードを使用せずに変数を宣言するとエラーになります。
これにより、グローバル変数を不注意で作成してしまうリスクを減らせます。

varキーワードなし

また、TypeScriptでは必要に応じて型を明示的に指定する場合、型アノテーションを使用します。
これにより、無効な値が代入されないよう、型の自動チェックが可能になります。
また、開発環境によるオートコンプリート機能が提供されることも大きなメリットです。

// 変数の型指定
// var 変数名 = 値;
var name = "清水";

// var 変数名:型アノテーション;
var isTruth:boolean;

// var 変数名:型アノテーション = 値;
var highestTemp:number = 28.2;

もし、TypeScriptで動的な変数が必要になった場合には、動的な型を表すany型の変数を宣言することができます。

動的な変数

クラスとインターフェース

TypeScriptはクラスベース・オブジェクト指向言語として作成されているため、
JavaやC#に近い考え方でクラスを定義して利用できます。
メンバー変数やメンバー関数、アクセッサを定義することもできますし、アクセス修飾子も利用できます。

さらに、継承やインターフェースなどの機能もあり、
オブジェクト指向に馴染みのある業務システムSEには使いやすい言語になっていると思います。

interface vehicle
{
    // プロパティ
    speed:number;

    // メソッド
    accelarator(accelarateSpeed:number);
}

class car implements vehicle
{
    // プロパティ
    // インタフェースで定義されたプロパティやメソッドはアクセス修飾子がpublicになります
    speed:number;
    private _ownerName:string;

    // メソッド
    accelarator(accelarateSpeed:number)
    {
        this.speed = this.speed + accelarateSpeed;
    }

    // アクセッサ
    public get ownerName():string {
        return this._ownerName
    }
    public set ownerName(name : string) {
        this._ownerName = name;
    }

}

下の図は、上記のコードをコンパイルして生成されたjavascriptコードです。
インタフェースはjavascriptコードとして生成されず、オートコンプリート機能や型チェック機能のために利用されます。
そのため、クラス部分のみをjavascriptコードとして生成するとこのようになります。

インタフェースとクラスをコンパイルした結果

まとめ

以上、TypeScriptの入門編を紹介させていただきました。
TypeScriptには他にも多くの機能があり、今回だけでは紹介しきれていません。
しかし、とりあえずTypeScriptを始めてみるための入門編として、お役に立てれば幸いです。