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

＜コースの概要＞

現代のWeb開発技術を駆使して、実践的なECアプリケーションを作ってみませんか？

本コースでは、Spring Data JPA、PostgreSQL、Angularを使用したフルスタック開発の主要プロセスを学びます。

バックエンドでは、Springフレームワークを用いたREST APIの実装から、PostgreSQLデータベースとの連携まで。

フロントエンドでは、Angularを使って注文機能やページネーション対応の履歴表示を実装します。 さらに、PostmanによるAPI動作確認や主要機能の基本的なE2E確認まで行うことで、実際のプロジェクトに近い開発フローを体験できます。

Web開発の基礎を理解し、より実践的なスキルを身につけたい方に最適です。このコースを通じて現代のWeb開発に必要な技術とプロセスを学び、実践的なWeb開発スキルを磨きましょう！

＜他教材との違い＞

本コースと他教材（書籍やYoutube動画教材等）との違いは以下の通りです。

• 一貫した学習体験: １本完結型コースであり、ネット検索やマニュアル確認の手間を省きます。

• 詳細な解説: Spring Data JPA, PostgreSQL, Angular等の技術や手順を、なぜその手順を選ぶのか、その理由や背景を詳細に説明します。

• 柔軟な学習環境: 全レクチャー動画をダウンロード可能で、場所を問わずどこでも学習できます。

• 実践的なサポート: 全ハンズオンに完成版のコードを添付し、エラー解決をサポートします。

  
  

＜コースの内容＞

本コースの内容は以下の通りです。

コース概要

• フルスタックECアプリデモ

• 本コースで学べること

• 本コースの流れ

ハンズオン

• 開発編１ 準備① Supabaseプロジェクト作成

• 開発編２ 準備② メール通知設定（Gmail SMTP Server）

• 開発編３ 準備③ Angular プロジェクトセットアップ（Visual Studio Code）

• 開発編４ Spring 共通① テーブル作成（PostgreSQL）

• 開発編５ Spring 共通② プロジェクト雛型作成（IntelliJ）

• 開発編６ Spring 共通③ DB接続設定（Spring Data JPA, Hibernate, JDBC, PostgreSQL）

• 開発編７ Spring 共通④ CORS設定

• 開発編８ Spring 注文登録API①Data Access実装（Entity, Repository）

• 開発編９ Spring 注文登録API② Service実装

• 開発編１０ Spring 注文登録API③ Controller実装

• 開発編１１ Spring 注文登録API④ API動作確認（Postman）

• 開発編１２ Spring 注文履歴取得API①Data Access実装（Entity, Repository）

• 開発編１３ Spring 注文履歴取得API② Service実装（ページネーション対応）

• 開発編１４ Spring 注文履歴取得API③ Controller実装（ページネーション対応）

• 開発編１５ Spring 注文履歴取得API④ API動作確認（Postman）

• 開発編１６ Spring 会員ステータス計算API①Data Access実装（Entity, Repository）

• 開発編１７ Spring 会員ステータス計算API② Service実装

• 開発編１８ Spring 会員ステータス計算API③ Controller実装

• 開発編１９ Spring 会員ステータス計算API④ API動作確認（Postman）

• 開発編２０ Spring 会員ステータス取得API① Service実装

• 開発編２１ Spring 会員ステータス取得API② Controller実装

• 開発編２２ Spring 会員ステータス取得API③ API動作確認（Postman）

• 開発編２３ Angular 注文登録機能① Service実装

• 開発編２４ Angular 注文登録機能② Component実装

• 開発編２５ Angular 注文登録機能③ E2E（フロントエンド-バックエンド統合確認）

• 開発編２６ Angular 会員ステータス表示機能① Service実装

• 開発編２７ Angular 会員ステータス表示機能② Component実装

• 開発編２８ Angular 会員ステータス表示機能③ E2E（フロントエンド-バックエンド統合確認）

• 開発編２９ Angular 注文履歴表示機能① Service実装（ページネーション対応）

• 開発編３０ Angular 注文履歴表示機能② Component実装（ページネーション対応）

• 開発編３１ Angular 注文履歴表示機能③ E2E（フロントエンド-バックエンド統合確認）

＜前提環境＞

Git, NVM（Node Version Manager）,JDK（Java Development Kit） のインストール、インストール後のパス設定

＜本コース収録環境（ご参考）＞

Git 2.46.0

JDK 17

Spring Boot 3.3.4

PostgreSQL 15.6

NVM 1.1.12

Node.js 20.13.1

npm 10.5.2

TypeScript 5.4.5

Angular CLI 17.3.8

Angular 17.3.11

HTML 5

CSS 3

Bootstrap 5.3.3

Font Awesome 4.7.0

Postman 11.16.0

IntelliJ IDEA 2024.2.1

Visual Studio Code 1.94.1

Chrome 126

Windows 11

1. コース概要
2. フルスタックECアプリデモ
3. 本コースで学べること
4. 本コースの流れ
5. Spring & PostgreSQL & Angularハンズオン
6. 開発編１ 準備① Supabaseプロジェクト作成
7. 開発編２ 準備② メール通知設定（Gmail SMTP Server）
8. 開発編３ 準備③ Angular プロジェクトセットアップ（Visual Studio Code）
9. 次のレクチャーの添付資料、ECアプリアーキテクチャ全体像と今後の開発の進め方の補足
10. 開発編４ Spring 共通① テーブル作成（PostgreSQL）
11. 開発編５ Spring 共通② プロジェクト雛型作成（IntelliJ）
12. 開発編６ Spring 共通③ DB接続設定（Spring Data JPA, Hibernate, JDBC, PostgreSQL）
13. 開発編７ Spring 共通④ CORS設定
14. 開発編８ Spring 注文登録API①Data Access実装（Entity, Repository）
15. 開発編９ Spring 注文登録API② Service実装
16. 開発編１０ Spring 注文登録API③ Controller実装
17. 開発編１１ Spring 注文登録API④ API動作確認（Postman）
18. 開発編１２ Spring 注文履歴取得API①Data Access実装（Entity, Repository）
19. 開発編１３ Spring 注文履歴取得API② Service実装（ページネーション対応）
20. 開発編１４ Spring 注文履歴取得API③ Controller実装（ページネーション対応）
21. 開発編１５ Spring 注文履歴取得API④ API動作確認（Postman）
22. 開発編１６ Spring 会員ステータス計算API①Data Access実装（Entity, Repository）
23. 開発編１７ Spring 会員ステータス計算API② Service実装
24. 開発編１８ Spring 会員ステータス計算API③ Controller実装
25. 開発編１９ Spring 会員ステータス計算API④ API動作確認（Postman）
26. 開発編２０ Spring 会員ステータス取得API① Service実装
27. 開発編２１ Spring 会員ステータス取得API② Controller実装
28. 開発編２２ Spring 会員ステータス取得API③ API動作確認（Postman）
29. 開発編２３ Angular 注文登録機能① Service実装
30. 開発編２４ Angular 注文登録機能② Component実装
31. 開発編２５ Angular 注文登録機能③ E2E（フロントエンド-バックエンド統合確認）
32. 開発編２６ Angular 会員ステータス表示機能① Service実装
33. 開発編２７ Angular 会員ステータス表示機能② Component実装
34. 開発編２８ Angular 会員ステータス表示機能③ E2E（フロントエンド-バックエンド統合確認）
35. 開発編２９ Angular 注文履歴表示機能① Service実装（ページネーション対応）
36. 開発編３０ Angular 注文履歴表示機能② Component実装（ページネーション対応）
37. 開発編３１ Angular 注文履歴表示機能③ E2E（フロントエンド-バックエンド統合確認）
38. ボーナスレクチャー
39. ボーナスレクチャー

＜コースの概要＞

本コースでは、Angular, TypeScript, Node.jsを駆使して、実際の家電量販店ECアプリを開発するハンズオンを体験できます。Angularアーキテクチャの図解から始まり、HTML, CSS, Bootstrap, Font Awesomeを用いたレスポンシブデザインの構築、そしてTypeScriptによる動的な機能実装まで、フロントエンド開発の全プロセスを学びます。

