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フレーム

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

  • インターネットを成立させるためには、
    端末が識別できるだけでは不十分。
    一つの端末には複数のサービスが動いていて、
    それらを識別する仕組みが必要。
    これがTCPUDPと呼ばれる仕組みである
  • 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ブラウザの複雑化

  • Webブラウザの進化によって、
    これまでサーバーで処理していたこと、
    デスクトップアプリケーションでないとできなかったことが、
    ブラウザ上でできるようになってきている
    • PWA
      • ブラウザへのインストール
      • デスクトップ通知
      • キャッシュ制御
    • 各種WebAPIの拡充
      • センサーへのアクセス
      • カメラ
      • WebVR
  • 同時にセキュリティへの懸念も増大している。
    詳しくはつばめ先生に聞いてみよう。

通信のリアルタイム化

  • これまでリクエストを送って返ってきて
    そのまま⋯⋯という流れだったWebが、
    どんどんリアルタイム通信に寄せられていっている
    • WebRTC
      • P2Pの映像・音声配信
    • WebSocket
      • ソケット通信に似た、
        サーバーとのリアルタイム通信
    • WebPush
      • サーバーからいつでもプッシュ通知を送る

JavaScriptの進化

  • JavaScriptは、当初大規模な利用を想定されておらず
    言語として明らかに劣っている部分がたくさんあった
  • しかしその後多くの協議を経て言語自体に
    多くの改善が加えられ、今では新しい言語と
    比較しても申し分ない完成度の言語となっている。
  • 使用によって標準化されたJavaScriptのことを
    ECMAScriptと呼び、現在では1年おきに新バージョンが
    リリースされている。
  • ECMAScriptの策定手順が他の言語と大きく違うのは、
    コミュニティベースの提案や改善が多く取り入れられ
    仕様策定前にパブリックなコメントが
    多く寄せられる点である。そのため変な仕様や
    変な挙動が入りにくいという利点がある。

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

  • ブラウザの進化により
    これまでのデスクトップアプリケーションのような
    複雑な機能を実装することができるようになるとともに
    フロントエンドのコードがどんどんと複雑化していった。
  • 近年これらに対応するためのライブラリが多く発明され、
    さまざまな技術が注目を浴びている
    • 仮想DOMとデータバインディング
      • React, Vue, Angular...
    • ステート管理
      • Redux, Flux, Vuex...
    • 変数のイミュータブル化
      • Immutable.js

JavaScriptを記述する
環境の変化

  • AltJS
    • TypeScript
    • Rust
  • リソースのコンパイルと一元化
    • Browserify
    • Webpack
    • Rollup

実習

おわり

初心者分科会 Web特講 第1回 Webの仕組みを理解する

By Koki Takahashi

初心者分科会 Web特講 第1回 Webの仕組みを理解する

2019-08-25 2016年度TSG第1回Web分科会

  • 901