0Pricing
Angular Academy icon

Angular Academy

HTMLFrontendWebBeginner

Angular Academy で Angular を学んで、スケーラブルでモダンなウェブアプリケーションを構築しましょう。

🤖 AI 搭載📚 38 コース👥 100,000+ ユーザー⭐ 4.9 評価
コース概要

Angular: 本番規模のウェブアプリを支えるフレームワーク

Angular は Google の意見重視の TypeScript ファーストフレームワークで、大規模で保守性の高いシングルページアプリケーションを構築するために使われています。そのコンポーネントモデル、依存性注入システム、ファーストクラスのツール群により、エンタープライズチームとスケールで構造を求める開発者のフレームワークとして選ばれています。このトラックは、古いガイドのレガシーパターンではなく、スタンドアロンコンポーネント、Signals、新しい制御フロー構文を備えた最新の Angular(バージョン 19)をカバーしています。

学習内容

Angular CLI、プロジェクト構造、Angular 19 の基礎から始まり、Signal ベースのリアクティビティ、スタンドアロンコンポーネント、依存性注入へと進みます。そこから、テンプレート駆動フォームとリアクティブフォーム、RxJS オペレータ、HttpClient インターセプタ、コンポーネントライフサイクルフック、コンテンツプロジェクション、アニメーション、ルーティングをカバーします。後続のコースは、NgRx と Signal ベースの NgRx SignalStore によるステート管理、ユニットテストとエンドツーエンドテスト、国際化、カスタムフォームコントロールに対応しています。このトラックは、変更検出の最適化、サーバーサイドレンダリング、ハイドレーション、Module Federation によるマイクロフロントエンド、再利用可能な Angular ライブラリの構築、Angular セキュリティの基本で締めくくられます。

学習パス

37 コースが A1 から C1 をカバーしています。最初の 8 コース(A1〜A2)は基礎を構築します。CLI セットアップ、スタンドアロンコンポーネント、パイプ、ライフサイクルフック、双方向バインディングです。B1 と B2 コースは応用スキルを開発します。RxJS、高度なルーティング、リアクティブフォーム、ディレクティブコンポジション、完全なテストカバレッジです。C1 ティアは、チュートリアル Angular と本番 Angular を分ける内容をカバーします。変更検出とパフォーマンス、NgRx SignalStore、Angular SSR によるサーバーサイドレンダリング、Module Federation によるマイクロフロントエンド、Angular ライブラリの構築、Angular セキュリティの基本です。

仕組み

各コースは短い実践的なレッスンに分かれており、ビルトインコードエディタで完了でき、リアルタイムフィードバックが得られます。困ったときはいつでも AI チューターが利用でき、すべてのコンセプトはブラウザ直接実行のエクササイズで強化されます。ローカルセットアップなしで始められます。

学習を始める →

学び方

🎯
インタラクティブレッスン
リアルタイムフィードバック付きの実践的なコード演習
🤖
AIチューター
わからないときは、AIが即座にサポート
💻
組み込みエディタ
ブラウザで直接コードを書いて実行
🏆
認定資格
コース完了時に認定資格を取得
カリキュラム

38コース

Angular Academyラーニングパスのすべてのコース

01

Angularへようこそ

A13レッスン

Angularとは何か、なぜGoogleが開発・保守しているのか、そして大規模でプロフェッショナルなWebアプリケーションの構築方法をどう変えるのかを理解します。

02

Angular CLI とプロジェクト構成

A14レッスンPRO

Angular CLI を使って Angular プロジェクトを効率的にスキャフォールド、ビルド、管理します。

03

組み込みの制御フロー

A14レッスンPRO

テンプレートの条件分岐やループに、Angular の最新のブロック制御フロー構文を使用します。

04

Angular 19の基礎

A13レッスンPRO

Angular 19の主要機能、アーキテクチャ、環境設定について学びます。

05

Angular Signals の基礎

A24レッスンPRO

Angular のリアクティブな signals プリミティブを使った、きめ細かく効率的な状態管理を習得します。

06

スタンドアロンコンポーネント徹底解説

A24レッスンPRO

スタンドアロンコンポーネントのアーキテクチャを使い、NgModules なしで Angular アプリを構築します。

07

依存性注入の基礎

A24レッスンPRO

Angular の階層型依存性注入システムで、サービスを提供・利用します。

08

パイプ:組み込みとカスタム

A24レッスンPRO

組み込みパイプで表示データを変換し、独自のカスタムパイプも作成します。

09

コンポーネントのライフサイクルフック

A24レッスンPRO

Angular のライフサイクルフックを使って、コンポーネントの生成、変更、破棄に処理を組み込みます。

10

双方向バインディングとモデル入力

A24レッスンPRO

双方向バインディングと signal ベースのモデル入力で、親と子の間のデータを同期します。

11

コンポーネントのスタイリングとカプセル化

A24レッスンPRO

スコープ付き CSS、ビューのカプセル化モード、ホストのスタイリングを使ってコンポーネントを装飾します。

12

Signal 入力とクエリ

B14レッスンPRO

signal ベースの最新の入力、出力、ビュークエリ API を使って、より簡潔なコンポーネントを作成します。

13

Signals:computed と effects

B14レッスンPRO

computed signals でリアクティブな値を導出し、effect API で副作用を実行します。

