beginner-stepup

Web とは何か

Web の定義と歴史、インターネットとの違い、クライアント・サーバーモデル、ブラウザの役割を整理し、本カリキュラムが Web 開発を中心に据える理由を押さえる

URL を打ってから画面が表示されるまで

ブラウザに URL を入力してから画面にページが描画されるまでの全段階（URL 解析・DNS・TCP・TLS・HTTP・レンダリング）を順を追って理解する

ネットワーク基礎（TCP/IP・DNS・HTTPS）

Web の下を流れているネットワーク層の仕組み（TCP/IP・ポート・DNS・HTTPS/TLS・NAT）を、アプリ開発者が実務で困らない粒度でまとめる

【発展】物理層から通信が成立するまで（電力・Ethernet・Wi-Fi・Bluetooth）

アプリ開発者が普段意識しない「ケーブル・電波・電力」の層を俯瞰し、開発者目線で知っておくと設計判断や障害対応に役立つ最低限のポイントをまとめる

WSL2・Docker セットアップ詳細（Windows 向け）

Windows 受講生が WSL2 と Docker（Desktop / WSL ネイティブ）を導入し、開発環境として使えるようにするための詳細手順と典型的なトラブル対処

環境構築の段階的導入（macOS / Windows）

本カリキュラムは Week 1-2 を最小構成で開始し、Docker が必要になる Week 3 で WSL2 を追加導入する段階的アプローチを採用する

カリキュラム全体マップ（Week × 教材 × 参照ブランチ × 要求チェックリスト）

24週のカリキュラムで「そのWeekに何を読み、どのブランチのコードを参照し、どの要求項目を達成するか」を一覧するピボットマップ

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

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

シェル・ターミナル基礎

ファイルシステム・パス・環境変数・パーミッションの仕組みを理解し、開発作業に必要なターミナル操作を身につける

Windows で完全にゼロから始める開発環境構築（Week 1）

Windows 10/11 でまだ何もインストールしていない状態から、Git Bash・Node.js・pnpm・VS Code・Claude Code・GitHub 連携までを 1〜2 時間で完了させる完全手順

Git基礎

バージョン管理の仕組みを理解し、コミット・ブランチ・マージの基本操作を習得する

GitHubワークフロー

PRベースの開発フロー・ブランチ戦略・コンフリクト解消の実践的な進め方を理解する

パッケージ管理（pnpm workspace）

pnpm・package.json・依存関係の仕組みを理解し、pnpm workspaceを使ったモノリポ構成を使いこなす

Webアプリアーキテクチャ全体像

フロントエンド・バックエンド・DBがどう連携するかを理解し、React+Vite/Honoの分離構成とDify/n8nとの組み合わせ方を把握する

要求ヒアリングとユーザーストーリー（Month 2 Week 5）

「こういうアプリを作りたい」という漠然とした要求を、実装に落とせる粒度の要件に整理する方法を、ヒアリングシートとユーザーストーリー形式で学ぶ

HTTP・REST API基礎

HTTPプロトコルの仕組みとREST APIの設計原則を理解し、フロントエンドとバックエンドの通信を読み解く

認証・認可のパターン

JWT・セッション・OAuthの仕組みを理解し、Webアプリのセキュリティ基盤を設計できるようになる

REST API 仕様書の書き方（Month 2 Week 7）

エンドポイント一覧・リクエスト/レスポンススキーマ・ステータスコード設計を OpenAPI 形式と Markdown 形式で書く方法

HTML/CSS基礎とレイアウト

Webページの構造（HTML）とスタイル（CSS）の基礎を理解し、意図通りのレイアウトを組めるようになる

JavaScript基礎（Pythonとの対比）

Python経験者がJavaScriptの主要な概念と構文上の違いを素早く習得するための対照学習ガイド

TypeScript基礎（型システムとPythonとの対比）

Pythonの型ヒントと対比しながらTypeScriptの型システムを理解し、型安全な開発の感覚を身につける

フォーム検証（React Hook Form + Zod）（Month 3 Week 11）

React Hook Form で入力管理を行い、Zod スキーマを共有してクライアント・サーバー両方で同じバリデーションを適用する方法

Reactコンポーネント設計の基礎

Reactのコンポーネント概念・Props・JSXを理解し、UIを再利用可能な部品として構築する考え方を習得する

状態管理の概念

ReactのuseState・useReducer・Context APIを理解し、アプリの状態をどこで・どう管理するかを設計できるようになる

バックエンドAPI設計（Hono）

HonoでRESTエンドポイントを設計し、Zodバリデーション・JWTミドルウェア・エラーハンドリングを実装するパターンを理解する

ルーティング（React Router v7）

クライアントサイドルーティングの概念を理解し、React Router v7のcreateBrowserRouter・loader・Link・useNavigateを使いこなす

Hono のエラーハンドリング（Month 4 Week 13）

