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

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アプリケーション開発の手法やデプロイを学んでいける大切な知識やノウハウを解説しているコースがございますのでそちらでも一緒に学んでいきましょう。

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

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

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

＜コースの概要＞

本コースでは、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環境設定に関するお知らせ」レクチャーを追加