web技術をちとかじろう

Web技術を支えている技術の紹介

誤解を恐れず、8割方おふざけで行きます。1
しっかり学びたい人は、こちらへ。

developer.mozilla.org

登場人物の入場です。

  1. ステートフル(stateful)
  2. ステートレス(stateless)
  3. リクエスト(request)
  4. レスポンス(response)
  5. クッキー(Cookie)
  6. プロトコル(protocol)
  7. ポート番号(port)

今日のWeb技術ライブ会場に集まってくれた子は、以上の7名だよ。
※説明の関係上、登場順番と関係なく説明していきます。

プロトコル」が結ぶ不思議な握手

まず、このライブ会場で一番使われるのは、「リクエス」と「レスポンス」。
一般の世界では、「コール」&「レスポンス」というよ。2
出演者が呼びかけたら(コール)、観客が返す(レスポンス)が基本なんだ。
ここ(Web技術ライブ会場)でもアクセスするために、
ブラウザからWebサーバーに向けてリクエストするんだ。
そしたら、html・画像などをレスポンスするって、決まりなんだ。
この決まりのことを、「通信プロトコル」(今回はHTTP)というんだ。
間違えると、リクエストが届かないんだ。
実際のライブなんか、そうだよね。
思い付きのコールをすると、微妙な空気になるでしょ。
相手が人間の時でさえ、そうなんだから、
ましてや機械相手(サーバー)。
プロトコルを間違えた通信が届くわけないよね。
まぁ、安心して。
Web技術世界は安心設計。 ブラウザがサポートしてくれるから。

HTTPプロトコルの中身は、知りたいならこのリンクを見てね。

HTTP | MDN

話の都合上、ここから出演者と観客の関係性が逆になります。
前章では、出演者がメイン(一般ユーザー視点)でしたが、メイン(一般ユーザー視点)は観客に切り替わります。3

フルとレス

このライブに来てくれる観客には、2種類の楽しみ方をする人がいるよ。
それは、「ステートフル」と「ステートレス」だよ。
一般人の世界では、「ファンクラブ会員」と「非会員」というらしいね。

会員のチケット(ステートフル)には、登録している名前が印刷されているよ。
なぜって。
それは、ライブ運営元が君の情報を知っているからだよ。
なんなら、ライブ終わりに推しからメールが来ることだってあるかもしれない。
なぜって。
それは、ライブ運営元が君の情報を覚えているからだよ。

逆に、非会員のチケット(ステートレス)には、名前が印刷されてないよ。
(※実際にはチケット支払い時の名義が印刷されていることもあります。)
推しからのメールも来ないよ。
それは、ライブ運営元が君の情報を知らないからだよ。
どこに送っていいかが、分からないよね。

Web上のコンテンツは、基本的に何もしなければステートレスの状態だよ。
(※ブラウザにGoogleアカウント等の記憶させるている場合、違うこともあります。)
つまり、同じページ(ライブ)に何回足を運んだところで、君が来たということは伝わってないの。
それは、サーバー(ライブ運営元)が君の情報を知らないからだよ。
(※ただし、自己満足として、ブラウザの履歴に残ります。厳密にはアクセスログは残るよ。)
それでは満足できない君は、会員(ステートフル)にならないとね。
会員になる方法は、

  1. ライブ運営元に、君の情報を登録すること。
  2. アカウントを持っていることを証明すること。

これがすべてだよ。簡単でしょ。
ただ、2番の証明が大変なんだ。
Webでは、説明した通りプロトコル(HTTP)に沿った上で、
証明しないといけないんだ。

セッションという目には、見えない関係性

証明が大変だ。
でも、安心して。便利な奴がいるんだ。
Cookie(クッキー)」って奴なんだ。
もし、彼がいなければ、
君はライブ会場に入る時だって、
ファンクラブのサイトを移動する時だって、
自分が会員であることを、自分で証明する必要があるんだ。
移動するたびに、IDとパスワードを手に持たなくてはいけないんだ。
つらいよな。
そこで、頼れるクッキー君の登場だよ。
彼は、必要とあらば君の頭に搭乗(登場)するんだ。帽子のようにね。
そして、代わりにIDとパスワードを持ち、君と一緒に移動してくれる。
これで、会員だと証明をしながら、君は手ぶらで移動ができるね。

でも、少し考えてみてよ。
いつも君の頭の上には、クッキー君。
つまり、IDとパスワードが終始4頭の上。
不用心だね。

そこで日常でよく使われているのが、session(セッション)という連携技だね。
詳しくは説明しないが、
ページにログインすれば、特殊な文字列が発行されるんだ。
その発行した文字列を、クッキー君に渡すんだ。
そうすれば、アクセスする度にクッキー君が持っている文字列を見て、
サーバーが「この前のあの子だね」と通してくれるんだ。
顔パスだね。5
これで、君は「ステートフル」。

入り口は一つではない

実は、Webライブ会場の入り口は、実は一つじゃないんだよ。
知ってた?
普段君が利用する入り口は、80番・43番。
一般のライブでは、正面玄関がそれにあたるよ。
みんなが、利用する入り口だね。
でも、裏口もあるんだよ。
関係者専用入り口・機材搬入口のことだよ。
Webライブ会場の裏口は、21番(FTP)・22番(SSH)っていう入り口なんだ。
この番号を「ポート番号」と呼ぶんだよ。
まとめると、
ブラウザで利用するとき使う入り口は、TCPポート80、 TCPポート443。
Webサーバーの運用で使うのが、TCPポート21、 TCPポート22。

ちなみに、この扉は一定のルールを守れば、あけ放題だよ。
ただ、楽屋泥棒には気を付けてね。
そして、裏口から入る時は気を付けてほしいんだ。
ブラウザ上で煌びやかに輝いているHTML達が、文字列の塊だったいう事実。
(※一応ブラウザからでも、文字列して見れます。)
アイドルと同じだね。
あと、約束があるんだ。
コマンドを安易に使い、息の根を止めてはだめだよ。
バックアップは必ずとってね。
楽しいひと時が終わりを告げちゃうからね。

後日談

普通に書いた方が、楽だったのではと感じている。
そもそも、Web技術ライブ会場ってなんぞやって感じである。
ブログのタイトルを付けたときは、もっとまともに書くつもりのだったのになぁ。

しっかり学びたい人は、やっぱりこちら。

developer.mozilla.org


  1. 最後まで駆け抜けるために、一旦、自分を誤魔化す。しっかりしたものを書こうと意気込むと途中でやめたくなると思うから。卒業論文と同じ。後から肉付け。その後からは、きっと来ない。
  2. APIを呼び出すときにcallと使うので、Web技術世界でも「コール」&「レスポンス」でもいいかもしれない。
  3. すいません。書きながら違和感に気づきました。
  4. ※終始というのは、セッションが終わるまでを指します。
  5. サーバー上に格納されているセッション情報とcookie上の文字列と照合する。