CodeZine(コードジン)

特集ページ一覧

「Vue.js」入門~JavaScriptフレームワークをTypeScriptで学ぼう

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第1回

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

TypeScriptによる型指定やクラスの実装を体験

 次に、TypeScriptについて説明します。図4のサンプルでは、図3と同じ内容を、Vue.jsを利用せず、TypeScriptで実装しています。

図4:TypeScriptを利用したWebページのサンプル(p002-ts-basic)
図4:TypeScriptを利用したWebページのサンプル(p002-ts-basic)

 図4のサンプルを表示するHTMLファイルの<body>部はリスト4の通りです。Vue.jsを利用しないため、テキストボックス(1)、名前表示(2)、ボタン(3)の各要素に、後でJavaScriptで操作するためのIDをつけています。また、これから実装するJavaScript(my-first-ts.js、index.js)を(4)で参照しています。

[リスト4]図4のHTMLファイル(p002-ts-basic/index.html)
<div>
  あなたの名前:<input id="name-input" value=""><!-- テキストボックス ...(1)-->
  <div>→あなたは<span id="name-disp"></span>さん</div><!-- 名前の表示 ...(2)-->
  <button id="greet-btn">あいさつ</button> <!-- ボタン ...(3)-->
</div>
<script src="my-first-ts.js"></script><!-- JavaScriptを参照 ...(4)-->
<script src="index.js"></script>

 リスト4の(4)で参照されるJavaScriptを、TypeScriptで実装する方法を以下で説明していきます。

TypeScriptを利用するための環境準備

 TypeScriptを利用するには環境の準備が必要です。まずリスト5のコマンドでTypeScript環境をプロジェクトに導入します。「--save-dev」オプションは、開発時に利用するパッケージとしてTypeScriptを導入することを表します。

[リスト5]TypeScript環境を導入するコマンド
npm install --save-dev typescript

 TypeScript環境には、TypeScriptファイルをJavaScriptに変換するコンパイラー(tscコマンド)が含まれます。サンプルコードではtscコマンドを利用するために、プロジェクト設定ファイルpackage.jsonに以下コマンドを定義しています。

[リスト6]TypeScriptを利用するコマンド(p002-ts-basic/package.json)
"scripts": {
  "tsinit": "tsc --init", // ...初期化(1)
  "build": "tsc",         // ...コンパイル(2)
  "serve": "lite-server"  // ...実行(3)
},

 (1)の「tsc --init」は、「npm run tsinit」コマンドで実行できます。このコマンドは、プロジェクトにTypeScriptの設定ファイルtsconfig.jsonを初期設定します(tsconfig.jsonは、今回は初期設定のまま利用します)。このプログラムはtsconfig.jsonを生成する最初の1回だけ実行します。

 tsconfig.jsonがプロジェクトに存在する状態で、(2)の「tsc」(つまり「npm run build」コマンド)を実行すると、プロジェクトに含まれるTypeScriptのファイル(*.tsファイル)が、対応するJavaScriptファイル(*.jsファイル)に変換されます。

 なお(3)は、「npm run serve」コマンドでlite-server(Webサーバー)を起動してWebページを表示する定義です。

TypeScriptの実装とコンパイル

 TypeScriptの利用準備が完了したので、リスト7の通り、あいさつ文を取得するMyFirstTSクラスをTypeScriptファイルで実装していきます。

[リスト7]TypeScriptの実装(p002-ts-basic/my-first-ts.ts)
class MyFirstTS {
  // プライベート変数 ...(1)
  private name = '' // 型推論でstring型となる
  // コンストラクター ...(2)
  public constructor(newName: string) {
    // this.nameはstring型なのでstring型のnewNameが代入できる ...(3)
    this.name = newName
  }
  // あいさつのメソッド ...(4)
  public getGreetText(): string {
    return `${this.name}さん、TypeScriptの世界にようこそ!`
  }
}

 (1)ではプライベート変数nameを記述しています。ここで「name = ''」と空文字列を初期設定することで、内部的にnameは文字列型であると決定されます。このようにTypeScriptでは、実装内容から型を決定する機能(型推論)が利用できます。

 (2)のconstructorはクラスのコンストラクターです。ここで引数の「newName: string」は、newName引数が文字列(string)型であることを表します。このようにTypeScriptでは、明示的に変数の型を指定できます。ここでは(3)の通り、プライベート変数nameに、引数のnewNameを代入しています。nameとnewNameは両方とも文字列型なので代入可能です。

 (4)はあいさつを取得するメソッドです。プライベート変数nameを「this.name」で参照して、あいさつ文の文字列にして返却しています。

 リスト7のmy-first-ts.tsを実装後、「npm run build」コマンド(で内部的に実行される「tsc」コマンド)でコンパイルすると、リスト8のJavaScriptファイルmy-first-ts.jsが生成されます。型定義の記述がなくなり、クラスやメソッドの定義が変換されていることに注目してください。

[リスト8]リスト7のTypeScriptから生成されたJavaScript(p002-ts-basic/my-first-ts.js)
"use strict";
// クラスの実装
var MyFirstTS = /** @class */ (function () {
    // コンストラクター
    function MyFirstTS(newName) {
        // プライベート変数
        this.name = ''; // 型推論でstring型となる
        // this.nameはstring型なのでstring型のnewNameが代入できる
        this.name = newName;
    }
    // あいさつのメソッド
    MyFirstTS.prototype.getGreetText = function () {
        return this.name + "\u3055\u3093\u3001TypeScript\u306E\u4E16\u754C\u306B\u3088\u3046\u3053\u305D!";
    };
    return MyFirstTS;
}());

 TypeScriptからJavaScriptへのコンパイル例をもう一つ示します。HTMLファイルに処理内容を設定するindex.tsを、TypeScriptでリスト9の通り実装します。

