【動画で学習】UdemyのAngular 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのAngular講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのAngular講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるAngularの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
(4.4)
総評価数 615件
2
(4)
総評価数 178件
3
(4.8)
総評価数 47件
4
【世界で4万人が受講】 実践!AngularJS講座
発売日 2016/03/01
受講者 1,857人
通常 18,000円
新規 1,610円
(4.4)
総評価数 272件
5
(4.5)
総評価数 6件
6
(3.5)
総評価数 3件
 

UdemyのAngular 人気・おすすめの3講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション(SPA)開発

【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション(SPA)開発
発売日 2017/10/06
(4.4)

21.5 total hours
人気のJavaScriptフレームワークAngularの基礎を学び、TypeScriptやRxJSなどの関連技術の基礎、シングルページアプリケーションの開発手法、Firebaseでアプリケーションを構築する方法を習得しよう!

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

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

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

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


【更新情報】

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



↓全て表示↑少なく表示
 
Users Voice
とても分かりやすい。 まだAngularは始めたばかりでまだわからないところもたくさんあるのですが、詳しく説明されているので、何度も見返して勉強しています。 まだまだつまづきながらですが、これからも基本に立ち返りながら頑張ります。 ありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • Macの学習内容を構築しよう
    • Windowsの学習内容を構築しよう
    • Visual Studio Codeの拡張機能をインストールしよう
  2. 初めてのAngularアプリケーションを作成しよう
    • このセクションの内容
    • Angularとは?
    • Hello Worldを表示しよう
    • アプリケーションの構成ファイルを確認しよう
    • 表示内容を変更してみよう
  3. TypeScriptに慣れよう
    • このセクションの内容
    • StackBlitz.comの紹介
    • TypeScriptとは?
    • 型を理解しよう
    • 文字列型・数値型・真偽値型
    • 配列型・オブジェクト型
    • any型・union型・undefined型・null型
    • 変数を理解しよう
    • 定数を理解しよう
    • テンプレート文字列
    • スプレッド演算子
    • 分割代入
    • 関数の基本を理解しよう
    • アロー関数を理解しよう
    • クラスを理解しよう
    • アクセス修飾子
    • アクセサメソッド
    • クラスの継承を理解しよう
    • インターフェイスを理解しよう
    • ジェネリックを理解しよう
  4. 社員管理アプリケーションを作成しよう
    • このセクションの内容
    • アプリケーション作成と準備
    • コンポーネントの作成
    • 社員データの構造を定義する
    • 社員データを編集可能にする
    • 社員データを一覧表示する
    • 社員リストを選択可能にする
    • コンポーネントを分割する
    • サービスを作成する
    • 外部データを取得する
    • データ取得を非同期処理に変更する
    • メッセージログを表示する
    • 社員を選択した際のメッセージログを表示する
    • ルーティングを設定する
    • ダッシュボードを追加する
    • 詳細ページへのリンクを設定する
    • 社員詳細データを取得する
    • HTTPクライアントの準備
    • HTTPクライアントで一覧データを取得する
    • HTTPクライアントのエラーハンドリング
    • 詳細データの取得と更新を実装する
    • 詳細データの追加機能を実装する
    • 詳細データの削除機能を実装する
    • データの検索機能を実装する
    • 検索コンポーネントの解説
    • 付録:ライフサイクルメソッドについて
  5. RxJSを理解しよう
    • このセクションの内容
    • RxJSとは?
    • デモアプリをセットアップする
    • RxJSのオペレータ1
    • RxJSのオペレータ2
    • RxJSのオペレータ3
    • Subjectについて
  6. Angular CLIを使いこなそう
    • Angular CLIとは?
    • ng new
    • ng generate
    • ng serve
    • ng build
  7. チャットアプリケーションを作成しよう
    • このセクションの内容
    • アプリケーションの開発準備
    • チャットアプリ画面の作成
    • タイムラインを表示する
    • クラスでデータを作成する
    • チャットを投稿できるようにする
    • Pipeで日付を整形する
    • カスタムパイプを定義する
    • Firebaseの初期設定
    • FirebaseとAngularを連携する
    • FirebaseをAngularアプリで利用する
    • チャットを投稿してデータベースに保存する
    • Commentクラスを作成する
    • チャットの編集UIを用意する
    • チャットの編集と削除を実装する
    • チャットコンポーネントを分割する
    • NgModuleによるモジュール分割
    • 共通モジュールとコアモジュール
    • ヘッダーを作成する
    • ルーティングを設定する
    • Firebase Authenticationの設定を行う
    • ユーザー登録を実装する
    • メールアドレスの確認メールを送信する
    • ログイン画面を作成する
    • ログイン・ログアウトを実装する
    • usersモジュールを作成する
    • ユーザーデータの登録
    • チャットデータにユーザーを紐付ける
    • Guardでページアクセスを制御する
    • ログインに応じてトップページの表示を切り替える
    • Timelineモジュールを作成する
    • ユーザー一覧を表示する
    • ユーザーページを作成する
    • アプリケーションを公開する
  8. 終わりに
    • 関連ライブラリの紹介
    • 終わりに
  9. (旧レクチャー)はじめに
    • (旧レクチャー)はじめに
    • (旧レクチャー)Angularとは?
    • (旧レクチャー)Macの学習環境を構築しよう
    • (旧レクチャー)Windowsの学習環境を構築しよう
    • (旧レクチャー)Visual Studio Codeの拡張機能
  10. (旧レクチャー)TypeScriptに慣れよう
    • (旧レクチャー)このセクションの内容
    • (旧レクチャー)型を理解しよう
    • (旧レクチャー)変数と定数を理解しよう
    • (旧レクチャー)型キャストとテンプレート文字列
    • (旧レクチャー)関数を理解しよう
    • (旧レクチャー)クラスを理解しよう
    • (旧レクチャー)クラスの継承を理解しよう
    • (旧レクチャー)ジェネリックを理解しよう
    • (旧レクチャー)インターフェイスを理解しよう
  11. (旧レクチャー)社員管理アプリケーションを作成しよう
    • (旧レクチャー)このセクションの内容
    • (旧レクチャー)値をテンプレートに反映する
    • (旧レクチャー)データを変更できるようにする
    • (旧レクチャー)社員データを一覧表示する
    • (旧レクチャー)社員リストを選択可能にする
    • (旧レクチャー)コンポーネントを分割する
    • (旧レクチャー)外部データを取得する
    • (旧レクチャー)コンポーネントのライフサイクルを理解する
    • (旧レクチャー)ルーティングを設定する
    • (旧レクチャー)ダッシュボードを追加する
    • (旧レクチャー)ルーティングに応じたリンクを設定する
    • (旧レクチャー)リファクタリングとスタイルを調整する
    • (旧レクチャー)HTTPクライアントでデータを取得する
    • (旧レクチャー)データの追加と削除を実装する
    • (旧レクチャー)データの検索機能を実装する
    • (旧レクチャー)Angular v5のHTTPクライアントの注意点
  12. (旧レクチャー)RxJSを理解しよう
    • (旧レクチャー)このセクションについて
    • (旧レクチャー)RxJSとは?
    • (旧レクチャー)RxJSのオペレータ1
    • (旧レクチャー)RxJSのオペレータ2
    • (旧レクチャー)RxJSのオペレータ3
    • (旧レクチャー)Subjectについて
  13. (旧レクチャー)Angular CLIを使いこなそう
    • (旧レクチャー)Angular CLIとは?
    • (旧レクチャー)各コマンドを理解する
  14. (旧レクチャー)チャットアプリケーションを作成しよう
    • (旧レクチャー)このセクションの内容
    • (旧レクチャー)本セクションのBootstrapバージョンについて
    • (旧レクチャー)アプリケーションの開発準備
    • (旧レクチャー)チャットアプリ画面の作成
    • (旧レクチャー)タイムラインを表示する
    • (旧レクチャー)クラスでデータを作成する
    • (旧レクチャー)チャットを投稿できるようにする
    • (旧レクチャー)次のレクチャー「Pipeで日付を整形する」についての注意点
    • (旧レクチャー)Pipeで日付を整形する
    • (旧レクチャー)Firebaseの初期設定
    • (旧レクチャー)FirebaseとAngularを連携する
    • (旧レクチャー)チャットを投稿してデータベースに保存する
    • (旧レクチャー)チャットの編集・削除を実装する
    • (旧レクチャー)アプリケーション構成を見直す
    • (旧レクチャー)ルーティングを設定する
    • (旧レクチャー)ユーザーを作成する
    • (旧レクチャー)ログイン・ログアウトを実装する
    • (旧レクチャー)usersモジュールを作成する
    • (旧レクチャー)ユーザーデータの登録
    • (旧レクチャー)チャットデータにユーザーを紐付ける
    • (旧レクチャー)Guardでページアクセスを制御する
    • (旧レクチャー)ログインに応じてトップページの表示を切り替える
    • (旧レクチャー)Timelineモジュールを作成する
    • (旧レクチャー)ユーザー一覧を表示する
    • (旧レクチャー)ユーザーページを作成する
    • (旧レクチャー)アプリケーションを公開する
    • (旧レクチャー)Firebaseにサイトをデプロイしても表示されない場合
  15. (旧レクチャー)終わりに
    • (旧レクチャー)関連ライブラリの紹介
    • (旧レクチャー)終わりに
    

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

【Angular11とNode.jsで始める】JavaScript系 WEBアプリケーション開発コンプリートガイド①
発売日 2019/03/17
(4)

10 total hours
Gitの基本的な使い方からSPA・フロントエンド〜バックエンド開発を一気に学べる!さらに最先端のNoSQLによるDB構築方法、HerokuによるWEBサーバー構築&デプロイ手法を学び、WEBエンジニアリングで必要な知識を身につけよう!

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

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


これから新しく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時間を超える巨大コースであり、一部難しい内容も含まれますが、

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



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

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


↓全て表示↑少なく表示
 
Users Voice
こちらのコースでは、よくあるシステムの全体像を網羅的に学べますし、コンテンツは非常に学びが深いもので、大変ためになるものでした。ありがとうございます。 ただ、少しコースの方針にブレがあるような気がしており、その点、気になりました。 初心者向け/入門ということで、一部はかなりご丁寧に解説いただいているのですが、記述するコードの意図や、仕様の部分をある程度説明しなければ、初心者は理解に苦しむのでは?とも感じました。 不明な点は、調べる・QA で質問するなど、自己解決することの大切さについてはとても共感しているのですが、分からないことが分からない状態に陥った場合 (私はそうでした...)、学習スピードが一気に落ちるような気がします。 ともかく、全体的に素晴らしいコースでしたので、今後のコンテンツにも期待しております。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • イントロダクション
    • 本コースの学習ロードマップ
    • UdemyのQ&A機能の使い方
    • Udemy再生画質の設定方法
  2. まずは自分好みのターミナルにセットアップしよう
    • ターミナルとは?
    • ターミナル背面色の変更方法
    • ターミナルでフォントとフォントサイズの変更方法
    • (補足動画)先にGitコマンドが使えるようにセットアップを行います
    • lsとcdコマンドを覚えよう
    • 隠しファイルやフォルダを表示するls -aコマンドも覚えよう
    • ターミナルで先にGitコマンドを使えるようにしよう
    • WindowsでGitコマンドが使えるようにする方法
    • Preztoを導入しよう①(リポジトリのクローンまで)
    • Preztoを導入しよう②(フォント色が変更されるまで)
    • ターミナルまとめ
  3. Git環境の初期セットアップ
    • イントロダクション
    • Gitとは?
    • GitHubアカウントの作成手順
    • SSHとは?
    • GitHubにSSHアクセスできるようにする為にSSH鍵を作成しよう
    • GitHubにSSH公開鍵を登録する手順
    • SSHでの初回接続確認方法
    • GitKrakenのインストール手順
    • GitKrakenにSSH鍵とGitHubアカウントを紐付ける方法
    • Git初期セットアップまとめ
  4. VSCodeの初期セットアップ
    • VSCodeの紹介とインストール方法
  5. [Angular入門] 簡単なアプリケーションを作ろう
    • Angular入門イントロ
    • Angularとは?
    • Angular公式サイト&ドキュメントの紹介
    • StackBlitzとは?
    • 外部にWebアプリを公開する方法など
    • StackBlitzでプロジェクト名を変更する方法
    • HTMLタグとは?
    • CSS(スタイルシート)とは?
    • TypeScriptとAngularのファイル構成について
    • Module(モジュール)とは?
    • {{ }}(ダブルカーリーブレイシス)とは?
    • letとconstの使い方
    • TypeScript上で関数を定義しよう
    • コンストラクタとは?
    • 関数のreturnとは?
    • ボタンに連動して関数を走らせるには?
    • SPA(シングル・ページ・アプリケーション)とは?
    • hrefとrouterLinkについて
  6. [Angular入門] 動的ページを開発しよう
    • セクションイントロ
    • Array(配列)とは?
    • *ngForとは?
    • JSONオブジェクトとは?
    • インポートしたJSONオブジェクトを使うには?
    • プロパティバインディング&イベントバインディングとは?
    • プロパティバインディングを使ってみよう
    • *ngIfとは?
    • (演習)イベントバインディングを使ってみよう
    • (補足説明)タグの順番について
    • (コラム)エラーについて
    • Type(型)とは?
    • Model(モデル)とは?
  7. [Angular入門] コンポーネントを開発しよう
    • セクションイントロ
    • 新規コンポーネントの作成方法①
    • 新規コンポーネントの作成方法②
    • 新規作成したコンポーネントの配置方法と構造化するメリットについて
    • (応用編)作ったComponentにプロパティデータを渡す方法
    • (応用編)作ったComponentからEventを受け取る方法
    • (応用編)子コンポーネントを作るメリットについて
    • (任意課題)今までの授業で得た知識を元に、残りのAngular公式チュートリアルにもチャレンジしよう
    • 次のセクションへ進まれる前に
  8. MEAN開発環境(MongoDB, Express, Angular, Node.js)+ Git続きセットアップ
    • 本編イントロダクション
    • 今回の開発システムの全体像
    • (補足説明)
    • PostmanのインストールとPostmanの役割について
    • Node.jsのインストール
    • Angularのインストール
    • Angularアプリの作成手順と実行方法
    • ソースコード編集手順とリビルド
    • GitHubに今回作成したWebアプリを登録する手順
    • GitHubへPushする方法
    • GitKrakenでPushする方法
    • (任意課題)復習課題
  9. 本編(ヘッダーコンポーネント作成)
    • 新規WEBアプリ(Workspace)作成
    • GitHubリポジトリ(Repository)セットアップ
    • Bootstrapとは?
    • Bootstrapフレームワークのインストール
    • (補足)Bootstrapインストール後にデザインが適用されない場合
    • ヘッダーコンポーネントを作ろう①
    • アプリケーションレイアウト(ワイヤフレーム)設計を行う
    • ヘッダーコンポーネントを作ろう②
    • GithubにPushしよう
  10. 本編(商品リストページ・商品詳細ページの作成しよう)
    • 商品リストページを作成しよう(コンポーネント作成)
    • 商品リストページを作成しよう(カードデザインの適用)
    • 商品リストページを作成しよう(レスポンシブ配置)
    • 商品リストページをSPA(Single page application)に対応させる方法
    • 商品詳細ページを作成しよう
    • (課題)*ngForを使ってソースコードを整えよう
    • スタイルシートとは?
    • スタイルシートでの調整方法とオリジナclassの定義方法
    • スタイルの適用優先順位について
    • コンポーネント(Component)毎にスタイルシートがある理由と、全体にスタイルを適用する方法
    • エクステンションを使ってVScodeをカスタマイズする方法
    • Module(モジュール)の役割について
    • ProductModuleの作成①
    • ProductModuleの作成②
    • ProductModuleの作成③
    • スタイルシートでリンクの色や下線を無効化する方法
    • 複数のファイル名をまとめて変更する方法
    • (課題)動的ページ作成しよう
    • (解答例)動的ページ作成しよう
    • 商品詳細ページを作り込もう①
    • 商品詳細ページを作り込もう②
    • (課題)商品カード及び商品詳細ページのテキストを動的に対応させよう
    • (解答例)カード部分のテキストを動的に対応させよう①
    • (解答例)カード部分のテキストを動的に対応させよう②
    • (解答例)商品詳細ページのテキストを動的に対応させよう①
    • (解答例)商品詳細ページのテキストを動的に対応させよう②
    • 商品詳細ページにカバー写真を設定しよう
    • (おまけ)Base64とは?
    • 商品詳細ページのカバー写真を「動的」に読めるようにしよう
    • 商品リスティングカード側も画像を動的に読み込めるようにする
    • Git Commit and Push(コミット・プッシュ)
    • Git (Pull)プルリクエスト作成とマージ方法
  11. 本編(Node.jsでサーバーサイドを開発しよう)
    • このセクションで行うこと概要
    • Nodeサーバー起動!
    • Endpoint(エンドポイント)の作成
    • Postmanでエンドポイントの動作チェックを行おう
    • MongoDBアカウント作成
    • MongoDBへ接続!
    • GitHubにアップされては困る情報を.gitignoreに追加する方法
    • Model(モデル)作成
    • MongoDBにサンプルデータを保存する方法
    • AwaitとAsyncはどんな時に必要となる?
    • DB(データベース)の初期化方法
    • Endpoint(エンドポイント)のroutingを分ける方法
    • Product Endpoint(エンドポイント)作成①
    • Product Endpoint(エンドポイント)作成②
    • Error handler(エラーハンドラ)の追加方法
    • (おまけ)Httpレスポンスステータスコードについて
    • GitHubにPull request(プルリクエスト)作成とMerge(マージ)
  12. 本編(フロントエンドとバックエンドを結合しよう)
    • フロントエンドとバックエンドを結合しよう(イントロ)
    • Service(サービス)を使おう
    • 【RxJS】Observableとは?
    • Observableを使ったサンプルプログラムを作ってみよう
    • Observableでフロントエンドとバックエンドを繋ごう①
    • Observableでフロントエンドとバックエンドを繋ごう②
    • Observableのhttp通信でのcompleteタイミングについて
    • 商品詳細ページもMongoDBからデータ取得できるようにしよう
    • GitHubへPull request(プルリクエスト)作成とMerge(マージ)
  13. Deploy(デプロイ)
    • Herokuとは?
    • Heroku側初期設定
    • プロジェクト側の環境設定を行う
    • ローカル環境でプロダクションビルドを行う①
    • ローカル環境でプロダクションビルドを行う②
    • 実行スクリプトの設定方法
    • 本番DBと開発DBを分ける方法
    • 本番DBセットアップ
    • Deploy!(デプロイ!)
    • (補足)Herokuでビルドエラーが出てしまう場合
  14. フロントエンドデザインを作り込もう
    • イントロダクション
    • ベースとなるデザインテーマの選定
    • ダウンロードしたテーマをローカル環境で動かす方法
    • デザインの全体像を把握する
    • スタイルシート(scss)を移植しよう
    • ヘッダーのhtmlを移植しよう
    • (課題)ヘッダーを赤色に変えてみよう
    • ヘッダーコンポーネントデザインの作り込みを行う①
    • (注意!) Angular11をインストールされている方へ
    • ヘッダーコンポーネントデザインの作り込みを行う②
    • カードデザインの作り込みを行う①
    • スタイルシートのVariablesについて
    • 商品リスティングページにカバー写真を設定する方法
    • ngStyleを使って商品詳細ページのカバー写真を作り込もう
    • 商品詳細ページのメインコンテンツ部分を作り込もう①
    • 商品詳細ページのメインコンテンツ部分を作り込もう②
    • 商品詳細ページのメインコンテンツ部分を作り込もう③
    • コミット&プッシュ&マージ
  15. 最後に
    • 最後に
    

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