14

Angular のための RxJS 基礎

B14レッスンPRO

Angular のリアクティビティの基盤となるオブザーバブル、サブスクリプション、サブジェクトを理解します。

15

コンテンツプロジェクションとテンプレート

B14レッスンPRO

コンテンツプロジェクション、ng-content、テンプレート参照を使って、柔軟で再利用可能なコンポーネントを構築します。

16

Angular アニメーション

B14レッスンPRO

Angular の宣言的なアニメーションシステムで、インターフェースに動きを加えます。

17

高度なコンポーネントとディレクティブ

B13レッスンPRO

高度なコンポーネント間連携、ディレクティブ、ベストプラクティスについて学びます。

18

Angularのルーティングとナビゲーション

B13レッスンPRO

Angularにおけるルーティング、ナビゲーションガード、ルートリゾルバーについて学びます。

19

フォームの扱い

B13レッスンPRO

Angularでのフォーム処理について詳しく学びます。

20

RxJS オペレーター徹底解説

B24レッスンPRO

マッピング、フィルタリング、結合、エラー処理のオペレーターで、強力なデータフローを組み立てます。

21

Angular Router 応用

B24レッスンPRO

リゾルバー、ルートデータ、パラメーター、関数型ガードを使って、基本的なルーティングの先へ進みます。

22

HttpClient インターセプター

B24レッスンPRO

関数型およびクラスベースのインターセプターで、横断的な HTTP 処理を一元化します。

23

リアクティブフォーム応用

B24レッスンPRO

FormArray、カスタムコントロール、非同期検証を使って、動的で厳密に型付けされたリアクティブフォームを構築します。

24

Directive Composition API

B24レッスンPRO

複数のディレクティブをホストコンポーネントに適用して、再利用可能な振る舞いを組み合わせます。

25

NgRxによる状態管理

B23レッスンPRO

NgRxを使ってアプリケーションの状態を効率的に管理します。

26

Signal ベースの状態管理

B24レッスンPRO

外部ライブラリを使わず、signals、サービス、リアクティブパターンでアプリケーションの状態を設計します。

27

カスタムフォームコントロール

B24レッスンPRO

ControlValueAccessor を実装して、カスタムウィジェットを Angular フォームに統合します。

28

Angular のユニットテストとコンポーネントテスト

B24レッスンPRO

TestBed と Angular のテストユーティリティを使って、コンポーネント、サービス、パイプをテストします。

29

Angular のエンドツーエンドテスト

B24レッスンPRO

Playwright と Cypress を使ったエンドツーエンドテストで、実際のユーザーフローを検証します。

30

国際化(i18n)

B24レッスンPRO

組み込みの i18n システムと実行時翻訳戦略で、Angular アプリをローカライズします。

31

HTTPとAPI連携

B23レッスンPRO

AngularにおけるHTTP通信とAPI連携を習得します。

32

変更検知とパフォーマンス

C14レッスンPRO

OnPush の変更検知、ゾーンレスモード、trackBy 戦略でレンダリングを最適化します。

33

NgRx SignalStore

C14レッスンPRO

signal ベースの最新の NgRx SignalStore で、複雑な状態を管理します。

34

Angular SSR によるサーバーサイドレンダリング

C14レッスンPRO

Angular をサーバー上でレンダリングし、初回描画を高速化して SEO を改善します。

35

ハイドレーションとパフォーマンス

C14レッスンPRO

完全ハイドレーションとインクリメンタルハイドレーションで SSR アプリを高速化し、クライアント側の処理を最小限に抑えます。

36

Module Federation によるマイクロフロントエンド

C14レッスンPRO

独立してデプロイ可能なマイクロフロントエンドを組み合わせ、大規模な Angular アプリを構築します。

37

Angular ライブラリの構築

C14レッスンPRO

Angular Package Format を使って、再利用可能な Angular ライブラリをパッケージ化して公開します。

38

Angularセキュリティの基礎

C13レッスンPRO

基本的な技術を使ってAngularアプリケーションを安全に保護します。

よくある質問

よくある質問

Angular Academyコースは無料ですか?

はい。Angular Academyコースは無料で始められ、インタラクティブレッスンをすべて無料で完了できます。オプションのPRO登録で、高度なAIツールと共有可能な認定資格がアンロックされます。

HTMLを学ぶのに事前経験は必要ですか?

いいえ。コースは基礎から始まり、より高度なトピックへと進むので、HTMLの事前経験がなくても始められます。

CoddyKitでHTMLをどのように学びますか?

実践しながら学びます。短いインタラクティブレッスンは、わかりやすい説明と、リアルタイムで実行される実践的なコード演習が組み合わさっており、24時間対応のAIチューターがわからないときにいつでもサポートします。

Angular Academyを完了すると認定資格がもらえますか?

はい。PRO学習者は試験を受けて、Angular Academyコースの完了を証明する共有可能な認定資格を取得できます(認証コード付き)。

スマートフォンでHTMLを学べますか?

はい。CoddyKitはウェブとネイティブiOS・Androidアプリで利用でき、どのデバイスでもHTMLを学習でき、進捗がすべてのデバイスで同期されます。

Angular Academyを今すぐ始める

AI搭載レッスンでプログラミングをマスターする数千人の学習者に参加しましょう。

無料で始める →すべてのコースを見る