August 2017
Volume 32 Number 8
働くプログラマ - MEAN あれこれ: Angular のアップグレード
Ted Neward | August 2017
.jpg "Ted Neward")
「MEANers」の皆さん、お帰りなさい。
MEAN (Mongo、Express、Angular、Node) スタックに関する連載を始めて 2 年になります。そして、当然のごとく、連載開始以降 MEAN スタックのさまざまな部分が進化しています。アップデート (具体的には Node、Express、Mongo のバージョン) の大半は意識することなく行われ、導入してもさして問題はありませんでした。基本的な部分が少しアップグレードされるだけで、すべてがうまく機能します。
しかし、Angular のアップグレードは Web フロント エンドの世界でここしばらく話題になっています。それは、特に、AngularJS (v1) と Angular (v2 以降) の間での違いが大きいために、旧バージョンとの互換性について深刻な問題が生じているためです (ここでは、「旧バージョンとの互換性」という言葉をおおざっぱに使っています。バージョン 1 とバージョン 2 の旧バージョンとの互換性の経緯は、本質的にはこうです。Angular チームは、「すべてを書き直します。信じてください。すばらしいものになるでしょう」と言っています)。そのため、Angular ユーザーは、Angular の最初のメジャー アップデートを目にしてひどく驚きました。そして、そのアップーデートが主要バージョンになると発表されたとき、ユーザーは不安を募らせました。
その結果、ユーザーは、サンプル アプリケーションのフロント エンドの記述に追われることになりますが、Angular チームは、Angular の新しいバージョンをユーザーにリリースするという、なすべきことを行っただけです。つまり、少しの時間を耐え忍び、アプリケーションを新しいバージョンの Angular v4 にアップグレードするときがきました (Angular チームは、3 を飛ばして Angular 4 することに決めました)。 開発者からの警告: 新しいバージョンは、ユーザーが予測していたよりもはるかに問題点が少ないことが明らかになり、今後の Angular アップデードへの多くの希望をもたらしました。これは好ましいことです。Angular チームは、従来のオープン ソース プロジェクトに合わせてさらに短い間隔でリリースを行うことを約束しているからです。つまり、はっきり言うと、これまでの基準よりもずっと速いペース (6 か月おき) で小さな増分アップデートが数多くリリースされるでしょう。
Angular のアップグレード
基本的には Angular 4 へのアップグレードは、ノード パッケージ マネージャー (npm) を使って、使用中の npm パッケージを最新バージョンにアップデートすることを意味します。これは、非常によく知られた "npm install" コマンドの形をとります。パッケージごとに version タグ ("@latest") を使用し、“--save" 引数を使用して最新バージョンをアプリケーションの package.json ファイルに取り込みます。*nix システム (主として Linux や macOS) で実行している場合は、コマンドは以下の形式をとります。すべてを 1 行で入力する必要があります。
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
*nix コマンド シェルは、さまざまなパッケージが 「{"/"}」ペア (厳密にはそれぞれが "@angular/common," "@angular/compiler" などのような名前ですが) の下に取り込まれることを可能にします。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
"npm install" の実行が終了したら、アップグレードはほぼ完了です。再度 "ng serve" を使用してアプリケーションを実行するだけで、すべてが実行状態に戻ります。
Angular 2 から 4 へのアップグレートの問題点
Angular チームは、アップグレードが必ずしもスムーズではないことを認めています。ただし、リリース ノートでは、問題 (と思われる) 点のほとんどは、アニメーションの使用に関するもの限られていることが明記されています。アニメーションは、本連載ではまだ取り上げていません。具体的には、Angular チームは @angular/core からアニメーションを取り除き、個別の Node パッケージ @angular/animations (以前の "npm install" コマンドで確認できます) に移動しました。そのため、アプリケーションでアニメーションを使用しない場合は、コア パッケージにアニメーションのコードを含める必要はありません。
Angular 4 の新機能
Angular 4 のリリース ノートではリリースに関するすべての経緯が紹介されていますが、その中でも特に取り上げておきたい点がいくつかあります。
まず、Angular チームは Angular ライブラリのサイズと負荷のフットプリントを削減することに力を注いでいます。特に、高速ファイバー接続で他のユーザーと繋がっていないユーザーにとって、メリットは明らかです。Angular チームは、まだこの取り組みは完了していないと述べています。そのため、今後の継続的な Angular リリースで、フットプリントのさらなる削減が行われることが期待されます。
Angular チームは、同様の考えで、生成される分離コードのビュー テンプレートの合計サイズを、最大 60% 削減しています。つまり、これによって、ビルドするアプリケーションがさらに小さく軽量になります。
次に、同チームは、ビュー テンプレートで分岐シナリオと繰り返しのシナリオそれぞれに使用する "*ngIf" ディレクティブと "*ngFor" ディレクティブを強化しています。これまでこれらのディレクティブを見たことがないでしょう。この機能はまだ使用できません。しかし、すぐに登場するので、もう少し待ちましょう。
最後に、Angular チームは、Angular ライブラリを最新バージョンの TypeScript (2.2) にアップデートしました。TypeScript (2.2) には、優れた null 許容型のチェック、ECMAScript (ES) 2015 のスタイルの混在に対する優れた入力のサポート、TypeScript で宣言されるすべての型の基本型を表す "object" 型 (.NET コードで System.Object が担う役割と同様) などが含まれています。暗黙で TypeScript 2.1 もサポートされます。TypeScript 2.1 自体にもいくつか興味深い機能があります。"keyof" 演算子、(Partial、Readonly、Pick および Record というユーティリティ型を提供する) マップ型、ES 2015 の "spread" 演算子と "rest" 演算子のサポートなどがあります。こうした機能はすべて Angular 自体で扱う範囲を優に超えていますが、優れた TypeScript チュートリアル (または TypeScript の Web サイト) で機能の使用方法が説明されています。基本的にこれらの機能は、Angular を使用する際に記述したコードを、少なくとも今すぐ変更することはありません。しかし、Angular ライブラリでさらに利用されるようになると、Angular API のサーフェス領域に影響し始めるかもしれません。これは、しばらくの間は実現しないでしょう。ただし、今のところ一番留意すべきなのは、Angular が TypeScript の進化に歩調に合わせていることです。
まとめ
Angular 4 にアップグレードしても、ほとんど負担が増えないことを理解していただけたらさいわいです。負担がないというのは、バージョン アップデートとして非常に優秀です。さらに重要なことですが、Angular アプリケーションを拡張し、進化させる際に、Angular の最新バージョンに合わせてアプリケーションを最新状態に保つのに必要な作業は (今のところ) それ程多くないということです。これを知ると、元気がわきます。
MEAN あれこれ: 2 年が経過
本稿執筆中に「MSDN Magazine」の編集長 Michael Desmond から、「MEAN あれこれ」の連載が始まってちょうど 2 年になることを知らされました。いまだに MEAN を取り上げるのはなぜでしょう。 1 つの理由として、扱っているのが単なるライブラリやフレームワークでなく、完全な一連のフロント エンドからデータ ストレージまでの、REST API を使用したミドルウェア プラットフォームというとても大きなテーマだからです。しかし、MEAN スタック自体の性質も、本連載が長く続いていることに影響しています。
MEAN プラットフォームと .NET Framework プラットフォームは、提供するものが異なっているわけではありません。どちらにも、プログラミング言語、送られてきた JSON データを受け取るための HTTP ライブラリ/フレームワーク、データベースにアクセスするためのドライバーなどがあります。正しくは、提供しないものに違いがあります。つまり、Node.js プラットフォームを基に構築された MEAN プラットフォームでは、NET プラットフォームにはない「ミニマリズム」の概念が重視されます。
Node.js が「不完全」であるとか、.NET が「重すぎる」などのように、いずれかのプラットフォームを軽視しているように捉えられるかもしれませんが、 そのような価値判断を意図しているのではありません。.NET は Microsoft によって開発され、.NET Framework チームが長年にわたってビルドしたものに大きく依存して動作します。一方、 Node.js プラットフォームは世界中の数百のチームと数千人の開発者によってビルドされたライブラリが連携することで機能します。それぞれのアプローチにメリットとデメリットがあります。しかし、これについてここで取り上げるつもりはありません。
実際のところ、どちらのプラットフォームを利用するかは開発者次第です。たった 2 年前でも、Microsoft OS (またはクラウド プラットフォーム) 上またはそれに近い環境で、アプリケーションのビルドに開発者が .NET と Node.js のどちらか、または Java と PHP を使用できるプラットフォームを提供するという Microsoft の考えは、非現実的に思われました。Microsoftが「すべてのプラットフォームが平等に創られた」とでもいうべき精神に到達したかもしれないという兆しはありました。しかし、同社の歴史を考えると、平等なプラットフォームの中でも .NET を優先するアプローチを目にするかもしれません。
このことについて少し考えてみましょう。MEAN スタックの "A" は Angular を意味します。本連載を開始したとき、Angular は現在のように強力で、リッチ クライアントなシングル ページ アプリケーション (SPA) ではありませんでした。JavaScript のフロントエンドにすることができるいくつかの 可能性の 1 つでした。明らかに、Angular への関心は高まり、本誌のページでは、このコラム内と他の執筆者による特集記事の両方で何度も取り上げられました。
驚くべきことに、Microsoft だけでなく、同社の競合企業で働くチームでも、オープン ソースの世界で記述されたフロント エンド テクノロジーに関心が寄せられています。さらに、Angular では Microsoft が開発したオープン ソース言語 TypeScript が使用されています。読者の皆さんは、頭が混乱したことでしょう。
MEAN スタックおよび本誌で扱う MEAN の範囲は多くの点で「新しいMicrosoft」のすべてを明確に示しています。 これは、2017 年の Microsoft が 2007 年や 2000 年の Microsoft とは完全に異なることを高らかに示しています。同社が競争よりも協力とコミュニティに価値を置くようになってからかなりの時間が過ぎました。現在の Microsoft は確かに競争を行っていますが、コミュニティ内では行っていません。2017 年の Microsoft は、開発者が自身で選択したテクノロジ スタックを、理想的には同社のクラウドまたは OS で使用することを望んでいます。しかし、それ以外の場所で使用することを選んでも、それはそれでかまいません。
結局のところ、MEAN スタックは 3 つの部分 (MongoDB、Angular および Node.js/Express) で構成された、相互運用が可能な 1 つのスタックにすぎません。Microsoft は MEAN スタックを受け入れるだけでなく、使用を勧めており、以前と比較してどれほど進化したかを述べています。
今後数年のうちにどのようなものが提供されるか、想像せずにはいられませんね。 コーディングを楽しんでください。
Ted Newardは、シアトルを拠点に活躍している、ポリテクノロジーに関するコンサルタント、講演者、および指導者です。現在は、Smartsheet.com で、開発者リレーションのディレクターを務めています。これまでに 100 本を超える記事を執筆している Ted は、さまざまな書籍を執筆および共同執筆し、世界を股に掛けて仕事をしています。彼の連絡先は、ted@tedneward.com です。また、blogs.tedneward.com にブログを公開しています。