Angular のおすすめの教材8選！ 【 2023年3月 最新版】

Angular初心者の為の待望の入門コース！

続編【AngularとNode.jsで始める！】JavaScript系 WEBアプリケーション開発コンプリートガイド①,②

に行く前に、最初の一歩としてAngularによるフロントエンド開発の基礎を学べます。

SPA（シングル・ページ・アプリケーション）などを筆頭に特に欧米で人気を誇るJavaScript系プログラミング言語でのWebサービス開発。

日本ではReactが有名ですが、Vue.jsやAngularも非常に優秀なJavaScript系フレームワークです。

今回使用するフレームワークであるAngularはフルスタックフレームワーク*を謳っていることと、Typescriptを前提に作られていることが大きな特徴です。

*フルスタックフレームワークとは------------------------

web開発に必要な機能を多く揃えたフレームワークです。

データベースやUIの実装など、web開発に必要な機能が1つのフレームワークにまとめられています。

例えばReactの場合、たくさんのパッケージを別途インストールしなければ実現できないWebシステムを、

Angularの場合は公式コンポーネントのみで多くを実現でき、システムの管理工数を大きく節約できます。

------------------------------------------------------------

プログラミング初心者が挫折しやすい過程を極力削ぎ落とし、かつ実業務でも必要となるAngularの大切な基礎を学べます。

また、Javascriptを拡張した大規模開発にも対応可能でエラーを未然に防ぎやすい人気のTypescriptもAngularと同時に学ぶことが出来ます。

Angularの基礎を学び、フロントエンドエンジニアとして大切な第一歩をスタートしましょう。

このコースでは業界最先端のクラウド開発環境であるStackBlitzを使う事で、GitやGitHub、デプロイといった難しい知識を習得する前に、プログラミング学習のスタートを切ることができます。

こちらのコースは皆さんのご意見を元にパワーアップしていきますので、増やして欲しいレクチャーございましたら気軽にご意見をDMやコメントなどでお知らせください。

このコースでWebアプリケーションフロントエンド開発の基本を学習した後、

続編コースでGitやGitHub、Node.js、Herokuを用いた本格的なWebアプリケーション開発の手法やデプロイを学んでいける大切な知識やノウハウを解説しているコースがございますのでそちらでも一緒に学んでいきましょう。

（ごく稀に悪気なくマウンティングされる方がいらっしゃいます。良い授業をお届けする為に、批判ではなく前向きなご意見をお願いします。前向きなご意見・ご要望により講師のモチベが上がり、授業の改善・アップデートをお届けしやすくなります。）

（無料プレビューを設けてますので講師との相性やレベル感に問題ないか事前確認いただけます）

1. はじめに
2. はじめに
3. Angularとは？
4. UdemyのQ&A機能の使い方
5. Udemy再生画質の設定方法
6. [Angular入門]まずは基礎から学ぼう
7. Angular公式ドキュメントのご紹介
8. StackBlitzとは？
9. 外部にWebアプリを公開する方法など
10. StackBlitzでプロジェクト名を変更する方法
11. 次のうち正しいものはどれか
12. HTMLタグとは？
13. CSS（スタイルシート）とは？
14. TypeScriptとAngularのファイル構成について
15. Module（モジュール）とは？
16. {{ }}（ダブルカーリーブレイシス）とは？
17. letとconstの使い方
18. 次のうち正しいものはどれか？
19. TypeScript上で関数を定義しよう
20. コンストラクタとは？
21. 関数のreturnとは？
22. ボタンに連動して関数を走らせるには？
23. SPA（シングル・ページ・アプリケーション）とは？
24. hrefとrouterLinkについて
25. 次のうち正しいものはどれか？
26. Angularで動的ページを開発しよう
27. セクションイントロ
28. Array（配列）とは？
29. *ngForとは？
30. JSONオブジェクトとは？
31. インポートしたJSONオブジェクトを使うには？
32. プロパティバインディングとイベントバインディングとは？
33. プロパティバインディングを使ってみよう
34. *ngIfとは？
35. （演習）イベントバインディングを使ってみよう
36. （補足説明）タグの順番について
37. （コラム）エラーについて
38. Type（型）とは？
39. Model（モデル）とは？
40. 補足説明
41. Angularでコンポーネントを開発しよう
42. イントロ
43. 新規コンポーネントの作成方法①
44. 新規コンポーネントの作成方法②
45. 新規作成したコンポーネントの配置方法と構造化するメリットについて
46. （応用編）作ったComponentにプロパティデータを渡す方法
47. （応用編）作ったComponentからEventを受け取る方法
48. （応用編）子コンポーネントを作るメリットについて
49. 次のうち「間違っている」ものはどれか？
50. 最後に
51. 最後に
52. 次のコース案内

このコースは、JavaScriptフレームワーク「Angular」の初心者に向けて構成された入門コースです。

Angularがはじめての方でも、一から解説するサンプルアプリケーションの開発を通して、Angularの基礎、TypeScriptの構文や機能、RxJSの使い方、シングルページアプリケーションの構築方法を習得できます。

またこのコースでは、Firebaseのリアルタイムデータベースと連携したチャットアプリケーションを開発・公開する、より実践的な学習内容が用意されています。サーバーの知識が無くてもアプリケーションを公開することが可能です。

コース受講後には、学んだ知識・技術を実務や個人開発に役立てることができます。

【更新情報】

2021/07：旧レクチャー（v5）をすべて削除しました。

2020/11：すべてのレクチャーをAngular v10にて再収録し公開しました。あわせてAngular CLIのセクション（Angular CLIを使いこなそう）を新規に追加いたしました。

2020/07：最新バージョンに対応するためコース内容を見直しております。アップデート反映までしばらくお待ち下さい。

【このコースの特徴】

Angularはフレームワークの知識に加えて多くの周辺知識（TypeScript、RxJSなど）を必要とするので、学習のハードルが高いのがデメリットです。

まだまだAngularを詳細に学べる機会は決して多くありません。

そこでこのコースでは、初心者でも挫折しないように、Angularに必要な知識・技術の解説を全て行います。

【環境構築】

• Mac・Windowsの両方に対応したNode.jsのインストール

• Visual Studio Code（エディタ）のインストール・設定・拡張機能の紹介

【TypeScript】

• 型・関数・クラス・インターフェイス・ジェネリックの解説

【Angularの各機能】

• コンポーネント

• ディレクティブ

• パイプ

• サービス

• フォーム

• ルーティング

• Guard（ガード）

• HTTPクライアント

• NgModuleでのアプリケーション設計術

• Angular公式スタイルガイドに添った開発手法

【RxJS】

• Observable

• Subject

• オペレータ

【Angular CLI】

【Firebase】

• リアルタイムデータベースの利用（Firebase Realtime Database）

• ユーザー認証（Firebase Authentication）

• サイトホスティング（Firebase Hosting）

【その他】

• 関連ライブラリの紹介

またAngularでは最新のフロントエンド技術を取り入れられていますので、フレームワークの習得とともに技術トレンドを抑えることができます。

各レクチャーにはリソースファイルに終了時点のソースコードを用意しています。
レクチャーでの不明な点はコース内のQ&Aでサポートしますので、ご安心ください。

【このコースで利用しているAngular・その他ツールのバージョン情報】

• 社員管理アプリケーション（Angular v10.0.5）

• チャットアプリケーション（Angular v10.0.5）

• Node.js (Mac: v12.8.3, Windows: v12.8.2)

【注意点】

• JavaScript未経験の方には、レクチャーの内容がとても難しいため、まずは別の入門コースで基礎を学習していただくことをおすすめします。

• 本コースはAngular初心者に向けた入門コースです。ユニットテストやサーバーサイドレンダリングなどの高度な内容は取り扱っていません。

• 本コースで扱うAngularのバージョンは「10.0.3」です。それ以下のバージョンについてのサポートは行っておりませんのでご了承ください。

※ このコースは【2時間半で学べる！】はじめてのAngular超入門！実践で学ぶ本格Webアプリ開発【TypeScript】の

続編コースになります。

※ このコースは世界最先端のプログラミング言語を扱う為、英語ドキュメントも参照しながら開発を進めます。

日本語でできる限りわかりやすく説明していますが、どうしても英語に拒絶反応が起きてしまう方は受講をお控えください。

これから新しくAngularやNode.jsを学びたい学生や社会人エンジニアにおすすめの「ガチめな」プログラミング『中級者以上向け』コース！

SPA（シングル・ページ・アプリケーション）などを筆頭に特に欧米で人気を誇るJavaScript系プログラミング言語でのWebサービス開発。

日本ではReactが有名ですが、Vue.jsやAngularも非常に優秀なJavaScript系フレームワークです。

今回このコースでは、日本ではまだ馴染みの少し薄いものの、とても使い勝手の良いAngular9をフロントエンド側の開発言語として用い、バックエンド側はNode.jsを用い、会員制の予約サイトやレンタルサービス等、あらゆるフルスクラッチ系WEBアプリケーション開発の根幹となる基盤WEBアプリケーションの構築を行っていきます。

一度基盤システムさえ構築してしまえば、そこから様々な差分機能を追加した派生WEBアプリを簡単に作れるようになります！

この授業を通じて、

• Gitの基本的な使い方

• ターミナルの使い方

• プロエンジニアと同じ開発環境の構築

• MEANスタック開発環境構築（MongoDB, Express, Angular, Node.js）

• フロントエンド開発の基礎（Angular）

• バックエンド開発の基礎（Node.js）

• フロントエンドとバックエンド間のAPI通信の基礎

• NoSQLデータベースを用いたDB構築（MongoDB）

• Herokuを用いたWebサーバー構築とDeploy（デプロイ）

といった盛りだくさんの内容で、実務で役立つシステム開発の基礎となる部分を一緒に学んで行きましょう。

このコースを通じて、フロントエンド〜バックエンド（サーバーサイド）開発まで全体を通して学べるので、

将来PM（プロダクトマネージャー）やCTO、VPoE、フルスタックエンジニアになりたい方、

将来独立してフリーランスエンジニアとして活躍したい方に特にお勧めのコースです。

※ このコースは受講生のご意見・フィードバックを頂きながら順次アップデートして行きます。UdemyのQ＆A機能やDMでぜひ気軽にご意見を頂ければと思っています！ご質問の際は事前にエラーメッセージをGoogleで検索・Q&Aで過去に類似質問が無いか確認のご協力をお願いいたします！

このコースは8時間を超える巨大コースであり、一部難しい内容も含まれますが、

エンジニアリングを行う上で一生使えるスキルが一気に手に入るコースとなりますのでぜひ一緒に頑張って行きましょう！！

（ごく稀に悪気なくマウンティングされる方がいらっしゃいます。良い授業をお届けする為に、批判ではなく前向きなご意見をお願いします。前向きなご意見・ご要望により講師のモチベが上がり、授業の改善・アップデートをお届けしやすくなります。）

（無料プレビューを設けてますので講師との相性やレベル感に問題ないか事前確認いただけます！）

1. はじめに
2. イントロダクション
3. 本コースの学習ロードマップ
4. UdemyのQ&A機能の使い方
5. Udemy再生画質の設定方法
6. まずは自分好みのターミナルにセットアップしよう
7. ターミナルとは？
8. ターミナル背面色の変更方法
9. ターミナルでフォントとフォントサイズの変更方法
10. （補足動画）先にGitコマンドが使えるようにセットアップを行います
11. lsとcdコマンドを覚えよう
12. 隠しファイルやフォルダを表示するls -aコマンドも覚えよう
13. ターミナルで先にGitコマンドを使えるようにしよう
14. WindowsでGitコマンドが使えるようにする方法
15. Preztoを導入しよう①（リポジトリのクローンまで）
16. Preztoを導入しよう②（フォント色が変更されるまで）
17. ターミナルまとめ
18. Git環境の初期セットアップ
19. イントロダクション
20. Gitとは？
21. GitHubアカウントの作成手順
22. SSHとは？
23. GitHubにSSHアクセスできるようにする為にSSH鍵を作成しよう
24. GitHubにSSH公開鍵を登録する手順
25. SSHでの初回接続確認方法
26. GitKrakenのインストール手順
27. GitKrakenにSSH鍵とGitHubアカウントを紐付ける方法
28. Git初期セットアップまとめ
29. VSCodeの紹介とインストール方法
30. 次のセクションへ進まれる前に
31. MEANスタック開発環境（MongoDB, Express, Angular, Node.js）＋ Git続きセットアップ
32. 本編イントロダクション
33. 今回の開発システムの全体像
34. （補足説明）
35. PostmanのインストールとPostmanの役割について
36. Node.jsのインストール
37. （補足）Node.jsについて
38. Angularのインストール
39. Angularアプリの作成手順と実行方法
40. ソースコード編集手順とリビルド
41. GitHubに今回作成したWebアプリを登録する手順
42. GitHubへPushする方法
43. GitKrakenでPushする方法
44. （任意課題）復習課題
45. 本編（ヘッダーコンポーネント作成）
46. 新規WEBアプリ作成
47. GitHubリポジトリ（Repository）セットアップ
48. Bootstrapとは？
49. （補足）Bootstrapインストール後にデザインが適用されない場合
50. Bootstrapフレームワークのインストール
51. （補足）Bootstrapが適用されているかの確認方法
52. ヘッダーコンポーネントを作ろう①
53. アプリケーションレイアウト（ワイヤフレーム）設計を行う
54. ヘッダーコンポーネントを作ろう②
55. GithubにPushしよう
56. 本編（商品リストページ・商品詳細ページの作成しよう）
57. 商品リストページを作成しよう（コンポーネント作成）
58. 商品リストページを作成しよう（カードデザインの適用）
59. 商品リストページを作成しよう（レスポンシブ配置）
60. 商品リストページをSPA（Single page application）に対応させる方法
61. 商品詳細ページを作成しよう
62. （課題）*ngForを使ってソースコードを整えよう
63. スタイルシートとは？
64. スタイルシートでの調整方法とオリジナclassの定義方法
65. スタイルの適用優先順位について
66. コンポーネント（Component）毎にスタイルシートがある理由と、全体にスタイルを適用する方法
67. エクステンションを使ってVScodeをカスタマイズする方法
68. Module（モジュール）の役割について
69. ProductModuleの作成①
70. ProductModuleの作成②
71. ProductModuleの作成③
72. スタイルシートでリンクの色や下線を無効化する方法
73. 複数のファイル名をまとめて変更する方法
74. 補足説明
75. （課題）動的ページ作成しよう
76. （解答例）動的ページ作成しよう
77. 補足説明２（Windowsユーザーの方）
78. 商品詳細ページを作り込もう①
79. 商品詳細ページを作り込もう②
80. （課題）商品カード及び商品詳細ページのテキストを動的に対応させよう
81. （解答例）カード部分のテキストを動的に対応させよう①
82. （解答例）カード部分のテキストを動的に対応させよう②
83. （解答例）商品詳細ページのテキストを動的に対応させよう①
84. （解答例）商品詳細ページのテキストを動的に対応させよう②
85. 商品詳細ページにカバー写真を設定しよう
86. （おまけ）Base64とは？
87. 商品詳細ページのカバー写真を「動的」に読めるようにしよう
88. 商品リスティングカード側も画像を動的に読み込めるようにする
89. Git Commit and Push（コミット・プッシュ）
90. Git (Pull)プルリクエスト作成とマージ方法
91. 本編（Node.jsでサーバーサイドを開発しよう）
92. このセクションで行うこと概要
93. Nodeサーバー起動！
94. Endpoint（エンドポイント）の作成
95. Postmanでエンドポイントの動作チェックを行おう
96. MongoDBアカウント作成
97. MongoDBへ接続！
98. GitHubにアップされては困る情報を.gitignoreに追加する方法
99. Model（モデル）作成
100. MongoDBにサンプルデータを保存する方法
101. AwaitとAsyncはどんな時に必要となる？
102. DB（データベース）の初期化方法
103. Endpoint（エンドポイント）のroutingを分ける方法
104. Product Endpoint（エンドポイント）作成①
105. Product Endpoint（エンドポイント）作成②
106. Error handler（エラーハンドラ）の追加方法
107. （おまけ）Httpレスポンスステータスコードについて
108. GitHubにPull request（プルリクエスト）作成とMerge（マージ）
109. 本編（フロントエンドとバックエンドを結合しよう）
110. フロントエンドとバックエンドを結合しよう（イントロ）
111. 補足説明
112. Service（サービス）を使おう
113. 【RxJS】Observableとは？
114. Observableを使ったサンプルプログラムを作ってみよう
115. Observableでフロントエンドとバックエンドを繋ごう①
116. Observableでフロントエンドとバックエンドを繋ごう②
117. Observableのhttp通信でのcompleteタイミングについて
118. 商品詳細ページもMongoDBからデータ取得できるようにしよう
119. GitHubへPull request（プルリクエスト）作成とMerge（マージ）
120. Deploy（デプロイ）
121. Herokuとは？
122. Heroku側初期設定
123. プロジェクト側の環境設定を行う
124. （補足）Angular12をお使いの方
125. ローカル環境でプロダクションビルドを行う①
126. ローカル環境でプロダクションビルドを行う②
127. 実行スクリプトの設定方法
128. 本番DBと開発DBを分ける方法
129. 本番DBセットアップ
130. Deploy!（デプロイ！）
131. （補足）Herokuでビルドエラーが出てしまう場合
132. フロントエンドデザインを作り込もう
133. イントロダクション
134. ベースとなるデザインテーマの選定
135. ダウンロードしたテーマをローカル環境で動かす方法
136. デザインの全体像を把握する
137. スタイルシート（scss）を移植しよう
138. ヘッダーのhtmlを移植しよう
139. （課題）ヘッダーを赤色に変えてみよう
140. ヘッダーコンポーネントデザインの作り込みを行う①
141. (注意！) Angular12をインストールされている方へ
142. ヘッダーコンポーネントデザインの作り込みを行う②
143. カードデザインの作り込みを行う①
144. スタイルシートのVariablesについて
145. 商品リスティングページにカバー写真を設定する方法
146. ngStyleを使って商品詳細ページのカバー写真を作り込もう
147. 商品詳細ページのメインコンテンツ部分を作り込もう①
148. 商品詳細ページのメインコンテンツ部分を作り込もう②
149. 商品詳細ページのメインコンテンツ部分を作り込もう③
150. コミット＆プッシュ＆マージ
151. 最後に
152. 最後に
153. ボーナスレクチャー

世界中で4万人を超える受講生が既に学習したAnthony Alicea氏の人気コース（Learn and Understand AngularJS）が、完全日本語版として登場しました！

Angular2やReactなどが流行っていますが、まだまだAngularJSで作っていくアプリケーションや保守・運用していくアプリケーションはこの先も増えていきます！

AngularJSを習得することでWebページにフォームを作成し、その内容をチェックするなど、従来であれば大量のコードが必要であったものを簡単に行えるようになります。また、Directiveと呼ばれる仕組みを覚えることで、再利用可能なたくさんの部品を使いながらサービスを構築できるようになります！

この講義はAngularJSをコツコツ、ただし効率よく、スピーディーに仕組みとともに学べる講義です！実際にWeb上で天気予報アプリを作りながら必要なコーディングを学ぶことができます！講義の中で使ったコードも修正前、修正後共に提供しています！

このコースを受講することで

• AngularJSが解決してくれる問題を「生」のJavascriptやHtmlの観点から理解できるようになる
• AngularJSが「どのように」動いているか「生」のJavascriptやHtmlの観点から理解できるようになる

• AngularJS特有の仕組み、例えばDependency Injection、Service、Directive、Transclusionを理解し、使えるようになる
• そもそも「Dependency Injection」って？というところを理解できるようになる
• 自作Directiveを作って再利用可能な部品を作れるようになる
• SPA（シングルページアプリケーション）とは何か、また、どのように動作しているのか理解できるようになる

• AngularJSでSPAが作れるようになる

★！！！注意！！！★
AngularJSには1.x系と2.x系の2種類があります。これらは全くの別物で、このコースは1.x系をターゲットにしています。また、コース内では1.x系の基本部分を中心に説明しているため、AngularJSをすでに業務等で使いこなしていて、最新機能の説明が必要な方には適さない内容となっていることをご了承ください。
さらに、この講座の内容を習得するには基本的なJavascriptの知識が必要になりますので、Javascript自体が初めての方は先にほかのコースで基本部分だけ学習いただくことをお勧めします。

1. ようこそ！
2. はじめに
3. このコースで使うエディターについて
4. AngularJSにおけるBig Word
5. Model、View、ホワットエバー？？？
6. AngularJSが解決しようとしている問題
7. MVWパターン
8. HTMLのちょっと寄り道 - HTMLカスタム属性
9. Javascriptのちょっと寄り道 - グローバルネームスペース
10. サンプルソースコードのダウンロードについて
11. Module, App, そしてController
12. ServiceとDependency Injection (依存性の注入)
13. Javascriptのちょっと寄り道 - Dependency Injection (依存性の注入)
14. Scopeサービス
15. Javascriptのちょっと寄り道 - functionとstringを理解しよう
16. AngularがどのようにDependency Injectionをやっているか
17. 他のサービスも使ってみよう
18. 他のサービスも使ってみよう(その２)
19. Javascriptのちょっと寄り道 - ArrayとFunctionについて
20. Dependency InjectionとMinification
21. Data BindとDirective
22. Scopeとインターポレーション
23. Directiveと双方向Binding
24. イベントループ
25. $watchと$digestループ
26. $watchと$digestループその２
27. よく使われるDirective
28. よく使われるDirectiveその２
29. XMLHTTPRequest Object
30. 外部データと$http
31. シングルページアプリケーション
32. 複数のControllerとView
33. SPAとハッシュについて
34. Routing Template そしてController
35. Routing Template そしてControllerその２
36. サービスの自作
37. Javascriptのちょっと寄り道 - Singleton
38. Serviceを作ろう
39. Directiveの自作
40. HTMLのちょっと寄り道 - 再利用可能なComponent
41. JavascriptとAngularのちょっと寄り道 - 変数名と標準化
42. Directiveを作ろう
43. Templateについて
44. Scope(@, =, などの意味について)
45. Scope(@, =, などの意味について)その２
46. Scope(@, =, などの意味について)その３
47. Directiveをng-repeat
48. Compileを理解しよう
49. Linkを理解しよう
50. Transcludeを理解しよう
51. 天気予報SPAを作ろう！
52. 天気予報SPAを作ろう
53. 天気予報Serviceを作ろう
54. 「天気予報データを取得しよう」に関する注意
55. 天気予報データを取得しよう
56. 天気予報データを取得しようその２
57. 天気予報データを取得しようその３
58. 天気予報Directiveを作ろう
59. おまけ講義
60. ng-submitでUXを改善しよう
61. 大規模アプリを意識したServiceの改善
62. OpenWeatherMapのAPIを変更しよう
63. Controllerのネスト、読みやすいコード、そして'Controller as'について
64. Angular2に向けてのあれこれ
65. ES2015、TypeScript、そしてAngular2
66. まとめ
67. まとめ

こちらは「Angular」を初めて学ぶ方向けのコースです。

本コースは、2022年10月時点での最新バージョン「Angular14」に対応しています。

ある程度の業務経験やプログラミングの経験があるとなお良いですが、

細かい部分まで解説しますのでプログラミング初心者の方でも学べるようになっています。

本コースでは、通販サイトの商品管理システムを制作しながら、Angularを用いたシステム開発を学びます。

実際の開発業務に沿って、開発からテスト工程までを実施します。

詳細は以下の通りです。

1. 実際の業務にそった手順でhtml、cssをテンプレートに取り込むところからはじめて、TypeScriptやRxJS、Angular Materialを使い実際に画面を製造します

2. サインイン画面を含む６画面を作ります。画面数を多くこなすことで学習が定着しやすくなります

3. Webサービスは別途準備したSpring bootを使いRxJSを使って接続します

4. その他には、カスタムバリデーション、カスタムパイプ、カスタムディレクティブなどのテクニックを使います

5. 各画面の製造と同時にJasmine+Karmaを使ったUnitテストも追加します

6. 終盤のレクチャーではメディアクエリを使ったPCとスマホ両方に適したResponsive対応も行います

7. 最後にCypress+cypress-image-snapshotを使ってE2Eテストを行います

本コースは、プログラミング初心者の方でも理解して手を動かせるようになるため、非常に細かいところまで時間をかけて解説をするようにしています。

少し細かすぎるかな…？という解説もありますので、ご自身の理解に合わせて、倍速再生などを利用して、受講を進めてください。