One place for hosting & domains

      Typescriptでノードプロジェクトをセットアップする方法

      Typescriptでノードプロジェクトをセットアップする方法


      はじめに

      Nodeは、サーバーサイドJavaScriptの記述を可能にするランタイム環境です。2011年のリリース以来、広く採用されています。サーバーサイドJavaScriptの記述は、JavaScript言語の性質上、動的で弱い型付けなので、コードベースが肥大化していき、困難な作業です。

      他の言語をからJavaScriptを始める開発者は時に、静的で強い型付けに欠けている面に不満を感じますが、TypeScriptはそのギャップを埋めてくれます。

      TypeScriptは、大規模なJavaScriptプロジェクトの構築・管理に役立つ型付け(オプション)スーパーセットです。静的で強い型付け、コンパイル、オブジェクト指向プログラミングなどの追加機能を持つJavaScriptとして考えられます。

      注: TypeScriptは、技術的にはJavaScriptのスーパーセットです。つまりJavaScriptコードはすべて、有効なTypeScriptコードであるといえます。

      以下にTypeScriptを使用するメリットを挙げます。

      1. オプションの静的型付け。
      2. 型推論。
      3. インターフェースが利用可能。

      このチュートリアルでは、NodeプロジェクトとTypeScriptをセットアップします。TypeScriptを使用してExpressアプリケーションを構築し、それを整然とした信頼性の高いJavaScriptコードにトランスパイルします。

      前提条件

      このガイドを始める前に、Node.jsをマシンにインストールします。ガイドNode.jsをインストールしてローカル開発環境を整えるを参照して、これを実施してください。

      ステップ1 — npmプロジェクトの初期化

      まず、node_projectという新しいフォルダを作成し、そのディレクトリに移動します。

      • mkdir node_project
      • cd node_project

      次に、npmプロジェクトとしてそのフォルダを初期化します。

      npm initを実行した後、プロジェクトに関する情報をnpmに提供します。npmに妥当なデフォルトを推論させたければ、yフラグを付けて追加情報のプロンプトをスキップできます。

      プロジェクトスペースがセットアップされ、必要な依存関係をインストールする準備が整いました。

      ステップ2 — 依存関係をインストールする

      最小限のnpmプロジェクトが初期化されると、次のステップは、TypeScriptの実行に必要な依存関係のインストールです。

      プロジェクトディレクトリから次のコマンドを実行して、依存関係をインストールします。

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      -Dフラグは、 --save-devのショートカットです。このフラグの詳細についてはnpmjsドキュメントを参照してください。

      それではExpressフレームワークをインストールしましょう。

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      2つ目のコマンドは、TypeScriptをサポートするExpressのタイプをインストールします。TypeScriptのタイプはファイルで、通常は.d.tsという拡張子が付きます。これらのファイルはAPIに関するタイプ情報(この場合はExpressフレームワーク)の提供に使用します。

      TypeScriptと Expressは独立したパッケージなので、このパッケージが必要です。@type/expressパッケージがなければ、TypeScriptがExpressクラスのタイプを知る方法はありません。

      ステップ3 — TypeScriptの設定

      このセクションでは、TypeScriptをセットアップしてTypeScriptのLintチェックを設定します。TypeScriptは、tsconfig.jsonというファイルを使用して、プロジェクトのコンパイラオプションを設定します。プロジェクトのrootディレクトリにtsconfig.jsonファイルを作成し、次のスニペットを貼り付けます。

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      上記JSONスニペットの重要部分を見ていきしょう。

      • module: モジュールコード生成方法を指定します。Nodeはcommonjsを使用します。
      • target:出力言語レベルを指定します。
      • moduleResolution: インポートが参照するものをコンパイラに理解させます。値nodeは、Node module resolution機構を模倣します。  
      • outDir: トランスパイル後の.jsファイルの出力先です。このチュートリアルでは、distとして保存します。

      tsconfig.jsonファイルを手動で作成、記入する代わりに次のコマンドを実行することもできます。

      このコマンドは、コメント付きのtsconfig.jsonファイルを生成します。

      利用可能なキー値オプションの詳細について詳しく知るには、公式TypeScriptドキュメントを参照してください。

      これで、プロジェクトのTypeScript Lintチェックを設定できます。プロジェクトのrootディレクトリで稼働しているターミナル、つまりこのチュートリアルがnode_projectとして確立したターミナルで、次のコマンドを実行してtslint.jsonファイルを生成します。

      • ./node_modules/.bin/tslint --init

      新たに生成されたtslint.jsonファイルを開いて、no-consoleルールを追加します。

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      TypeScript Lintツールはデフォルトでコンソールステートメントを使用したデバッグを妨げるため、Lintツールにデフォルトのno-consoleルールを無効にするよう明示的に指示する必要があります。

      ステップ4 — package.jsonファイルの更新

      この時点で、ターミナルで関数を個別に実行するか、npmスクリプトを作成して実行することができます。

      このステップでは、TypeScriptコードをコンパイルしてトランスパイルするstartスクリプトを作成し、結果の.jsアプリケーションを実行します。

      package.jsonファイルを開き、適宜更新します。

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      上記のスニペットでは、mainパスを更新し、startコマンドをscriptsセクションに追加しています。startコマンドを見ると、最初にtscコマンドが、続いてnodeコマンドが実行されるのがわかります。このコマンドは、nodeで生成された出力をコンパイルし、実行します。

      tscコマンドは、tsconfig.jsonファイルの設定通り、アプリケーションをコンパイルし、生成された.js出力を指定したoutDirディレクトリに配置するよう、TypeScriptに指示します。

      ステップ5 — Basic Expressサーバーの作成と実行

      TypeScriptとそのlintツールが設定されたので、次はNode Expressサーバーを構築しましょう。

      まず、プロジェクトのrootディレクトリにsrcフォルダを作成します。

      次に、そのフォルダ内にapp.tsという名前のファイルを作成します。

      この時点で、フォルダ構造は次のように見えるはずです。

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      app.tsファイルを任意のテキストエディタで開き、次のコードスニペットを貼り付けます。

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      上記のコードは、ポート3000でリクエストをlistenするノードサーバーを作成します。次のコマンドを使用してアプリケーションを実行します。

      実行が成功すると、メッセージがターミナルに表示されます。

      Output

      • server is listening on 3000

      これで、ブラウザでhttp://localhost:3000にアクセスできます。次のメッセージが表示されます。

      Output

      • The sedulous hyena ate the antelope!

      メッセージ「The sedulous hyena ate the antelope!」を表示するブラウザウィンドウ

      dist/app.jsファイルを開くと、TypeScriptコードのトランスパイル版が表示されます。

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      この時点で、ノードプロジェクトがTypeScriptを使用するように、正常にセットアップされました。

      まとめ

      このチュートリアルでは、TypeScriptが信頼性の高いJavaScriptのコードを作成するのに役立つ理由について学びました。さらに、TypeScriptで作業するメリットについても学びました。

      最後に、NodeプロジェクトのセットアップにはExpressフレームワークを使用しましたが、プロジェクトのコンパイル・実行にはTypeScriptを使用しました。



      Source link