続【Angular11とNode.jsで始める】JavaScript系WEBアプリケーション開発コンプリートガイド②
発売日 2019/12/26
(4.8)

4 total hours
ngFormの使い方から入力データをNoSQLデータベース(MongoDB)へ保存、ログイン時にJWTトークン発行など本番稼働を想定た本格Webアプリ開発のノウハウを一通り学べる!フローチャート設計からデバッグ手法も合わせて一気に学ぼう!

前作【Angular9とNodejsで始める!】JavaScript系 WEBアプリケーション開発コンプリートガイド①待望の続編!!


前作で構築した基盤Webアプリケーションをより実用レベルに機能強化すべく、

本コースで新たに、

  • 新規会員登録フォームフロントエンドデザイン

  • ログインフォームフロントエンドデザイン

  • Angularフォーム(ngForm)の実装

  • bcryptによるユーザーパスワードのハッシュ化の方法

  • バックエンド側でフォームデータの受け取り

  • バックエンド側で会員情報のMongoDB(NoSQLデータベース)登録

  • バックエンド側で会員情報照会・認証

  • JWT(JSON Web Token)発行

  • ログインユーザー限定閲覧可能ページの実装

  • 本番環境(Heroku)へデプロイ


といった盛りだくさんの内容で授業を行っていきます。

