SHOEISHA iD

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

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

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

「Angular」バージョン15・16の新機能は?──スタンドアロンコンポーネントとSignalでより学びやすく!

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

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

Angular 16の新機能

 以下では、Angular 16の主要な新機能や変更点を紹介していきます。

リアクティブなデータをシンプルに記述できるSignal

 Angularではリアクティブなデータの記述にRxJSを利用してきましたが、Angular 16では、リアクティブなデータをよりシンプルに記述できる「Signal」が、開発者プレビューとして導入されました。図7のサンプルでは、ボタン押下ごとにSignal変数の値が1増加し、連動して他のSignalやObservableの値も変更されます。

図7 SignalとObservableを相互変換して利用するサンプル(p006-signal)

図7 SignalとObservableを相互変換して利用するサンプル(p006-signal)

 図7のサンプルのコンポーネントは、リスト14の通り実装されています。

[リスト14]Signalの定義(p006-signal/src/app/app.component.ts)
export class AppComponent {
  // Signalの例 ...(1)
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);
  // ボタンクリック時の処理
  onClick() {
    // Signalの値を更新 ...(2)
    this.count.set(this.count() + 1);
  }
  // SignalからObservableに変換 ...(3)
  countObservable$ = toObservable(this.count);
  // ObservableからSignalに変換 ...(4)
  count2 = toSignal(this.countObservable$);
}

 (1)で、初期値0を持つSignal変数countと、それを2倍したSignal変数doubleCountを定義しています。doubleCountは、その時点のcountの値に対して常に2倍になります。ボタンクリック時には、(2)の処理により、countの値に1を加えます。またSignalは(3)、(4)の通り、Observableとの相互変換をサポートしています。リスト14で定義したSignalやObservableを参照するテンプレートの実装はサンプルコードを参照してください。

 今後Signalを利用して、Angular本体をよりシンプルに改善する開発が進められる見込みです。

サーバーサイドレンダリング(SSR)時の非破壊ハイドレーションをサポート

 ハイドレーション(hydration)とは、サーバーサイドで生成した静的なWebページから、画面の操作を受け付ける動的なWebページに表示を更新する処理を指します。AngularのSSRライブラリーAngular Universalでは、SSRのWebページを表示する際、サーバーサイドで生成した静的なWebページのDOMノードをいったんすべて削除し、JavaScriptの処理でDOMノードを再生成する処理を行っていましたが、Angular 16では静的なWebページのDOMノードを生かしつつ、それにイベントなど動的な要素を付加する非破壊ハイドレーション(non-destructive hydration)を開発者プレビューとしてサポートしました。

 非破壊ハイドレーションを有効にするには、「ng add @nguniversal/express-engine」コマンドを実行してAngular Universalを導入後、Webアプリ起動時のオプションにリスト15の通りprovideClientHydration()を追加します。

[リスト15]非破壊ハイドレーションの設定(p007-hydration/src/app/app.config.ts)
export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration() // 非破壊ハイドレーションの設定
  ]
};

 SSRのプロジェクトを実行するには「npm run dev:ssr」コマンドを実行します。実行時、コンソールログにハイドレーションされたコンポーネントやノード数が出力されます。

図8 ハイドレーションの様子を出力するログ(p007-hydration)
図8 ハイドレーションの様子を出力するログ(p007-hydration)

 将来的には一部のコンポーネントを後でハイドレーションする(部分ハイドレーション)といった、より高度な処理をサポートする計画です。

コンポーネントの必須入力指定

 開発者にとって便利な新機能の一つとして、コンポーネントの必須入力指定を紹介します。リスト16の通り、@Inputにrequired: trueと設定することで、その入力項目を必須にできるようになりました。

[リスト16]コンポーネントへの必須項目の設定(p008-required-param/src/app/sub.config.ts)
export class SubComponent {
  @Input({required: true}) name = ''; // 必須
  @Input() price = '';                // 非必須
}

 リスト16ではnameが必須なので、図9の通り、nameが指定されていないコンポーネント記述はエラーとなり実行できません。

図9 必須入力項目が未指定でエラーになるコンポーネント(p008-required-param/src/app/app.component.html)
図9 必須入力項目が未指定でエラーになるコンポーネント(p008-required-param/src/app/app.component.html)

まとめ

 本記事では、2022年11月にリリースされたAngular 15と、2023年5月にリリースされたAngular 16について、変更点や追加機能を説明しました。スタンドアロンコンポーネントやSignalなどにより、開発者がより容易にAngularに取り組めるようになります。

参考資料

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

  • 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/17782 2023/05/29 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング