SHOEISHA iD

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

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

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

「Angular」17の新機能を解説──シンプルで使いやすい記法が多数登場!

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回紹介したバージョン15、16に引き続き、今回は2023年11月にリリースされたバージョン17について、変更点や新機能を紹介していきます。

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

はじめに

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

 2023年5月の前回記事では、Angularのバージョン15と16について変更点や新機能を紹介しましたが、その後2023年11月に、Angularのバージョン17(以下「Angular 17」と記述)がリリースされました。本記事では、Angular 17の主要な変更点や新機能を説明していきます。より詳細な情報や変更点は、Angularの公式ブログ記事を参照してください。

対象読者

  • Angularの最新動向を定期的にチェックしておきたい方
  • 既存のAngularソースコードを最新版に追従する必要がある方
  • これまでAngularの学習や活用が大変と感じていた方

必要な環境

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

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • Angular 17.0.8
  • Angular CLI 17.0.9
  • Firebase CLI 13.0.2
  • Node.js v20.10.0
  • Microsoft Edge 120.0.2210.121

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve」コマンドを実行して、「http://localhost:4200」をWebブラウザーで表示します。

一新されたブランドロゴとドキュメント

 「急速に進化するAngularに対して追いついていなかった」ということから、Angularのブランドロゴが一新されました。

図1 Angularのブランドロゴ(右が新しいもの)
図1 Angularのブランドロゴ(右が新しいもの)

 また、従来の公式ページangular.ioに代わる新しい公式ページとしてangular.devが公開されました。angular.devでは、従来より提供されていた技術資料やAPIリファレンスに加えて、Webブラウザー画面上でインタラクティブにAngularを試せる環境が「Playground」として提供されます。この環境はチュートリアルでも利用でき、Angular CLIをローカルにインストールしなくてもAngularを実際に動作させて学習できるようになりました。

図2 angular.devのPlayground
図2 angular.devのPlayground

次のページ
条件分岐や繰り返しを簡潔に記述できるテンプレートの新記法

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

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

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング