SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

次世代Webアプリケーションフレームワーク「Angular」の活用

大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介

次世代Webアプリケーションフレームワーク「Angular」の活用 第23回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は2019年5月にリリースされたAngularのバージョン8を紹介しましたが、それから半年以上経過した2020年2月に、次バージョンとなるバージョン9がリリースされました。今回はAngularのバージョン9について、主要な変更点や新機能を紹介していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、半年に1回ほどアップデートされています。

 2020年2月に、Angularのバージョン9がリリースされました。Angularのバージョンアップはおおむね半年ごとに行われ、バージョン8のリリースが2019年5月だったことを考えると、予定より遅れてのリリースとなります。

図1:バージョン9のリリースを告知する公式ブログ記事
図1:バージョン9のリリースを告知する公式ブログ記事

 バージョン9は「過去3年間で最も大規模なアップデートの1つ」とうたわれており、バージョン8で導入された次世代レンダリングエンジン「Ivy」がデフォルト化されたほか、さまざまな改良が行われています。

 本記事では、Angularのバージョン9(以下「Angular 9」)について、主要な変更点や新機能をサンプルとともに説明していきます。

対象読者

  • 常にAngularの最新動向を把握しておきたい方
  • 既存のAngularソースコードを最新版に追従する必要がある方
  • Angular 9の便利な新機能を見逃したくない方

必要な環境

 Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。比較用に使用したAngular 8のバージョンも以下に記載します。

  • Windows 10 64bit版
    • Angular 9.0.2 / 8.2.14
    • Angular CLI 9.0.3 / 8.3.25
    • Node.js v10.16.1 64bit版
    • Microsoft Edge 44.18362.449.0

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。

プロジェクトをAngular 9対応にアップデートする方法

 既存のAngularプロジェクトをAngular 9対応にアップデートするには、Angular CLIの「ng update」コマンドが利用できます。公式ページでは、Angular 9へのバージョンアップ前に、まずリスト1のコマンドで、Angular 8の最終バージョンにアップデートすることを推奨しています。

[リスト1]プロジェクトをAngular 8の最終バージョンへアップデートするコマンド
ng update @angular/cli@8 @angular/core@8

 その後、リスト2のコマンドでAngular 9へアップデートします。

[リスト2]プロジェクトをAngular 9へアップデートするコマンド
ng update @angular/cli @angular/core

 プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」や、Angular 9の公式ページで確認できます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
次世代レンダリングエンジン「Ivy」が正式リリース

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12057 2020/03/12 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング