お問い合わせ

コース概要

はじめに

  • Angularとは何か?
  • AngularとReact、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 controlやform group、form arrayなどを用いたフォーム作成およびバリデーション方法
  • requiredやminLength、maxLengthといった標準バリデータの利用法
  • 独自のカスタムバリデータの設計と適用方法

HTTPクライアント

  • Angular 17におけるHTTPクライアントの役割を理解する
  • バックエンドとの通信に必要なHTTPリクエスト作成および発行手順
  • 非同期データ処理向けオブザーバブル機能の活用法
  • HTTPリクエスト・レスポンスに対して変更や介入を行うインターセプタの利用法

新しい宣言的コントロールフロー構文

  • 条件付き描画・ループ処理・空配列処理といったよくある処理を単純化する新テンプレート制御ブロックの説明内容
  • @ifや@else、@switch、@case、@default、@for、@emptyなどの利用例紹介
  • *ngIfや*ngSwitch、*ngForといった従来構文との比較点
  • 新制御ブロックがシグナルを用いたゾーンレスアプリケーション実装をどう支援するかの説明

遅延読み込み機能付き制御ブロック

  • ウェブアプリケーションのパフォーマンスやユーザー体験向上に寄与する遅延読み込みの概念解説
  • コンテンツおよびその依存項目を後から読み込ませる@defer制御ブロック紹介
  • コンポーネントやディレクティブ・パイプ・アニメーション・スタイル定義など多様な利用シナリオでの@deferブロックの実用例説明
  • 新ビュー遷移APIとの連携仕組みについて述べる

ビュー遷移API

  • 異なるビュー間のアニメーションやトランジション内容をカスタマイズ可能とするビュー遷移APIの意義と利点説明
  • 同機能利用を促進するwithViewTransitionsディレクティブの導入解説
  • フェード・スライド・ズーム・フリップといった多様なトランジションタイプでの適用事例紹介
  • Angularルーターやブラウザ履歴管理とビュー遷移APIの関係説明

その他機能改善点

  • Angular 17が提供する以下のような追加機能・改善内容を簡潔に述べる:
  • @Component.stylesプロパティへ文字列値を設定可能になったこと
  • アニメーションコードの遅延読み込み対応実現
  • TypeScript 5.2へのサポート拡大
  • コアシグナルAPIが正式リリースとなった点
  • Node.js v16のサポート廃止およびv18.13.0以上を要件とする変更内容
  • ビルドツールとしてEsbuildが標準採用され、開発用サーバーはViteを用いる仕様移行

まとめと今後のステップ

要求

  • HTML・CSS・JavaScriptに関する基礎知識
  • TypeScriptおよびRxJSの実務経験
  • ウェブ開発全般のスキル

対象者

  • Angular 17を活用して動的かつレスポンシブなウェブアプリケーションを作りたい開発者
  • これまでのバージョンのAngularで培った技術をさらに拡張したい方々
  • Angular 17が提供する新機能や改善点を学びたいプログラマー
 28 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (2)

今後のコース

関連カテゴリー