五月雨スパイラル研究会で開催した勉強会の発表スライドです。

1. 知ってるようで
知らない
WEBの仕組み
体験ワークショップ
五月雨スパイラル研究会

2. 五月雨スパイラル研究会とは？
京都、大阪を中心にプログラミング関連の勉強会、有料スクールの運営
現役エンジニアを中心に様々な取り組みを企画
10年以上WEBエンジニアの研修を担当し、多くのエンジニアを育てた経験を研
修カリキュラムに活かしている
五月雨スパイラル研究会
http://samidare.obanet.jp/
2

3. 主な対象者
WEBシステムやWEBサイトの構築に部分的に、または広く浅く関
わったことがあるが深い部分の理解がない人
1. WEBデザイナー／ディレクター
2. 開発入門者
WEBプログラマーになりたて、または今まさにプログラミング
の勉強をしようとしている人
3. 趣味として知りたい人
もちろん大歓迎！
3

4. 講義の内容
1. ブラウザの動作を知る（レベル1）
2. URLの仕組み、構造（レベル2）
1. スキーム
2. ドメイン
3. パス
4. クエリー
3. ネットワーク1（レベル2）
1. DNS
2. IPアドレス
わかる部分だけ
憶えておいても絶対に役
立ちます！
4

5. 1.ブラウザの動作を知る
HTMLソース
ページ上で右クリック→「ページのソースを表示」など
読み込みファイル（画像/CSS/JSなど）
HTMLソース上の<img>タグや<script>, <style>タグを見る
リクエストとレスポンスの詳細（デベロッパーツールの活用）
メニューから「表示」→「開発／管理」→「デベロッパーツール」
（Chromeの場合）
その他 5

6. 1.URLの仕組み
URLとは？
Uniform Resource Locatorの略であり、一般的にユーアールエルと呼称される
何かの資源（リソース→HTMLページなど）の位置を指定するというニュアンス
ティム・バーナーズ＝リーという方を中心に提案され、厳密には
https://tools.ietf.org/html/rfc1738 で定められる
URLの構成
URLは以下の要素で構成される
スキーム（プロトコルと呼ばれることもあるが、厳密には異なる）
ドメイン（ホストと表現されることも） 6

7. 1.URLの仕組み
https://www.google.co.jp/search?ie=UTF-8&q=samidare
スキーム：https
リソース取得の方法（http や ftp や telnet など）
ドメイン：www.google.co.jp
リソースが格納されているコンピューター名
ポート番号（詳しくは後述）とともに指定される場合もある
パス：search
リソースが格納されているディレクトリやファイル 7

8. 1.URLの仕組み
https://www.google.co.jp/search?ie=UTF-8&q=samidare
このURLは以下のように解釈できます
1. https という ”スキーム” で
2. www.google.co.jpという ”ドメイン” （コンピューター）に接続して
3. searchというディレクトリ “パス” に
4. ?ie=UTF-8&q=samidare という “クエリ文字列” を付加したリソース
8

9. 1.URLの仕組み - ドメイン
ドメインはアメリカなどでの住所表記のように小さい概念から大きい概念の順
序で表現される（そのままインターネット上の住所という理解でOK）
世界中で重複しないようにICANNという非営利組織で管理されている
ドメインは日本語も利用可能（例：http://総務省.jp/）
www.google.co.jp
www：サブドメイン
google：組織ドメイン
co：属性ドメイン 9

10. 2.ネットワーク1（DNS）
DNSとは
Domain Name Systemの略で、インターネット上でドメインとIPアドレスの関連付けを管理する
ために利用される
コンピューターネットワーク上で、それぞれのコンピューターはIPアドレスで識別される
が、人間には非常に覚えにくい（下記の2つはどちらが覚えやすい？）
http://www.google.co.jp
http://172.217.26.99
DNSとは 172.217.26.99 のような IP アドレスを
www.google.co.jp という文字に変換する仕組み
10

11. 2.ネットワーク1（DNS）
DNSの動作
DNSサーバーは階層構造で構成されます
＜PC＞ ＜DNSサーバー1＞
＜DNSサーバー2＞
1
3
2
＜DNSサーバー3＞
4
5
6
1. www.google.co.jp のIPアドレスは？
2. www.google.co.jp のIPアドレスは？
3. わかんない、DNSサーバー3に聞いてみて
4. www.google.co.jp のIPアドレスは？
5. 172.217.26.99 だよ！
6. 172.217.26.99 だって！ 11

