全体像：分野はどうつながっているか
一つの Web サービスは、役割の違う部品を組み合わせてできている。図の箱が分野、矢印が「頼む・渡す・支える」の関係。
図の読み方
上の段が、利用者から見えて動いている部分。利用者はブラウザで画面を見る。画面は自分ではデータを持たず、サーバーに API で頼む。サーバーはデータの保存場所を読み書きして、結果を画面に返す。この3つで「動くもの」ができる。
その3つは、どれかの言語で書かれている。画面は JavaScript（TypeScript）、サーバーは Python や Go や TypeScript。言語を1つ決めると、その言語で使える道具が決まる。
書いたものは、動かす場所に載せて初めて他人が使える。自分のパソコンの外にある、常に電源の入ったサーバーに置く。ファイルを置くだけの場所から、常駐するサーバー、呼ばれたときだけ動く関数まで種類がある。
載せた後を支える3つ。変更を壊さず届ける開発基盤、動いているかを見る監視、誰が入れるかを決める認証。個人の練習では後回しにしがちだが、公開した瞬間に必要になる。
周辺と利用。自動化とノーコードは、上の仕組みをコードを書かずに（または最小限で）つなぐ手段。データ処理とAIは、溜まったデータを使う側で、他の分野の上に載る。
学ぶ順番
番号は推奨の順序。1〜4 で「動くもの」が作れ、5 で公開でき、6〜8 で公開後に困らなくなる。9 以降は必要になったときでよい。
| 順 | 分野 | 何をする分野か | 最初に触るなら |
|---|---|---|---|
| 01 | 言語・実行環境 | プログラムを書くための「言葉」と、それを動かす仕組み | Python 書いて動かすまでの距離が最短で、データ処理・自動化・AI の学習資料が最も多い。画面を作りたい場合だけ TypeScript から入る。 |
| 02 | 画面・フロントエンド | 利用者が見て、触る画面をつくる。ブラウザの中で動く部分 | Astro HTML と Markdown から始められ、JavaScript を書かなくてもサイトを公開できる。動く画面が必要になった時点で React を足せばよい。 |
| 03 | サーバー・API | 画面の裏側で、頼まれた処理をしてデータを返す係 | Supabase データベース・認証・API が最初から揃っていて、サーバーを書かずに「裏側」の役割を体感できる。仕組みが分かったら FastAPI で自分で書く。 |
| 04 | データの保存 | データをなくさず置いておく場所。形（表・文書・ファイル）で種類が分かれる | SQLite インストール不要の1ファイルで SQL を学べる。複数の人やプログラムが同時に使う段階になったら PostgreSQL に移る。 |
| 05 | 実行基盤・ホスティング | 書いたコードを、自分のパソコンの外で動かし続ける場所 | GitHub Pages 静的サイトを無料で公開でき、「公開する」とはファイルを誰かのサーバーに置くことだと最短で分かる。サーバーが必要になったら Render や AWS Lambda に進む。 |
| 06 | 開発基盤・CI/CD | コードの変更を、壊さずに本番へ届ける仕組み | Git すべての開発の前提。履歴を残し、失敗したら戻せる状態を作ってから他の分野を学ぶ。次に GitHub、その次に GitHub Actions の順。 |
| 07 | 監視・可観測性 | 動いているものの様子を知り、壊れたら気づく | Sentry 数行の設定でアプリのエラーが自動で集まり、「動いているつもり」が可視化される体験が得られる。 |
| 08 | 認証・セキュリティ | 誰がアクセスできるかを決め、守る | Clerk 数十行でログインが付き、「認証は自分で作らない」という原則を体で覚えられる。 |
| 09 | 自動化・連携 | 決まった作業を、人手なしで繰り返す | Google Apps Script スプレッドシートを自動で動かす体験が最短で得られ、「定期実行」「トリガー」という考え方が身につく。 |
| 10 | ノーコード・SaaS | コードを書かずに済ませる選択肢 | Zapier つなぐだけで動くので「入力 → 処理 → 出力」という流れが目に見える。回数課金に当たったら n8n やコードへ移る。 |
| 11 | データ処理・分析 | 溜まったデータを集計・変換・可視化する | pandas CSV を読んで集計する最短の道具で、学習資料が最も多い。データがメモリに乗らなくなったら DuckDB に進む。 |
| 12 | AI・機械学習 | 文章の生成・要約・分類や、予測をアプリに組み込む | Claude API（Anthropic） 数行のリクエストで結果が返り、料金・コンテキスト長・レート制限という「制約の考え方」まで一度に学べる。 |
つながりの一覧
図の矢印を文章にしたもの。「A → B」は A から見た B との関係。
| 分野 | つながる先 | どうつながるか |
|---|---|---|
| 言語・実行環境 | 画面・フロントエンド | 画面は JavaScript（TypeScript）で書く。ブラウザが動かせる言語はこれだけなので、画面を作るなら避けて通れない |
| サーバー・API | サーバー側の処理は Python・Go・TypeScript などで書く。言語を決めると、使えるフレームワークが決まる | |
| データ処理・分析 | 集計や分析のライブラリは Python に集中している。データを扱うなら Python が近道 | |
| 画面・フロントエンド | サーバー・API | 画面は自分ではデータを持たない。API を呼んでデータを受け取り、表示する |
| 実行基盤・ホスティング | 作った画面は HTML・CSS・JavaScript のファイルになる。それを配信場所に置いて初めて他人が見られる | |
| 認証・セキュリティ | ログイン画面はここにあるが、「本人かどうか」の判断はサーバー側が行う。画面は判断しない | |
| サーバー・API | データの保存 | データを保存し、取り出すのはサーバーの仕事。画面から保存場所に直接触らせない |
| 画面・フロントエンド | 画面に対して API（決まった形の窓口）を用意し、頼まれたデータを返す | |
| 認証・セキュリティ | 「本人か」「この操作をしてよいか」の判断はここで行う | |
| 実行基盤・ホスティング | サーバーは動かし続ける場所が要る。自前で持つか、BaaS に任せるかを選ぶ | |
| データの保存 | サーバー・API | 読み書きの主体はサーバー。画面から直接は触らない |
| データ処理・分析 | 溜まったデータを集計・分析するとき、ここが出発点になる | |
| 実行基盤・ホスティング | データベースを自分で運用するか、運用込みで借りる（マネージド）かを選ぶ | |
| 実行基盤・ホスティング | 開発基盤・CI/CD | 変更をここへ届けるのが開発基盤（CI/CD）の仕事 |
| 監視・可観測性 | 載せたものが正しく動いているかを見るのが監視の仕事 | |
| サーバー・API | 常時動くサーバーか、呼ばれたときだけ動く関数かで、置き方と料金が変わる | |
| 自動化・連携 | 定期的に動かす処理も、どこかの基盤の上で動く | |
| 開発基盤・CI/CD | 実行基盤・ホスティング | 届け先。検証（CI）に通った変更を、実行基盤へ配信（CD）する |
| 監視・可観測性 | 配信したあとに壊れていないかを見る監視と、いつも組で使う | |
| 自動化・連携 | CI の定期実行は、テスト以外の自動化にも使える | |
| 監視・可観測性 | 実行基盤・ホスティング | 監視の対象は、実行基盤の上で動いているもの |
| サーバー・API | 不具合の多くはサーバー側で起きる。例外を集めて原因をたどる | |
| 開発基盤・CI/CD | 配信のたびに「壊れていないか」を見る習慣と組で使う | |
| 認証・セキュリティ | サーバー・API | 「本人か」「この操作をしてよいか」の判断はサーバー側で行う |
| 画面・フロントエンド | ログイン画面は画面側にあるが、判断はしない。トークンを預かって渡すだけ | |
| 実行基盤・ホスティング | 公開面への攻撃（大量アクセス、ボット）は基盤の手前で止める | |
| 自動化・連携 | 実行基盤・ホスティング | 定期的に動かす処理も、どこかの基盤の上で動く。実行時間の上限はそこで決まる |
| ノーコード・SaaS | コードを書かない自動化は、ノーコードの領域と重なる | |
| 開発基盤・CI/CD | CI の定期実行（スケジュール）も自動化の一種として使える | |
| ノーコード・SaaS | 自動化・連携 | サービス同士をつなぐ自動化は、ノーコードがいちばん得意な領域 |
| データの保存 | Airtable のような「表の形の保存場所」は、データベースの入口になる | |
| 画面・フロントエンド | Notion の公開ページのように、画面を作らずに情報を公開できる | |
| データ処理・分析 | データの保存 | 処理するデータの出どころ。データベースやファイルから読み出す |
| 言語・実行環境 | 道具は Python のライブラリに集中している | |
| AI・機械学習 | 学習や推論に渡すデータを整えるのはこの分野の仕事 | |
| AI・機械学習 | サーバー・API | API の呼び出しはサーバー側から行う。鍵を画面に出さない |
| データ処理・分析 | 渡すデータを整えるのはデータ処理の仕事 | |
| データの保存 | 関連する文書を探すベクトル検索は、データベースの機能として提供される | |
| 実行基盤・ホスティング | 手元でモデルを動かすなら、GPU とメモリという基盤の制約が先に立つ |