Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Microsoft発のaltJS「TypeScript」+Visual Studioで楽々クライアントサイド開発

さらに使いやすく便利になった「Visual Studio」を始めよう! 第3回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/01/30 14:00

目次

TypeScriptの基本

 TypeScriptの概要を理解したところで、具体的なコードでもってTypeScriptの威力を確認していきましょう。以下は、

  • toStringメソッドを持ったAnimalクラス
  • Animalクラスを継承したHamsterクラス(独自のメソッドとしてwalkを公開)

を定義したTypeScriptのコードです。

 比較のために、コンパイル済みのJavaScriptのコード(注2)も併記しておきます(内容はコメントでざっと把握できれば十分です)。JavaScriptでは冗長にならざるを得なかったコードが、TypeScriptによってぐんとコンパクトに、しかも、C#、Javaなどに慣れた開発者にとっても直感的に分かりやすいものになったことが確認できるはずです。

 Visual StudioでのTypeScriptコードの作成/コンパイル方法については、次節で改めます。

リスト1 Animal/Hamsterクラスを定義したコード(上:TypeScriptのコード、下:コンパイル済みのJavaScript)
// (1)CodeZineSampleモジュールを定義
module CodeZineSample {
  // (2)Animalクラスを定義
  export class Animal {
    // (4)コンストラクターでname/ageフィールドを初期化
    constructor(public name: string, public age: number) { }

    // (5)toStringメソッドを定義
    public toString(): string {
      return this.name + ':' + this.age + '歳';
    }
  }

  // (3)Animalクラスを継承したHamsterクラスを定義
  export class Hamster extends Animal {
    // (6)walkメソッドを定義
    public walk(): string {
      return this.name + 'はトコトコ歩いています。';
    }
  }
}

// (7)CodeZineSample.Hamsterクラスのメソッドを呼び出し
import s = CodeZineSample;
var h = new s.Hamster('トクジロウ', 15);
console.log(h.toString());	// 結果:トクジロウ:15歳
console.log(h.walk());	// 結果:トクジロウはトコトコ歩いています。
-----------------------------------------------------------------------
// 継承のための関数を準備
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

// CodeZineSampleモジュールを定義
var CodeZineSample;
(function (CodeZineSample) {
  // Animalクラスを定義
  var Animal = (function () {
    // コンストラクターでname/ageフィールドを初期化
    function Animal(name, age) {
      this.name = name;
      this.age = age;
    }
    // toStringメソッドを定義
    Animal.prototype.toString = function () {
      return this.name + ':' + this.age + '歳';
    };
    return Animal;
  })();
  CodeZineSample.Animal = Animal;

  // Animalクラスを継承したHamsterクラスを定義
  var Hamster = (function (_super) {
    __extends(Hamster, _super);
    // 基底クラスのコンストラクターを呼び出し
    function Hamster() {
      _super.apply(this, arguments);
    }
    // walkメソッドを定義
    Hamster.prototype.walk = function () {
      return this.name + 'はトコトコ歩いています。';
    };
    return Hamster;
  })(Animal);
  CodeZineSample.Hamster = Hamster;
})(CodeZineSample || (CodeZineSample = {}));

// CodeZineSample.Hamsterクラスのメソッドを呼び出し
var s = CodeZineSample;
var h = new s.Hamster('トクジロウ', 15);
console.log(h.toString());
console.log(h.walk());
//# sourceMappingURL=myApp.js.map

 以降では、コードの詳細を掻い摘んでみていきましょう。

モジュールとクラス

 まず、(1)は内部モジュールの定義です(注3)。いわゆるC#の名前空間、Javaのパッケージに相当する要素で、moduleキーワードによって表します。

 モジュールの中には、クラス(class)/インターフェイス(interface)/列挙型(enum)など、これまたオブジェクト指向開発にはおなじみの要素を定義できます。例えば(2)ではclassキーワードを利用して、Animalクラスを定義しています。(3)のように、extendsキーワードを利用することで継承を表現することもできます。サーバーサイドの開発者でもごく直感的に理解できる、これらオブジェクト指向構文は、TypeScriptのもっとも重要な機能の一つです。

 classキーワードの直前にあるexportキーワード((2))は、モジュールの外からクラスを参照できることを意味します。exportキーワードがない場合、TypeScriptはモジュール配下の要素へのアクセスを許可しませんので、注意してください。

 内部モジュールというからには外部モジュールもあるわけですが、こちらはクライアントサイド開発ではあまり利用しませんので、まずはあまり気にしなくて構いません。

コンストラクターとメソッド

 Animalクラスの配下では、コンストラクターとtoStringメソッドを定義しています。TypeScriptでは、コンストラクターの名前はconstructorで固定です。

 コンストラクターの引数にも注目してください((4))。冒頭で触れたように、TypeScriptでは静的型付けに対応した言語です。「仮引数名: 型名」の形式でデータ型を宣言しておくことで、想定外の型は設定できないようになります。型の指定は任意ですが、TypeScriptを使っているならば、あえて明示しない意味はありません。型名として利用できるのは、string、number、booleanなどのプリミティブ型の他、任意のオブジェクト型です。

 引数に付与されたpublicキーワードは、アクセス修飾子です。TypeScriptでは、コンストラクターの引数にpublic/privateなどのアクセス修飾子を付けることで、これを対応するメンバー変数(フィールド)として設定するという決まりがあります。よって、(4)の例であれば、「string型のnameフィールド、number型のageフィールドをpublic権限で定義、引数の値で初期化しなさい」という意味になります。あえて冗長に表すならば、以下のコードとほぼ同意です。

リスト2 (4)のコードをあえて冗長に書き換えたコード
public name : string;
public age : number;

constructor(name: string, age: number) {
  this.name = name;
  this.age = age;
}

 コンストラクターの主な役割がメンバー変数の初期化であることを考えれば、これだけのコードを省力化できるのはなかなかに嬉しい仕組みですね。

 toString((5))、walk((6))メソッドのように一般のメソッドでは、「: string」のように、メソッドシグニチャーの中で戻り値の型を明示的に指定することも可能です。

インポート宣言

 モジュール配下のクラスをインスタンス化する場合、「new CodeZineSample.Hamster(……)」のように完全修飾名で表しても構いませんが、モジュールの階層が深くなってくると自ずと名前も長くなり、コードの可読性を損なう恐れがあります。

 そこでTypeScriptでは、import命令を利用することで、モジュールに別名を付与できます。この例であれば、CodeZineSampleモジュールに対して「s」という別名を与えています((7))。これによって、「new s.Hamster(……)」のような表記が可能になるわけです。

 以上が、TypeScriptの基本的な構文ルールです。もちろん、ここで触れた内容はごく大雑把なものなので、より詳しい文法/構文については、以下のサイトも参照してください。記事末尾では、関連書籍も紹介しています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5