Web

2019-08-24 TSG 初心者分科会 Web特講第1回

@hakatashi

第1回 Webの仕組みを理解する

自己紹介

博多市(@hakatashi)
自称フロントエンドエンジニア

Agenda

Webプログラミングとは
ネットワーク
Webブラウザの登場
サーバーを支える技術
最新技術動向
実習 (時間があれば)

Webプログラミングは大変

ネットワーク
バックエンド
- データベース
フロントエンド
- JavaScript
- CSS
- HTML
設計思想
- アーキテクチャパターン
- セキュリティ

学ばないといけない技術領域が広い、かつ多種にわたる

どの技術一つとっても激重で
極めるのに時間がかかる

今回の目的

今回の講義 (第1回) は、そんな広大なWebの世界を
ひととおり眺めて、そもそも
Webサイトがどういう仕組みで動いているのかを
大雑把に理解することが目的

ネットワーク

インターネットは通信

「インターネット」のことを考える前に、
まずは1台のコンピューターと1台のコンピューターの
通信を考えてみる
そこらへんに転がってるLANケーブルを持ってきて
ファイルを送信したとする
ケーブルの中を流れているのは電気信号 (1000BASE-Tなど) だが、
今回はそのレベルの話はしないとして、
中を流れている「データ」は一体何?

インターネットはIP通信

現在、インターネットを支える通信のほとんどが
IPと呼ばれる仕組みを利用している
- →そもそもIPは Internet Protocol の略
インターネットを利用する端末には
IPアドレスと呼ばれる番号が付与され、
通信先を識別するために用いられる
- 例: 160.16.228.30
インターネット上でやりとりされるデータは、
みな「送信元のIPアドレス」や
「送信先のIPアドレス」などの情報を記した
固定のフォーマットに整形されて運ばれる。
このフォーマットをIPフレームと呼ぶ

第10回 IPパケットの構造とIPフラグメンテーション (2/3)：基礎から学ぶWindowsネットワーク - ＠IT
https://www.atmarkit.co.jp/ait/articles/0304/04/news001_2.html

IPフレーム

アプリケーションを識別する

インターネットを成立させるためには、
端末が識別できるだけでは不十分。
一つの端末には複数のサービスが動いていて、
それらを識別する仕組みが必要。
これがTCPやUDPと呼ばれる仕組みである
TCPやUDPはポート番号と呼ばれる番号で
そのデータの通信先の「サービス」を指定する。
- HTTPはTCPの80番、HTTPSはTCPの443番、
  DNSはUDPの53番など
TCPやUDPは (原則として) IPフレームの「上で」動作する。
すなわち先程のIPフレームのデータ部分に乗せられる
フォーマットであり、「通信先のポート番号」や
「通信元のポート番号」などを記した固有のヘッダーを持つ。
このフォーマットをTCPセグメント・UDPセグメントと呼ぶ

16. TCP/IP - TCP・UDPセグメント - インターネット技術講座
https://sites.google.com/site/networkinglecture/1_internet/16_tcpip03

TCPセグメント

TCPの仕組み

TCPとUDPの違いは、一言で言えば「複雑さ」である
- TCPは複雑、UDPは簡単
TCPもUDPも両方よく使われるが、実際のインターネット通信で
目にする機会が多いのはTCP
- HTTP/3が来ると変わるかも
UDPがデータを送りつけるだけの単純な通信を行うのに対して
TCPは端末間にコネクションを確立してから通信を行う。
実際の通信環境では、パケットの喪失や着順の錯誤がありうる。
これらにアプリケーションレベルで対応するのは大変なので、
TCPのレイヤーで対応する仕組みになっている。
逆に言えば、UDPを用いる場合これらへの対応を自分で
実装する必要がある。
一般に、コネクションを確立するための手続きを
ハンドシェイクと呼び、特にTCPが用いているハンドシェイクの
仕組みを、3ウェイハンドシェイクと呼ぶ。

ASCII.jp：「スリーウェイハンドシェイク」の手順、わかっていますか？｜ネットワークがクイズでわかる！誰が正解？「TCP/IP」
https://ascii.jp/elem/000/000/619/619702/

3ウェイハンドシェイク

通信を物理的に伝搬する

一度低レイヤーの話に戻る。
IPアドレスは「端末」を識別するアドレスだが、
物理的に通信を伝搬するには、「マシン」レベルで
通信相手を識別しないといけない。
- 一つのマシンが毎回同じIPアドレスを
  持つとは限らない。
このために、一台のマシンには必ず固有の
MACアドレスを持つ。
- Mac OS とは全く関係がない
このMACアドレスを用いて物理的な通信を行うのが
イーサネットであり、IPフレームは通常この「上に」
乗せられて通信が行われる。
MACアドレスとIPアドレスは通信する際には
通常1対1で対応する。これを対応付ける仕組みが
ARPである。

イーサネットフレーム

ASCII.jp：Ethernetのフレーム構造を理解しよう (1/3)｜入門Ethernet
https://ascii.jp/elem/000/000/427/427324/

TCP/IP

まとめると、通常のインターネット通信で
送られるデータは、以下のようなフォーマットに
包まれ、カプセル化されている。
- イーサネット: 物理的なマシンを識別
- IP: 通信相手としての端末を識別
- TCP or UDP: 通信対象のアプリケーションを識別
- 実際に相手に贈りたいデータ
これらをまとめた一つの通信単位としてのデータを
パケットと呼ぶ。
また、同時に使われることが多いこれらの技術を
まとめてTCP/IPスイートもしくはIPスイートと
総称することが多い。

TCP/IPのパケット

記憶術で覚えるイーサネット②イーサネットフレーム、MACアドレス – ランスルネット
http://www.runsurunet.com/2017/05/17/%E2%91%A1%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%8D%E3%83%83%E3%83%88%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0/

(簡易化された) OSI参照モデル

OSI参照モデル(おーえすあいさんしょうもでる)とは - コトバンク
https://kotobank.jp/word/OSI%E5%8F%82%E7%85%A7%E3%83%A2%E3%83%87%E3%83%AB-1905

をもとに作成

イーサネット通信

IP通信

TCP/UDP通信

本当にやりたい通信

さらに詳しく？

ここまでで述べたのがインターネットを支える
TCP/IP通信の基礎の基礎。
実際にはもっと複雑な技術がここから絡んでくる
- IPマスカレード、輻輳制御、TCP再送請求、
  シーケンス番号、PPPoE、ゲートウェイ、
  サブネットマスク、ブロードキャストアドレス、
  IPv4、IPv6、ICMP、IPsec、MSS、
  Well-known Ports、チェックサム、フラグ、
  広域インターネット、無線通信など⋯⋯
だが、Webを軽く触るだけなら必要ないので省略
興味ある人はネットワークの勉強をしよう!

Webブラウザの登場

Webブラウザ

これらの通信技術が進む以前の1960年代、
単なる文字情報だけじゃない、いろんなメタ情報を
含んだテキストで通信することが考えられる。
ハイパーなテキストなので、ハイパーテキストと呼ぶ
- これだけは言わせてもらいたいんだが、
  名前をつけた人 (Theodor Nelson) はアホだと思う
のちにインターネットが整備されるとともに生まれた
このハイパーテキストを記述するための言語の一つが
HTML (Hyper Text Markup Language)、
これを伝送するために発明されたプロトコルが
HTTP (Hyper Text Transfer Protocol) である。
そして、インターネット越しに伝送されたHTMLを
クライアントが専用のブラウザー (閲覧用ソフトウェア) で
閲覧する、という発想が生まれることになる。
このようなブラウザーを通常ウェブブラウザーと呼ぶ。

HTMLの例

HTML is <big>Sugoi!</big>

HTTPの例

HTTP/1.1 200 OK
Server: nginx/1.14.2
Date: Sun, 25 Aug 2019 00:45:01 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 8706
Access-Control-Allow-Origin: *
Cache-Control: max-age=600
X-Proxy-Cache: MISS
X-GitHub-Request-Id: CB16:702F:2AE3EB:2E3810:5D60AA86
Accept-Ranges: bytes

HTML is <big>Sugoi!</big>