try-catch・カスタムエラークラス・グローバルエラーハンドラ・HTTP ステータスコードの使い分けを、Hono ミドルウェアで実装するパターン

データベース設計・SQL→Drizzle ORM対応

Oracle SQL経験者がTypeScript/Drizzle ORMに移行するための対応表と、医療・製薬データに適したスキーマ設計パターン

マイグレーションの考え方

データベーススキーマの変更をバージョン管理し、本番環境に安全に適用するためのマイグレーション管理を理解する

中間試験 — 基礎編までの理解度チェック

導入編・入門編・基礎編で学んだ内容を横断して確認する総合演習。この試験を通過したら応用編へ進む

AWSインフラ基礎

EC2・RDS・CloudFront・S3を使ったWebアプリのAWSデプロイ構成を理解し、Docker ComposeでEC2にコンテナをデプロイできるようになる

AWS Budget Alert の設定（Month 5 Week 17）

月 $100 の予算上限アラートを AWS Budgets で設定し、リソース消し忘れによる予期せぬ課金を防ぐ

環境変数管理

.envファイルの仕組みと秘匿情報の安全な管理方法、pnpm workspaceでの複数パッケージへの設定方法を理解する

Bastion EC2 と SSH ProxyJump（Month 5 Week 18）

Private Subnet の RDS・App EC2 に、踏み台（Bastion）経由で安全にアクセスする構成と、~/.ssh/config を使った 1 コマンド接続の設定

CI/CD基礎

GitHub ActionsでテストとLintを自動化し、SSHを使ってEC2への自動デプロイパイプラインを構築する

ECR への Docker イメージ push と App EC2 デプロイ（Month 5 Week 19）

GitHub Actions で Docker イメージを ECR に push し、App EC2 で pull して起動するデプロイパイプラインを、OIDC ベースの AssumeRole で安全に構築する

テスト設計の基本

単体・統合・E2Eテストの考え方とテストピラミッドを理解し、効果的なテスト戦略を設計できるようになる

CloudFront + S3 + ALB で公開する（Month 5 Week 20）

S3 に React ビルド成果物を配置し、ALB 経由で Hono API に接続し、CloudFront が 1 つのドメイン配下で両方を配信する構成の作り方

CLAUDE.md・プロジェクト設定

CLAUDE.mdの役割と書き方を理解し、Claude Codeがプロジェクトを正確に把握できる設定ファイルを構築する

PR レビュー 5 観点ルーブリック（全 Week 共通）

本カリキュラムの週次評価で使用する 5 観点（要件達成・可読性・Git 粒度・PR 説明・セキュリティ）の具体例と判定基準

タスク分解・仕様の書き方

Claude Codeに正確に意図を伝えるためのタスク分解と仕様記述の技術を習得し、AI補助開発の生産性を最大化する

Playwright で E2E テスト（Month 6 Week 22）

register → login → post → like の実ユーザーシナリオを Playwright で書き、CI 実行・失敗時スクリーンショット・トレース収集までを構築する

生成コードのレビュー・デバッグの勘所

Claude Codeが生成したコードを安全に採用するためのレビュー観点と、エラーが発生したときのデバッグ手順を理解する

Trivy で脆弱性スキャン（Month 6 Week 23）

Docker イメージ・npm 依存パッケージ・IaC の脆弱性を Trivy で検出し、CI に組み込み、Critical/High をゼロにする運用フロー

CloudWatch Logs の読み方と運用（Month 6 Week 23）

EC2 上の Docker コンテナログを CloudWatch Logs に転送し、Logs Insights でクエリし、エラー検知アラームを設定する

PDF ポートフォリオの自動生成（Month 6 Week 24）

README・checklist.yml・コミット履歴・本番 URL・スクリーンショットを 1 本の PDF にまとめ、修了記念としてアウトプット化する

SNSアプリの最終インフラ構成図

6ヶ月のカリキュラムを通して組み上げる SNS アプリの最終形（AWS 本番インフラ）を事前に俯瞰する

SNSクローンの全体設計（Month 1 ゴール）

Month 1で構築するSNSクローンアプリの機能・DBスキーマ・APIエンドポイント・コンポーネント構成とWeek別実装ロードマップ

実務品質の README を書く

OSS・実務で通用する README を書くための構成テンプレートと、なぜ各セクションが必要かを整理する

画面遷移図を描いてルーティングを設計する

画面遷移図を描く意味、ツール選び、そこから React Router のルート定義に落とすまでの流れを身につける

ER 図を描いてテーブル設計を固める

sns_clone の ER 図を Mermaid で描き、Drizzle スキーマに落とすまでの流れを身につける

Issue ベースの開発フローを回す

GitHub Issue と PR で開発を駆動する実務フロー。issue の切り方・ブランチ戦略・PR テンプレートを固める

MVP を定義してリリースする

MVP（Minimum Viable Product）の考え方と、sns_clone を「動くもの」として公開するまでの判断基準・チェックリスト