ちょっとした技術メモ


- [プログラミング用日本語等幅フォント Cica(シカ) ](https://github.com/miiton/Cica)

# EntityFramework

- https://docs.microsoft.com/ja-jp/ef/core/

# dotnet core

|パッケージ|バージョン|
|---------|---------|
|dotnetCore|<=2.1.301|

## ASP.NET Core 2.1

- [公式ブログ](https://blogs.msdn.microsoft.com/webdev/2018/05/30/asp-net-core-2-1-0-now-available/)
- https://qiita.com/sugasaki/items/b6e6cd579ea205863908

## カスタムテンプレート

カスタムテンプレートをインストールして使用するには次の2通りの方法がある。

- nugetパッケージ
    - テンプレートはnugetのパッケージとして管理される。
    - テンプレートのインストール／アンインストールは、nugetパッケージIDで行う
- ファイルシステム
    - テンプレートは管理されない。
    - インストールでは、`template.json`の存在するファイルパスが管理される
    - アンインストールでは、`template.json`の存在するファイルパスを指定する

ファイルシステム方式の場合、テンプレートの格納されているパスがインストール時の場所から移動した場合、そのテンプレートを使用した`dotnet new`コマンドは実行に失敗します。

### 作り方

https://docs.microsoft.com/ja-jp/dotnet/core/tools/custom-templates

上記サイトを参考にカスタムテンプレートを作ってみる。
カスタムテンプレートとは、`dotnet new`コマンドを使って新たなプロジェクトを作成する際のスケルトンを作成するためのテンプレート。

### template.json

```json:template.json

{
  "$schema": "http://json.schemastore.org/template",
  "author": "Atachimiko",
  "classifications": [ "Web", "MVC", "SPA" ],
  "name": "Atachi's Custom Template",
  "identity": "AtachiCustomTemplate",
  "shortName": "atachi",
  "tags": {
      "language": "C#"
  },
  "sourceName": "AtachiCustomTemplate",
  "preferNameDirectory" : "true"
}
```

- `$schema`
    - "http://json.schemastore.org/template"の値でよい。
- `author`
    - テンプレートの製作者名
- `classifications`
    - テンプレートの種類を示すタグ名。複数指定可能。
- `identity`
    - テンプレートの定義名。システムにインストールするテンプレートには、一意のidentityを割り振らなければなりません。
- `name`
    - テンプレートの名称
- `shortName`
    - テンプレートの省略名。`dotnet new <shortName>`コマンドで使用します。
- `tags`
    - テンプレートのタグ。classificationsとの違いは不明ですが、言語名の指定に使われることが多いようです。

### ファイルシステム指定方式でのテンプレートのアンインストール

テンプレートの名前やshortNameでは削除できない仕様のため、まずは`dotnet new -u`コマンドでインストール済みのテンプレート一覧を表示し、表示された項目をパラメータに指定することで対象のテンプレートをアンインストールできる。

```bash
$ dotnet new -u
.NET Core CLI 用テンプレート インスタンス化コマンド

Currently installed items:
 Microsoft.DotNet.Common.ItemTemplates
 Microsoft.DotNet.Common.ProjectTemplates.2.0
 Microsoft.DotNet.Test.ProjectTemplates.2.0
 Microsoft.DotNet.Web.ItemTemplates
 Microsoft.DotNet.Web.ProjectTemplates.2.0
 Microsoft.DotNet.Web.Spa.ProjectTemplates
$ dotnet new -u Microsoft.DotNet.Web.Spa.ProjectTemplates
```

# Angular

|パッケージ|バージョン|
|---------|---------|
|Angular   |<=6.0.0|
|Material  |<=6.0.0|
|CLI       |<=6.0.0|



## トラシュー

### Error: Local workspace file ('angular.json') could not be found

https://stackoverflow.com/questions/49810580/error-local-workspace-file-angular-json-could-not-be-found

## ルーティング

- [Angularのルーティング設定（基礎編）](https://qiita.com/Yamamoto0525/items/e870713d9d05d2d36a80)
- [Angular Routerメモ - ryotah’s blog](http://ryotah.hatenablog.com/entry/2017/08/27/170234)


## テスティングフレームワーク

### アサーションライブラリ chai

Angularが採用するの標準アサーションライブラリ

- [chai](https://www.npmjs.com/package/chai)

`assert()`系のメソッドを提供するライブラリです。

```js
// user.attrが{}であることを確認する
chai.assert.isObject(user.attr);

// user.attr.idの値が-1であることを確認する
chai.assert.propertyVal(user.attr, 'id', -1);
```

- [mocha / chai チートシート - Qiita](https://qiita.com/morrr/items/e4e24accf25a8e46d490)
- [ユニットテストって何?って人向けのmochaとchaiの使い方 - Qiita](https://qiita.com/y_hokkey/items/f73ea6b3d5f6902396b6)

### テストランナー karuma

- https://qiita.com/howdy39/items/b9d704e7f84053924da3

Materialなど外部ライブラリを使用していると定義されていないモジュールのディレクティブによりHTMLのパースに失敗してしまい、テストコードが実行できないケースが度々発生する。
１つずつ定義を追加していくか、そもそも外部ライブラリはテストしない方式が考えられる。

パースエラーで試験を停止させずに処理を続行する場合は、SPECファイルに次の記述を行う。

```ts
import { NO_ERRORS_SCHEMA } from '@angular/core';

// describe内で、NO_ERRORS_SCHEMA を記述する
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
      ],
      schemas: [
        NO_ERRORS_SCHEMA // <-- this line is also important
      ]
    }).compileComponents();
  }));
```

### ユニットテストコード jasmine

karmaが実行する単体試験用のテストコードはjasmineを使って記述します。

```javascript:appSpec.js
describe('add関数のテスト', function() {
    it('1 + 2 は 3', function() {
        expect(add(1, 2)).toBe(3);
    });
});
```


## hammer.js

[Hammer.js](http://hammerjs.github.io/getting-started/)

```html
<div id="myElement" style="background: silver;height: 300px;" (press)="onHammerPress($event)"
     (swipe)="onHammerSwipe($event)">SW</div>
```


```ts
export class HomeComponent {
    onHammerPress() {
        console.info("Execute onHammerPress");
    }

    onHammerSwipe() {
        console.info("Execute onHammerSwipe");
    }
}

```

# Angular Material

Angular向けのUI基盤。

https://codingthesmartway.com/angular-material-and-angular-6-material-design-for-angular/

```bash
$ npm install --save @angular/material @angular/cdk
$ npm install --save @angular/animations
```

## スターターコンポーネント

- ダッシュボードコンポーネント
- データテーブルコンポーネント
- レスポンシブサイドメニューコンポーネント

# MDB Angular

https://mdbootstrap.com/angular/

# asp.net(with VisualStudio)

- [ASP.NET Core で Angular プロジェクト テンプレートを使用する - MSDN](https://docs.microsoft.com/ja-jp/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio)


    事前に、ngコマンドをグローバルインストールしておく必要がある

1. 任意のフォルダで、`dotnet new angular -o my-new-app`コマンドを実行する
    - 新しいフォルダ「my-new-app」が作成される
2. `cd my-new-app`コマンドを実行する
3. `my-new-app.csproj`ファイルを実行する（VisualStudioが起動する）

この方法で作成したAngular2基盤のソースコードは、`ClientAppフォルダ`内に格納される。
VisualStudioでは、自動的にこのフォルダトランスパイルしアプリケーションの起動を行う。

これらはAngular2のCLIアプリである`ngコマンド`で実行することも可能。

ngコマンドは、AngularCLI(`@angular/cli`パッケージ)に入っているコマンドでnpmでインストールできる。
グローバル空間、またはプロジェクトローカル空間にインストールする。

インストール方法は、上記で作成したプロジェクトフォルダ内で、`npm install --save-dev @angular/cli`コマンドを実行する。

もしAngularCLIをグローバル空間でインストール済みで、バージョンが低い場合は最新バージョンへアップデートを行います。

```bash
$ npm update -g @angular/cli
```

この方法でインストールされたAngularのバージョンはAngular4系とかなり古いので、`ng update`コマンドを使用してアップグレードを行う。

```bash
$ ng update @angular/core
```

https://github.com/JuanGarciaCarmona/AspNetCore21Ang6Template

## ASP.NET Core 2.1

このバージョン以降では、dotnetコマンドが生成するasp.netのテンプレートに変更が入り、次のようにSPA構成に特化したAPIが呼び出されるようになっている。

```cs:Startup.cs
if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});
```
## Swagger

SPA使うならインターフェースの定義にはやっぱりSwaggerだよねーということで、
Swaggerの使い方はこちらのサイトを参照。

- https://qiita.com/gcyata/items/342073fa7607fd4082bd

### Swashbuckle

ASP.NET CoreでSwaggerで定義したREST APIを使うために便利なライブラリSwashbuckleを使っていく。

- [Swashbuckle と ASP.NET Core の概要 - Microsoft Docs](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.1&tabs=visual-studio%2Cvisual-studio-xml)

#### Swagger UIを出力する

AddSwaggerGenメソッドを使用する。
コンフィグでは、生成するSwaggerUIに諸情報を与えることができる。

```cs:Startup.cs
public class Startup
{
	/// <summary>
	/// Configures app the services.
	/// </summary>
	/// <param name="services">The services.</param>
	public void ConfigureServices(IServiceCollection services)
	{
	  services.AddSwaggerGen(c =>
	  {
	    c.SwaggerDoc("v1", new Info
	    {
	      Version = "v1",
	      Title = "pixstock.service.web API",
	      Description = "A simple example ASP.NET Core Web API",
	      Contact = new Contact { Name = "Juan García Carmona", Email = "d.jgc.it@gmail.com", Url = "https://wisegeckos.com" },
	    });
	    // Set the comments path for the Swagger JSON and UI.
	    var basePath = AppContext.BaseDirectory;
	    var xmlPath = Path.Combine(basePath, "pixstock.service.web.xml");
	    c.IncludeXmlComments(xmlPath);
	  });
	}
}
```