Angular & TypeScriptで作る！家電量販店ECアプリ開発実践講座

＜コースの概要＞

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