GET /hakatashi/sugoi.html HTTP/1.1
Host: tsg.ne.jp
User-Agent: curl/7.55.1
Accept: */*

リクエスト

レスポンス

これらが実際には
先ほど説明したTCP/IPフレームの内部で
伝達される

HTMLはセマンティクス

HTMLはタグと呼ばれる記法で文書のメタ情報を
記述する。
- このへんはSGMLやXMLといったGMLの系譜を
  知ってないとちゃんと理解できないけど、
  その辺はまるっと省略
- 関係ないけど伊藤計劃の『ハーモニー』最高なので
  絶対読んでくれよな～～～～～～
HTMLが表現するのは文書のセマンティクスである。
その多くが見た目に関するものなので混同されがちだが、
「ここは強調されるべき箇所」「ここは箇条書き」
などの「意味」をマークアップで示すのみであって、
それがどう表示されるべきかに関しては何も規定しない。
- 実を言うとHTML5以前はこのあたりが仕様でも
  混同されていたが⋯⋯

CSSの登場

HTMLやHTTPが広く使われるようになると、
「ウェブページの見た目を細かく制御したい」
といった要望が現れてくる。
このために発明されたのがスタイルを記述するシート、
すなわちスタイルシートであり、これを
HTMLの上に「適用」することで見た目を制御させる。
現在は、CSS (Cascading Style Sheet) と呼ばれる
フォーマット以外はほぼ用いられない。
HTMLがセマンティクスを表現するのに対して、
逆にCSSは「見た目の情報」しか表現しない。
- つまり、記述的な意味を持たない。

CSSの例

HTML is <big>Sugoi!</big>

body {
  background-color: red;
}
big {
  display: inline-block;
  transform: rotate(-30deg);
}

HTML

CSS

JavaScript

ブラウザの普及が進むと、今度はブラウザ上で
簡単なスクリプトを実行する要求が生まれ始めた。
このために発明された「ブラウザ上で動作する」
スクリプト言語がJavaScriptである。
- よく言われるが、Javaとは (ほとんど) 関係ない。
最初は「ボタンをクリックしたら〇〇を表示」
のような、Webページに単純なギミックを実装するのに
用いられていたが、時代が下るとともに言語・ブラウザともに
進化が進み、現在ではブラウザゲームのような
複雑なソフトウェアまでブラウザ上で実行できる。
- コードの規模は数万行～数百万行程度にまでなる
このようにクライアント上のWebブラウザが
先端技術化・複雑化する傾向は現在でも続いている。

JavaScriptの例

document.querySelector('big').onclick = function() {
  this.textContent = [
    'sugoi!', 'amazing!', 'happy!', 'ojigineko!',
  ][Math.floor(Math.random() * 3)];
}

JavaScript

HTMLと外部リソースの関係

HTMLとCSSとJavaScriptは完全に別言語だが、
HTMLの内部にCSSやJavaScriptを
記述することができる。
また、CSSやJavaScriptを別ファイルとして
保管し、HTML上にその場所を記述することもできる。
このように、現代のウェブサイトはHTMLだけで
完結せず、複数のリソースを取得してはじめて
ウェブページとして表示可能な状態になる。

サーバーを支える技術

Webサーバー

TCP/IP通信は本来1対1だが、HTTPなどの通信において
主にHTMLなどのリソースを「提供する側」の
役割を持つ端末のことをサーバーと呼ぶ。
- 特にWebではWebサーバーと呼ぶことが多い。
Webサーバーの機能を実装するソフトウェアを
Webサーバーソフトウェアと呼ぶが、
これを単にサーバーと言っても通じる。
(後者) サーバーは、OSの機能にアクセスして
TCP接続を待ち受け、HTMLを規定のフォーマット (HTTP) で
送信してくれれば、ぶっちゃけなんでもいい。
例えば1番単純なWebサーバーはC言語で次のように
実装することができる。

Webサーバーの例

#include <sys/types.h>
#include <sys/socket.h>

int main() {
  struct sockaddr_in clientaddr;
  socklen_t addrlen;
  
  int listenfd = socket(AF_INET, SOCK_STREAM, 0);
  listen(listenfd, 1000000)
  int client = accept(listenfd, (struct sockaddr *)&clientaddr, &addrlen);
  
  send(client, "HTTP/1.1 200 OK\r\n\r\nHello!", 21);
  shutdown(client, SHUT_WR);
  close(client);
}

サーバーソフトウェア/
フレームワーク

しかし毎回こういった接続処理や
コネクションの管理を記述するのは大変なので、
特定の目的に用いられるサーバーソフトウェアや
サーバーフレームワークが世の中には多く
実装されており、
Webプログラミングではそれらを用いて
サーバーの機能を実装することが多い。

ファイルサーバー

複雑な処理をせず、クライアントの要求に対し
固定されたファイルを送信するだけのサーバー
- このような要求の内容によって変化しない
  コンテンツのことを静的コンテンツと呼ぶ。
複雑な処理をしないと言ったが、現在では
ユーザー認証・速度制御・CGI・プロキシなど
複雑な処理を同時に行うことも多い。
著名なソフトウェア
- Apache (アパッチ)
  - 古き良きファイルサーバー
- NginX (エンジンエックス)
  - ApacheのC10K問題に対処するために開発された

PHP

Webサーバーを実装するために開発された
プログラミング言語。
埋め込み記法によってWebアプリケーションを
直感的に記述できるのが売り。
現在では複雑化するWeb環境に対応できておらず
若干レガシーに感じられることが多いか

<?php session_start(); ?>

<!DOCTYPE html>
<title>PHP Test</title>
<?php if (date('D') == Fri) { ?>
  <p>Happy Friday!!!!!</p>
<?php } else { ?>
  <p>I'm unhappy</p>
<?php } ?>

金曜日なら「Happy Friday」と表示するWebサイトを実装したPHPコード

その他の言語

C, Python, Ruby, Perl など、いずれも
汎用的に使えるプログラミング言語だが、
Webサーバーを実装するためにもよく用いられる。
- 特に最近ではJavaScriptの汎用実行環境である
  Node.jsを用いてサーバーが実装されるなど、
  JavaScriptのクライアントからサーバーへの
  移動現象 (?) が起きている。
これらの言語を使用してサーバーの開発を行う際には、
言語の標準ライブラリや外部ライブラリ、
そしてWebサーバー用のフレームワークを
用いることが多い。
その中でも特によく用いられるものについて解説する。

Ruby on Rails

Rubyという言語を世界に広げた一大役者。
現在ではRubyの用途の半分以上を占めており、
RoRと略されることも。
MVCというデザインパターンを採用した
Webフレームワークの一種であり、
Railsの「流儀」に則ってビジネスロジックを
書くことによって
簡潔かつ拡張性の高いWeb開発を行うことができる。
- この「Railsの流儀に則る」ということを
  on the rail (レールに乗る) と表現することも
デザインパターンとかビジネスロジックっていうのは
第2回で話すよ、たぶん

その他、よく使われる
Webフレームワークなど

PHP
- CakePHP
- Laravel
Python
- Django
- Pyramid
Ruby
- Sinatra
- Ruby on Rails
Node.js
- Express.js
- Fastify

Web

自己紹介

Agenda

Webプログラミングは大変

今回の目的

ネットワーク

インターネットは通信

インターネットはIP通信

IPフレーム

アプリケーションを識別する

TCPセグメント

TCPの仕組み

3ウェイハンドシェイク

通信を物理的に伝搬する

イーサネットフレーム

TCP/IP

TCP/IPのパケット

(簡易化された) OSI参照モデル

さらに詳しく？

Webブラウザの登場

Webブラウザ

HTMLの例

HTTPの例

HTMLはセマンティクス

CSSの登場

CSSの例

JavaScript

JavaScriptの例

HTMLと外部リソースの関係

サーバーを支える技術

Webサーバー

Webサーバーの例

サーバーソフトウェア/ フレームワーク

ファイルサーバー

PHP

その他の言語

Ruby on Rails

その他、よく使われる Webフレームワークなど

最新技術動向

Webブラウザの複雑化

通信のリアルタイム化

JavaScriptの進化

複雑化するクライアントサイドに 対処するためのライブラリ

JavaScriptを記述する 環境の変化

実習

おわり

サーバーソフトウェア/
フレームワーク

その他、よく使われる
Webフレームワークなど

複雑化するクライアントサイドに
対処するためのライブラリ

JavaScriptを記述する
環境の変化