具体的には、以下の機能を実装します：

[ 家電量販店ECアプリ実装機能の概要 ]

• 直感的な商品カテゴリナビゲーション

• 動的な商品リスト表示（画像、価格、レビュー評価、在庫状況）

• ユーザーフレンドリーなフィルタリング機能

• 多様なソート機能（価格順、レビュー評価順など）

• ショッピングカート機能と合計金額計算

これらの実践的な機能を通じて、モダンなECアプリの構築方法を楽しく学び、自信を持ってAngularを使ったWebアプリケーション開発に挑戦できるようになります。あなたのWeb開発スキルを次のレベルへ引き上げましょう！

＜他教材との違い＞

本コースと他教材（書籍やYoutube動画教材等）との違いは以下の通りです。

• 一貫した学習体験: １本完結型コースであり、ネット検索やマニュアル確認の手間を省きます。

• 詳細な解説: Angular, TypeScript, Node.jsの技術や手順を、なぜその手順を選ぶのか、その理由や背景を詳細に説明します。

• 柔軟な学習環境: 全レクチャー動画をダウンロード可能で、場所を問わずどこでも学習できます。

• 実践的なサポート: 全ハンズオンに完成版のコードを添付し、コーディングミスによる原因調査の手間を省きます。

  
  

＜コースの内容＞

本コースの内容は以下の通りです。

コース概要

• 家電量販店ECアプリデモ

• 本コース受講にあたって

• 自己紹介

• 本コースのねらい

概要編 ＆ ハンズオン

• 概要編１ Angular・TypeScript・Node.jsとは①

• 概要編２ Angular・TypeScript・Node.jsとは②

• 概要編３ Angularアーキテクチャ概要

• 開発編１ アプリケーション雛型作成

• 開発編２ パッケージインストール（Bootstrap, Font Awesome）

• 開発編３ ナビゲーションバー追加

• 開発編４ ホーム画面追加＆リダイレクト（Route設定, router-outletディレクティブ）

• 開発編５ 商品リスト表示① カテゴリ表示（*ngForディレクティブ, インターポレーション）

• 開発編６ 商品リスト表示② 画像表示（プロパティバインディング, @Inputデコレーター）

• 開発編７ 商品リスト表示③ 商品名・価格表示

• 開発編８ 商品リスト表示④ レビュー評価表示（三項演算子）

• 開発編９ 商品リスト表示⑤ カート追加・在庫切れボタン表示（*ngIfディレクティブ）

• 開発編１０ 商品リスト表示⑥ セール品表示

• 開発編１１ 商品リスト表示⑦ 新商品表示（mapメソッド）

• 開発編１２ フィルタリング① カテゴリフィルタリング（イベントハンドラ, イベントバインディング）

• 開発編１３ フィルタリング② 件数表示

• 開発編１４ ソート① 価格の安い順（sortメソッド, 比較関数）

• 開発編１５ ソート② 価格の高い順

• 開発編１６ ソート③ レビュー評価順

• 開発編１７ ショッピングカート① 商品追加前編（Subject, inject関数）

• 開発編１８ ショッピングカート② 商品追加後編（Subscription, unshiftメソッド, ngOnDestroyメソッド）

• 開発編１９ ショッピングカート③ 商品削除（spliceメソッド）

• 開発編２０ ショッピングカート④ 合計数量計算

• 開発編２１ ショッピングカート⑤ 合計価格計算（reduceメソッド）

ボーナスレクチャー

• ボーナスレクチャー

＜変更履歴＞

・2024/8/27: Q&A起因で「【重要】Angular環境設定に関するお知らせ」レクチャーを追加

