世界のプログラミング言語(8) 大規模Web開発で役立つマイクロソフトの言語「TypeScript」

今回取り上げるのは、マイクロソフトによって開発された『TypeScript』です。TypeScriptはJavaScriptの欠点を補うために作られました。基本的に、JavaScriptのスーパーセットとなっているため、覚えやすいだけでなく、Webブラウザ上でJavaScriptと同じように動かすことができます。クラス定義や静的型付け機能など、大規模Web開発で役に立つ機能がたくさん用意されています。本稿では、TypeScriptが便利な理由やその仕組みを紹介します。

TypeScriptのWebサイト

TypeScriptのWebサイト
[URL] https://www.typescriptlang.org/index.html

TypeScriptの生い立ち

以前本連載でも紹介したように、JavaScriptはとても柔軟で刺激的な言語です。しかし、その言語仕様は、お世辞にも大規模開発に向いているとは言えないものでした。そのため、複数の開発者が関わる中規模以上の開発で、JavaScriptを使う際には、苦労することもありました。それでも、Web開発を行う上で、ブラウザに標準搭載されているJavaScriptを避けて通ることはできません。ブラウザ上で動くプログラミング言語は、JavaScriptだけなのです。それで、マイクロソフトが出した答えが、JavaScriptを拡張し、先進的な機能を取り入れた言語が『TypeScript』でした。2012年10月に一般公開されました。そして、その後も機能の追加や高速化など、改良が加えられ現在に至ります。

TypeScriptの機能と仕組み

TypeScriptでは、クラス定義や静的型付け機能など、大規模開発に役立つ機能がたくさん用意されました。最近になってようやくJavaScriptにも、クラス定義などの機能が追加されましたが、TypeScriptでは、当初からクラスベースの高度なオブジェクト指向が利用できました。

しかも、JavaScriptのスーパーセットなので、既存の便利なJavaScriptのライブラリをスムーズに利用することもできます。型定義ファイルを用意すれば、JavaScriptのライブラリを安全にTypeScriptから利用できるようになります。

ところで、先ほどWebブラウザで実行できるプログラミング言語は、JavaScriptだけと紹介しましたが、どうしてTypeScriptがブラウザ上で実行できるのでしょうか。その仕組みですが、TypeScriptが実行される際には、JavaScriptに変換してから実行されます。そのため、JavaScriptのライブラリも、そのまま利用できるのです。

TypeScriptはJavaScriptに変換されて実行されます

Visual Studioで超快適なTypeScript開発

そして、開発効率という面では、マイクロソフトのVisual StudioやVisual Studio Code、Atom、Eclipseなどで統合開発環境(IDE)が提供されています。入力補完機能や様々な補助機能があるので、快適にプログラムを開発することができます。

Visual Studio CodeでTypeScriptのプログラムを作っているところ

なお、そうした大規模開発に特化した機能を備えているほかに、オープンソースであることや、マイクロソフトが継続的にサポートしている安心感もあるので、TypeScriptは人気があります。『2018年人気＆嫌われプログラミング言語トップ25』でも、堂々の4位にランクインしており、開発者に支持されている様子が分かります。また、TypeScriptには、JavaScriptの先端機能を先取りして実装しているという面もあります。

TypeScriptを手軽に試す方法

TypeScriptには手軽にプログラムを試すことのできる『Playgound』が用意されています。Playgroundを利用すると、Webブラウザ上で、TypeScriptの雰囲気を試すことができます。

Playgroundを使うと手軽にブラウザ上でTypeScriptを試せます

それでは、こちらのPlaygroundにアクセスしてみましょう。以下のプログラムを記述したら、画面右上にある[Run]ボタンをクリックしてみましょう。

let btn = document.createElement("button");
btn.innerHTML = "挨拶する";
btn.onclick = () => alert("おはよう");
document.body.appendChild(btn);

すると、以下のように「挨拶する」というボタンが作成されるので、これをクリックしてみよう。すると、ダイアログに「おはよう」と表示されます。

TypeScriptの簡単なプログラム

これは、JavaScriptでも、ほとんど同じになるプログラムです。一行目、createElement()でHTMLのbotton要素を作り、三行目でonclickイベントを設定し、ダイアログを表示するようにします。四行目では、ボタンが画面に表示されるように、appendChild()でボタンを追加します。

クラス定義を使った簡単なプログラム

ただし、上の四行のプログラムでは、JavaScriptと全く同じで、TypeScriptらしさが出ていません。そこで、TypeScriptで独自のボタンクラス(MyButton)を宣言して利用してみましょう。これはボタンをクリックすると、簡単なメッセージを表示するクラスです。

    // 独自のボタンクラスの宣言 --- (*1)
    class MyButton {
    // プライベート変数の定義 --- (*2)
    private label: string;
    private msg: string;
    private el: HTMLElement;

    // オブジェクトが作成される時 --- (*3)
    constructor(label: string, msg: string) {
        this.label = label;
        this.msg = msg;
        this.createElement();
    }
    createElement() {
        // HTMLに要素を追加 --- (*4)
        this.el = document.createElement("button");
        this.el.innerHTML = this.label;
        document.body.appendChild(this.el);
        // ボタンをクリックした時の動作を指定 --- (*5)
        this.el.onclick = () => {
            alert(this.msg);
        }
    }
}

// クラスのインスタンス化 --- (*6)
let btn = new MyButton("挨拶する", "こんにちは");

Playgroundにプログラムを書き込んだら、右側にある[Run]のボタンをクリックします。すると、「挨拶する」というボタンが表示されます。これをクリックすると「こんにちは」とメッセージが表示されます。

クラスを定義して利用してみたところ

既に、JavaやC#などのプログラミング言語で書いたプログラムに似たものになりました。プログラムの(＊1)の部分では、MyButtonというクラスを定義します。そして、(＊2)の部分で、非公開のプライベート変数を定義します。(＊3)では、クラスが生成された時に自動的に実行されるメソッドconstructorを定義します。その中では、プライベート変数の初期化を行い、HTML要素の生成を行います。(＊4)の部分では、HTMLのbutton要素を作成し、bodyに自動的に追加します。また、(＊5)の部分にあるように、ボタンをクリックしたら、メッセージを表示するようにonclickイベントを設定します。そして、最後の(＊6)の部分で、クラスを生成します。ここでは、「挨拶する」ボタンを作り、クリックしたら「こんにちは」と表示するように指定しました。

まとめ

ここまでの部分で、TypeScriptの特徴や仕組み、そして、簡単な二つのプログラムを紹介しました。ここで紹介した二つのプログラムからも、TypeScriptらしさを感じることができたでしょう。一つ目のプログラムは、TypeScriptがJavaScriptのスーパーセットであることを確認できますし、二つ目のプログラムでは、高度なクラス定義ができる点を確認できました。プログラムの実行結果自体は、ほとんど同じでしたが、クラス化することで、再利用が手軽になり、メンテナンス性がよくなりました。これが大規模開発向きである理由です。そのため、今後もTypeScriptは、JavaScriptの欠点を補う強直な言語として使われていくことでしょう。