SPA を構築する場合、Component をまたがったデータの共有をどのように実現するかが重要になってきます。  
Angular1 の場合は、SharedService を利用するケースが多かったです。  
そこで Angular2 でも試してみようとしたところ、少し勝手が違ったので自分用メモを残しておきます。



## 結論

- Angular2 では基本的に`@Injectable()`の DI は新規のインスタンスを生成します。
- Singleton で扱いたい場合は、`bootstrap(.., [ServiceA,ServiceB])`で DI すること。

## サンプル

Angular2 の公式ページでよく利用される HeroList を例に説明します。

- 画面の component は一覧(HeroListComponent)と詳細(HeroDetailComponent)の 2 つ。
- Hero 一覧データは HeroService に格納され、各 component は HeroService を参照する。

簡単な図に示すとこのような構造をしていると仮定します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2016/IMG_20160229_001319.png)

## 失敗パターン

すべてのサンプルはこちら  
[plnkr](http://plnkr.co/edit/R1q9vzDa1gHXHBUClu1s?p=preview)

失敗パターンでは、HeroDetailComponent にて Hero を削除しても消えません。  
これは HeroDetailComponent の`providers`で HeroService を DI した場合、新規でインスタンスを生成してしまうためです。
結果、HeroListComponent と HeroDetailComponent では、別の HeroService のインスタンスを参照していることになっています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2016/IMG_20160229_001409.png)

HeroDetailComponent で`@Component`を DI している箇所を抜粋します。

**hero-detail.component.ts**

```ts
import {Component,  Input}  from 'angular2/core';
import {Hero, HeroService}   from './hero.service';

@Component({
  selector: 'hero-detail',
  template: `
  <span class="badge">{{hero.id}}</span> {{hero.name}}
  <button (click)="remove()">remove</button>
  `,
  providers:  [HeroService]  // <- ここ
})
export class HeroDetailComponent implements OnInit  {
  @Input() hero: Hero;
  constructor(private service:HeroService){ }
  remove() {
    this.service.remove(this.hero);
  }
}
```

## 成功パターン

