WEB TECHNOLOGY ATLAS

Web技術の地図を、一緒に旅しよう。

技術を知り、比べ、つなげて、あなたの次の一歩を見つける。名前の暗記ではなく、役割と関係からWeb技術の世界を眺める地図です。

186TECHNOLOGIES
22CATEGORIES
485RELATIONS
12JOURNEYS
01 / TECHNOLOGY ATLAS

まず、Web技術の世界を6つの地域で眺める。

22カテゴリを大きな役割地域にまとめています。名前を追う前に、どこで何を担当する技術なのかを掴めます。

TECH ADVENTURE / ATLAS6 REGIONS · ROLE → RELATION → PURPOSE
0127 TECH
FOUNDATION

Webの土台

言語、実行環境、通信方式など、他の技術が前提にする基礎。

0227 TECH
INTERFACE

画面をつくる

UI、見た目、部品、画面状態とデータ取得を組み立てる。

0333 TECH
APPLICATION

サイトとAPIを組む

Webサイト、Webアプリ、API、コンテンツ配信の骨格をつくる。

0440 TECH
DATA & IDENTITY

データと利用者

保存、DB操作、バックエンド基盤、認証と認可を扱う。

0523 TECH
DELIVERY

公開して動かす

サービスの配置、実行基盤、通信の入口、自動公開を担う。

0636 TECH
ENGINEERING

開発を支える

依存管理、ビルド、検査、テスト、監視で開発と運用を支える。

03 / START HERE

よく遭遇する技術から現在地を掴む。

すべての技術を見る →
Webサイト・Webアプリ

Astro

標準では静的HTMLを生成し、選んだUI部品だけをブラウザで動かす。

コンテンツ中心サイトへ必要な対話部分だけを配るWebフレームワーク。

islandscontent
API・サーバー

Hono

同じハンドラー設計をエッジ、Node.js、Bun、Denoで動かす。

Web標準APIを使う小さく高速なサーバーフレームワーク。

edgeweb-standards
UI部品

React

宣言的なUI部品と状態更新の模型を提供する。

状態に応じた画面をコンポーネントで組み立てるUIライブラリ。

componentui
実行環境

Cloudflare Workers

リクエストを利用者の近くで処理し、Cloudflareのデータ製品と接続する。

世界各地のエッジでWeb標準APIを動かすサーバーレス実行環境。

edgeserverless
OPEN SOURCE

この地図そのものを、GitHubで育てる。

技術説明と関係データは公開リポジトリが正本。足りない技術や関係の修正を、そのままPull Requestで提案できます。

View repository ↗