Edited at

Angular6、リリースだってよ

More than 1 year has passed since last update.


凍結した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のドキュメントは英語のものしかありませんでした。

今は有志の方々で翻訳を進めており、このように日本語化も随時進んでいる最中のようです。

ワオ、素敵。

https://angular-ja.firebaseapp.com/

スクリーンショット 2018-04-02 2.53.58.png


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

そんな方は、ここにプルリク送ればいいみたいですね。

きっと、日本中のAngularファンからリスクペクトされる事でしょう。

https://github.com/angular/angular-ja


Angular6、出るってよ

さて、私がモタモタしてた間に、Angular6がリリースされます。

4/4にv6.0.0がメジャーリリースとなります。


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

https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md


  • 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

では、おやすみなさい。