WEBエンジニアコース

EC サイト・タスク管理・AI チャット・BI ダッシュボードの4本を、設計から実装まで自分の手で作り切る教材です。Figma と動くデモ、実装 FAQ が付きます。

49,800円税込・買い切り
72章
本文
約165万字
コード例
1569本
目安の学習時間
約262時間
実践① ECサイト|商品一覧
実践① ECサイト|商品一覧
実践① ECサイト|商品詳細
実践① ECサイト|商品詳細
実践① ECサイト|カート
実践① ECサイト|カート
実践② タスク管理|タスク一覧
実践② タスク管理|タスク一覧
実践② タスク管理|ログイン
実践② タスク管理|ログイン
実践③ AIチャット|応答画面
実践③ AIチャット|応答画面
実践④ BI|総合ダッシュボード
実践④ BI|総合ダッシュボード
実践④ BI|売上推移
実践④ BI|売上推移
実践④ BI|商品ランキング
実践④ BI|商品ランキング
実践④ BI|カテゴリ分析
実践④ BI|カテゴリ分析
実践① ECサイト|商品一覧
実践① ECサイト|商品詳細
実践① ECサイト|カート
実践② タスク管理|タスク一覧
実践② タスク管理|ログイン
実践③ AIチャット|応答画面
実践④ BI|総合ダッシュボード
実践④ BI|売上推移
実践④ BI|商品ランキング
実践④ BI|カテゴリ分析

画像はすべて、教材どおりに作り切った状態の実画面です

こんな方に向いています

エンジニア志望の方(教材のみ・人のレビューはありません)

中身

実践① ECサイト開発18章・約42万字・ 目安56時間
  1. 01
    はじめにこのプロジェクトでは、ECサイトをフルスタックで制作します。目安 約1.5時間
  2. 02
    ヒアリング実務では、開発に入る前にクライアントから要望をヒアリングします。目安 約1時間
  3. 03
    企画書を読み解く実務では、ヒアリング結果を整理し「何を作るか・作らないか」をクライアントと合意するために企画書を作成します。目安 約1時間
  4. 04
    要件定義書を読み解く要件定義書は、企画書の「何を実現したいか」を エンジニアが扱える具体的な要件 に翻訳したドキュメントです。目安 約1.5時間
  5. 05
    基本設計書を読み解く基本設計書は「外部仕様」を決めるドキュメントです。目安 約2時間
  6. 06
    詳細設計書を読み解く詳細設計書は、基本設計の外部仕様を「実装に落とせる粒度」まで具体化したドキュメントです。目安 約2.5時間
  7. 07
    実装の進め方実装フェーズの章は 「Ch7-1」「Ch7-2」… のサブ章番号 で呼びます。目安 約1時間
  8. 08
    環境構築実務でも使われる「クラウド開発環境」を体験してもらうためです。目安 約3時間
  9. 09
    DB準備とプロジェクト雛形Ch7-1 で用意した Codespaces と Neon を使います。目安 約4時間
  10. 10
    商品一覧・詳細SQL 定数や mapRow などの機械的な部分は starter 同梱、ロジックは自分で書く ── という分担です。目安 約6時間
  11. 11
    カート機能DTO や ヘルパーメソッドは starter 同梱、コアロジックは皆さんが書く ── という分担です。目安 約5時間
  12. 12
    認証機能目安 約8時間
  13. 13
    レジ・注文確定(トランザクション)目安 約6時間
  14. 14
    マイページこの章はユーザー認証(Chapter 7-5)が完了している前提で進みます。目安 約4時間
  15. 15
    仕上げ(CSS・エラー・セキュリティ)機能が動くだけでは「実装完了」とは言えません。目安 約5時間
  16. 16
    実装FAQ実装中によく出る症状・対処法のリファレンス。
  17. 17
    テストと動作確認UT[単体テスト] --> IT[統合テスト]。目安 約4時間
  18. 18
    用語ミニ辞書この章は 辞書として使う章 です。目安 通読不要
実践② タスク管理アプリ17章・約46万字・ 目安67時間
  1. 01
    はじめにこのプロジェクトでは、タスク管理アプリをフルスタック + 認証つき CRUDで制作します。目安 約1.5 時間
  2. 02
    ヒアリング実務では、開発に入る前にクライアントから要望をヒアリングします。目安 約1 時間
  3. 03
    企画書を読み解く実務では、ヒアリング結果を整理し「何を作るか・作らないか」をクライアントと合意するために企画書を作成します。目安 約 6 時間
  4. 04
    要件定義書を読み解く要件定義書は、企画書の「何を実現したいか」を エンジニアが扱える具体的な要件 に翻訳したドキュメントです。目安 約 1.5 時間
  5. 05
    基本設計書を読み解く基本設計書は「外部仕様」を決めるドキュメントです。目安 約 2 時間
  6. 06
    詳細設計書を読み解く詳細設計書は、基本設計の各要素を 実装可能な粒度 まで分解するドキュメントです。目安 約2.5 時間
  7. 07
    実装の進め方ここまでの Chapter 3 〜 6 で、企画書・要件定義・基本設計・詳細設計と上流の成果物を読み解いてきました。目安 約1時間
  8. 08
    環境構築 (ローカル + Neon + 雛形起動)PJ#1 (Java + Tomcat) と違って、本 PJ はフロントとバックエンドの 2 プロセス構成です。目安 約3 時間
  9. 09
    Prisma スキーマ定義と migration / seed 投入PJ#1 (Java + JDBC) ではテーブルを schema.sql という生 DDL で書きました。目安 約 4 時間
  10. 10
    認証 API (signup / login / JWT 発行)POST /api/auth/signup で新規登録、POST /api/auth/login でログインし、レスポンスとして JWT を返します。目安 約8時間
  11. 11
    タスク CRUD API (一覧 / 作成 / 更新 / 削除 + 楽観ロック)目安 約9 時間
  12. 12
    Frontend ログイン / 登録画面と JWT 保存React + React Router で /login /signup / (タスク一覧) の 3 画面を行き来できるようにします。目安 約 6 時間
  13. 13
    タスク一覧画面 (Tailwind リスト UI + ステータスフィルタ)/tasks でログイン済みユーザーのタスクをカード状に並べた画面を作ります。目安 約7 時間
  14. 14
    タスクの作成・編集・削除モーダルこの章をやり切ると、次の 5 つができるようになります。目安 約 6 時間
  15. 15
    仕上げ(CSS・エラー・セキュリティ・デプロイ)機能が動くだけでは「実装完了」とは言えません。目安 約 8 時間
  16. 16
    実装FAQ実装中によく出る症状・対処法のリファレンス。
  17. 17
    用語ミニ辞書この章は 辞書として使う章 です。目安 通読不要
実践③ AIチャットアプリ18章・約43万字・ 目安57時間
  1. 01
    はじめにこのプロジェクトでは、AI チャットアプリをフルスタック + LLM 連携で制作します。目安 約1.5 時間
  2. 02
    ヒアリング実務では、開発に入る前にクライアントから要望をヒアリングします。目安 約1 時間
  3. 03
    企画書を読み解く実務では、ヒアリング結果を整理し「何を作るか・作らないか」をクライアントと合意するために企画書を作成します。目安 約 1 時間
  4. 04
    要件定義書を読み解く要件定義書は、企画書の「何を実現したいか」を エンジニアが扱える具体的な要件 に翻訳したドキュメントです。目安 約 1.5 時間
  5. 05
    基本設計書を読み解く基本設計書は「外部仕様」を決めるドキュメントです。目安 約 1.5 時間
  6. 06
    詳細設計書を読み解く詳細設計書は、基本設計の各要素を 実装可能な粒度 まで分解するドキュメントです。目安 約2.5 時間
  7. 07
    実装の進め方ここまでの Chapter 3 〜 6 で、企画書・要件定義・基本設計・詳細設計と上流の成果物を読み解いてきました。目安 約1時間
  8. 08
    環境構築とリポジトリの起動目安 約3 時間
  9. 09
    API スケルトンとモック応答ユーザーが送ってきた message を受け取り、ブランドのトーンに合わせた 固定応答 を返す API を組み立てます。目安 約 5 時間
  10. 10
    履歴管理とインメモリストア前章のチャット API はステートレスでしたが、本来 AI チャットは ==過去の文脈を踏まえた応答== が肝です。目安 約5 時間
  11. 11
    Frontend チャット UI と API 連携Vite + React の Frontend に、画面下部の入力欄と、ユーザー / アシスタントの吹き出しを並べたチャット UI を実装します。目安 約 8 時間
  12. 12
    OpenAI API への差し替えとプロンプト設計前章までのモック応答を、本物の OpenAI API 呼び出しに差し替えられるようにします。目安 約6 時間
  13. 13
    エラーハンドリングと安全装置AI チャットは「OpenAI の調子」「ネットワークの揺らぎ」「ユーザーの想定外入力」の三方向からエラーを浴びる宿命があります。目安 約4 時間
  14. 14
    モバイル UI とアクセシビリティ調整Figma のモバイルデザインに合わせて、ヘッダ / メッセージリスト / 入力欄が縦に並んだレイアウトを仕上げます。目安 約4 時間
  15. 15
    仕上げ(CSS・エラー・セキュリティ・デプロイ)機能が動くだけでは「実装完了」とは言えません。目安 約 8 時間
  16. 16
    実装FAQ実装中によく出る症状・対処法のリファレンス。
  17. 17
    テストと動作確認UT[単体テスト] --> IT[統合テスト]。目安 約 4 時間
  18. 18
    用語ミニ辞書この章は 辞書として使う章 です。目安 通読不要
実践④ BIダッシュボード19章・約34万字・ 目安82時間
  1. 01
    はじめにこのプロジェクトでは、EC サイト売上分析ダッシュボードをフルスタック分析ダッシュボードで制作します。目安 約 1.5 時間
  2. 02
    ヒアリング実務では、開発に入る前にクライアントから要望をヒアリングします。目安 約 1 時間
  3. 03
    提案書を読み解く実務では、ヒアリング結果を整理し「何を作るか・作らないか」をクライアントと合意するために提案書を作成します。目安 約 1 時間
  4. 04
    要件定義書を読み解く要件定義書は、提案書の「何を実現したいか」を エンジニアが扱える具体的な要件 に翻訳したドキュメントです。目安 約 2 時間
  5. 05
    基本設計書を読み解く基本設計書は「外部仕様」を決めるドキュメントです。目安 約 2 時間
  6. 06
    詳細設計書を読み解く詳細設計書は、基本設計の各要素を 実装可能な粒度 まで分解するドキュメントです。目安 約 2.5 時間
  7. 07
    実装の全体像ここまでの Ch1〜Ch6 で、提案書・要件定義・基本設計・詳細設計と上流の成果物を読み解いてきました。目安 約 1 時間
  8. 08
    環境構築 + 認証 APIS1[starter clone] --> S2[DB 用意]。目安 約 6 時間
  9. 09
    Prisma スキーマ定義と seed 投入PJ#1 (Java + JDBC) ではテーブルを schema.sql という生の DDL ファイルで書きました。目安 約 6 時間
  10. 10
    KPI 集計 API(/api/dashboard/summary)本章は PJ#4 ダッシュボードの心臓部 です。目安 約 6 時間
  11. 11
    月次売上 API(/api/dashboard/monthly)指定年の月別売上推移を返す API です。目安 約 5 時間
  12. 12
    週次・商品ランキング・カテゴリ集計 API残り 4 つの API (週次売上・商品売上ランキング・商品注文数ランキング・カテゴリ別売上) を一気に作ります。目安 約 10 時間
  13. 13
    KPI カードと Sparkline(React 側)ダッシュボードのトップページ(/)。目安 約 8 時間
  14. 14
    折れ線グラフと売上推移ページ(Recharts)==売上推移ページ(/sales)== を作ります。目安 約 8 時間
  15. 15
    ランキング横棒チャートとカテゴリ円グラフ・仕上げダッシュボードの残り 2 ページを仕上げます。目安 約 8 時間
  16. 16
    仕上げ(CSS・エラー・セキュリティ・デプロイ)機能が動くだけでは「実装完了」とは言えません。目安 約 8 時間
  17. 17
    実装 FAQ実装中によく出る症状・対処法のリファレンス。
  18. 18
    テストと動作確認T1[全 10 ケースのテスト実行] --> T2[セキュリティ最終チェック]。目安 約 6 時間
  19. 19
    用語ミニ辞書この章は 辞書として使う章 です。目安 通読不要

手に入るもの

  • 教材の本文と、章ごとの進め方
  • Figma と動くデモ、実装 FAQ
  • 書き上げた成果物(提案書またはアプリ一式)

サポートと条件

サポート
Tap+人・90日
受講料充当
ゆめさくエンジニアへ入学される場合、この金額を全額充当します(入学時1回限り・現金の払い戻しはありません)
閲覧期間
教材の閲覧は無期限です
  • 人によるレビュー・提出物の添削・ライブ講義・1on1 はありません。レビューを受けながら作りたい方はゆめさくエンジニアをご検討ください(受講料に全額充当されます)
  • 教材の閲覧は無期限です。サポートの期間だけ90日で終わります
WEBエンジニアコース49,800円お支払いは Stripe の1回払いのみです