NIKKEI 2024新卒研修 Webの基礎 - 前編 (公開用)
5.1K Views
May 15, 24
スライド概要
日本経済新聞社の2024年度新卒向け研修で行った、「Webの基礎 前編」の講義資料
関連スライド
各ページのテキスト
Webの基礎 - 前編 (公開用) 2024年度デジタル新卒研修 araya / Ryoma Abe Better insights for a better world © Nikkei Inc.
この研修で目指すところ 前編 ● ● ● Webページが表示されるまでのリソースのやり取りについて理解する Web技術の学習方法の勘所を掴む 日経電子版Webの歴史と強みについて学ぶ 後編 ● ● 日経電子版Webで使われている技術について理解する 実際に手を動かし、社内APIやモダンCDNサービスの利用方法について理解 する Better insights for a better world © Nikkei Inc.
予防線と宣伝 時間が限られているため前編で扱う内容はWeb技術のかなり基礎的な部分のみを 扱います。 人によっては知っている内容しかなくてつまらないかもしれません。 Webの中のそれぞれ固有のドメインについて詳しい内容を解説していく研修を別 途企画しています。実現し、興味があれば参加してみてください。 Better insights for a better world © Nikkei Inc.
準備 この研修で利用するアプリケーション群を https://github.com/Nikkei/dg-training-web-basic-2024-public から `git clone` し、 `make dev_first` で起動してください 並行して、Firefoxをインストールしておいてください 今環境がない人もこちらで操作しながら見せるので大丈夫です 後で時間があれば試してみてください Better insights for a better world © Nikkei Inc.
Webサイトを開いてみよう ブラウザ で http://127.0.0.1:8082 を開いてみましょう Better insights for a better world © Nikkei Inc.
ブラウザの開発者ツールを起動 右クリック -> Inspect(検証) or option + command + I(mac) or ctrl + Alt + I(Win) ブラウザの開発者ツールにはWeb開発のための様々なツールが揃っている この資料内ではGoogle Chromeを用いているが、他のブラウザでも同様の機能を 持っている Better insights for a better world © Nikkei Inc.
ネットワークタブ 開発者ツール上部のタブからネットワークを選択してリロード Better insights for a better world © Nikkei Inc.
ネットワークタブ ブラウザがそのページのために取得したリソースを表示している Better insights for a better world © Nikkei Inc.
ネットワークタブ "127.0.0.1" を開いて何が書かれているか見てみましょう 書かれている内容をどのくらい説明できそうですか？ Better insights for a better world © Nikkei Inc.
ネットワークタブ "127.0.0.1" を開いて何が書かれているか見てみましょう 書かれている内容をどのくらい説明できそうですか？ ● ● ● ● ● Request / Response とは？ Request Methodとは？ GETはどのようなリクエストであることを意味する？ Status Codeとは？200はどういう意味？ Headerとは？ 各Headerは何を示している？ Better insights for a better world © Nikkei Inc.
Client-server model World Wide Webの根幹はClient-server model clientはrequest(要求)を送信し、serverはresponse(応答)を返送する request response client(ブラウザなど) Better insights for a better world server © Nikkei Inc.
どんなreq/resを送るか request, responseの形式が実装によって違ってしまうと相互運用性がなくなって しまう。ブラウザAはfoo.example,ブラウザBはbar.example専用... 通信可能 client A Waterdogブラウザ メッセージが読み取れないため 表示できない (話す言語が違うような状況) server A http://foo.example/ 通信可能 client B Opusブラウザ Better insights for a better world server B http://bar.example © Nikkei Inc.
送信するデータの形式の"仕様"が必要 "統一されたデータフォーマットとその送信方法"(=プロトコル) があれば、それに 準拠しているcleint/serverであれば相互に通信可能 通信可能 server A http://foo.example client A Waterdogブラウザ 通信可能 通信可能 client B Opusブラウザ Better insights for a better world server B http://bar.example © Nikkei Inc.
通信プロトコル Webで用いられるプロトコルは様々あり、レイヤー構造になっている HTTP/1.1 HTTP/2 HTTP/3 TLS HTTP/1.1 Web Socket Web Transport Web RTC QUIC TCP DTLS DHCP UDP IP Ethernetより下 Better insights for a better world © Nikkei Inc.
開発者ツールのネットワークタブでプロトコルを表示 Better insights for a better world © Nikkei Inc.
開発者ツールのネットワークタブでプロトコルを表示 Better insights for a better world © Nikkei Inc.
通信プロトコル ネットワークタブで見たリソースはHTTP/1.1でやりとりしていた HTTP/1.1 HTTP/2 HTTP/3 TLS HTTP/1.1 Web Socket Web Transport Web RTC QUIC TCP DTLS DHCP UDP IP Ethernetより下 Better insights for a better world © Nikkei Inc.
HTTP/1.1の仕様を調べてみましょう 好きな方法でHTTP/1.1の仕様がどこにあるのか調べてみてください(1 min) Better insights for a better world © Nikkei Inc.
HTTP/1.1の仕様 HTTP/1.1の仕様はRFC9112でIETFにより策定されています https://www.rfc-editor.org/rfc/rfc9112.html RFC7230~RFC7235にたどり着いた人もいるかもしれません https://www.rfc-editor.org/rfc/rfc7230 https://www.rfc-editor.org/rfc/rfc7231 … Better insights for a better world © Nikkei Inc.
RFCの読み方 - 本文の前に RFC のヘッダー部には、重要な情報が記載されている Better insights for a better world © Nikkei Inc.
RFCの読み方 - 本文の前に RFC のヘッダー部には、重要な情報が記載されている … によって廃止されている エラッタ(仕様バグや修正) がある … を廃止している … を更新している Better insights for a better world © Nikkei Inc.
RFCの原則 ● ● ● RFC にバージョンはない。たとえ1文字だけのtypoであろうと、RFCになっ たものは編集することができない 仕様上見直したほうが良い箇所は”errata”にまとめられる 仕様上見直すポイントやRFC同士の関係性を整理して別のRFCとして策定す ることがある ○ -> 既存のRFCの一部を更新(Update)したり、既存のRFCを廃止(Obsolete)する Better insights for a better world © Nikkei Inc.
HTTP関連の代表的なRFC RFC 9110 HTTP Semantics - バージョンに依らない、HTTPで通信する際のルール RFC 9111 HTTP Caching - HTTPのキャッシュについて RFC 9112 HTTP/1.1 RFC 9113 HTTP/2 RFC 9114 HTTP/3 Better insights for a better world © Nikkei Inc.
RFCを読んで HTTP/1.1を実装してみましょう ● ● RFC 9110 - HTTP Semantics https://www.rfc-editor.org/rfc/rfc9110.html RFC 9112 - HTTP/1.1 https://www.rfc-editor.org/rfc/rfc9112.html Better insights for a better world © Nikkei Inc.
HTTP/1.1ではどうやってコネクションを作る？ https://www.rfc-editor.org/rfc/rfc9112.html#section-9 > HTTP messaging is independent of the underlying transport- or session-layer connection protocol(s). HTTPはトランスポート層のプロトコルに依存しない > the "http" URI scheme (Section 4.2.1 of [HTTP]) indicates a default connection of TCP over IP, with a default TCP port of 80 http: URI scheme を使ったときのデフォルトはTCP over IP => 現実的に触れるHTTP/1.1はほぼ全てTCP上なので今回はTCP上で実装します Better insights for a better world © Nikkei Inc.
今回は時間がないのであらかじめ用意したものがこちら 最初に https://github.com/Nikkei/dg-training-web-basic を起動できた人は、 http://127.0.0.1:3000/ を開いてみてください Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 https://github.com/Nikkei/dg-training-web-basic/blob/main/tcp-server/mai n.go Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 メッセージの送信部分はこれだけ Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く serverがclientに送信するメッセージに必要な情報は https://www.rfc-editor.org/rfc/rfc9110.html#name-messages で説明されて います サーバーは、ステータスコード(セクション15)を含む一つ以上の「応答」メッ セージを送ることで、クライアントのリクエストに 応答する。応答はまた、サーバー情報、リソースメタデータ、表現メタデータのための ヘッダーフィールド、ステータスコードに 従って解釈されるコンテンツ、 およびコンテンツの送信中に収集された情報を伝えるためのトレイラー フィールドを含むかもしれ ない。 Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く コンテンツ、ステータス、ヘッ ダーフィールドを文字列として 書き込んでいる "\r\n" と改行を入れている このメッセージフォーマットを 定義しているのが RFC9112(HTTP/1.1) Better insights for a better world コンテンツ ステータス ヘッダー フィールド © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く Better insights for a better world © Nikkei Inc.
HTTP/1.1 serverの実装 - 仕様から読み解く Better insights for a better world © Nikkei Inc.
HTTP/2とHTTP/3 HTTP/2とHTTP/3もHTTP/1と同様、「ステータス」「フィールド」「コンテン ツ」というセマンティクス(RFC9110)で定義される情報を送る ただ、その情報を送るフォーマットがHTTP/1.1とは異なり、HTTP/2, HTTP/3は バイナリデータを送る セマンティクスは共通だが、そのデータを送るための機能が進化している HTTP/2: https://www.rfc-editor.org/rfc/rfc9113.html HTTP/3: https://www.rfc-editor.org/rfc/rfc9114.html Better insights for a better world © Nikkei Inc.
最初に見たWebサイトに戻りましょう http://localhost:8082 Better insights for a better world © Nikkei Inc.
最初に見たWebサイトに戻りましょう どのリソースもHTTPで取得しています 自由課題: 各Header fieldの意味を調べてみましょう Better insights for a better world © Nikkei Inc.
例: content-type response header field content-type について調べてみましょう Better insights for a better world © Nikkei Inc.
調べ方 - AI chat bot 日経AI bot, ChatGPT, Gemini など 概要をざっくり掴むにはあり。こちらも二次情報であり、不正確な情報も含まれ ることがあることに注意 Better insights for a better world © Nikkei Inc.
調べ方 - ググって記事を見る Qiita, Zenn, 個人ブログなど 二次情報ではあるが、具体的なユースケースや実運用する上での課題など参考に なる付随情報がある ● https://zenn.dev/search?q=content-type ● https://qiita.com/search?q=content-type Better insights for a better world © Nikkei Inc.
調べ方 - MDN HTTPやHTML,CSS,JSなどのWeb技術で困ったらまずはここから Mozillaが運営するコミュニティベースのWiki 二次情報であることに注意 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type Better insights for a better world © Nikkei Inc.
最終的に一次情報源や仕様をたどる癖をつけましょう MDNの多くの記事には仕様へのリンクが載っています すべての場合において一次情報をたどる必要はないですが 実装の根拠としたい場合やトラブル解決の際には辿る癖をつけましょう https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type Better insights for a better world © Nikkei Inc.
最終的に一次情報源や仕様をたどる癖をつけましょう https://www.rfc-editor.org/rfc/rfc9110#field.content-type Better insights for a better world © Nikkei Inc.
HTML/CSS/JS/… もちろんHTMLやCSS,JavaScriptにも仕様があり , "Web"というプラットフォーム は様々な技術の仕様や実装が組み合わさってできています HTML, DOM, CSS, JavaScript, Browser APIs, Web Assembly, compression, Image encoding, Video encoding, Unicode, HTTP, TCP, UDP, IP, TLS, DNS, URI, Accessibility, …… その上でアプリケーションを開発するためのライブラリやフレームワークも多種 多様です React, Vue, Angular, Next.js, Nuxt.js, Laravel, Wordpress, …… => すべてを理解するのは無理なので調べたり検証する能力をつけるのが重要 Better insights for a better world © Nikkei Inc.
Web技術における一次情報/二次情報 ● 一次情報 ○ ○ ○ ○ ● 二次情報 ○ ○ ○ ● 各種仕様 ブラウザやライブラリの実装 ライブラリのドキュメント オフィシャルのカスタマーサポートから得た情報 個人ブログ MDN AI chat bot 微妙な線 ○ 中の人の個人としてのSNSへの投稿 Better insights for a better world © Nikkei Inc.
余談: HTTPとHTTPS 様子見て時間なかったらスキップします Better insights for a better world © Nikkei Inc.
通信プロトコル HTTP/1.1はover TLSでも一般的に使われている HTTP/1.1 HTTP/2 HTTP/3 TLS HTTP/1.1 Web Socket Web Transport Web RTC QUIC TCP DTLS DHCP UDP IP Ethernetより下 Better insights for a better world © Nikkei Inc.
通信プロトコル HTTP/2はTLS 1.2以上を使わなければいけないとRFC9113 section 9.2で定めら れている HTTP/1.1 HTTP/2 HTTP/3 TLS HTTP/1.1 Web Socket Web Transport Web RTC QUIC TCP DTLS DHCP UDP IP Ethernetより下 Better insights for a better world © Nikkei Inc.
通信プロトコル HTTP/3ではその下のレイヤーであるQUICでTLS1.3が組み込まれている HTTP/1.1 HTTP/2 HTTP/3 TLS HTTP/1.1 Web Socket Web Transport Web RTC QUIC TCP DTLS DHCP UDP IP Ethernetより下 Better insights for a better world © Nikkei Inc.
検証のためにFirefoxの設定を変更しましょう FirefoxはデフォルトでHTTPS-Onlyが有効になっているので、検証のために切っ ておきましょう Better insights for a better world © Nikkei Inc.
何が違う？ https://example.com http://example.com にアクセスして、違いを見てみよう Better insights for a better world © Nikkei Inc.
httpsだと安全？ http: 「安全でない接続」 https: 「安全な接続」 Better insights for a better world © Nikkei Inc.
httpだとどうなるの？ 今は client(ブラウザ) と server が直接 req/res を 送受信している このネットワーク上には proxyなど、なんかしらの 中間者(intermediary)がい るかもしれない Better insights for a better world proxyを設定 © Nikkei Inc.
proxyを有効にする Firefox のネットワーク設 定からproxyを設定する プロキシー: 127.0.0.1 ポート: 3001 「このプロキシーをHTTPS でも使用する」にチェック Better insights for a better world © Nikkei Inc.
HTTPS-onlyモードを一旦解除 Better insights for a better world © Nikkei Inc.
サイトを開いてみる proxy を設定した状態で再度 ● ● http://example.com https://example.com を開いてみよう 開いたら一度 cmd+Shift+R(mac) か Ctrl+Shift+R(Win) でリロードしてくださ い Better insights for a better world © Nikkei Inc.
！！ Better insights for a better world © Nikkei Inc.
レスポンスが改ざんされた HTTP での通信は内容が暗号化されていないため盗聴や改ざんが可能 MITM(Man In The Middle) attackや中間者攻撃と呼ばれる Better insights for a better world © Nikkei Inc.
HTTPS HTTPS(HTTP over TLS, https://www.rfc-editor.org/rfc/rfc9110.html#section-4.2.2 ) は TLS を使って 通信を暗号化する Better insights for a better world © Nikkei Inc.
HTTPS 暗号化することで、経路上の第三者が盗聴や改ざんができなくなる Better insights for a better world © Nikkei Inc.
httpsだと安全？ Firefoxは「安全な接続」と言っていた => 「安全なサイト」とは言ってない Better insights for a better world © Nikkei Inc.
安全な接続 ≠ 安全なサイト HTTPSは通信経路を安全にするための仕組みであり、サイトそのものが安全で信 頼できるものかは関係ない Better insights for a better world © Nikkei Inc.
ちなみに... Free Wi-Fi につないだときにメールアドレスなどを入力させられるcaptive portalはこのMITM attackを利用しているものもある(最近は減っているらしい) そういうときや開発用途、検証のためにhttpでサーブしているページを知ってお くと便利です ● ● ● http://example.com (httpsもサーブしている) http://neverssl.com (ページを表示した後JSでhttpsにリダイレクトしてい る) 自分で立てる Better insights for a better world © Nikkei Inc.
Firefoxの設定を戻しておきましょう Better insights for a better world © Nikkei Inc.
HTTPS-onlyも お好みで Better insights for a better world © Nikkei Inc.
日経電子版とWeb Better insights for a better world © Nikkei Inc.
公開用のため割愛 Better insights for a better world © Nikkei Inc.