12. 2.ネットワーク1（IPアドレス）
IPアドレス
グローバルIPアドレス
インターネットの接続で利用されるIPアドレス
世界中で重複してはいけないため厳密に管理される
プライベートIPアドレス
自宅や会社など外部から利用できないネットワークで利用するIPアドレス
ネットワーク上でパソコンを識別するための番号、住所
掲示板やチャットなどで、特定の相手をブロックしたりするために使われたりもする
IPv4 （あいぴーぶいよん）と IPv6 （あいぴーぶいろく）がある
インターネット普及で IP アドレスが足りなくなったために IPv6 が策定された
12

13. 2.ネットワーク1（IPアドレス）
<PC1>
192.168.100.101
<スマホ>
192.168.100.102
<PC2>
192.168.100.103
<ルーター>
192.168.100.1
153.156.254.23
<インターネット>
赤字：プライベートIPアドレス
黒字：グローバルIPアドレス
13

14. 2.ネットワーク1（IPアドレス）
IP アドレス
IPv4 IPv6
グローバル
IP アドレス
216.58.220.227
31.13.82.36
2404:6800:400a:808::2004
2a03:2880:f102:83:face:b00c::25de
プライベート
IP アドレス
10.0.0.1
192.168.100.10
fd30:0000:0000:1:ff4e:3e:9:e
fe80::a299:9bff:fe15:169b
IPv6 のプライベートアドレスは厳密にはネットワーク内でのみ一意になるリンク
ローカルアドレス（fe80...）と、グローバルで一意になるように工夫されたユニ
ークローカルアドレス（fe...）がある 14

15. 2.ネットワーク1（ポート番号）
ポート番号
コンピューターには複数のサービスやアプリケーションが動作していることが多い（Webペー
ジを表示するHTTPサービスやファイル転送の ftp 、データベースなど）
つまり、ドメインホストだけではどのサービスなのか特定できない
IPアドレスとポート番号
ドメインホストをマンション（IPアドレスという住所で表現可能）とするとポート番号は部屋番
号に例えることが可能
Webページの表示には一般的にポート番号80が利用される（未指定時には暗黙的に指定さ
れている、下記の 1 と 2 はいずれも同じWebページが表示される）
1. http://www.google.co.jp
15

16. 2.ネットワーク1（localhost）
localhostとは
インターネットではコンピュータ同士が通信するが、通信相手のコンピューターのことを
remotehost（リモートホスト）といい、通信元の操作しているコンピューター（要するに自
分自身）をlocalhost（ローカルホスト）と呼ぶ
localhost は IPv4 では 127.0.0.1 という IP アドレスで表現され、ループバックアドレスとも呼ば
れる
ネットワークに関する決め事なので Windows でも Mac も共通
何のために存在するの？
手元のマシンがリモートホストのように見えて通信されるため、最終的にはインターネットサー
ビスとして開発しているサービスを手元で開発する、など 16

17. プログラムの動作原理
サーバサイドとクライアントサイド
17

18. プログラム動作の仕組み
18
<クライアント> <サーバー>
HTML
CSS
画像
JavaScriptコード
リクエスト
PHPなどサーバサイド
プログラム実行画面の描画
JavaScript実行

19. サーバ/クライアントサイドプログラムの実践
実践手順
PHP/JavaScriptプログラムファイルを作成する
サーバにファイルを転送する
ブラウザでアクセスする
ソースコードを見る
19
● PHPはブラウザのソースコードに表示されない
● JavaScriptはブラウザのソースコードに表示される
確認

20. 開発現場で使うツール／手法
20

21. ソースコード管理git
最新のソースコードがどれかわからなくなった
古いソースに戻したい
とりあえず修正してみるが後で戻したくなるかも
そんな悩みが全て解決するのがバージョン管理ツールです。
gitというツールが一番人気があり便利です。
21

22. デベロッパーツール
通信内容を確認したい
画面の変化を見ながらCSSを修正したい
スマホでの表示を確認したい
印刷状態を見てみたい
JavaScriptのデバッグをしたい
全部できます！デベロッパーツール。
Chromeのもので説明します。
22

23. 仮想マシン
MacだけどWindowsも使いたい
サーバなど別マシンとの連携テストを擬似的にやりたい
無料の仮想マシン（VM）製品で実現できます！
23

24. IDE/エディタ
HTMLやPHPのコードを便利に入力したい
プログラムをステップ実行（※）させたい
正規表現などの便利なテキスト編集機能を使いたい
無料ツールでいいのがたくさんあります。
今日はEclipseを紹介。
24