大規模JavaScriptアプリケーションプログラミングが効率的に行える「TypeScript」とは?

JavaScriptが採用している「プロトタイプベース」のオブジェクト指向は、多くのプログラマにとって馴染みやすいものではなく、JavaScriptが敬遠される理由の１つともなっていました。

世の中の多くのプログラム言語は「クラスベース」と呼ばれるオブジェクト指向を採用していて、JavaScriptだけが「異質な存在」となっていたのですが、ブラウザ上のDOMを操作できる言語とあって、ことWEBアプリケーション開発では欠かせない存在となっています。

このようなプログラマの不満と使いにくさを解消するために作られたのが「TypeScript」です。

TypeScriptは多くのプログラマにとっても使い慣れている「クラスベース」のオブジェクト指向言語、JavaScriptと同等の機能を実現します。

それでは、TypeScriptについて詳しくみていきましょう。

「TypeScript」の実態はJavaScript?

「TypeScript」は、JavaScriptとは異なる記法でプログラムを書いていきますが、最終的にはJavaScriptに変換されて実行されます。

それなら「JavaScriptでクラスベースに対応すればいいんじゃ・・・」と思ってしまうわけですが、現状はそうなっていないわけで、苦肉の策としてTypeScriptが開発されたと言われても仕方ありません。

と思っていたところ「EcmaScript6」で、「class構文」が使えて・・・と大人的な事情にプログラマが振り回されていた感は否めません。

プログラマは開発をする側でもありますが、それと同時に「既存技術を利用するユーザー」でもあります。

技術進歩の早いこの世界では、日常茶飯事との言えなくもありません。

話が逸れ気味になってきたので、話を「TypeScript」に戻していきたいと思います。

「TypeScript」の実行環境とプログラムの書き方

「TypeScript」はNode.js上で動きますので、npmをインストールするとすぐに使うことができます。

もっと手軽に実行したい場合は、WEBブラウザで使える環境も整っていますので、学習を始めたばかりのことはこちらの方が使いやすいですね♪

→「TypeScript - Play Ground - 」

TypeScriptは「静的型付け」など、JavaScriptには無い概念が数多くあり、プログラムの書き方が異なっています。

しかし、C++・Javaなどクラスベースのオブジェクト指向に慣れている方であれば、スムーズに学習していける内容も多いため、クラスに慣れ親しんでいる人の学習ハードルはかなり低くなるでしょう。

静的型付け

変数のデータ型を実行時に決定する方法を「動的型付け」。実行前に変数のデータ型を決定する方法を「静的型付け」と言います。

TypeScriptでは、

//変数宣言
var comment:string;

などのように変数名の後に「：データ型」のように記述します。

TypeScriptのデータ型は、

  • String
  • Number
  • Boolean
  • Array
  • Enumurate
  • Any
  • Void

などがあります。

「class」の作り方」

TypeScirptは「クラス」を扱えることが大きな特徴となっていますので、「クラス」の扱い方について見ていきましょう。クラスの作成例は、下記のようになります。

//生徒クラス
class Student {
    private name: string;
    private age: number;
    private grade: string;
    
    //コンストラクタ
    constructor(name: string, age: number, grade: string) {
        this.name = name;
        this.age = age;
        this.grade = grade;
    }
    
    //Getter
    public getName(): string {
        return this.name;
    }
    public getAge(): number {
        return this.age;
    }
    public getGrade(): string {
        return this.Grade;
    }
    
    //Setter
    public setGrade(grade: string): void {
        this.grade = grade;
    }
}

クラスベースのオブジェクト指向言語のように、クラスが作成できることがわかりますね。

このコードをJavaScriptで表すと、下記のようになります。

//生徒クラス
var Student = (function () {
    //コンストラクタ
    function Student(name, age, grade) {
        this.name = name;
        this.age = age;
        this.grade = grade;
    }
    //Getter
    Student.prototype.getName = function () {
        return this.name;
    };
    Student.prototype.getAge = function () {
        return this.age;
    };
    Student.prototype.getGrade = function () {
        return this.Grade;
    };
    //Setter
    Student.prototype.setGrade = function (grade) {
        this.grade = grade;
    };
    return Student;
}());

メンバ変数は、自身のオブジェクトのプロパティに値をセットしていて、メソッドは「prototype」にセットしているのがわかるかと思います。

クラスベースのプログラム言語で作ったクラスをJavaScriptで使いたいという時は、かなり重宝してくれるのではないでしょうか。

新しい言語というよりは「既存のクラス資産をJavaScriptで流用しやすくしてくれる言語」という印象です。

クラスベースのプログラミングに慣れている人はJavaScriptを敬遠してしまう人も多いのですが、JavaScriptユーザーを増やす１つのキッカケになってくれるのではないでしょうか。

HOMEへ