すべてのサンプルはこちら  
[plnkr](http://plnkr.co/edit/iYFMhuldCBqay72eWjay?p=preview)

こちらは SharedService として動作しているパターンです。`bootstrap(.., [ServiceA,ServiceB])`で HeroService を指定することで Singleton として扱うことができます。  
HeroDetailComponent で Hero を削除した場合、HeroListComponent の一覧も消えます。

**main.ts**

```ts
import { bootstrap } from "angular2/platform/browser";

import { AppComponent } from "./app.component";
import { Hero, HeroService } from "./heroes/hero.service";

bootstrap(AppComponent, [HeroService]);
```

## まとめ

Angular1 っぽい SharedService の作り方でした。  
正直、Two-way-binding と SharedService を利用した、手続き型っぽいやり方が Angular2 で最良の方法がどうかはわかりません。  
Angular2 でのベストプラクティスについてはまだ手探りな感じがします。

とはいえ、Angular1 を慣れている方であれば、Angular2 でも Component 間のデータ共有は SharedService でできることが分かりました。

refs [Angular2 "Services" how to @inject one service into another (singletons) - Stack Overflow](http://stackoverflow.com/questions/33575456/angular2-services-how-to-inject-one-service-into-another-singletons)

Angular2でSharedServiceを作りたい

Angular2 学習のため、大量に素振りする必要がでてきたので、素振り用の StarterKit を作成してみました。

これから学習する方は、公式の[5 Min Quickstart](https://angular.io/docs/ts/latest/quickstart.html)を最初にやる場合が多いと思うので、ベースは 5 Min Quickstart を利用しています。
その上で、気軽に Heroku へ Deploy して公開できるよう工夫しました。

[mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2](https://github.com/mitsuruog/angular2-minimum-starter)



## 5 Min Quickstart から Heroku Delpoy への道

公式の[5 Min Quickstart](https://angular.io/docs/ts/latest/quickstart.html)は、学習するための環境としては十分なのですが、
Heroku へ Deploy するために少し工夫が必要でしたので手順を紹介します。

### Heroku 上での devDependencies のインストール

Heroku は Deploy する前、`package.json`に書かれている`dependencies`の内容をインストールしますが、通常は`devDependencies`をインストールしません。

そのため、Heroku 上の`NPM_CONFIG_PRODUCTION`設定を無効にする必要があります。

```
heroku config:set NPM_CONFIG_PRODUCTION=false
```

この設定は Heroku の GUI 上の Settings のタブからでも設定できます。

### Heroku 上での HTTP Server の導入

5 Min Quickstart には[johnpapa/lite-server](https://github.com/johnpapa/lite-server)という、
[Browsersync](https://www.browsersync.io/)をベースとした開発用の HTTP サーバーが含まれています。

しかし、lite-server 上で`Lightweight development only node server`と謳われているため、別途 HTTP サーバーを導入します。
今回は[indexzero/http-server](https://github.com/indexzero/http-server)を利用しました。

まず、`package.json`の`devDependencies`に追加します。

```
npm install http-server -D
```

次に、Heroku 上でアプリを開始する際に実行するコマンドを`package.json`に追加しておきます。

**package.json**

```diff
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
+    "start-heroku": "concurrent \"npm run tsc\" \"npm run http-server\" "
```

最後に、Heroku がアプリを開始する際のコマンドを変更するため`Procfile`を作成し、先ほどのコマンドを設定します。  
(Node.js アプリの場合、Heroku はデフォルトで`npm run start`を実行するようになっています。)

**Procfile**

```
web: npm run start-heroku
```

こちらで、Angular2 のアプリを Heroku 上に Deploy できるはずです。

## まとめ

`gulp`や`grunt`などを利用するとローカルで build プロセスを実行することも可能ですが、素振り程度で依存するもどうかと思い簡単なものを作成してみました。

Angular2 学習のため、大量に素振りする必要がある人にはちょうどいいと思います。

Angular2を最速でHerokuにDeployするMinimum Starter Kitを作成してみた

Angular2 の ComponentRouter を使った場合に発生する`Use "..." on the parent's route path.`エラーの対処法です。  
完全に小ネタ。



Nest した Routing の場合、親の`@RouteConfig`の path に`...`を付ける必要がある。

```js
// parent
@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/list/...', component: ListComponent, as: 'List'}
])

// child
@RouteConfig([
  { path: '/:id', component: ListItem, as: 'ListItem' }
])
```

参考）

angular2 - Use RouterLink from a nested component - Stack Overflow  
http://stackoverflow.com/questions/34363176/use-routerlink-from-a-nested-component

Angular2で「Use "..." on the parent's route path.」が起こる場合の対処法

前回、[Heroku Connect の Configuration ファイルが辛いので美しくするモジュールを書いた](http://blog.mitsuruog.info/2016/02/heroku-connect-configuration-comb.html)の続きっぽいもの。

通常のシステム開発では、開発、ステージング、本番など複数環境を利用することが多いので、複数環境間で Configuration ファイルの差分を出すモジュールを書いてみました。



## モチベーション

ここでの Configuration とは、Salesforce 上のオブジェクトと Heroku の postgres 上のカラムを紐付けている Mapping 定義のことです。

Mapping 定義から項目の Mapping が消えると、その項目が Heroku 上の postgres から消えます。
つまり、リリースなどで Mapping 定義がリグレッションすると、今まで動作していたアプリケーションが動かなくなります。

リリース時に Mapping 定義が正しくリリースされていることを証明するためには、Mapping 定義を Configuration ファイルに定義して各環境に import し、適用結果の差分を比べることが最も良い方法だと考えました。

> 適用 => 抽出 => 比較

そこで前回、作成した Configuration ファイルを整形するモジュールを利用して、Configuration ファイルの差分を抽出するモジュールを書きました。

[mitsuruog/heroku-connect-configuration-compare: Fetch two Heroku Connect Configuration and Compare together](https://github.com/mitsuruog/heroku-connect-configuration-compare)

## 使い方

使い方は簡単です。
npm モジュールをインストールして、比較したい Heroku アプリ名を指定してください。

```
npm install --global heroku-connect-configuration-compare
heroku-connect-configuration-compare one-heroku-appname other-heroku-appname
```

差分が Diff として参照できます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2016/heroku-connect-diff.png)

> 注）[ Heroku Toolbelt](https://toolbelt.heroku.com/)と[heroku-connect-plugin](https://github.com/heroku/heroku-connect-plugin)がインストールしていることが前提です。

## TODO

現在、次の改善点があります。モチベーションが続いたら改善したいです。

- 比較する対象に git remote の alias 名を利用する
- 比較除外プロパティの追加
  - applied_at, exported_at あたりは比較不要かと

## 最後に

HerokuConnect の利用者が増えると、もっと開発や運用する上での課題が明らかになりそうですね。
こんなのまだ、氷山の一角だと思います。

HerokuConnect Configurationファイルの差分を出すモジュールを書いた

# vscode と nvm を一緒に使う小ネタ

ローカルの node 環境を[nvm](https://github.com/creationix/nvm)で作ってて、typescript を npm 経由でインストールした時に少しハマったので自分用メモ



## トラブル

vscode の`task.json`に定義した`tsc`コマンドで`.ts`ファイルをコンパイルしようと思ったらエラーが発生。ぐぬぬ。。。

```
Failed to launch external program tsc HelloWorld.ts.
spawn tsc ENOENTspawn tsc ENOENT
```

## 結論

ターミナルから vscode を起動する必要があります。起動時に、nvm の設定を外部から指定すると動作します。

```
nvm use 5; code .
```

~~vscode をターミナルから動かせるようにしておくことが前提条件です。
設定はこちらを参考にしてください。~~

[Setting up Visual Studio Code](https://code.visualstudio.com/Docs/editor/setup)

~~自分の場合は zsh を使っているので、`.zshrc`に追加しました。~~  
(2016-03-10 追記) vscode のバージョンアップにより path の設定は不要になったようです。

```
function code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $*; }
```

参考：
[VS Code with NVM · Issue #1895 · Microsoft/vscode](https://github.com/Microsoft/vscode/issues/1895)

vscodeとnvmを一緒に使う小ネタ

[Heroku Connect](https://www.heroku.com/connect)は、Salesforce と Heroku 上の postgres とを接続するアドオンです。

Heroku Connect を使うことで、ほぼリアルタイムに Salesforce と Heroku のデータを同期させることができます。
これにより、Heroku 上で Salesforce のデータを利用することができ、これまでの Salesforce の常識にとらわれない新しい Saleforce の使い方が可能になります。

Heroku Connect を実際に利用して、Configuration ファイル仕様が辛かったので、うまく付き合うための npm モジュールを作りました。



## モチベーション

ここでの Configuration とは、Salesforce 上のオブジェクトと Heroku の postgres 上のカラムを紐付けている Mapping 定義のことです。
Configuration は Heroku Connect のダッシュボードや[heroku コマンドのプラグイン](https://github.com/heroku/heroku-connect-plugin)をインストールすることで、JSON としてエクスポートすることができます。

こちらがエクスポートしたものです。

```json
{
  "mappings": [
    {
      "config": {
        "sf_max_daily_api_calls": 30000,
        "sf_notify_enabled": false,
        "fields": {
          "Email": {},
          "LastName": {},
          "Id": {},
          "IsDeleted": {},
          "Title": {},
          "Rating": {},
          "Status": {},
          "Name": {},
          "SystemModstamp": {},
          "IsConverted": {},
          "CreatedDate": {},
          "Company": {},
          "FirstName": {}
        },
        "access": "read_only",
        "sf_polling_seconds": 600
      },
      "object_name": "Lead"
    },
    {
      "config": {
        "sf_max_daily_api_calls": 30000,
        "sf_notify_enabled": false,
        "fields": {
          "Description": {},
          "ContactId": {},
          "CaseNumber": {},
          "Id": {},
          "Subject": {},
          "ClosedDate": {},
          "Status": {},
          "SystemModstamp": {},
          "Reason": {},
          "Type": {},
          "IsClosed": {},
          "CreatedDate": {},
          "IsDeleted": {},
          "IsEscalated": {},
          "Priority": {}
        },
        "access": "read_only",
        "sf_polling_seconds": 600
      },
      "object_name": "Case"
    }
  ],
  "version": 1,
  "connection": {
    "organization_id": "00DE0000000L6REMA",
    "app_name": "heroku-connect-mitsuruog-dev",
    "exported_at": "2016-02-04T08:25:16.681265+00:00"
  }
}
```

もう一度、エクスポートしてみますね。

```json
{
  "connection": {
    "organization_id": "00DE0000000L6REMA",
    "exported_at": "2016-02-04T08:26:20.736598+00:00",
    "app_name": "heroku-connect-mitsuruog-dev"
  },
  "version": 1,
  "mappings": [
    {
      "config": {
        "sf_polling_seconds": 600,
        "sf_max_daily_api_calls": 30000,
        "fields": {
          "Email": {},
          "SystemModstamp": {},
          "CreatedDate": {},
          "LastName": {},
          "Status": {},
          "Rating": {},
          "IsDeleted": {},
          "IsConverted": {},
          "Title": {},
          "Id": {},
          "Company": {},
          "Name": {},
          "FirstName": {}
        },
        "sf_notify_enabled": false,
        "access": "read_only"
      },
      "object_name": "Lead"
    },
    {
      "config": {
        "sf_polling_seconds": 600,
        "sf_max_daily_api_calls": 30000,
        "fields": {
          "Description": {},
          "SystemModstamp": {},
          "CreatedDate": {},
          "Subject": {},
          "Status": {},
          "Reason": {},
          "IsEscalated": {},
          "IsDeleted": {},
          "ClosedDate": {},
          "Type": {},
          "Priority": {},
          "CaseNumber": {},
          "IsClosed": {},
          "Id": {},
          "ContactId": {}
        },
        "sf_notify_enabled": false,
        "access": "read_only"
      },
      "object_name": "Case"
    }
  ]
}
```

....え！？

Mapping を変更していないにも関わらず、エクスポートするたびに(気まぐれで)順序がバラバラになります。

システム開発を行う過程で Mapping の変更はそれなりの頻度があり、Configuration ファイルにて変更点を管理したいのですが、これでは変更点がわかりません。
そこで、アルファベット順でソートする node モジュールを書きました。

[mitsuruog/heroku-connect-configuration-comb: Makes your Heroku Connect Configuration beautiful](https://github.com/mitsuruog/heroku-connect-configuration-comb)

## 使い方

使い方は簡単です。
`input.json`にエクスポートした Configuration ファイルを指定してください。

```
npm install --g heroku-connect-configuration-comb
heroku-connect-configuration-comb input.json output.json
```

これで Configuration ファイルが見れるものになりました。

## 最後に

そのうち本家で改善されるでしょう。。。
(中の人が気づいたら、リポジトリに star してくれたらいいな。)

Heroku Connect のコンセプトは非常にいいのですが、プロダクトの完成度としてやや利用者視点に欠けた部分が多い印象を持っています。
今後のアップデートに期待したいです。

February, 2016

Angular2でSharedServiceを作りたい

Angular2を最速でHerokuにDeployするMinimum Starter Kitを作成してみた

Angular2で「Use "..." on the parent's route path.」が起こる場合の対処法

HerokuConnect Configurationファイルの差分を出すモジュールを書いた

vscodeとnvmを一緒に使う小ネタ

Heroku ConnectのConfigurationファイルが辛いので美しくするモジュールを書いた