mizdra's blog

ぽよぐらみんぐ

Node.js始める→TypeScript始める

はじめに

この記事では以下のことをやる。

  • Node.js環境構築
  • VSCodeでTypeScript環境構築

Node.js始める

Node.jsとは何か?

まず「Node.jsとは何か?」を理解する。 Node.jsは「サーバーサイドJavaScript」として有名だが、PHPなどのサーバーサイド言語とは仕組みが異なる。

また、サーバーサイド開発以外でも用いられることにも注意しなげればならない。
Node.js CLI(コマンドラインからの操作)でJavaScriptを実行出来る機能を活かして、クライアントサイド(いわゆるブラウザで表示される側, HTML)の開発にも使われている。

この時点ではクライアントサイド開発でどのようにNode.jsが使われているかイメージが湧かないだろうが、Node.jsと触れていく内に自然と分かるはずなので、深く考える必要はない。

Node.jsをインストールする。

Node.jsは更新が頻繁に行われているので、好きな時に簡単にバージョンアップ出来るよう、バージョン管理ツールを使ってインストールする。

WindowsMacで使うバージョン管理ツールが異なる。

Windows
- nodistによるNode.Jsのバージョン管理 | Anojin

Mac
- 初心者向け:nodebrewでNode.jsをバージョン管理し、環境を整える(MacOSX) | tipsBear

ちなみに記事投稿時点でのNode.js最新安定バージョンは5.2.0。
インストールが成功したかを確認するには以下のように打てば良い。

$ node -v
v5.2.0

プロジェクトを作成する

Node.jsプロジェクトを作成するにはまずpackage.jsonをプロジェクトルートに配置する。 package.jsonではプロジェクトの設定や、プロジェクトが依存するnpmパッケージなどを記述する。*1

ちなみにnpmは「Node.js向けパッケージマネージャー」のことである。
以下のnpm公式サイトを見れば分かる通り、様々なパッケージがnpmリポジトリで提供されている。

package.jsonnpm initコマンドで簡単に作成出来る。*2

$ mkdir node-sample
$ cd node-sample

# npmを更新する
$ sudo npm install npm -g

# package.jsonを作成
$ npm init
# 対話形式で色々聞かれるが、全てEnterで飛ばしてOK
...
node-sample
└ package.json

以下の記事を見ながら実際にnpmコマンドを使って、npmの動作を確認すると良い。

Node.jsでコードを実行する

より理解を深めるためにもNode.jsで簡単なモジュールを作成してみる。
作業は先程作成したプロジェクト内で行う。

今回は現在時刻を「2015-12-15 17:46:45」のフォーマットで出力するモジュールを作成する。
モジュールには、カスタマイズした時刻フォーマットを取得することの出来る「moment」を使用する。

$ npm install moment --save

npm installには--save, --save-devオプションなどが存在するが、ここでは解説しない。
よく分からなかったら--saveを付けておけば良いと思う。

プロジェクトルートに以下のファイルを作成する。

node-sample
├ index.js
└ package.json

nodeコマンドで実行。

# "."はカレントディレクトリを表す
$ node .
2015-12-15 17:46:45

Node.js環境構築は以上。

TypeScript始める

TypeScriptとは何か?

JavaScriptに型を追加したAltJS。
加えてJavaScript次期仕様であるECMAScript 2015(ES6)もサポートしている。

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

こんな感じで書ける。つよい。

必要なnpmパッケージをインストールする

TypeScript→JavaScriptトランスコンパイルには、npmパッケージ「typescript」を使う。

# v1.7.*を指定してインストール
$ npm install typescript@1.7 -g

# インストール出来たか確認
$ tsc -v
message TS6029: Version 1.7.3

TypeScriptをコンパイルする

今回はサンプルとして型とES6 Moduleを使ったプログラムを書いた。
先程と同様に、プロジェクトフォルダ「ts-sample」を作成し、npm initを済ませておく。

以下のファイルを作成する。

ts-sample
├ src
│ ├ helloModule.ts
│ └ index.ts
│
├ package.json
└ tsconfig.json

加えて、package.jsonmainプロパティの値を./lib/index.jsに書き換える。

実際にコンパイルしてみる。
コンパイルにはtscコマンドを使う。*3

$ tsc -p .

.コンパイルする際に基準とするディレクトリを表す。(今回はプロジェクトルートを指す)
-pオプションを指定するとtsconfig.jsonの内容を元にコンパイルが実行される。
コンパイル後、以下のようにlibフォルダが追加される。

ts-sample
├ lib
│ ├ helloModule.js
│ └ index.js
│
├ src
│ ├ helloModule.ts
│ └ index.ts
│
├ package.json
└ tsconfig.json

出力されたファイルを実行するには以下を叩く。

$ node .
Hello TypeScript!
ES6

この時、nodeコマンドは指定されたディレクトリのpackage.jsonmainの値を参照し、その値が表すファイルを実行している。(今回は./lib/index.js)

VSCodeを使って開発する

Microsoft製の開発エディタ「Visual Studio Code」(以下VSCode)を使ってTypeScript開発をする。 VSCodeを使うことで以下のようなメリットを享受出来る。

  • 文法を解析し、シンタックスハイライト表示してくれる
  • 型情報をエディタが理解して、型情報の表示や補完、リファクタリングなどを行ってくれる
  • package.jsontsconfig.jsonなどの設定ファイルを理解してくれる
  • Windows, Mac, Linuxに対応しているのでどのOSからも同じ操作で作業出来る
  • 同じElectron(HTML+JS+CSSベースのGUIプラットフォーム)で作られているAtomやBracketsよりも軽い

インストール方法や動作の確認は以下のサイトを読んで行うと良い。

VSCodeでtscと連携する

VSCodeではtscコマンドをタスクとして登録し、それにキーショートカットを割り当てて簡単に実行出来る。

まずはタスクの登録を行う。 作成済みの「ts-sample」プロジェクトをVSCodeで開き、以下の手順でタスクを作成・登録する。

  • F1キーでコマンドパレットを開く
  • configure task runnerと入力し、Enterでtasks.jsonを作成
  • tasks.jsonargsプロパティの値を["-p", "."]に書き換える

これでタスクの登録が完了した。
タスクはCtrl+Shift+B, ↑⌘Bで実行出来る。
これはtsc -p .と等価である。

コンパイルエラーなどはCtrl+Shit+U, ↑⌘Uでアウトプット画面を開いて確認出来る。

最後に

今回は純粋にtscでTypeScriptをビルドすることだけに焦点を置いたが、他にもビルドツールやその他のnpmモジュールを組み合わせることで、より凝ったビルドをすることが出来る。
Qiitaやはてなブログでその類の記事は沢山書かれているので、興味のある方は調べてみると良いかもしれない。

おわり。

*1:この記事ではnpmパッケージの意味については触れない

*2:npmコマンドはNode.jsと一緒にインストールされている。

*3:tscコマンドはtypescriptと一緒にインストールされる