[リスト9]HTMLファイルに処理内容を設定するTypeScriptの実装(p002-ts-basic/index.ts)
// 名前の初期設定 ...(1)
(document.getElementById('name-input') as HTMLInputElement).value = // ...(1a)
  document.getElementById('name-disp')!.textContent = '吉川英一' // ...(1b)
// テキストボックス変更時の処理 ...(2)
document.getElementById('name-input')!.addEventListener('input', function () {
  // テキストボックスの文字列を取得 ...(2a)
  const inputValue
    = (document.getElementById('name-input') as HTMLInputElement).value
  // 文字列をラベルに設定 ...(2b)
  document.getElementById('name-disp')!.textContent = inputValue
})
// ボタンクリック時の処理 ...(3)
document.getElementById('greet-btn')!.addEventListener('click', function () {
    // テキストボックスの文字列を取得 ...(3a)
    const inputValue
      = (document.getElementById('name-input') as HTMLInputElement).value
    // MyFirstTSクラスを利用してあいさつ文を作ってダイアログ表示 ...(3b)
    const myFirstTS = new MyFirstTS(inputValue)
    alert(myFirstTS.getGreetText())
  }
)

 (1)はWebページに表示する名前の初期設定です。document.getElementByIdメソッドでHTML要素を取得して値を設定しています。(1a)の「as HTMLInputElement」は、HTML要素が<input>であることを明示的に表し、(1b)の「!.」はメソッドがnullを返却する可能性を無視してプロパティを参照することを表します。これらはTypeScriptで型定義を厳密に行うための記法です。

 (2)はテキストボックス変更時の処理です。テキストボックスのinputイベントが発生するごとに、(2a)で文字列を取得し、(2b)でラベルに設定します。

 (3)はボタンクリック時の処理です。(3a)で文字列を取得後、(3b)でMyFirstTSクラスのインスタンスを生成して、そのgetGreetTextメソッドであいさつ文を作ってダイアログ表示します。

 TypeScript固有の記述を含むリスト9をコンパイルすると、JavaScriptファイルindex.jsがリスト10の通り生成されます。リスト10では、TypeScript固有の「as HTMLInputElement」や「!.」の記述が削除されます。また細かいところでは、リスト9で「const」としたところがリスト10では「var」になっています。

[リスト10]リスト9のTypeScriptから生成されたJavaScript(p002-ts-basic/index.js)
"use strict";
// 名前の初期設定
document.getElementById('name-input').value =
    document.getElementById('name-disp').textContent = '吉川英一';
// テキストボックス変更時の処理
document.getElementById('name-input').addEventListener('input', function () {
    // テキストボックスの文字列を取得
    var inputValue = document.getElementById('name-input').value;
    // 文字列をラベルに設定
    document.getElementById('name-disp').textContent = inputValue;
});
// ボタンクリック時の処理
document.getElementById('greet-btn').addEventListener('click', function () {
    // テキストボックスの文字列を取得
    var inputValue = document.getElementById('name-input').value;
    // MyFirstTSクラスを利用してあいさつ文を作ってダイアログ表示
    var myFirstTS = new MyFirstTS(inputValue);
    alert(myFirstTS.getGreetText());
});

 このようにTypeScriptのコードを実装後にコンパイルすると、対応するJavaScriptのコードが得られます。

TypeScriptで型指定を誤ってエラーになる様子を体験

 ここで、TypeScriptの型指定を誤った時の挙動を説明します。リスト7(2)のnewName変数を数字(number)型に直した後でコンパイルを実行すると、図5の通りエラーが表示され、コンパイルが完了しません。

図5:TypeScriptコンパイラーが出力する型チェックエラー(p002-ts-basic)
図5:TypeScriptコンパイラーが出力する型チェックエラー(p002-ts-basic)

 また、開発環境によっては、テキストエディターで型チェックを行ってエラーを表示してくれます。図6は、図5のエラーが出る状態のコードをVisual Studio Codeで表示した時のエラーです。

図6:Visual Studio Codeが表示する型チェックエラー(p002-ts-basic)
図6:Visual Studio Codeが表示する型チェックエラー(p002-ts-basic)

 このようにTypeScriptでは、データ型などの記述誤りはエラーになるため、プログラマーは誤りを事前に知ることができ、JavaScriptのコードが抱えがちなあいまいさを排除して実装が行えます。

 なお、今回はTypeScriptを単独で利用するため、TypeScriptインストールなどの環境準備が必要でしたが、Vue.jsのプロジェクトを生成するVue CLIでは、TypeScriptが利用できるプロジェクトを自動で生成できます。詳細は次回説明します。

まとめ

 本記事では、TypeScriptを利用してVue.jsを活用する連載の1回目として、Vue.jsとTypeScriptのそれぞれについて、簡単なサンプルで実装例を紹介しました。Vue.jsを利用して動的なWebページを構築できること、TypeScriptを利用して型を意識したあいまいさのない実装が行えることを示しました。

 次回は、Vue CLIを利用してVue.jsのプロジェクトを生成し、実際にVue.jsとTypeScriptを組み合わせて実装する方法を説明していきます。

参考資料



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

バックナンバー

連載:TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

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

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5