サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。上げるのもオススメです。Studioを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。今回はNode.jsをTypeScriptで記述する基本設定から、TypeScriptの外部モジュール機能を使ってウェブサーバーを立ち上げる手順までを紹介します。今回のサンプルコードはGitHubで公開してるので、ダウンロードして読み進めてください。Node.jsとTypeScriptをインストールしよう今回解説するセットアップの手順は次の2分ほどの動画に記録しています。まっさらの状態から、TypeScriptの開発環境を構築し、ウェブサーバーを立ち上げるまでの手順を解説。記事を読み進めてわからない箇所があったら動画を参照ください。使用環境を整えましょう。Node.jsをインストールします。Node.jsは公式サイトのインストーラーを使って手順にしたがってインストールします。インストール後コマンドライン(macOSだとターミナル。-vと実行し、Nodeのバージョンが表示されていればインストール成功です。つづいて、作業フォルダーで次のコマンドを入力します。すると、package.jsonファイルが作られます。-yつづいて、TypeScriptをインストールします。コマンドラインから以下のコマンドを実行します。typescript※コマンドのiはモジュールをインストールするコマンドinstallのショートカット、-Dはモジュールのインストール場所(devDependencies)を指定する--save-devのショートカットです。Node.jsの型定義ファイルを用意しておきます。TypeScriptだけだとNode.jsのモジュールにどんなメソッドや変数があるかという情報を持っていないため、コンパイルが通りません。型定義ファイルを読み込むとWebStorm等のTypeScriptのコーディングに対応したエディターでコード補完が効くようになるというメリットもあります。@types/node※-Sはモジュールのインストール場所(dependencies)を指定する--saveのショートカットです。これでpackage.jsonファイルの中身が仕上がりました。scriptsにはTypeScriptのビルドコマンドも記述しておくといいでしょう。scriptsについては記事「npm-scriptsのタスク実行方法」を参照ください。}}つづいて、TypeScriptのコンパイル設定もしておきましょう。package.jsonと同階層に、tsconfig.jsonファイルを次の内容で用意します。]}以上でNode.jsをTypeScriptで記述する環境の構築は終了です。TypeScriptファイルの作成Node.jsをTypeScriptで記述していきましょう。さきほど作成したフォルダーの中に新規テキストファイルを作成してapp.tsという名前にします。app.tsの中にテキストエディターで以下のようなコードを記述します。buildコマンドを実行するとTypeScriptのapp.tsがJavaScriptのapp.jsにコンパイルされます。buildapp.jsができたらそれをNode.jsとして実行ます。コマンドラインでNode.jsを実行するためのnodeコマンドを実行します。TypeScript」と出力されるのが確認できます。sample1/app処理を機能毎にひとまとめにしてクラス化しておくとコードの見通しがよくなります。上記の処理をクラス化しておきましょう。Main();(サンプル:TypeScriptで記述したNode.jsで文字列出力)httpモジュールを使ってhttpサーバーを立ててみようさて、ここからはNode.jsをTypeScriptで記述して簡単なhttpサーバーを立ててみましょう。ブラウザでアクセスがあったら文字列を表示するシンプルなhttpサーバーです。Node.jsにおけるさまざまな処理は「モジュール」という単位に分けられています。httpサーバーを立てるための機能はhttpモジュール、ファイルの読み書きを行うための機能はfsモジュールにて定義されています。TypeScriptでこのようなモジュールを使用するためにはimport文を使います。"http";httpサーバーを設定するcreateServer()メソッド、サーバーを起動してリクエストを待ち受け状態にするlisten()メソッドを使って、httpサーバーは以下のようにして構築できます。Main();imort文とrequire()メソッドを使ってモジュールを読み込んだ場合、モジュールはcommonjs仕様に則る必要があります。"commonjs"と指定していました。TypeScript」と表示されています。これはNode.jsによってhttpサーバーが起動してクライアントのリクエストを待っている状態であることを示します。この待ち受け状態はショートカットCtrl+Cキーで停止できます。これで簡易なhttpサーバーが構築できましたが、実際のサーバーはリクエストに応じてHTMLファイルや画像ファイルを返す処理(ルーティング処理)が必要になります。参考までに、これらのルーティング処理を行ってhttpサーバーでHTMLとCSSと画像が読み込まれるサンプルコードをGitHubにアップしています。Modulesなどさまざまな種類があります。CommonJSはNode.jsで外部モジュールを扱う方式であり、Node.jsではCommonJSを使うのが一般的です。外部モジュールを作って長い処理を複数のファイルに分けよう処理が増える毎に長くなっていくスクリプトの見通しを良くするためには、機能毎に処理を分けて外部ファイル化してオリジナルの外部モジュールをつくるといいです。上記のhttpサーバーを立てる処理をServerAPIクラスという名前で定義し、app.tsと同じ階層にserverModule.tsという外部ファイルを作ってapp.tsのMainクラスから読み込みます。ここで注意したいのは、外部から読み込まれるクラスにはclassの前にexportを指定する必要があることです。}}これを読み込む側のapp.tsの処理ですが、Node.jsのモジュール読み込みと同じようにimport文とrequire()メソッドを使います。Main();(サンプル:httpサーバーの処理を外部モジュール化)このファイルをコンパイルし実行します。Class」と表示されていたら成功です(※)。外部ファイルserverModule.tsに記述したクラスをメインのクラスから実行できました。サーバーを複数起動しようとするとうまくいかないことがあるので、その場合は不要なサーバーをショートカットCtrl+Cキーで停止したりコマンドラインやブラウザの再起動を試してみてください。最後にNode.jsをTypeScriptで記述すると静的型付けの恩恵に預かることができ、大規模な開発やメンテナンスがやりやすくなります。3の環境構築まとめ」や記事「HTML5デモを作って分かったCreateJSとTypeScriptでの効率的な開発手法」でTypeScriptの使い方を紹介しています。あわせてご覧ください。平成29年8月14日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。