バージョン4の新機能を試す
では、バージョン4で追加された新機能をサンプルとともに説明していきます。
*ngIfディレクティブで「else」が利用可能に
*ngIfは、条件によって要素の表示／非表示が制御するディレクティブです。バージョン4では、条件に合致しないときの表示を指定する「else」条件が利用できるようになりました。チェックボックスの操作で表示が変わる図5のサンプル（005-if-else）で説明します。
図5のサンプルで、コンポーネントのテンプレートはリスト7のようになっています。
<!-- *ngIfの条件にelseを指定 ...（1） --> <div *ngIf="isChecked; else elseBlock" style="color:red"> isCheckedがtrueのときに表示 </div> <ng-template #elseBlock><!-- 非チェック時のテンプレート ...（2） --> <div style="color:blue">isCheckedがfalseの時に表示</div> </ng-template>
（1）の*ngIfに指定された「isChecked; else elseBlock」は、コンポーネント変数isCheckedがtrueの時は自身を表示し、falseの時はelseBlockを表示するという意味になります。elseBlockの実体は（2）の<ng-template>要素内に記述します。「#elseBlock」のように、先頭に#をつけてテンプレート名を指定します。なお、isCheckedには、双方向データバインディングでチェックボックスのチェック状態が反映されます。
また、条件に合致したときの表示を「then」条件で指定して、リスト8のように記述することもできます。
<!-- *ngIfの条件にthenとelseを指定 ...（1）--> <div *ngIf="isChecked;then thenBlock else elseBlock"> ※ここの内容は表示されない ...（2） </div> <ng-template #thenBlock><!-- チェック時のテンプレート ...（3） --> <div style="color:red">isCheckedがtrueのときに表示</div> </ng-template> <ng-template #elseBlock><!-- 非チェック時のテンプレート ...（4） --> <div style="color:blue">isCheckedがfalseの時に表示</div> </ng-template>
（1）の*ngIfに指定された「isChecked; then thenBlock else elseBlock」によって、isCheckedがtrueの時はthenBlock（3）を、falseの時はelseBlock（4）を表示します。この場合、*ngIfディレクティブが指定されたdiv要素自体の内容（2）は、常に表示されなくなります。実行結果はリスト7と同一で、図5のように表示されます。
*ngIfと*ngForの条件指定で変数を宣言
*ngIf／*ngForの属性として指定する条件指定で、asキーワードを用いて変数を宣言できるようになりました。この機能を、図6のサンプル（007-async）で説明します。実行すると、「データを取得中...」を5秒間表示後、リストを表示します。
テンプレートの内容はリスト9のようになります。
<!-- *ngIfの設定 ...（1）-->
<div *ngIf="observable|async as result; else loading">
<!-- *ngIfで宣言したresult変数を*ngForで利用 ...（2）-->
<tr *ngFor="let title of result; index as listIndex">
<td>No.{{listIndex + 1}}：{{title}}</td>
</tr>
</div>
<!-- データ取得中のテンプレート ...（3）-->
<ng-template #loading>データを取得中...</ng-template>
（1）の「observable|async as result」は、「JavaScript版Reactive Extension（RxJS）のObservable変数から取得した結果を、asキーワードでresult変数に格納する」意味です。asyncキーワードは、Observableから結果を取得することを表します。後続の「else loading」は、先ほど説明した*ngIfのelse記述で、全体的には「observableから結果が取得できていないときにはloadingテンプレート（3）を、取得できたら自身を表示する」という意味になります。なお、resultは後述のように文字列配列になります。
取得されたresultを、（2）の*ngForディレクティブで参照します。「let title of result」の記述により、result配列から要素をtitleとして取り出してリスト表示します。また、後続の「index as listIndex」で、*ngForが提供する0始まりのインデックスを、asキーワードでlistIndex変数として取得します。asキーワードで取得できる*ngForのパラメーターを表1に示します。
| 名前 | データ型 | 意味 |
|---|---|---|
| index | number | 0から始まるインデックス |
| first | boolean | 最初の要素ならばtrue |
| last | boolean | 最終要素ならばtrue |
| even | boolean | 偶数番目ならばtrue |
| odd | boolean | 奇数番目ならばtrue |
リスト9に対応するコンポーネントの実装はリスト10です。
export class AppComponent {
// リストデータ ...（1）
fetchedValue = [
"HUAWEI nova",
"VAIO Phone A",
"NuAns NEO [Reloaded]",
"Galaxy S8",
"Xperia XZ Premium"
];
// 非同期でデータを戻すオブジェクト ...（2）
observable:Subject<Array<string>>
= new Subject<Array<string>>();
// コンポーネント初期化時の処理 ...（3）
ngOnInit() {
// 5秒後に、fetchedValueの値を返す ...（4）
setTimeout(() => {
this.observable.next(this.fetchedValue);
}, 5000);
}
}
（1）がリストデータで、文字列配列です。テンプレートで参照しているobservableプロパティは（2）で宣言しています。ここで利用しているSubjectクラスはObservableクラスのサブクラスで、nextメソッドを実行して、任意のタイミングでObservableの状態変化を発生させられます。<Array<string>>記述は、状態変化のときに渡すパラメーターが文字列配列であることを表します。
コンポーネント初期化のタイミングで呼び出されるngOnInitメソッド（3）で、Subjectクラスのnextメソッドを5秒後に実行して、リストデータを渡すようにしています（4）。この実装によって、リスト9（1）の*ngIfで、リストデータを5秒後に受け取ることができます。
Angularのバージョン定義と今後の予定
最後に、Angularのバージョンアップの見通しについて説明します。Angularのバージョン番号は、いわゆるセマンティック バージョニングに対応しており、例えば、バージョン4.0.1といった数字には、表2の意味があります。
| 番号 | 名称 | 意味 |
|---|---|---|
| 4 | メジャー（Major） | 破壊的な変更（互換性が保たれない） |
| 0 | マイナー（Minor） | 破壊的でない機能追加（互換性が保たれる） |
| 1 | パッチ（Patch） | バグフィックスなど微小な変更 |
Angularのバージョンアップは期間で定められており、パッチレベルの更新が1週間ごとに行われ、6カ月間にマイナーアップデートが3回、メジャーアップデートが1回行われる予定になっています。バージョン4が2017年3月にリリースされたことから、次のメジャーアップデートであるバージョン5は2017年9～10月、バージョン6は2018年3月のリリースが予定されています。
まとめ
本記事では、Angularの新バージョンであるバージョン4について変更点を説明するとともに、今後の見通しを解説しました、バージョン4はより高速で軽くなり、新機能も追加されました。これから先も定期的なバージョンアップが予定されています。
