Angular 4.1.0がリリースされました

この記事はAngular公式ブログ Angular 4.1.0 Now Availableを元に翻訳、加筆したものです。

Angular バージョン 4.1.0 がリリースされました。 このマイナーリリースは告知済みのSemantic Versioningにしたがっています。すなわち破壊的変更を含まず、バージョン4.x.xとして単純に置換可能です。

主な変更点

• バージョン 4.1 ではTypeScript 2.2および2.3を完全にサポートしました。開発者たちはすでにTypeScript 2.2あるいは2.3を使った体験を報告してくれていますが、今回Angular自身がTypeScript 2.3によってビルドされるようになりました。この変更は4.0リリース時点のTypeScript 2.1に対するサポートには影響しません。
• TypeScriptの StrictNullChecks に準拠しました。開発者はそれぞれのプロジェクトでStrictNullChecksのフラグを有効にできるようになりました。

新機能やバグフィックスの一覧は チェンジログ を参照してください。

Googleにおける標準言語

この記事はAngular公式ブログ Official languages at Googleを元に翻訳、加筆したものです。


TypeScriptがGoogleの標準言語になったことを発表したng-conf 2017での私の基調講演をうけて、GoogleにおけるDartの状況について多くの質問が寄せられました。


DartとTypeScriptの両方は同じカテゴリにいることを明確にしておきたいと思います。これらはどちらもクライアントサイドの開発に使うことを許可されています。しかし、JavaScript/ClosureやJavaのような確立した言語とは同じカテゴリにありません。これらはさらにコードの行数が多く、ツールも整備されています。

Dartはこの4年間Googleにおいて無制限にクライアント開発に使われています。DartとAngularDartはAdWordsやAdSense、Shoppingのような大規模な製品、そしてGoogle CRMのような重要な内部ツールに使われます。さらに、クロスプラットフォームのモバイルアプリケーションフレームワーク Flutter はDartを使用しており、Google CRMやShopping  Expressを含む複数のチームで使われています。Googleのコードベースには膨大な量のDartのコードが含まれています。

TypeScriptは2017年3月からクライアント開発のための無制限の使用が認められました。TypeScriptとAngularはGoogle AnalyticsやFirebase、Google Cloud Platform（訳注: 各サービスの管理コンソールの実装に使われる）、そしてバグトラッキングや従業員管理、製品承認、起動ツールなどの重要な内部ツールに使われます。

Googleがクライアントサイドの言語の選択肢を得て、ニーズに応じた最適なものを選べるようになったことを発表できて光栄です。

Angular 4.0.0がリリースされました

この記事はAngular公式ブログ Angular: Angular 4.0.0 Now Available を元に翻訳、加筆したものです。

Angularバージョン4.0.0 - invisible-makeover - が公開されました。これはわたしたちが発表したSemantic Versioningの採用に従ったメジャーリリースであり、ほとんどのアプリケーションにとって2.x.xとの後方互換性を保っています。

わたしたちはこの3ヶ月間の成果であるいくつかの大きな改善と機能を含んだこのリリースを、コミュニティに共有できることをとても嬉しく思います。わたしたちはこのリリースへのアップデートが開発者にとって簡単になるように一生懸命取り組みました。

変更点

より軽量に、より高速に

このリリースで、わたしたちはAngularアプリケーションをより小さく高速にすることを約束します。これはまだ完了したわけではなく、今後数ヶ月はわたしたちがさらなる改善に注力していることが見られるでしょう。

ビューエンジン

わたしたちはAOTコンパイルにより生成されるコードがどのようになるか、そのフードの内側に変更を加えました。この変更により、多くの場合でコンポーネントから生成されるコードのサイズは約60%に削減されます。複雑なテンプレートであればあるほど、より大きく削減されます。

RCバージョンの期間で、わたしたちは多くの開発者から、バージョン4に切り替えた後に彼らのプロダクションバンドルが数百KB減ったことを聞きました。

ビューエンジンについてさらに知りたい方はこちらのデザインドキュメントをご覧ください。

Animation Package

わたしたちはアニメーション機能を@angular/coreパッケージから個別のパッケージに抜き出しました。アニメーションを使わない場合、余計なコードはプロダクションバンドルに含まれません。

この変更はドキュメンテーションの検索を簡単にし、さらに入力の自動補完の助けにもなります。アニメーション機能を使うにはメインのNgModuleに、@angular/platform-browser/animationsからインポートしたBrowserAnimationsModuleを追加します。

新機能

*ngIfと*ngForの改善

