Kotowary

業 — わざ

手を動かして、作る。

LP を1枚デプロイするところから、理解に裏打ちされた実装でウェブアプリまで。各段は「デプロイして動く成果物」。理（なぜ動くか）と行き来しながら、設計と全体把握は自分で持ち、コードは AI と分担して進みます。

素のHTML/CSS/JSから、じっくり

  1. 0

    作る前に：どこで動く？

    自分で書く（AI は家庭教師）

    成果物：クライアント → CDN →（のちに BFF）→ バックエンド、の全体像を1枚で掴む

    理で仕組みを見る：URLを打ってから表示されるまでこの段を開く
  2. 1

    LPを1枚、デプロイする

    自分で書く（AI は家庭教師）

    成果物：HTML/CSS/JS だけで作って公開（静的配信・CDN を体感）

    いまは素の JS。あとで React/Next を学ぶと、これの“何を楽にしてるか”が腹落ちする。

    理で仕組みを見る：クラウドはどこにあるのかこの段を開く
  3. 2

    複数ページのサイト（HP）にする

    自分で書く（AI は家庭教師）

    成果物：ナビ・レスポンシブ・共通レイアウトを素の HTML/CSS で

    理で仕組みを見る：Webサービスの仕組みこの段を開く
  4. 3

    内容を分離する（CMS化）

    自分で書く（AI は家庭教師）

    成果物：データと見た目を分け、データから描画する

    理で仕組みを見る：Webサービスの仕組みこの段を開く
  5. 4

    SEO と Next 化（サーバ層＝BFF を建てる）

    AI に任せてOK・設計と把握は自分

    成果物：メタ/OGP/SSR。ここで初めてサーバ層＝BFF を実装する

    別概念（React/Next）への飛躍点。ここから AI は“相棒”に切り替わる。

    理で仕組みを見る：Webサービスのシステム構成この段を開く
  6. 5

    フォーム／API 連携

    AI に任せてOK・設計と把握は自分

    成果物：client ↔ BFF ↔ 外部データ。送信・取得を通す

    理で仕組みを見る：Webサービスの仕組みこの段を開く
  7. 6

    認証（ログイン）

    AI に任せてOK・設計と把握は自分

    成果物：セッション・Origin 検証・最低限のセキュリティ

    理で仕組みを見る：パスワードはどう守られているのかこの段を開く
  8. 7

    DB・永続化

    AI に任せてOK・設計と把握は自分

    成果物：データを保存し、読み書きする

    理で仕組みを見る：Webサービスのシステム構成この段を開く
  9. 8

    CI/CD・運用

    AI に任せてOK・設計と把握は自分

    成果物：自動テスト → デプロイ。壊さず届ける仕組み

    理で仕組みを見る：CI/CD — 変更を自動でテストして届けるこの段を開く
  10. 9

    ウェブアプリ／システムを1つ完成

    AI に任せてOK・設計と把握は自分

    成果物：ここまでを統合し、自分のサービスを作りきる

    理で仕組みを見る：Webサービスのシステム構成この段を開く