TECHNOLOGY ATLAS

Web技術の全体像を、役割から眺める。

186個の名前を暗記するのではなく、まず「どの地域にいる技術か」を見る。気になる技術を選ぶと、直接つながる比較候補・組み合わせ・土台だけを浮かび上がらせます。

186TECHNOLOGIES

485RELATIONS

6REGIONS

Technology Explorer Choose a journey

01

FOUNDATION

Webの土台

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

27 tech

language

Web標準・言語

13

ブラウザへ内容を伝え、処理を書くための基礎

runtime

実行環境

7

JavaScriptやサーバー処理を実際に動かす

protocol-api

通信・API方式

7

ブラウザ、サーバー、サービス間の通信方法を定める

02

INTERFACE

画面をつくる

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

27 tech

ui-library

UI部品

10

画面の部品や状態を組み立てる

styling

CSS設計・生成

7

見た目を設計し、保守しやすいCSSを作る

ui-components

UI部品集

4

再利用できる画面部品とデザイン規則を提供する

state-data

状態・データ取得

6

画面の状態とサーバーから得るデータを管理する

03

APPLICATION

サイトとAPIを組む

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

33 tech

web-framework

Webサイト・Webアプリ

12

ページ構成や表示方式をまとめる

server-framework

API・サーバー

14

HTTPリクエストを受けて処理する

cms

コンテンツ管理

7

記事やページを編集し、配信する

04

DATA & IDENTITY

データと利用者

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

40 tech

orm

DB操作支援

9

アプリからデータベースを扱いやすくする

database

データベース

13

用途に合わせてデータを保存し、検索する

backend-platform

バックエンド基盤

10

データ保存、API、同期などをまとめて提供する

auth

認証・認可

8

利用者を確認し、操作できる範囲を制御する

05

DELIVERY

公開して動かす

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

23 tech

cloud-hosting

クラウド・公開基盤

11

サービスをインターネットへ配置して運用する

infrastructure

実行・配信基盤

8

実行環境、構成、通信の入口を整える

ci-cd

自動検証・公開

4

変更ごとの検証と公開を自動化する

06

ENGINEERING

開発を支える

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

36 tech

package-monorepo

パッケージ・モノレポ

5

依存関係と複数プロジェクトを管理する

build-transform

ビルド・変換

11

開発中の変換と配布用ファイルの生成を支える

quality-validation

品質・入力検証

6

コードの問題、書式、データの形を検査する

testing

テスト

9

部品からブラウザ操作まで期待どおりか確かめる

observability

監視・可観測性

5

エラー、ログ、指標、処理の流れを観測する