テンプレートバインディング構文は新たにふたつの便利な機能をサポートします。if/else形式の構文と、observableを展開するときなどのローカル変数の宣言が可能になります。

<div *ngIf="userList | async as users; else loading">

 <user-profile *ngFor="let user of users; count as count" [user]="user">

 </user-profile>

<div>{{count}} total users</div>

</div>

<ng-template #loading>Loading...</ng-template>

Angular Universal

Angularをサーバー上で実行可能にするためのプロジェクト、Angular Universalがふたたび最新のAngularと足並みをそろえ、コミュニティによるプロジェクトからAngularチームに引き取られてからの初めてのリリースとなりました。このリリースはUniversalチームが数ヶ月かけて内部的、表面的に取り組んだ成果です。Universalのコードの大部分は今@angular/platform-serverパッケージに取り込まれています。

Angular Universalを利用する方法についてさらに知るには、renderModuleFactoryメソッドを読むか、あるいはRob Wormaldによるデモリポジトリを見てください。詳細なドキュメンテーションやコードサンプルは今後追加されます。

TypeScript 2.1と 2.2 への対応

わたしたちはAngularをTypeScriptの新しいバージョンに合わせるために更新しました。ngcのスピードが改善され、さらにアプリケーション全体を通した型チェックも改善されました。

テンプレートのソースマップ

テンプレートの中でエラーが起こったとき、わたしたちは元々のテンプレートの文脈を提供するためのソースマップを生成するようにしました。

パッケージの変更

Flat ES Modules (Flat ESM / FESM)

わたしたちはモジュールのフラットバージョン(ECMA Scriptモジュール形式のコードを"ロールアップ"したバージョン。サンプルファイルを参照してください)を提供するようにしました。この形式はTree-Shakingを助け、生成されるバンドルのサイズを削減し、そしてビルドとトランスパイル、ブラウザでのロード時間を短縮できます。

Flat ES Modulesの重要性については "The cost of small modules" をご覧ください。

実験的なES2015ビルド

わたしたちはES2015 Flat ESM形式のパッケージも提供するようにしました。この選択肢は実験的で、オプトインです。このパッケージをRollupを使って結合すると、バンドルサイズを最大7%削減できたと報告されています。この新しいパッケージを試すには、package.jsonの "module" プロパティの代わりに "es2015" プロパティを使うように、ビルドツールチェインを設定してください。

実験的なClosure互換性

わたしたちはすべてのコードにClosureアノテーションを付与しました。これはClosure CompilerによるAdvansed Optimizationを有効にし、より効果的なTree-Shakingとバンドルサイズの軽減をもたらします。

4.0.0へのアップデート

バージョン4へのアップデートはただAngularの依存関係を最新に更新する程度の簡単さで、もしアニメーションを使う場合はダブルチェックが必要です。ほとんどのユースケースではこれで動作します。

Linux/Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

通常どおりng serveあるいはnpm startコマンドを実行すると、すべてが動作するはずです。

もしアニメーション機能に依存しているなら、新たにBrowserAnimationsModuleを@angular/platform-browser/animationsからルートモジュールにインポートしてください。これを行わない場合、コードのコンパイルを実行は行われますが、アニメーションがエラーを起こします。また、@angular/coreからのインポートは非推奨となったので、新しいパッケージからのimport { trigger, state, style, transition, animate } from '@angular/animations';を使ってください。

わたしたちはアプリケーションに必要な変更についてもっと知りたいときに使えるインタラクティブなAngularアップデートガイドを作成しています。

既知の問題

バージョン4における目標のひとつは、より限定的な型のサブセットを強制できるTypeScriptのstrictNullChecksにAngularを対応させることでした。わたしたちはこれをすべてのユースケースで正しく動作させるためには多くの課題が残っていることにRC期間で気づきました。4.1にて正しいサポートが入ったときに熱心に対応していたアプリケーションを壊すことを避けるため、あえて4.0をstrictNullCheckに対応させないことにしました。(トラッキングイシュー #15432)

今後の計画

わたちたちは2.xのために発表したリリーススケジュールと同じ調子に従って、次の6ヶ月のロードマップを設定する作業中です。4.0.0へのパッチアップデートと、さらに4.1もすでに始まっています。わたちたちはAngularを小さく高速にし続ける予定であり、さらに@angular/httpや@angular/service-worker、@angular/language-serviceを実験的でなくすために進化させるつもりです。

ぜひドキュメンテーションの更新やCLIの安定版リリース、そしてライブラリ作者に向けたパッケージングのガイダンスをお待ち下さい。