Visual Studioでnpm

多分皆さんはVisual StudioでNuGetでJSライブラリも.NETで使用するライブラリも管理してると思います。
今回はJSライブラリをnpmで管理出来るようにVisual Studioでnpmが使えるようにします。もちろんVisual Studio使わないでnpmしても(ry Visual Studioでnpmする場合、拡張機能をインストールする必要があります。

Package Installer

Visual Studio拡張機能です。
npm、Bower、Typings等をVisual Studioから利用することが出来るようになります。
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller

Package Installerの導入

Package Installerをインストールします。 ツール->拡張機能と更新プログラムから拡張機能と更新プログラムの画面を開きます。
オンラインを選択し、package installerを検索します。

f:id:mt9116:20171206103252p:plain

Package Installerをダウンロードします。
Package Installerを有効にするためにダウンロードしたらVisual Studioを再起動しましょう。

Package Installerの使い方

ソリューションを右クリックし、メニューにQuick Install Packageが表示されるのでそれを選択します。

f:id:mt9116:20171206103725p:plain

すると、ダイアログが表示され、npmを使用することが出来ます。

f:id:mt9116:20171206103818p:plain

実際に、Package Installerでjqueryを入れてみると

f:id:mt9116:20171206104026p:plain

node_modules配下にjqueryが置かれていますね。
また、package.jsonが作成されます。

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "jquery": "^3.2.1"
  }
}

また、package.jsonを右クリックするとRestore Packageがメニューに表示されます。

f:id:mt9116:20171206105543p:plain

これでpackage.jsonからnode_modulesを復元することが出来ます。
package.jsonをプロジェクト内で共有すればJSライブラリのバージョンを一元管理出来そうですね。

最後に

Package Installerを導入することでVisual Studio上からnpm等を行うことが出来るようになります。
Nugetでサーバサイドのライブラリを管理して、npmでクライアントサイドのライブラリを管理することも出来ます。

ASP.NET MVC with TypeScript

今回はASP.NET MVCにTypeScriptを組み込んでみます。
環境はVisual Studio 2015です。

ASP.NET MVC サンプル作成

まず、ファイル->新規作成->プロジェクトでプロジェクト作成画面を開きます。
そして、ASP.NET Web アプリケーションを選択します。

f:id:mt9116:20171205122315p:plain

今回はEmpty、MVCを選択します。

f:id:mt9116:20171205122249p:plain

空のMVCなため構成はこんな感じです。

f:id:mt9116:20171205122259p:plain

空でなんもないんでControllers配下にHomeController.csを追加します。

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TypeScriptSample.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

対応するViewをViews/Home配下に追加しましょう。

Index.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>

これでソリューションを実行すれば下記画面が表示されるはずです。

f:id:mt9116:20171205123131p:plain

TypeScriptを組み込む

先ほど作成したサンプルにTypeScriptを組み込んでみましょう。
まず、ソリューションを右クリックし、追加->新しいフォルダでTypeScriptを置くフォルダを作りましょう。 フォルダ名は何でもいいです。

追加したフォルダを右クリックし、追加->TypeScriptファイルでTypeScriptファイルを作成します。

app.ts

class Person {
    private name: string;
    public getName(): string {
        return this.name;
    }
    constructor(name: string) {
        this.name = name;
    }
}

window.onload = function () {
    const p = new Person("Hoge");
    alert(p.getName());
}

ソリューションをビルドするとjsにトランスパイルされます。

f:id:mt9116:20171205123717p:plain

画面にapp.jsへの参照を追加しましょう。

Index.html

<!DOCTYPE html>

<html>
<head>
    <script src="~/ts/app.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>

準備は整いました。
ソリューションを実行すると下記画面が表示されるはずです。

f:id:mt9116:20171205123921p:plain

以上、ASP.NET MVCにTypeScriptを組み込むの回でしたー

Visual StudioでTypeScript

Visual StudioでTypeScriptを使ってみます。
環境はVisual Studio 2015です。

TypeScriptのプロジェクト作成

ファイル->新規作成->プロジェクトでプロジェクト作成ダイアログを開きます。
テンプレートからTypeScriptを使用したHTMLアプリケーションを選択します。

f:id:mt9116:20171204122128p:plain

構成

このテンプレートには画面とTypeScriptファイルとcssのみが含まれています。

f:id:mt9116:20171204122526p:plain

app.tsでは時間を画面に表示する処理が書かれているようです。

app.ts

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

画面ではトランスパイルしたjsファイルをソースに指定します。

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

ビルド

ソリューションをビルドしてみます。
ビルドするとtsがjsにトランスパイルされます。

f:id:mt9116:20171204123432p:plain

app.js

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () { return _this.span.innerHTML = new Date().toUTCString(); }, 500);
    };
    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
}());
window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};
//# sourceMappingURL=app.js.map

実行

ソリューションを実行すると下記画面が表示されます。

f:id:mt9116:20171204123700p:plain

TypeScriptのビルド設定

ソリューションを右クリックし、プロパティを表示します。
左側にあるTypeScriptビルドを選択すると設定が表示されます。

f:id:mt9116:20171204124044p:plain

まとめ

Visual StudioでビルドするとTypeScriptファイルはJavaScriptファイルにトランスパイルされます。
画面で読み込む際にはトランスパイルされた.jsファイルを参照しましょう。

TypeScriptコーディング規約

随時更新中。

命名

Variable

  • camelCaseを用いる。

bad

var Num = 10;

good

var num = 10;

Function

  • camelCaseを用いる。

bad

GetId(): number{ }

good

getId(): number { }

Class

  • Class名はPascalCaseを用いる。
  • memberはcamelCaseを用いる。
  • functionはcamelCaseを用いる。

bad

class user {
    Id: number;
    GetId(): number {
        return this.Id;
    }
}

good

class User {
    id: number;
    getId(): number {
        return this.Id;
    }
}

Interface

  • Interface名はPascalCaseを用いる。
  • Interface名のprefixにIを用いない。
  • functionはcamelCaseを用いる。

bad

interface IUser {
    GetId(): number;
}

good

interface User {
    getId(): number;
}

Namespace

  • Namespace名はPascalCaseを用いる。

bad

namespace app {
}

good

namespace App {
}

Array

  • []の代わりにArrayを用いる。

bad

private Users: User[];

good

private Users: Array<User>;

CSSで長い文字列を省略表示する

スタイルシートで文字列を省略するには下記スタイルを適用します。

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

指定した幅を超える文字列が…で省略されます。

td要素の文字列を省略したい場合はtableに下記スタイルを適用する必要があります。

table{
    table-layout: fixed;
}