凍結したAngular5のPWA開発

以前、
- Angular5、MDBootstrap、FirebaseでPWAを作ってる最中
- Firebaseから取得したデータをタイムスタンプの降順で並び替えて表示する方法（DESC）
- FirebaseのデータベースをRealtime DatabaseからCloud Firestoreに移行

にて、簡単なサービスを作ってみようと思って着手しておりましたが、
結局、サービスとしてやりたい事のアイデアを出せず、転職も忙しくて、凍結してしまいました。
ロゴどんな風にしよう？とか、ときめいていたあの頃が懐かしい。

Angular5, MDBootstrap, Firebaseで結局やった事

凍結したYandle

• MDBootstrapを使って見た目を少しカスタマイズしたグローバルナビの作成
• 「ng new [project] --service-worker」でプロジェクト生成し、manifest.jsonとngsw-config.jsonを作ってアプリをPWA化
• ログイン画面でFirebase認証して、AuthGuardで認証済みチェック
• 画面から投稿したデータをCloud Firestoreへデータ登録
• rxjs/ObservableでCloud Firestoreからデータを読み込んだデータをasyncパイプでサクッと画面にリアルタイム反映

ぐらいですね。
元々、Angular4でもやれてた事も存分に含まれてるでしょうが、私がやった事なかったので。。。
デザイン周りはナビバーだけ少しやって、後は全部テキトーって酷さで凍結です。

Angularのドキュメント日本語翻訳が進んでいる

私がAngular5でアプリを作ってた頃は、バージョン5のドキュメントは英語のものしかありませんでした。
今は有志の方々で翻訳を進めており、このように日本語化も随時進んでいる最中のようです。
ワオ、素敵。

Angularの日本語翻訳に協力したい貴方へ

そんな方は、ここにプルリク送ればいいみたいですね。
きっと、日本中のAngularファンからリスクペクトされる事でしょう。
https://github.com/angular/angular-ja

Angular6、出るってよ

さて、私がモタモタしてた間に、Angular6がリリースされます。
4/4にv6.0.0がメジャーリリースとなります。

気になるバージョン互換性

• Angular4のサポート：〜2018/10
• Angular6のサポート：〜2019/10

今年の10月まではAngular4-6の互換性は守られるって事でしょうか。
ただ、Angular4で使えていた<template>というタグはv6で抹消され、<ng-template>を使えとの事です。
バージョン2-6の互換とかはどうなんでしょうか？
5→6は簡単にアップデートできるらしいです。

Angular6での変更点

ここを読んでます。
https://www.ngdevelop.tech/angular-6-features/

Ivy Rendererになるらしい

ivyというコンパイラに変わるようです。これによってビルドが早くなり、
コードサイズはさらに圧縮され、レンダリング速度も上がるようです。

このivyコンパイラなるものについて、解説されてる方を見つけました
DESIGN DOC (Ivy): Separate Compilationを読む

実は速いのAngular?

Angularはサイズでかいし重いし遅い、という話も目にしますが、
最近、海外でAngular5, React, Vue.jsのパフォーマンス比較した方の記事を見たところ、
Angular5が一番速いという結果になってました。自分でやった訳じゃないのでよくわかりませんが。
6では、さらに高速になるんでしょうか？

Angular 5 vs. React vs. Vue

Bazel Compilerになるってよ

小さな修正で全部ビルドし直すんじゃなくて、直したとこだけビルドできるようにして、ビルドを高速化できる風に変わるらしい。

Closure Compilerになるってよ

次々とコンパイラが出てくる。なんじゃこりゃ。
どうやらJSのバンドルファイルを作るものらしい。Webpackよりも優秀な奴なんだとか。
Angular-CLIはWebpackを内部で使ってたけど、これに変わりますよっていう事？
ちょっとわかりません。

Typescript 2.6.xで実装できるってよ

ここら辺ができるようになるってことでしょうか？詳しい方のまとめを見てみました。
TypeScript 2.6.1 変更点

フォームの変更点

以前は、フォームの値変更時、何らかの値不正などが起きていた際、
以下のように$eventを渡す実装だと、変更後の値を参照できていたようですが、

<input [(ngModel)]="name" (ngModelChange)="onChange($event)">

onChange(value) {
     console.log(value);   // would log updated value
}

このように、コントロールを介して値を参照する実装にしていると、変更前の値を参照してしまう問題があったようです。
これが、同じ実装で、変更後の値を参照できるように変わったらしいです。

<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

onChange(ngModel: NgModel) {
   console.log(ngModel.value); // would log old value, not updated value　→　will log updated value
}

Multiple validators for array method of FormBuilderが出るってよ

FormBuilder.array()を利用し、コントロールに対して複数のバリデーターを配列で指定できるようになるって書いてます。

ngOnInit() {
  this.questionForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctCount, MyValidators.totalCount])
  });
}

ただ、私はAnagular5でこのようにフォームを作る実装をしていました。
同じように配列で複数のバリデーターを指定して動いていましたが、何が違うのかピンと来ていません。

  ngOnInit() {
    this.signupForm = this.fb.group({
      'email': ['', [Validators.required, Validators.email]],
      'password': ['', [Validators.required]]
    });
  }

Router便利になるってよ

navigationSource、restoredStateというものが、NavigationStartに追加されたようです。
どんな方法でナビゲーションされて来たのかをこれで調べられるようです。

Optional generic type for ElementRef

@ViewChild('my-element') myElement:ElementRef;

とだけ書いてありました。わかるような、わからないような。
@ViewChildを使う実装を自分でやった事無いので。

詳しくはAngularのgithubで

簡単ですが以上です。変更内容のもっと詳しい内容はgithubの原文をご確認ください。
https://github.com/angular/angular/blob/master/CHANGELOG.md

では、おやすみなさい。