1. コース概要
2. 家電量販店ECアプリデモ
3. 本コース受講にあたって
4. 自己紹介
5. 本コースのねらい
6. 概要編 ＆ ハンズオン
7. 概要編１ Angular・TypeScript・Node.jsとは①
8. 概要編２ Angular・TypeScript・Node.jsとは②
9. 次のレクチャーの添付資料についての補足
10. 概要編３ Angularアーキテクチャ概要
11. 【重要】Angular環境設定に関するお知らせ
12. 開発編１ アプリケーション雛型作成
13. 開発編２ パッケージインストール（Bootstrap, Font Awesome）
14. 開発編３ ナビゲーションバー追加
15. 開発編４ ホーム画面追加＆リダイレクト（Route設定, router-outletディレクティブ）
16. 開発編５ 商品リスト表示① カテゴリ表示（*ngForディレクティブ, インターポレーション）
17. 開発編６ 商品リスト表示② 画像表示（プロパティバインディング, @Inputデコレーター）
18. 開発編７ 商品リスト表示③ 商品名・価格表示
19. 開発編８ 商品リスト表示④ レビュー評価表示（三項演算子）
20. 開発編９ 商品リスト表示⑤ カート追加・在庫切れボタン表示（*ngIfディレクティブ）
21. 開発編１０ 商品リスト表示⑥ セール品表示
22. 開発編１１ 商品リスト表示⑦ 新商品表示（mapメソッド）
23. 開発編１２ フィルタリング① カテゴリフィルタリング（イベントハンドラ, イベントバインディング）
24. 開発編１３ フィルタリング② 件数表示
25. 開発編１４ ソート① 価格の安い順（sortメソッド, 比較関数）
26. 開発編１５ ソート② 価格の高い順
27. 開発編１６ ソート③ レビュー評価順
28. 開発編１７ ショッピングカート① 商品追加前編（Subject, inject関数）
29. 開発編１８ ショッピングカート② 商品追加後編（Subscription, unshiftメソッド, ngOnDestroyメソッド）
30. 開発編１９ ショッピングカート③ 商品削除（spliceメソッド）
31. 開発編２０ ショッピングカート④ 合計数量計算
32. 開発編２１ ショッピングカート⑤ 合計価格計算（reduceメソッド）
33. ボーナスレクチャー
34. ボーナスレクチャー

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. 【スキップOK】Udemy基本操作・Q&A機能の使い方
5. 学習の進め方と初期セットアップ
6. Angular公式ドキュメントのご紹介
7. StackBlitzとは？
8. StackBlitzのセットアップ方法
9. Angularでブラウザ上にコンテンツを表示しよう
10. Component（コンポーネント）とは？
11. 次の説明として正しいものはどれか？
12. HTML / CSSとは？
13. 次のうち正しいものはどれか
14. 動的なコンテンツを作ろう
15. {{ }}（ダブルカーリーブレイシス）とは？
16. 次の説明として正しいものはどれか？
17. {{ }}にテキストを入力する方法
18. （演習）静的コンテンツを動的コンテンツに変更しよう
19. オブジェクトとは？
20. オブジェクト形式で動的コンテンツを表示する方法
21. リファクタリングやForループ・配列・If文を学ぼう
22. リファクタリングとは？
23. コメント機能の使い方
24. Array（配列）とは？
25. letとconstの使い方
26. 次のうち正しいものはどれか？
27. 配列の説明として正しいものは次のどれか？
28. *ngForとは？
29. *ngIfとは？
30. TypeScriptの理解を深めよう
31. 別のソースコードをインポートする方法
32. 変数の「型(Type)」とは？
33. Interface（インターフェース）とは？
34. オブジェクトの説明として正しいものはどれか？
35. aタグで文字を整える方法
36. イベントバインディングでボタンを実装する方法
37. イベントバインディングとプロパティバインディング
38. Module（モジュール）とは？
39. Angularでコンポーネントを開発しよう
40. 新しいコンポーネントの作成方法
41. プロパティバインディングで値を渡す方法
42. イベントバインディングを受け取る方法
43. SPA（シングルページアプリケーション）を開発しよう
44. シングルページアプリケーション（SPA）とは？
45. hrefとrouterLinkの表示速度の違いを体感しよう
46. 次のうち正しいものはどれか？
47. 個別データを取得する方法
48. 最後に
49. 最後に
50. 次のコース案内

このコースは、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」です。それ以下のバージョンについてのサポートは行っておりませんのでご了承ください。

