【Node.js入門】 初心者がTypeScriptを始めるためのチュートリアル！

今回は、Node.jsによるプログラミングを「TypeScript」で記述する学習をしていきましょう！

このような内容も含めて、本記事では以下のような構成で解説していきます！

この記事で、TypeScriptをしっかり学習してスキルアップを目指していきましょう！

「TypeScript」とは？

TypeScriptはマイクロソフトが開発・保守しているプログラム言語であり、比較的規模の大きいプロジェクトによく使われています。大きな特徴としては、コンパイルによって純粋なJavaScriptに変換できる点と、静的型付けを実現する仕様にあることです。

つまり、純粋なJavaScriptに静的型付けができるようになることで、生産性の向上や保守・デバッグなどを効率化できるようになるわけです。本記事では難しく考えられがちなTypeScriptを簡単に始められるように解説していきますのでぜひ参考にしてみてください！

「TypeScript」の使い方

この章では、「TypeScript」の基本的な使い方について見ていきましょう！主に、TypeScriptの導入からコンパイルする方法までを学んでいきます。

TypeScriptの導入方法について

それでは、TypeScriptを導入して利用できるようにしていきましょう。導入自体は簡単でnpmから次のように実行することでTypeScriptをインストールできます。

$ npm install -g typescript

これはNode.jsがインストールされていることが前提なので、まだの方は次の記事を参考に導入しておきましょう！

TypeScriptが導入できたら、拡張子が「.ts」になるファイルを作成することができます。例えば、一般的なJavaScriptを使った次のようなプログラムを作成してみましょう。

let user = (name) => {
    return 'こんにちは、' + name + 'さん';
}

console.log(user('太郎'));

このプログラムを今回は「sample.ts」というファイル名で保存しておきます。これでTypeScriptのファイルが作成できたので、あとはこのファイルをコンパイルして実行する方法を見ていきましょう！

コンパイルをする方法

TypeScriptで作成されたファイルはそのままでは実行できません。「tsc」コマンドというを使ってコンパイル作業を行うことで、純粋なJavaScriptファイルに変換されます。

例えば、先ほど作成した「sample.ts」をコンパイルするには次のようにコマンドを実行します。

$ tsc sample.ts

実行して特にエラーがなければ何も出力されずに終了します。ディレクトリを確認すると新しく「sample.js」というファイルが作成されているのが分かります。

このファイルがコンパイルされてJavaScriptに変換されたプログラムになります。JavaScriptファイルなので、「node」コマンドから普通に実行することも可能です。

$ node sample.js

実行結果

こんにちは、太郎さん

ファイルの中身を確認すると以下のようになっているはずです。

var user = function (name) {
    return 'こんにちは、' + name + 'さん';
};
console.log(user('太郎'));

元のプログラムから少し記述が変わっているのが分かるでしょうか？例えば、変数を定義するときに使った「let」が「var」になっていたり、アロー関数が通常の「function」に変換されていますね。

つまり、どのブラウザでも実行できるJavaScriptの仕様に変換されているというわけです。これらのコンパイルオプションは「tsconfig.json」を作成することで、自分の好きなようにカスタマイズすることも可能です。

「静的型付け」について

TypeScriptには大きな特徴として、静的型付けが利用できるようになっているので詳しく見ていきましょう！静的型付けは、簡単に言うと変数に格納できる型（string, Number, booleanなど）を固定することができる機能になります。

例えば、次のサンプル例を見てください！

var str:string;

「str」という変数を定義していますが、「:」に続けてString型を定義しているのが分かりますね。これにより変数「str」は文字列以外の値を格納すると、コンパイル時にエラーが発生するようになるわけです。

次のサンプル例を見てください。

var str:string;
var num:number;

str = 'hello';
num = 'world';

この例では、変数「num」にNumber型が定義されていますが、文字列を格納しようとしていますよね？当然ながら、コンパイルすると型が違うということでエラーになります。また、関数などの引数についても同じように型を固定することができます。

let user = (name:string) => {
  return 'こんにちは、' + name + 'さん';
}

console.log(user(1234));

この例は、先ほどのsample.tsの関数にある引数「name」にString型を付与しています。

しかし、「user(1234)」のように数値を設定してしまっているので、コンパイルするとエラーになるわけです。このように静的型付けを行うと、想定しないバグなどを事前に解消することにも繋がるので非常に便利な機能と言えるでしょう。

TypeScriptでサーバー構築

この章では、TypeScriptを使って簡単なサーバーを構築する方法について見ていきましょう！主に、人気のフレームワークEpressを利用したサーバー作りについて学んでいきます。

Expressによるサーバー構築方法

それでは、Expressのフレームワークを使って簡単なサーバーを作っていきましょう！「server.ts」というファイル名で作っていきます。TypeScriptでNode.jsのモジュールを使う場合は、まず最初に「import」を使って読み込んでいきましょう。

import * as Express from 'express';

const app = Express();

モジュールを読み込んだら「Express()」を実行することで、サーバーオブジェクトを作成することができます。あとは、一般的なNode.jsとほとんど同じ感覚で記述することができます。

app.get('/', (req:Express.Request, res:Express.Response) => {
        return res.send('Hello TypeScript Server');
});

app.listen(3000, () => console.log('port 3000'));

「get()」の第2引数で設定している関数の引数にはTypeScriptの特徴でもある静的型付けをしておくと安全でしょう。最後に「server.ts」をコンパイルして「node server.js」というコマンドで実行すればサーバー構築は完了です。

まとめ

今回は、基本的なTypeScriptによるプログラミングを学習しました！最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！