📄
概念 📚 beginner-stepup

このカリキュラムの使い方(SQL・Python・Dify経験者向け)

Oracle SQL・Python・Dify/n8n経験者が最短でWebアプリ開発に到達するための学習パスと、既存スキルとの対応表

このカリキュラムは「Webアプリをゼロから自力で公開する」ことを目標に設計されている。ただし、読者によってスタート地点が大きく異なる。このガイドは SQL・Python・Dify/n8n経験者 が既存知識を活かしながら最短で目標に到達するための学習パスを示す。


あなたの既存スキルとカリキュラムの対応表

あなたが知っていること対応するdoc推奨対応
Oracle SQL(SELECT・JOIN・集計)b15: DB設計「SQL→Drizzle ORM対応表」だけ読めば十分
Python(pandas・機械学習)b09: JS基礎, b10: TS基礎Python対比のセクションを中心に読む
Dify/n8n のAPI呼び出しb06: HTTP/REST「DifyのAPIを例に」のセクション確認程度
Dify/n8n の認証設定b07: 認証・認可「Dify APIキー認証との対応」だけ確認
Dataiku/Alteryx のワークフローb05: WebアーキテクチャWebアプリ全体像の把握のために一読

スキップしてよいファイル: b01(シェル)・b02〜b03(Git/GitHub)・b04(npm)は開発作業をしながら自習できる。詰まったときの参照用として使う。


推奨学習順

ステップ1:全体像をつかむ(1〜2時間)

b05 → b06 → b07 → b13

「Dify/n8nで毎日やっていること」がWebアプリの文脈でどう表現されるかを確認する。新しい概念はほぼないはずで、用語の対応関係を整理するイメージ。

ステップ2:フロントエンドを集中的に学ぶ(メインの学習領域)

b08 → b09 → b10 → b11 → b12

ここが最も新しい領域。Python経験者向けの対比説明が各ファイルに入っているので、Pythonの感覚で読み進められる。

ステップ3:バックエンド・DBの「TypeScript化」を理解する

b13 → b14 → b15 → b16

SQLは既知なので b15 は「Drizzle ORM対応表」のみ確認。b16(マイグレーション)は重要で、本番DBを安全に変更するフローを必ず理解する。

ステップ4:AWSデプロイ → テスト → Claude Code活用

b17 → b18 → b19 → b20 → b21 → b22 → b23

DockerとAWS(EC2・RDS)は新しい概念が多いが、Difyのセルフホストと構造が似ているため理解しやすい。


最初のスプリント課題(60〜90分)

初回セッションで目指す成果物:「CSVを読み込んでAPIで返し、画面に表示する」小さいWebアプリ

[入力] CSV(薬剤データ・患者集計など手元にあるもの)
  ↓ TypeScript API (Next.js Route Handler)
  ↓ データ整形・集計
[出力] ブラウザのテーブル表示

なぜこの課題か:

  • PythonのCSV処理 + pandasの感覚をTypeScriptで再現できる
  • Difyのワークフローと同じ「入力 → 処理 → 出力」の構造
  • DBなし・認証なし・デプロイなしで「動くもの」を1セッションで完成できる

コードかノーコードかの判断基準

Dify/n8nをコードに置き換える必要はない。「どこからコードにすると価値が上がるか」 を判断する視点が重要:

シナリオ判断理由
DifyのAPIをフロントから呼び出すコード(TypeScript)秘匿情報の扱い・エラーハンドリングが必要
n8nのWebhookを定期実行するn8n継続コードにする理由がない
CSVを読んでDBに格納するETLコードが有利テスト・再実行・バージョン管理が容易
Difyで作ったチャットUIを埋め込むDify継続埋め込みで十分
承認フロー・ログ・監査証跡が必要コード(+DB)規制対応・再現性のためにコードが必要

Human-in-the-loopの考え方

AIが出力したものを「そのまま本番適用する」設計は避ける。特に医療・製薬データを扱う場合:

AI(Claude/Dify/LLM)が処理結果を生成

人間が確認・承認(ダッシュボード・Slackで通知など)