1. はじめに
2. はじめに
3. Macの学習内容を構築しよう
4. Windowsの学習内容を構築しよう
5. Visual Studio Codeの拡張機能をインストールしよう
6. 初めてのAngularアプリケーションを作成しよう
7. このセクションの内容
8. Angularとは？
9. Hello Worldを表示しよう
10. アプリケーションの構成ファイルを確認しよう
11. 表示内容を変更してみよう
12. TypeScriptに慣れよう
13. このセクションの内容
14. StackBlitz.comの紹介
15. TypeScriptとは？
16. 型を理解しよう
17. 文字列型・数値型・真偽値型
18. 配列型・オブジェクト型
19. any型・union型・undefined型・null型
20. 変数を理解しよう
21. 定数を理解しよう
22. テンプレート文字列
23. スプレッド演算子
24. 分割代入
25. 関数の基本を理解しよう
26. アロー関数を理解しよう
27. クラスを理解しよう
28. アクセス修飾子
29. アクセサメソッド
30. クラスの継承を理解しよう
31. インターフェイスを理解しよう
32. ジェネリックを理解しよう
33. 社員管理アプリケーションを作成しよう
34. このセクションの内容
35. Angular v11以降のng newコマンドの注意点
36. アプリケーション作成と準備
37. コンポーネントの作成
38. 社員データの構造を定義する
39. 社員データを編集可能にする
40. 社員データを一覧表示する
41. 社員リストを選択可能にする
42. コンポーネントを分割する
43. サービスを作成する
44. 外部データを取得する
45. データ取得を非同期処理に変更する
46. メッセージログを表示する
47. 社員を選択した際のメッセージログを表示する
48. ルーティングを設定する
49. ダッシュボードを追加する
50. 詳細ページへのリンクを設定する
51. 社員詳細データを取得する
52. HTTPクライアントの補足情報
53. HTTPクライアントの準備
54. HTTPクライアントで一覧データを取得する
55. HTTPクライアントのエラーハンドリング
56. 詳細データの取得と更新を実装する
57. 詳細データの追加機能を実装する
58. 詳細データの削除機能を実装する
59. データの検索機能を実装する
60. 検索コンポーネントの解説
61. 付録：ライフサイクルメソッドについて
62. RxJSを理解しよう
63. このセクションの内容
64. RxJSとは？
65. デモアプリをセットアップする
66. RxJSのオペレータ1
67. RxJSのオペレータ2
68. RxJSのオペレータ3
69. Subjectについて
70. Angular CLIを使いこなそう
71. Angular CLIとは？
72. ng new
73. ng generate
74. ng serve
75. ng build
76. チャットアプリケーションを作成しよう
77. このセクションの内容
78. アプリケーションの開発準備
79. チャットアプリ画面の作成
80. タイムラインを表示する
81. クラスでデータを作成する
82. チャットを投稿できるようにする
83. Pipeで日付を整形する
84. カスタムパイプを定義する
85. firebase-toolsライブラリの補足情報
86. Firebaseの初期設定
87. FirebaseとAngularを連携する
88. FirebaseをAngularアプリで利用する
89. チャットを投稿してデータベースに保存する
90. Commentクラスを作成する
91. チャットの編集UIを用意する
92. チャットの編集と削除を実装する
93. チャットコンポーネントを分割する
94. NgModuleによるモジュール分割
95. 共通モジュールとコアモジュール
96. ヘッダーを作成する
97. ルーティングを設定する
98. Firebase Authenticationの設定を行う
99. ユーザー登録を実装する
100. メールアドレスの確認メールを送信する
101. ログイン画面を作成する
102. ログイン・ログアウトを実装する
103. usersモジュールを作成する
104. ユーザーデータの登録
105. チャットデータにユーザーを紐付ける
106. Guardでページアクセスを制御する
107. ログインに応じてトップページの表示を切り替える
108. Timelineモジュールを作成する
109. ユーザー一覧を表示する
110. ユーザーページを作成する
111. アプリケーションを公開する
112. 終わりに
113. 関連ライブラリの紹介
114. 終わりに

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