TypeScriptチュートリアル① -環境構築編-

4
いいね
0
コメント

2017年01月19日に更新

はじめに

この記事は、JavaScriptからTypeScriptにそろそろ移行したい方向けに書いています。JavaScript自体がちょっとあやふやでも他のオブジェクト指向系の言語の経験があれば理解できるように書いていきます。

TypeScriptとは

TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。その特徴は、大規模なアプリケーションの開発に耐えるように、(C++やJavaなどの)クラスベースのオブジェクト指向プログラムの機能や、変数への静的な型の指定などを取り込んで、設計されています。それはJavaScriptの標準仕様であるECMAScript2015以降の新機能を先取りした形にもなっています。

TypeScriptを動かしてみる

通常、TypeScriptのソースコードは、JavaScriptにコンパイルしてから実行します。そのためTypeScriptコンパイラが必要になります。コンパイラのインストールにはいくつかの手段がありますが、OSを問わずもっとも汎用的に利用できるのはnode.jsに同梱されているnpmコマンドを使ってインストールする方法です。

TypeScriptコンパイラ導入手順

Node.jsをインストール
- Node.jsの公式サイト(https://nodejs.org/ja/)よりインストーラーをダウンロードして、インストールしてください。ダウンロードできるバージョンは二種類ありますが、ここではバージョン6.9.xの方をインストールします。
TypeScriptコンパイラをインストール
- コマンドプロンプトやターミナルなどを実行し、下記のコマンドを実行してください。
- npm install -g typescript
- OSや環境によってはsudoコマンドを先頭につける必要があるかもしれません。 ("sudo npm install -g typescript")
インストールの確認
- 続いてコマンド"tsc -v"と実行し、"Version 2.0.3"などと表示されればインストールは完了です。

Hello TypeScript

実際にTypeScrptのプログラムを簡単に書いてみて、コンパイルしてみましょう。下記のソースコードをお好きなエディタで書いて、hello.tsという名前で保存してください。

hello.ts

const message = 'Hello TypeScript';
alert(message);

そしてコマンドプロンプトもしくはターミナルで、下記のコマンドを実行してください。
tsc hello.ts
うまくコンパイルできると、結果として"hello.js"というファイルができているはずです。エディタで変換結果を確認してみてもいいでしょう。
せっかくなのでこのJavaScriptファイルを実行してみましょう。下記のHTMLファイルを書いて、"index.html"という名前で保存してください。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="hello.js"></script>
  </body>
</html>

ブラウザでこのファイルを開くと、アラートダイアログが表示されるはずです。

本格的な開発環境の構築

JavaScriptでフロントエンド開発を行うために、様々なツールが登場してきており、それらを使って効率的な開発環境を構築することが、当たり前に行われています。
ここではWebpackというビルドツールを導入し、TypeScriptの自動コンパイル、複数のソースコードの結合、ソースコード更新時の自動リロードを実現してみたいと思います。

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

まず開発の場としてのフォルダを作ってください。名前は自由ですがここでは"ts_tutorial"としておきます。

コマンドプロンプト

mkdir ts_tutorial
cd ts_tutorial
npm init

ここでは、ついでなので"npm init"コマンドで、package.jsonファイルも生成しておきます。
このコマンドの実行時にはなにかいろいろ聞かれますが、すべてそのままエンターキーを押して、デフォルトの値のまま進行してもOKです。

Webpackのインストール

コマンドプロンプトやターミナルなどを実行し、下記のコマンドを実行してください。
npm install -g webpack webpack-dev-server
OSや環境によってはsudoコマンドを先頭につける必要があるかもしれません。 ("sudo npm install -g typescript")
つづいてTypeScript用のローダー（Webpackで動作するTypeScriptコンパイラだと思ってください。）をインストールします。
npm install ts-loader --save-dev

設定ファイルの準備

ts_tutorialフォルダの中で下記の設定ファイルをエディタで書いてください。

まずはnpm用の設定ファイルです。これは既に記入済みのはずなので、"scripts"の部分を修正するだけです。

package.json

{
  "name": "ts_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^0.9.5",
    "typescript": "^2.0.3",
    "webpack-dev-server": "^1.16.2"
  }
}

