あなたの(見る)Webページはどこから

2026/02/07に大阪で開催された「CollaboHub-Osaka#02 ゆるやさLT会！！」で登壇した内容です。

主に初学者の方に向けて、Webサービスが実際にどのような構成で動いているのかを紹介しました。

Transcript

1. あなたの(見る) Webページはどこから? mana (@mana_dotsync) 2026/02/07 : CollaboHub-Osaka #02
2. Who is this? mana (真鍋 新也) • インフラ(クラウド,オンプレ)、バックエン ドエンジニア • Player & プロジェクト管理 & 技術育成強化 • 経歴 • ソフトウェア・サービス (19/4-23/3) • パーソルAVCテクノロジー (23/4-Now) • 主な技術スタック • Azure (AI領域以外は大体) • .Net (VB6, .Net Framework含む) • C# • Kubernetes Twitter (X) : @mana_dotsync Blog : blog.dotsync.jp
3. AIを使ったソフトウェア開発、流行ってますね
4. 作った後どうすればええねん...
5. 実際にWebサービスが どう動いているのか学ぼう
6. 注意事項 • Webサービスを構成する登場人物についてざっくり紹介します • 各登場人物の詳しい話はしません • 登場人物がわかっていればAI質問できるから →登場人物すらわからないと質問自体できないので、それを補完する資料 • 説明の内容が特定のパターンの場合当てはまらない場合があります が、初学者向け資料なので考慮せず一般的なことをするための最小 限の理解を優先します
7. Level1 クライアント サーバー
8. クライアント • 他のコンピュータやサーバーから機能や情報を受けて利用する側 • Webの場合、基本的にサーバー側から情報をもらって表示しているだけ • サービスを利用する端末やユーザーのことをクライアントと言った りする - パソコン - スマートフォン - Webブラウザ • サーバー間の通信でも、情報を受け取る側のことをクライアントと 称するので、役割に応じた名称である点には注意
9. サーバー • 他のコンピュータやサーバーに機能や情報を提供する側 • Webアプリケーションが動作しているのはこのコンピュータ上 • 一般用途で利用しないような高性能なCPUやメモリを持つコン ピュータもサーバーと言ったりする • データセンターにあるような強そうなPC • この言葉を使う際は、役割に応じた名称なのか、それ以外の意味な のか注意
10. Level2 クライアント サーバー データベース
11. データベース • (厳密には)一定の形式で保存、作成されたデータの集合体 • エクセルの表 • エクスプローラー、Finder • データの集合体を保管するサーバーのことを指したりする場合も • なんでサーバーと分けるのか? • クライアントから直接接続できる環境にデータを配置するのが危ないから • スペックだったりストレージ容量が求められるから →逆に大事な情報を保管しないとか、ストレージ容量そこまで使わないなら一緒でも◯
12. Level3 クライアント サーバー データベース 25.193.104.XX
13. パブリックIP • インターネット上に一意に識別される、通信する際の宛先を示す住 所のようなもの • 逆にこれを持っていないとインターネット経由で通信できない • IPv4とIPv6が存在 • IPv4 • 32ビットの数値で「129.188.72.XX」のような4つの数字で表す • そのうちグローバルIPアドレスは以下の範囲 • 1.0.0.0 - 9.255.255.255, 11.0.0.0 – 126.255.255.255 • 128.0.0.0 – 172.15.255.255, 172.32.0.0 – 191.255.255.255 • 192.0.0.0 – 192.167.255.255, 192.169.0.0 – 223.255.255.255 25.193.104.XX
14. Level4 クライアント サーバー データベース 25.193.104.XX DNSサーバー example.com
15. ドメイン • インターネット上のWebサイトなどを識別するための住所のような もの • パブリックIPと何が違うのか? • ドメインはパブリックIPアドレスと紐づけて使う ドメイン->パブリックIPに変換し、実際の通信はパブリックIPで行う • IPアドレスだと人間がわかりにくいので、人間がわかるようにつけ た別名みたいなもの example.com
16. DNSサーバー • ドメインからパブリックIPへの変換を行うサーバー • ドメインとIPアドレスの関係性を持っている = DNSレコード example.com -> 26.162.83,XXX • ドメインで通信先を指定した際、まずはDNSサーバーに問い合わせ てIPアドレスを取得後、そのIPアドレスを使ってサーバーに接続す る
17. Level5 クライアント DNSサーバー example.com サーバー データベース 25.193.104.XX 192.168.0.5 192.168.0.6
18. ローカルネットワーク (LAN) • 家庭やオフィス内のローカルなネットワークのこと - 限定的な狭い範囲内で相互に通信するためのネットワーク • 「ローカルネットワーク = インターネットに繋がらないネットワー ク」というわけでない点に注意 • インターネットへの接続部分、もしくは接続できるルートがあれば繋げれ る
19. プライベートIP • ローカルネットワーク内での通信の際に、宛先を示す住所のような もの • IPv4とIPv6が存在 • IPv4 • プライベートIPアドレスは以下の範囲 • 10.0.0.0 – 10.255.255.255 • 172.16.0.0 – 172.31.255.255 • 192.168.0.0 – 192.168.255.255 • パブリックIP、プライベートIPで利用できる範囲が分けられている ので設定の際は注意 192.168.0.5
20. まとめ • Webサービスを構成する登場人物についてざっくり紹介しました • 様々な登場人物によってWebサービスは成立しています • 構成をどうするかはWebサービスの要件によって調整します • 自分しか使わないから最悪落ちてもOK、データ漏れてもOK → Lv1~3 • 他の人にも使ってもらいたい → Lv4 • もうちょっとだけデータのセキュリティに気をつけたい → Lv5 • ちゃんとセキュリティにも気をつけたい → 今回紹介の構成ではNG • まずはこの資料をとっかかりに様々な構成についてみて見てくださ い
21. THANK YOU