Angular Info

Angular2 Beta.3リリースと今週のニュース

こんにちは、らこです。先週の宣言通り、Beta.2からは週間リリースが始まっています。
今週はBeta.3がリリースされたので、主な変更点をピックアップしていきます。

CHANGELOG: 2.0.0-beta.3 (2016-02-03)

はじめに:Beta.3はアップデートしないほうがよい

まず初めに不具合と思われる症状についての情報です。
Beta.3ではpeerDependenciesに指定されているzone.jsのバージョンが0.5.11に上がりましたが、
このバージョンはnpmのpostinstallでtsdのコマンドを実行します。
ところがzone.jsのdependenciesにはtsdが入っていないため、グローバルにtsdをインストールしているユーザー以外はインストールに失敗します。

“postinstall”: “tsd install” · Issue #240 · angular/zone.js

Beta.2を使っている環境から依存パッケージを一括アップデートするとzone.jsもアップデートされてしまい、
その際に上記のエラーによりインストールに失敗するようになります。

Beta.3はさほど大きな変更もないのでここはBeta.4で解決されるまでアップデートを控えるのが安心でしょう。

もしBeta.3を使いたい場合はzone.jsのバージョンを今はまだ0.5.10に固定しておき、Angular2だけをアップデートするのが良さそうです。
一時的にpeerDependenciesが一致せず警告が表示されるとは思いますがしょうがありません。
tsdはTypeScriptの公式でも非推奨なツールになりましたので、今からインストールしたくないものです。

ngFor: add custom trackBy function support

https://github.com/angular/angular/commit/cee2318
ngFortrackByが指定できるようになりました。

使ってみたサンプルがこちらです。

<div *ngFor="#item of items; trackBy:customTrackBy">

という形式で関数を指定できます。trackByに設定した関数にはインデックスと要素が引数で渡されます。

trackByValue(index: number, item: any): any {
  return item;
}

この関数で返した値によって反復する要素に一意性を持たせることができるようです。
しかしAngularJSのng-repeatと違い、ngFor[1,2,1]などの配列でも問題なく反復できるので、
明示的に設定しなければいけないケースはあまり発生しないように思われます。

無理やりtrackByで挙動をおかしくした例がこちら
むしろインデックスをtrackByで返したほうが挙動が変わるので、
よほど特殊な例でないとこの機能を活用することはないでしょう…

debug: replace DebugElement with new Debug DOM

https://github.com/angular/angular/commit/e1bf3d3

Beta.3唯一の破壊的変更です。
DOM操作のユニットテスト用にDebugElementというディレクティブが用意されていましたが、
その使い方が変わりました。
詳しくはCHANGELOGのBefore/Afterを見ると良いでしょう。
全体的に記述量が減ってわかりやすいAPIになりました。

しかしそもそもDebugElementをもう使っている人がどれだけいるのかというところ…

今週の週次ミーティング

今週月曜日のミーティングの内容もかいつまんでまとめます。

Angular 1 focus areas

AngularJSについての話題です。

AngularJSはもうこれ以上の機能追加の予定がないことを確認しました。
今後のAngularJSの開発はAngular2へのマイグレーションをサポートすることがメインになります。

来週にはAngularJSのユーザー向けにAngular2へのアップグレードガイドを公開する予定のようです。
これまではAngular2ユーザー向けへのガイドだけでしたが、いよいよ本格的にAngularJSユーザーを取り込んでいくようです。
マイグレーション用のツールを作るかもしれないとも言及しています。

また、これと平行してAngularJS向けのComponent Routerも今週中にリリースされる予定です。
Component RouterはAngular2で公式に提供されているRouterで、
AngularJSでも使えるようにすることでマイグレーションをスムーズに行えるようになるはずです。

Routerだけでなく、i18nやアニメーションもAngularJS向けにライブラリを提供する計画があるようです。
これまでサードパーティに頼っていてAngular2から公式に提供するものについては、
このようにPolyfillのような形で移行しやすい形を作っていくようです。

AngularConnect and ngEurope

これは余談ですが、9月のAngularConnectと10月のngEuropeが近すぎる件について、
セッティングミスらしいことがわかりました。
チームの大半はAngularConnect側に参加するようです。


今週中にリリースされる予定のComponent Router for AngularJSが楽しみですね。
それでは。