|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/angular-typescript-nodejsecweb1/
课程评论：没有评论
## 【2024年最新版】Angular & TypeScriptで作る！家電量販店ECアプリ開発実践講座 - 講座概要 本講座は、Angular, TypeScript, Node.jsを駆使して、家電量販店ECアプリをゼロから開発する実践的なハンズオン講座です。Angularのアーキテクチャ解説から始まり、HTML, CSS, Bootstrap, Font Awesomeを用いたレスポンシブデザインの構築、そしてTypeScriptによる動的な機能実装まで、フロントエンド開発の全プロセスを網羅します。 **講座で実装する主な機能:** * 直感的な商品カテゴリナビゲーション * 動的な商品リスト表示（画像、価格、レビュー評価、在庫状況） * ユーザーフレンドリーなフィルタリング機能 * 多様なソート機能（価格順、レビュー評価順など） * ショッピングカート機能と合計金額計算 **本講座の特長:** * **一貫した学習体験:** ネット検索やマニュアル確認の手間を省く、1本完結型のコースです。 * **詳細な解説:** 各技術や手順の「なぜ」を深く掘り下げ、理由と背景を丁寧に説明します。 * **柔軟な学習環境:** 全レクチャー動画をダウンロード可能で、場所を選ばずに学習できます。 * **実践的なサポート:** 全ハンズオンに完成版コードを添付。コーディングミスの原因調査の手間を省きます。 **本講座で学べること:** * Angular, TypeScript, Node.jsの基礎知識 * Angularアーキテクチャの理解 * HTML, CSS, Bootstrap, Font Awesomeによるレスポンシブデザイン * TypeScriptを用いた動的な機能実装 * ECサイトに必要不可欠な各機能の開発 この実践的な講座を通じて、モダンなECアプリの構築方法を習得し、Angularを使ったWebアプリケーション開発のスキルを次のレベルへ引き上げましょう。
＜コースの概要＞本コースでは、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環境設定に関するお知らせ」レクチャーを追加
