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を検索します。
Package Installerをダウンロードします。
Package Installerを有効にするためにダウンロードしたらVisual Studioを再起動しましょう。
Package Installerの使い方
ソリューションを右クリックし、メニューにQuick Install Packageが表示されるのでそれを選択します。
すると、ダイアログが表示され、npmを使用することが出来ます。
実際に、Package Installerでjqueryを入れてみると
node_modules配下にjqueryが置かれていますね。
また、package.jsonが作成されます。
{ "name": "myproject", "version": "1.0.0", "devDependencies": { "jquery": "^3.2.1" } }
また、package.jsonを右クリックするとRestore Packageがメニューに表示されます。
これでpackage.jsonからnode_modulesを復元することが出来ます。
package.jsonをプロジェクト内で共有すればJSライブラリのバージョンを一元管理出来そうですね。
最後に
Package Installerを導入することでVisual Studio上からnpm等を行うことが出来るようになります。
Nugetでサーバサイドのライブラリを管理して、npmでクライアントサイドのライブラリを管理することも出来ます。
Typings入門
こちらに移行しました。
ASP.NET MVC with TypeScript
今回はASP.NET MVCにTypeScriptを組み込んでみます。
環境はVisual Studio 2015です。
ASP.NET MVC サンプル作成
まず、ファイル->新規作成->プロジェクトでプロジェクト作成画面を開きます。
そして、ASP.NET Web アプリケーションを選択します。
今回はEmpty、MVCを選択します。
空のMVCなため構成はこんな感じです。
空でなんもないんで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>
これでソリューションを実行すれば下記画面が表示されるはずです。
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にトランスパイルされます。
画面に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>
準備は整いました。
ソリューションを実行すると下記画面が表示されるはずです。
以上、ASP.NET MVCにTypeScriptを組み込むの回でしたー
Visual StudioでTypeScript
Visual StudioでTypeScriptを使ってみます。
環境はVisual Studio 2015です。
TypeScriptのプロジェクト作成
ファイル->新規作成->プロジェクトでプロジェクト作成ダイアログを開きます。
テンプレートからTypeScriptを使用したHTMLアプリケーションを選択します。
構成
このテンプレートには画面とTypeScriptファイルとcssのみが含まれています。
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にトランスパイルされます。
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
実行
ソリューションを実行すると下記画面が表示されます。
TypeScriptのビルド設定
ソリューションを右クリックし、プロパティを表示します。
左側にあるTypeScriptビルドを選択すると設定が表示されます。
まとめ
Visual StudioでビルドするとTypeScriptファイルはJavaScriptファイルにトランスパイルされます。
画面で読み込む際にはトランスパイルされた.jsファイルを参照しましょう。
TypeScriptについて
記事はこちらに引っ越ししました。
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; }