プログラミング講座 #10 インターネット

プログラミング講座 #10 インターネット @ZOI_dayo

まず、ブラウザの仕組み、知ってますか? というかこのスライド、ブラウザがどう動いてるかを解説するのにほとんどの時間使うので、知ってたら 読み飛ばしてください まずは身近なところから。ブラウザを何に使ってますか? もちろん、インターネット使ってWebページを見るためですね

ブラウザの通信 ここで、ブラウザはインターネットを使って通信をしているということがわかりました 通信とは、当然データのやり取りのことです なので、細かく言えば01、大雑把に言えば文字列だけでやりとりしてることになります Webページのレイアウトを画像としてそのまま送ってるわけではないです ここまでくれば気づいている人もいるかもしれませんが、 そうです、HTMLを通信しているのです

HTML みなさん多少はやってるようなイメージがあるので詳しくは述べませんが ... <h1>タイトル</h1> とかいう書き方で、文字だけでレイアウトを表すやつです CSS/JSの話はまた後で

ブラウザの通信 ブラウザは、指定されたURLにアクセスし、HTMLが送り返されてくるので、 それを解釈してカラフルにして画面に表示しているのです これが、Web開発で絶対HTMLを避けられない理由です 「Webページ」とは「HTMLで表現されたもの」なんですね ここまでで、ブラウザには次の2つの仕事があることがわかります(まだ増えますが) - 指定されたURLにアクセスし、HTMLをもらってくる (今からの話題) HTMLを解釈して表示する (解説終わり)

URLとは URLにアクセスして...と普通に書きましたが、URLとはなんでしょうね https://twitter.com/home とか、 https://www.google.com/ とか、... 「http://もしくはhttps://」→「〇〇.〇〇.com(など)」→「/home(など)」 に分割できます はじめの、http/httpsは「スキーム」です、これは通信方法を表します HTTP/HTTPS(Hypertext Transfer Protocol)で通信するってことです←HTMLの「HT」 その後の「twitter.com」や「www.google.com」をドメイン名といいます (次ページ)

• https://twitter.com/home
• https://www.google.com/

ドメインとは 「www.google.com」とあれば、もちろん www.google.comに向けて通信します(そしてHTMLをもらいます)という意味です はいそうですね、なんですが、ここで問題があります パソコンは、www.google.comの(オンラインでの)場所を知りません ハガキを送りたいけど相手の名前しか知らない(住所を知らない)みたいな感じです どうしましょう? 名前→住所の辞書があればいいわけです これを、Domain Name System、つまりDNSといいます

(おまけ) 住所とは? オンライン上の、google.comの住所って何...? となりますが、これは 「google.comのWebサーバーのIPアドレス」のことです IPアドレスの詳しい解説はまた今度にしますが、相手のIPアドレスさえわかれば、 相手が世界中どこにいようとも、通信ができます(相手に拒否されたら無理ですが) なので、現実世界の住所のように使うことができるわけです ちなみに、「172.217.25.174」みたいな見た目をしています DNSは、「google.com」と言われた時、「172.217.25.174」と返すサービスです

(おまけ) なんでドメインとIPと2種類あるの ネットの仕組み上、「172.217.25.174」という番号がないと通信はできません しかし、こんな数字覚えたくないです なので、「google.com」という名札をつけた、というわけです

(おまけ) ドメインの所有権 例えば、自分のパソコンのIPアドレスに「zoi.com」というドメインを割り当てたいとします 普通に使えたら良いのですが、それだと「google.com」も割り当てられることになります これでは偽Googleが乱立して困るので、基本「〇〇.com」「〇〇.net」という塊で ドメインを買う必要があります(年額1500円くらい、もちろんすでに他人が使ってたら無理) ここでのポイントは、僕がzoi.comを買ったとすれば、aaa.zoi.com、bbb.ccc.zoi.comあたりの 所有権も僕にあります(サブドメインと呼びます) なので、偽サイトを見抜く一番簡単な方法は、ドメインの末尾をみることです google.zoi.comは偽物、zoi.google.comは本物です

おさらい Webブラウザの話から始まり、 URL入力→DNSでIP取得→通信→???→HTML受け取り→表示 という流れなことがわかりました ???のところ、気になりますよね つまり、「向こう側」...「サーバー側」「Google側」で何をしているかです

Webサーバー