追加したコマンドは二つで、"npm start"でwebpack-dev-serverを自動リロードモードで起動するようにするものと、"npm run build"でWebpackのビルド処理を行うものです。webpack-dev-serverはビルド処理も行なってくれるため、基本的に"npm start"だけ使っておけば問題ないです。

つづいてWebpack用の設定ファイルです。それぞれの意味についてはコメントとして書き込んでいます。

webpack.config.js

var path = require('path');
module.exports = {
    // webpack処理の起点となるファイルの指定と出力アイテムの指定
    entry: {
        app_start:'./src/ts/app.ts'
    },
    output: {
      path: '/build',        // webpack処理したファイルの出力先フォルダ
      publicPath: '/js',     // webpack処理したファイルの公開時のフォルダ
      filename: '[name].js'  // webpack処理したファイルのファイル名
                             // [name]はentry設定での出力アイテム名が自動的に適用される
    },
    devServer: {
      contentBase: 'public'  // webpack-dev-serverの公開フォルダ
    },
    resolve: {
        // requireしたファイル（Webpack処理の対象ファイル）に適用される拡張子
        // 左端の空文字列はrequireで拡張子をつけて指定した場合に必要となる
        extensions:['','.ts','.webpack.js','.web.js','.js']
    },
    module: {
         // ローダー(Webpack処理の内容を決定するモジュール)の設定
         loaders: [
              // ファイル名末尾が".ts"のファイルをコンパイルする
              {test: /\.ts$/,loader: 'ts-loader' }
         ]
    }
}

最後はTypeScriptコンパイラ用の設定ファイルです。

tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true
  },
    "include": [
        "src/ts/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

最初の節はコンパイルオプションです。それぞれの意味は下記の通りです。

オプション	説明
module	生成するモジュール関連のコードの対象ソフトウェアを指定
noImplicitAny	暗黙的に利用される"any"型をエラーとする
removeComments	コンパイル時にコメントを除去する
preserveConstEnums	"const enum"を使用する
sourceMap	".map"ファイルを生成する

"include"の節はコンパイル対象のファイルの指定です。srcフォルダ内のtsフォルダ内のすべてのファイル（＊はワイルドカードです。）が対象です。
"exclude"の節は逆にコンパイル対象外の指定です。npmによって管理されている外部ライブラリを入れるフォルダを対象外としています。

TypeScriptプログラムの作成

簡単なTypeScriptプログラムを作成して動作させてみます。ただしファイル構成やフォルダ構成はなるべく大規模な開発を想定したものにしておきたいので、少々複雑になります。
下記のフォルダ階層を作成してください。

ts_tutorial(作成済み)
- build
- public
  - js
- src
  - ts
- node_modules(npmコマンドによって作成済み)

"ts_tutorial"フォルダ直下には、先の手順で作成した設定ファイル群が置かれているはずです。
これからつくるTypeScriptプログラムは"src/ts"に作成していきます。
"public"フォルダ直下にはindex.htmlファイルを作成します。

それぞれのフォルダに下記のプログラムを書いてください。

src/ts/app.ts

import Item from './class';
var elem = document.getElementById('output');
var aBook = new Item('はじめてのTypeScript',1980);
aBook.say(elem);

src/ts/class.ts

class Item {
  constructor(private name:string, private price:number){}

  public say($elem:HTMLElement) : void {
    $elem.innerHTML = '書名：' + this.name + '  価格: ' + this.price + '円';
  }
}
export default Item;

public/index.html

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <title>hello typescript</title>
  </head>
  <body>
    TYPESCRIPT > <span id="output"></span>
    <script src="./js/app_start.js"></script>
  </body>
</html>

TypeScriptプログラムの実行

コマンドプロンプトで下記のコマンドを実行してください。これで実行環境であるwebpack-dev-serverが起動します。

コマンドプロンプト

npm start

つづいてChromeなどなるべく最新のブラウザで、http://localhost:8080にアクセスしてください。書籍の情報ぽいものが表示されれば完了です。

自動リロードを試してみる

今回の設定では、TypeScriptソースコードを変更すると、自動的に再コンパイルおよびブラウザのリロードが行われるようになっています。（それぞれWebpackとwebpac-dev-serverの機能です）
これが有効どうかを試してみましょう。
下記のソースコードの値段の部分を例えば1980から2980に変更してみてください。

src/ts/app.ts

import Item from './class';
var elem = document.getElementById('output');
var aBook = new Item('はじめてのTypeScript',2980); // ←この行を変更(1980から2980に)
aBook.say(elem);

すると自動的に再コンパイルが始まり、ブラウザでの表示が変わるはずです。

# はじめに
この記事は、JavaScriptからTypeScriptにそろそろ移行したい方向けに書いています。JavaScript自体がちょっとあやふやでも他のオブジェクト指向系の言語の経験があれば理解できるように書いていきます。

# TypeScriptとは
TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。その特徴は、大規模なアプリケーションの開発に耐えるように、(C++やJavaなどの)クラスベースのオブジェクト指向プログラムの機能や、変数への静的な型の指定などを取り込んで、設計されています。それはJavaScriptの標準仕様であるECMAScript2015以降の新機能を先取りした形にもなっています。

# TypeScriptを動かしてみる

## TypeScriptコンパイラ導入手順
1. Node.jsをインストール
   - Node.jsの[公式サイト(https://nodejs.org/ja/)](https://nodejs.org/ja/)よりインストーラーをダウンロードして、インストールしてください。ダウンロードできるバージョンは二種類ありますが、ここではバージョン6.9.xの方をインストールします。
2. TypeScriptコンパイラをインストール
    - コマンドプロンプトやターミナルなどを実行し、下記のコマンドを実行してください。
    - ```npm install -g typescript```
    - OSや環境によってはsudoコマンドを先頭につける必要があるかもしれません。 ("sudo npm install -g typescript")
3. インストールの確認
    - 続いてコマンド"tsc -v"と実行し、"Version 2.0.3"などと表示されればインストールは完了です。

## Hello TypeScript
実際にTypeScrptのプログラムを簡単に書いてみて、コンパイルしてみましょう。下記のソースコードをお好きなエディタで書いて、hello.tsという名前で保存してください。

```JavaScript:hello.ts
const message = 'Hello TypeScript';
alert(message);
```

そしてコマンドプロンプトもしくはターミナルで、下記のコマンドを実行してください。
```
tsc hello.ts
```
うまくコンパイルできると、結果として"hello.js"というファイルができているはずです。エディタで変換結果を確認してみてもいいでしょう。
せっかくなのでこのJavaScriptファイルを実行してみましょう。下記のHTMLファイルを書いて、"index.html"という名前で保存してください。

```HTML:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="hello.js"></script>
  </body>
</html>
```
ブラウザでこのファイルを開くと、アラートダイアログが表示されるはずです。

# 本格的な開発環境の構築
JavaScriptでフロントエンド開発を行うために、様々なツールが登場してきており、それらを使って効率的な開発環境を構築することが、当たり前に行われています。
ここではWebpackというビルドツールを導入し、TypeScriptの自動コンパイル、複数のソースコードの結合、ソースコード更新時の自動リロードを実現してみたいと思います。

## プロジェクトフォルダの作成
まず開発の場としてのフォルダを作ってください。名前は自由ですがここでは"ts_tutorial"としておきます。

```terminal:コマンドプロンプト
mkdir ts_tutorial
cd ts_tutorial
npm init
```

## Webpackのインストール
    
コマンドプロンプトやターミナルなどを実行し、下記のコマンドを実行してください。
```npm install -g webpack webpack-dev-server```
OSや環境によってはsudoコマンドを先頭につける必要があるかもしれません。 ("sudo npm install -g typescript")
つづいてTypeScript用のローダー（Webpackで動作するTypeScriptコンパイラだと思ってください。）をインストールします。
```npm install ts-loader --save-dev```

## 設定ファイルの準備

ts_tutorialフォルダの中で下記の設定ファイルをエディタで書いてください。

まずはnpm用の設定ファイルです。これは既に記入済みのはずなので、"scripts"の部分を修正するだけです。

```JSON:package.json
{
  "name": "ts_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^0.9.5",
    "typescript": "^2.0.3",
    "webpack-dev-server": "^1.16.2"
  }
}
```

つづいてWebpack用の設定ファイルです。それぞれの意味についてはコメントとして書き込んでいます。

```JavaScript:webpack.config.js
var path = require('path');
module.exports = {
    // webpack処理の起点となるファイルの指定と出力アイテムの指定
    entry: {
        app_start:'./src/ts/app.ts'
    },
    output: {
      path: '/build',        // webpack処理したファイルの出力先フォルダ
      publicPath: '/js',     // webpack処理したファイルの公開時のフォルダ
      filename: '[name].js'  // webpack処理したファイルのファイル名
                             // [name]はentry設定での出力アイテム名が自動的に適用される
    },
    devServer: {
      contentBase: 'public'  // webpack-dev-serverの公開フォルダ
    },
    resolve: {
        // requireしたファイル（Webpack処理の対象ファイル）に適用される拡張子
        // 左端の空文字列はrequireで拡張子をつけて指定した場合に必要となる
        extensions:['','.ts','.webpack.js','.web.js','.js']
    },
    module: {
         // ローダー(Webpack処理の内容を決定するモジュール)の設定
         loaders: [
              // ファイル名末尾が".ts"のファイルをコンパイルする
              {test: /\.ts$/,loader: 'ts-loader' }
         ]
    }
}
```

最後はTypeScriptコンパイラ用の設定ファイルです。

```JSON:tsconfig.json
{
  "compilerOptions": {
      "module": "commonjs",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true
  },
    "include": [
        "src/ts/*"
    ],
    "exclude": [
        "node_modules"
    ]
}
```
最初の節はコンパイルオプションです。それぞれの意味は下記の通りです。

## TypeScriptプログラムの作成

- ts_tutorial(作成済み)
   - build
   - public
       - js
   - src
       - ts
   - node_modules(npmコマンドによって作成済み)

それぞれのフォルダに下記のプログラムを書いてください。

```JavaScript:src/ts/app.ts
import Item from './class';
var elem = document.getElementById('output');
var aBook = new Item('はじめてのTypeScript',1980);
aBook.say(elem);
```
```JavaScript:src/ts/class.ts
class Item {
  constructor(private name:string, private price:number){}

public say($elem:HTMLElement) : void {
    $elem.innerHTML = '書名：' + this.name + '  価格: ' + this.price + '円';
  }
}
export default Item;
```

```HTML:public/index.html
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <title>hello typescript</title>
  </head>
  <body>
    TYPESCRIPT > <span id="output"></span>
    <script src="./js/app_start.js"></script>
  </body>
</html>
```

## TypeScriptプログラムの実行

コマンドプロンプトで下記のコマンドを実行してください。これで実行環境であるwebpack-dev-serverが起動します。

```terminal:コマンドプロンプト
npm start
```

つづいてChromeなどなるべく最新のブラウザで、[http://localhost:8080](http://localhost:8080)にアクセスしてください。書籍の情報ぽいものが表示されれば完了です。

## 自動リロードを試してみる

```JavaScript:src/ts/app.ts
import Item from './class';
var elem = document.getElementById('output');
var aBook = new Item('はじめてのTypeScript',2980); // ←この行を変更(1980から2980に)
aBook.say(elem);
```