コース概要

はじめに

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

はじめに

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

コンポーネント

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

ディレクティブ

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

パイプ

  • 0] 17におけるパイプの目的を理解する
  • 日付、通貨、json などの組み込みパイプの作成と使用
  • カスタムパイプの作成と使用

サービス

  • サービスの役割を理解する Angular 17
  • サービスの作成と使用
  • プロバイダを使った依存関係の注入

モジュール

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

データバインディング

  • 一方向データバインディングと双方向データバインディングの違いを理解する
  • プロパティ・バインディング、イベント・バインディング、バナナ・イン・ア・ボックス構文の作成と使用
  • テンプレート参照変数の使用

ルーティング

  • 0] 17におけるルーティングの役割を理解する
  • ルートの作成と設定
  • routerLink と router.navigate() を使ってルート間を移動する
  • ルートパラメータ、クエリパラメータ、フラグメントを使う

フォーム

  • テンプレート駆動型フォームとリアクティブ型フォームの違いを理解する
  • フォームコントロール、フォームグループ、フォーム配列などを使ったフォームの作成とバリデーション
  • required、minLength、maxLength などの組み込みバリデータの使用法
  • カスタムバリデータの作成と使用

HTTP クライアント

  • 0] 17 における HTTP クライアントの役割を理解する
  • バックエンドサービスと通信するための HTTP リクエストの作成と使用
  • observable を使用して非同期データストリームを処理する
  • インターセプターを使用してHTTPリクエストやレスポンスを変更したり処理したりする

新しい、宣言的な制御フロー

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

遅延ロードブロック

  • 遅延ロードの概念と、それが Web アプリケーションのパフォーマンスとユーザー体験をどのように向上させるかを説明します。
  • ブロックのコンテンツとその依存関係の遅延ロードを可能にする新しい@deferコントロールブロックの紹介
  • コンポーネント、ディレクティブ、パイプ、アニメーション、スタイルの読み込みなど、さまざまなシナリオで @defer ブロックを使用する例を示します。
  • deferブロックが新しいビュー遷移APIとどのように連携するかについて言及する

ビュー遷移 API

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

その他の機能と改善点

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

まとめと次のステップ

要求

  • 2]、CSS、Javaのスクリプトを理解していること
  • 6]とRxJSの経験
  • Web開発経験

対象者

  • 0]17を使用してダイナミックでレスポンシブなWebアプリケーションを作成する方法を学びたい開発者
  • 旧バージョンのAngularからスキルアップしたい開発者
  • 0]17の新機能や改善点を知りたいプログラマー

 28 時間

参加者の人数



Price per participant

お客様の声 (10)

関連コース

Building Web Apps using the MEAN stack

35 時間

Reactive Programming with Angular RxJS

14 時間

関連カテゴリー