承認された場合のみ本番DBに反映・外部APIを呼び出す

このパターンはb20(テスト設計)・b23(コードレビュー)で詳しく扱う。


セッションの進め方

毎回のセッションは以下の構造で進めると学習効率が高い:

  1. 今日できるようになること(5分)— 目標を明確にする
  2. 実装スプリント(45〜60分)— 動くものを作る
  3. 振り返り(15分)— 「現場のどのユースケースに使えるか」を確認

理論だけのセッションは設けない。毎回「動くもの」か「理解が深まった既存の仕組み」を持ち帰ることを目標にする。

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

  • 対応 Week: W1
  • 参照ブランチ:
  • W1: reference/week-1
  • 対応 checklist 項目: (直接対応なし)

ブランチの作り方・見方は b00-curriculum-map を参照してください。

  1. 1. 📄環境構築の段階的導入(macOS / Windows)
  2. 2. 📄SNSアプリの最終インフラ構成図
  3. 3. 📄SNSクローンの全体設計(Month 1 ゴール)
  4. 4. 📄カリキュラム全体マップ(Week × 教材 × 参照ブランチ × 要求チェックリスト)
  5. 5. 📄このカリキュラムの使い方(SQL・Python・Dify経験者向け)
  6. 6. 📄シェル・ターミナル基礎
  7. 7. 📄Windows で完全にゼロから始める開発環境構築(Week 1)
  8. 8. 📄Git基礎
  9. 9. 📄GitHubワークフロー
  10. 10. 📄パッケージ管理(pnpm workspace)
  11. 11. 📄Webアプリアーキテクチャ全体像
  12. 12. 📄要求ヒアリングとユーザーストーリー(Month 2 Week 5)
  13. 13. 📄画面ワイヤーフレームと画面遷移図(Month 2 Week 6)
  14. 14. 📄HTTP・REST API基礎
  15. 15. 📄ER 図の描き方(Month 2 Week 7)
  16. 16. 📄認証・認可のパターン
  17. 17. 📄REST API 仕様書の書き方(Month 2 Week 7)
  18. 18. 📄HTML/CSS基礎とレイアウト
  19. 19. 📄JavaScript基礎(Pythonとの対比)
  20. 20. 📄TypeScript基礎(型システムとPythonとの対比)
  21. 21. 📄Reactコンポーネント設計の基礎
  22. 22. 📄状態管理の概念
  23. 23. 📄フォーム検証(React Hook Form + Zod)(Month 3 Week 11)
  24. 24. 📄バックエンドAPI設計(Hono)
  25. 25. 📄ルーティング(React Router v7)
  26. 26. 📄Hono のエラーハンドリング(Month 4 Week 13)
  27. 27. 📄データベース設計・SQL→Drizzle ORM対応
  28. 28. 📄マイグレーションの考え方
  29. 29. 📄AWSインフラ基礎
  30. 30. 📄AWS Budget Alert の設定(Month 5 Week 17)
  31. 31. 📄環境変数管理
  32. 32. 📄Bastion EC2 と SSH ProxyJump(Month 5 Week 18)
  33. 33. 📄CI/CD基礎
  34. 34. 📄ECR への Docker イメージ push と App EC2 デプロイ(Month 5 Week 19)
  35. 35. 📄テスト設計の基本
  36. 36. 📄CloudFront + S3 + ALB で公開する(Month 5 Week 20)
  37. 37. 📄CLAUDE.md・プロジェクト設定
  38. 38. 📄PR レビュー 5 観点ルーブリック(全 Week 共通)
  39. 39. 📄タスク分解・仕様の書き方
  40. 40. 📄Playwright で E2E テスト(Month 6 Week 22)
  41. 41. 📄生成コードのレビュー・デバッグの勘所
  42. 42. 📄Trivy で脆弱性スキャン(Month 6 Week 23)
  43. 43. 📄CloudWatch Logs の読み方と運用(Month 6 Week 23)
  44. 44. 📄PDF ポートフォリオの自動生成(Month 6 Week 24)