コース概要

導入

  • Angularとは何か?
  • Angular vs React vs Vue
  • Angular 17の機能とアーキテクチャの概要
  • 開発環境のセットアップ

始めに

  • Angular CLIを使用して新しいAngular 17プロジェクトを作成する。
  • プロジェクト構造とファイルを探索する。
  • アプリケーションの実行と提供。
  • 補間と式を使用してデータを表示する。

コンポーネント

  • Angular 17におけるコンポーネントの役割を理解する。
  • コンポーネントの作成と使用。
  • 入力と出力を使用してコンポーネント間でデータを渡す。
  • コンポーネントライフサイクルフックの使用。

ディレクティブ

  • 構造的なディレクティブと属性ディレクティブの違いを理解する。
  • ngIf、ngFor、ngSwitchなどの組み込みディレクティブの作成と使用。
  • カスタムディレクティブの作成と使用。

パイプ

  • Angular 17におけるパイプの目的を理解する。
  • date、currency、jsonなどの組み込みパイプの作成と使用。
  • カスタムパイプの作成と使用。

サービス

  • Angular 17におけるサービスの役割を理解する。
  • サービスの作成と使用。
  • プロバイダーを使用して依存関係を注入する。

モジュール

  • Angular 17におけるモジュールの役割を理解する。
  • モジュールの作成と使用。
  • モジュールのインポートとエクスポート。

データバインディング

  • 一方向データバインディングと双方向データバインディングの違いを理解する。
  • プロパティバインディング、イベントバインディング、banana-in-a-box構文の作成と使用。
  • テンプレートリファレンス変数の使用。

ルーティング

  • Angular 17におけるルーティングの役割を理解する。
  • ルートの作成と構成。
  • routerLinkとrouter.navigate()を使用してルート間でナビゲートする。
  • ルートパラメータ、クエリパラメータ、フラグメントの使用。

フォーム

  • テンプレート駆動型フォームとリアクティブフォームの違いを理解する。
  • form controls、form groups、form arraysなどを使用してフォームを作成し検証する。
  • required、minLength、maxLengthなどの組み込みバリデーターの使用。
  • カスタムバリデーターの作成と使用。

HTTPクライアント

  • Angular 17におけるHTTPクライアントの役割を理解する。
  • HTTPリクエストを作成しバックエンドサービスとの通信を行う。
  • オブザーバブルを使用して非同期データストリームを処理する。
  • インターセプターを使用してHTTPリクエストやレスポンスを変更または処理する。

新しい宣言型制御フロー

  • 新しいテンプレート制御ブロック構文について説明し、条件付きレンダリング、繰り返し処理、空のコレクションの処理などの一般的なタスクを簡素化する方法を解説。
  • @if, @else, @switch, @case, @default, @for, @emptyなどの新しいブロックを使用する例を示す。
  • 以前の*ngIf、*ngSwitch、*ngFor構文との比較を行う。
  • 新しい制御ブロックがシグナルを持つゾーンレスアプリケーションをサポートする方法について言及。

遅延ロードブロック

  • 遅延ロードの概念と、それがWebアプリケーションのパフォーマンスとユーザーエクスペリエンスを改善する方法について説明。
  • 新しい@defer制御ブロックがブロックの内容と依存関係の遅延ロードを有効にする方法を紹介。
  • @deferブロックを使用してコンポーネント、ディレクティブ、パイプ、アニメーション、スタイルなどを異なるシナリオで読み込む例を示す。
  • @deferブロックが新しいビュー遷移APIと連携する方法について言及。

ビュー遷移API

  • 開発者がビュー間のアニメーションと遷移をカスタマイズできるビュー遷移APIの目的と利点について説明。
  • 新しいwithViewTransitionsディレクティブがビュー遷移APIの使用を有効にする方法を紹介。
  • withViewTransitionsディレクティブを使用してフェード、スライド、ズーム、フリップなどの異なるトランジションタイプで例を示す。
  • ビュー遷移APIがAngularルーターとブラウザの履歴と共に動作する方法について言及。

その他の機能と改善点

  • Angular 17が提供するその他の機能と改善点を簡潔にまとめます。例えば:
  • @Component.stylesとして文字列を渡すサポート。
  • Angularのアニメーションコードは遅延ロード可能。
  • TypeScript 5.2のサポート。
  • コアシグナルAPIが安定しています。
  • Node.js v16のサポートが削除され、最低サポートバージョンはv18.13.0です。
  • Esbuildがデフォルトビルダーとなり、デフォルト開発サーバーではViteを使用します。

まとめと次へのステップ

要求

  • HTML、CSS、JavaScriptの理解。
  • TypeScriptとRxJSの経験。
  • Web開発の経験。

対象者

  • Angular 17を使用して動的かつ反応性の高いWebアプリケーションを作成したい開発者。
  • 以前のバージョンのAngularからスキルをアップグレードしたい開発者。
  • Angular 17の新機能と改善点を探索したいプログラマ。
 28 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (2)

今後のコース

関連カテゴリー