サーバーとはserver、つまり供給者です
この場合、「通信が来たらHTMLを返信する」という仕事をしています
すっごい雑にいうと、こんな感じです↓(謎言語)
function onRequest(url) {
if(url == “/”) return “<h1>こんにちは!</h1>”;
else if(url == “/home”) return “<h1>/homeです!</h1>”
}
(これはGoogle側で実行されてるので、〜〜.google.com部分は当然すぎて省略されてます)
(なので、https://google.com/は/として扱われます)

• https://google.com/

Webサーバー もちろん、コードの中にHTMLを直書きしていると日が暮れます なので、こんな感じでどうでしょう const files_dir = “~/web”; function onRequest(url) { return readFile(files_dir + url + “.html”); } これで、例えばgoogle.com/homeにアクセスした場合、サーバー内の「~/web/home.html」 というファイルの中身が帰ってきます

Webサーバー もちろんこんなクソコードではハッキングされるしかないし、まずonRequestもreadFileも 自分で色々実装しないといけないのでめんどくさいの極みです めんどくさい場合はどうするか? → どこかの暇人が作ってるはずです 「通信が来た場合、あるフォルダに置いてある該当ファイルの中身を送り返す」という ものとしては、「Apache」「Nginx(ｴﾝｼﾞﾝｴｯｸｽ)」が有名です ただし注意として、http://google.com/ならサーバー内の/path/to/dir/index.html、 http://google.com/home/ならサーバー内の/path/to/dir/home/index.html、 http://google.com/home.htmlならサーバー内の/path/to/dir/home.html、が該当ファイルです (/で終わる場合、その後にindex.htmlと自動補完される感じ)

• http://google.com/
• http://google.com/home/
• http://google.com/home.html

動的サイト これで一安心...かと思いきや... 例えばログイン機能のあるサイトを作り、ユーザーのマイページを作るとします すると、/user/ZOI_dayo.html、/user/ZOI_dazo.html、...と大量のHTMLを作る必要があります しかも、レイアウトは同じなのでめちゃくちゃ無駄です、めんどくさいです じゃあ自動化しましょう

動的サイト 例えばこんなテンプレートを用意しておいて、 const userPageTemplate = “<h1>{user}のマイページ</h1>”; こんな感じにすれば、 function getUserPage(name) { return getUserPageTemplate().replace(“{user}”、name); } これの結果をHTMLとして扱えば良さそうな気がします このように、「そんなファイルないけど、通信きたから今作って返信するね」という オンデマンド生成みたいなことをするのが「動的」なサイトです

動的サイト 動的サイトを作るのには、ApacheやNginxは向いていません(できるのかもわからない PythonやJavaScript(Node.js)のライブラリで使いやすいのがあるので、それを使うことがほとんどで す この場合、ApacheやNginxは使わず、Node.jsなどで「Nginxの代わりを作って動かす」という感じにな ります (ただExpressなどのライブラリが大体やってくれてるのでそんなに大変ではない )

動的サイト ただそんな大層なことはしたくない場合もあります つまり、基本は適切なファイルを返信するだけで、ユーザーページの時だけ テンプレート使って個別のページを返す、というものです(普通ですね) これは、Node.jsなどでExpressを直で使うと大変なので、 「React.js」「Next.js」「Vue.js」「Nuxt.js」といったNode.jsのライブラリや、 「Ruby」「PHP」などを使うことで、なんかいい感じにできます (これらは他の使い方も色々あるので、Webの話ではまた出てくる気がします)

おさらい URL入力→DNSでIP取得→通信 →HTMLファイル読み込み or HTML錬成 →HTML受け取り→表示 (1、3行目がブラウザの仕事、2行目がサーバーの仕事です) ブラウザはこの後、 - CSSの解釈/色付け ページ内のJavaScriptの実行 なども担当します あとは細かいことをいくつか

HTTP「S」とは Secure(安全)のSです、というかネット関係の略語のSは大体これです HTTPSだと安全、みたいに聞いたことがあるかもしれませんが、まあ間違ってはないです HTTPだと何も考えずに通信してしまうので、 「Googleにログインしたいです! IDはZOI_dayo、パスワードは0000です!!!!」 って大声で叫んでる感じになります、盗聴されたら即死です HTTPSになると、さっきのが暗号化されて 「cVlZUVpT1bed1bWb1bSG1bSS1bWF1beh1bep1…」 みたいになります(イメージですが)

HTTPSは「公式」? Sがついていたら偽サイトではない、とか言われますが、そんなことないです Sをつけるためには、認証局ってとこに登録(無料でも可)して、あとサーバーの通信設定を ちょっと変えるだけでOKです なので、(僕ができてることから当たり前ですが) 盗聴されないだけで、そのサイトが安全かどうかは何 も保証されません

WebSocket 双方向通信ができます これまでのHTTPは、リクエスト→返信、と1方向の通信でした (サーバーがブラウザにリクエストすることはない) しかし例えばチャットアプリを作りたい時、 ブラウザA・B「ログイン」 ブラウザA「『こんにちは〜』って投稿したい」 サーバー「おけ、保存しとく」 この時、新着メッセージがあることはブラウザBに伝わっていません

WebSocket WebSocketはこれを解決できます 細かいことを全部無視すると、 ブラウザA「『こんにちは〜』って投稿したい」 サーバー「おけ、保存しとく」 サーバー「WebSocketで繋がってるみんなー! Aさんの新着メッセージあります!!」 ブラウザB「気づいたわ、表示しとく」 ユーザーB「リロードしてないのに画面が更新された、ありがたい...」 とできるわけです LINEとかだと当たり前すぎますが、2chとかだとまだリアルタイムできてないはず

まとめ 今回は、ブラウザの仕事あたりから、DNS、サーバー、動的サイト、WebSocketあたりまで 解説してみました このWeb周辺技術を分かっておくと、普通に日常に役に立つこともある (偽サイト見分けたりなど)ので、まあ趣味みたいな感じで知っておくのもいいですね ただWebエンジニアとかの方面に行こうとすると、この内容は絶対逃げきれないレベルのものなので、 ぜひ今のうちに知っておきましょう!

終わり