Help us understand the problem. What is going on with this article?

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

では、おやすみなさい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away