Angular v17.2リリース、新機能と開発者向け改善点を紹介

Angular v17.2リリース、新機能と開発者向け改善点を紹介

公開: 更新:


【時間がない人向け】記事の3行要約

  • Angular v17.2でMaterial 3への実験的サポートを開始
  • 新たにsignal queriesやmodel inputsなどの機能を追加
  • Netlify用の画像ローダーや画像のプレースホルダー機能を導入

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

Angular v17.2の新機能と開発者向け改善点

Angularチームはv17.2のリリースにおいて、Material Designの最新バージョン「Material 3」への移行をサポートする実験的機能を導入した。このプロジェクトではGoogleのMaterial Designチームと協力し、WebにおけるM3の意味を理解し、新しいHTML構造を持つコンポーネントへの移行を支援するテストハーネスを開発した[1]

Angularのリアクティビティモデルを改善するため、過去1年間にわたってSignalsを使用したAPIの開発に注力してきた。v17.1でsignal-based inputsを導入したことに続き、今回はsignal queriesとmodel inputsという新しいAPIを開発者プレビューとして提供しフィードバックを求めている。

新しいsignal queries APIはTypeScriptおよびWebエコシステムの進化に伴い、型安全性と開発者エルゴノミクスの向上を目指している。このAPIは時間とともに変化する値を表現するのに適した手段としてsignalsを活用している。

model inputsはv17.1で導入された読み取り専用のsignal inputsを補完するもので、親子コンポーネント間での状態共有を可能にする書き込み可能なsignalsを提供する。これによりsignalsを使用した双方向データバインディングが実現される。

パフォーマンスと開発者体験の向上に焦点を当てたこのリリースでは、画像ロード時の落とし穴を避けるための画像ディレクティブの改善などが行われた。

Angular DevToolsにはクライアントサーバー間で異なるデータがある場合、手動でDOM操作を行った場合に発生するハイドレーションのDOMミスマッチエラーをデバッグするための新機能が導入された。

Netlify用の画像ローダーとしてprovideNetlifyLoaderを使用することで、自動srcsetなどの強力なパフォーマンス機能を画像に提供できるようにもなっている。

NgOptimizedImageディレクティブを使用している場合、画像が読み込まれるまでの間にぼやけたプレースホルダーを簡単に追加できる。この新機能により小さなバージョンの画像を要求し、ぼやけた状態で表示することができる。

また、Angular CLIはBunのパッケージマネージャーをサポートし始めたことによって、Vite開発サーバーのプレバンドリングを制御したりアプリケーションビルダーでカスタムのpostcss設定をサポートしたりすることが可能になった。

これらの新機能と改善はGitHubでのフィードバック、RFCでのディスカッション、ソーシャルメディアやイベントでの対話を通じて、Angularコミュニティからの貴重な意見を反映している為、Angular v18のリリースが待ち遠しい。

trends編集部「K」の一言

新たな機能の追加は開発者の生産性を向上させるが、実験的なサポートの段階であるMaterial 3への移行やsignal queriesの導入は、互換性や安定性に関して問題を引き起こす可能性がある。特に既存のアプリケーションとの統合や新しいAPIへの移行に際しては、細心の注意が必要だ。

将来的にはより多様なWebコンポーネントのサポート、パフォーマンス最適化をさらに推進するための機能が追加されることが望まれる。このような機能は開発者がより効率的にアプリケーションを構築し、ユーザーに優れた体験を提供するための鍵となるだろう。

Netlifyでの画像最適化機能やプレースホルダー画像の自動生成など、パフォーマンスに関する最新の改善は、Web開発の未来に向けた大きな一歩である。これらの機能によって開発者はより高速で反応性の高いWebアプリケーションを容易に構築できるようになるだろう。

今後のAngularのアップデートでは、開発者コミュニティのニーズに応えるための新機能や改善が続々と登場することが予想される。特にコンポーネント設計の柔軟性の向上や開発ワークフローの最適化が求められているだろう。

References

  1. ^ Angular Blog. 「Angular v17.2 is now available. We rarely write blog posts about minor… | by Minko Gechev | Feb, 2024 | Angular Blog」. https://blog.angular.io/angular-v17-2-is-now-available-596cbe96242d, (参照 24-02-21).

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する