2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Webシステムについて学んだことをアウトプット

2
Posted at

はじめに

この記事は、自己学習としてWebシステムについて体系的に学んだことをアウトプットするために投稿しました。

開発エンジニアとして2年間働いてきましたが、「Webシステムの全体像を人に説明できるほど把握できていないかも…」と感じたことがきっかけです。同じような悩みを持つ若手エンジニアの方や、前提知識ゼロの方の参考になれば嬉しいです。

「Webシステム」とは?

Webシステムと聞いて、あなたは何を思い浮かべますか?
エンジニアになる前の私なら「何か複雑そうなネットの仕組み」と漠然と考えていたと思います。

しかし現代において、Webシステムは誰もが日常的に使っており、生活に欠かせないものとなっています。
一言で表すと、「ブラウザ(Google ChromeやSafariなど)を通して利用するシステム」 です。例えば、Amazonでの買い物や、Twitter(X)の閲覧、そしてこのQiitaもWebシステムの一種です。

これらが裏側でどのように動いているのか、簡単に説明していきます。

全体像

Webシステムは、大きく分けて 「Webサーバー」「APサーバー」「DB(データベース)サーバー」 の3つの要素(3層構造)で成り立っています。

スクリーンショット 2026-07-12 181258.png

一番左の「Browser(ブラウザ)」は、私たちが普段スマホやPCで見ている画面です。ここからリクエストが送られ、3つのサーバーが連携して動きます。

1. Webサーバー:システムの「窓口」

Webサーバーは、ブラウザからのリクエストを最初に受け取る 「窓口」 の役割を果たします。

  • 主な役割
    • ブラウザからのリクエストに対して、静的なページ(いつ誰が見ても同じ内容が表示されるホームページなど)を直接返す
    • 動的な処理(ユーザーごとに内容が変わるマイページや検索結果など)が必要な場合は、APサーバーに処理を依頼する

2. AP(アプリケーション)サーバー:システムの「頭脳」

APサーバーは、プログラムを動かして 具体的な業務処理(計算や加工)を行う「頭脳」 の役割を果たします。

  • 主な役割
    • Webサーバーから送られてきたデータ(ユーザーの入力内容など)をプログラムで加工する
    • 必要に応じてDBサーバーにデータを要求し、受け取ったデータをWebサーバーへ送り返す

3. DB(データベース)サーバー:システムの「倉庫」

DBサーバーは、大量のデータを安全に蓄積・管理する「倉庫」 の役割を果たします。
※正確には、データを管理するシステム(DBMS)が搭載されたサーバーのことです。

  • 主な役割
    • APサーバーからの「データを検索して」「新しく保存して」「削除して」といった命令(SQL)に応じて、データをやり取りする

まとめ

実際の現場の構成はもっと複雑(負荷分散やセキュリティ対策など)ですが、基本となる最初の理解としてはこの「3層構造」で十分です。

文章を読むだけでなく、自分で実際に図を描いて「ブラウザからデータがどう流れていくか」を追ってみると、より理解が深まるのでおすすめです。この記事がどなたかの学習の第一歩になれば幸いです!

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?