前作本作セットでご受講いただくことで、大抵のWebアプリの開発を悠々とこなせるプロエンジニアとして必要な基本知識が一式手に入ります。

(※本作は前作のコースをご受講頂いている方を対象とした続編コースとなります。)


前作と本作のコースを通じて、フロントエンド〜バックエンド開発まで全体を通して学べるので、

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

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


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

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


※ このコースは受講生のご意見・フィードバックを頂きながら順次アップデートして行きます。UdemyのQ&A機能やDMでぜひ気軽にご意見を頂ければと思っています!


「ガチめ」な本格コースという事もあり、一部難しい内容も含まれますが、

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



↓全て表示↑少なく表示
 
Users Voice
実践的な、深い内容を教えていただき、Webアプリを個人で学習し始めている立場としては、大変参考になりました。特に良かったと感じた点は、bcryptやAuthGuard等セキュリティ面の実装、ライブラリの使い方をサイト情報をまず紹介してから実装していく点、動画内で問題が起きた場合にデバッグしていく点などが今後のために大変参考になりました。逆に少し改善していただきたい点は、1つのファイルを説明する場合には問題ないのですが、例えば〇〇.module.ts等を階層を潰して作る場合、複数ファイルを切り替えながら実装していくのですが、ここが、これがの説明が多く、どのファイルの、どの部分かが、ハンズオン形式ではわかりにくいので、イライラ感じる部分もありました。もう少し、〇〇ファイルの、〇〇記述部分のとゆっくりした説明があれば、動画を繰り返す回数が減ると思います。またGitHUBへのPushの際やまとめ資料等で、セクション内容を復習も兼ねて振り返り説明あれば頭が整理されるので良いと思います。 今後の希望としては、画像ファイルをサーバー側に保存し使ったり、C#やpython等の既存アプリをサーバー側実装する方法等の講座が希望です。 今回のセキュリティ内容でWebアプリとして本番リリースできるレベルなのか、それともさらなるセキュリティ面の実装が必要なのか、まだよくわからないので、一般的な情報として教えていただければ幸いです。大変貴重な講座ありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • イントロダクション
    • Udemyご視聴における注意事項
  2. ログイン&新規会員登録画面をデザインしよう
    • ログイン及び新規登録用コンポーネントを移植しよう
    • 移植したコンポーネントとURLを紐付ける方法
    • FontAwesomeによるアイコンを読み込めるようにしよう
    • (演習課題)新規会員登録(Register)コンポーネントもURLと紐付けしよう
    • ログイン・新規会員登録コンポーネントをモジュール化しよう①
    • ログイン・新規会員登録コンポーネントをモジュール化しよう②
    • ログイン・新規会員登録コンポーネントをモジュール化しよう③
    • 細かな作り込みとCommit(コミット)まで
  3. ログイン&新規会員登録(バックエンド側)
    • Userモデルを作ろう
    • User routes(エンドポイント)を作ろう
    • Body parserを使おう
    • VSCodeでNodeサーバーをデバックしよう①
    • VSCodeでNodeサーバーをデバックしよう②
    • 要件定義をしてみよう①(ワイヤフレーム 編)
    • 要件定義をしてみよう②(フローチャート編 )
    • フローチャートに従って実装しよう
    • エラーハンドラを実装しよう
    • VSCodeでのデバッガの走らせかた補足
    • エラーハンドラの動きを検証しよう
    • MongoDBに正しく保存されているかを確認しよう
    • bcryptを使おう①(ハッシュ化が必要な理由)
    • bcryptを使おう②(Dictionary attackとは?)
    • bcryptを使おう③(パスワードをハッシュ化しよう)
    • JWT ( Json Web Token ) とは?
    • Login(ログイン)を実装しよう(フローチャート設計)
    • Login(ログイン)を実装しよう①(コーディング(実装))
    • Login(ログイン)を実装しよう②(パスワードチェック関数(メソッド))
    • Login(ログイン)を実装しよう③(JWTトークン発行))
    • ログインのエラーハンドラ動作検証
    • JWTのセキュリティキーについて補足
  4. ログイン&新規会員登録(フロントエンド側と結合)
    • フロントとの結合イントロ
    • フロントエンドとの結合イントロダクション
    • Angularでのフォーム入力の実装方法について
    • ngFormで値を取得しよう
    • (課題)パスワード入力部分をngFormに対応させよう
    • パスワード入力欄の表示を保護しよう
    • フォーム欄を入力必須にする方法
    • Eメールアドレス入力にパターン認証を追加しよう
    • InjectableでバックエンドにPOSTできるようにしよう①
    • InjectableバックエンドにPOSTできるようにしよう②
    • (補足説明)フロントエンド側でパスワード入力文字数制限をかける方法
    • フロント側にエラーテロップを追加しよう
    • フロントエンド側動作チェックとエラー文言について
    • 会員登録完了後にログインページに自動遷移するようにしよう
    • ログインフォーム側もJson形式で値を取れるようにしよう
    • ログインフォームもフロントエンドからバックエンド通信できるようにしよう
    • ログイン後に商品リスティングページに遷移させよう
    • Push前に必ずbuild(ビルド)を行おう
    • GitHubへPushとHerokuへの自動デプロイ確認
    • 本番環境で動作検証しよう
  5. AuthGuard(認証ガード)実装
    • AuthGuardイントロダクション
    • 要件定義をしてみよう②(フローチャート編 )
    • ローカルストレージにメタデータで保存できるようにしよう
    • デコードしたJWTをフロント(Angular)側で保持できるようにしよう
    • ログイン時のヘッダーメニューを変えよう①
    • ログイン時のヘッダーメニューを変えよう②
    • ミドルウェア(Middleware)とは?
    • Authミドルウェアを作ろう(フローチャート設計)
    • Authミドルウェアを実装しよう①
    • Authミドルウェアを実装しよう②
    • Authミドルウェアのエラーハンドラ実装
    • Authミドルウェアの動作検証①
    • Authミドルウェアの動作検証②
    • (コラム)AuthGuardとAuthMiddlewareの役割の違い
    • AuthGuardを実装しよう
    • AuthGuard完成!
    • TokenInterceptorを作ろう①
    • TokenInterceptorを作ろう②
    • プロダクションビルドとGitHubへPUSH
    • ソースの微修正及び、本番環境での動作確認!
  6. 最後に
    • 最後に
        

関連:Angularを本でも学ぼう

UdemyのAngular講座は上述したとおり、Angularの基礎的な使い方からWebアプリ開発実用まで、幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

Angularの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました