🙄

プロになるためのweb技術入門を読んでみた

2024/08/09に公開

Web

tech

はじめに

プロになるためのWeb技術入門を読みました。
学んだ内容を一部振り返りとしてアウトプットします。

HTML(Hyper Text Markup Language)

研究結果を世界中に発信するため、1980年代にWWWという仕組みが誕生しました。
これはHTMLと呼ばれる記法で統一され、インターネットが普及される枠組みとなります。
HTMLの大きな特徴はハイパーテキストと呼ばれる仕組みにあります。
※ HTMLとは直訳すると「ハイパーテキストをマークアップする言語」です。

ではハイパーテキストとはなんでしょうか。
ハイパーテキストとはテキストの中にハイパーリンクと呼ばれる形式で文書を関連づけて
参照先の文書をすぐに閲覧できるようにした仕組みのことを言います。

ハイパーリンクとはクリックすると別のページに遷移できる仕組みの事を指します。
テキストの中にリンクを埋め込めるようにした仕組みがハイパーテキストです。
プロになるためのWeb技術入門

冒頭に登場したWWW(World-Wide Web)とは
リンク間の繋がりが雲の巣のように見えることから呼ばれています。

クライアント・サーバシステム

サイトを閲覧するときはGoogle chromeなどのブラウザアプリを起動し、
インターネットに接続して外部に公開されているハイパーテキストを閲覧します。

私たちが利用するブラウザからURLバーや検索機能より特定のページに遷移すると、
ブラウザからWebサーバにHTMLを要求します。
その後webサーバ側から指定のHTMLファイルを応答結果として返却されます。
その結果ブラウザ上に指定したページが閲覧できるようになるのです。

プロトコル

プロトコルとは直訳すると英語で「手続き」とか「約束事」を意味します。
古代ギリシア語で巻物の一枚目を「プロトコロン」と読んでたことに由来するとか。
それはさておきIT界隈では通常「通信プロトコル」のことを指します。
簡単に言えば「通信時のお約束」のことです。
約束事を定義することで両者間の通信が画一的なものとして利用することができます。
HTMLは主にHTTP(Hyper Text Transfer Protocol)を利用して通信を実施しています。
他にもファイル転送として利用されるFTP。
メール転送で使用されるSMTPなどがあります。

ステートフル、ステートレスなプロトコル

直訳するとステートフル(State Full)は「状態がある」、
ステートレス(State Less)は「状態がない」となります。
ではここで言うステートフル/ステートレスとはどういうことでしょうか。

例えばFTPやSSHはステートフルなプロトコルと呼ばれています。
この二つの通信はログインしないと機能が使えなく、
ログインした後はログイン情報(状態)が保持されます。

それに対しHTTPはステートレスなプロトコルとされています。
クライアントからHTMLを要求する際はログインを必要とせず、
またサーバから返却される情報は静的なページであり状態を何も保持していません。

HTTPはステートレス（状態を持たない）プロトコルだと上記で説明しました。
ただし実際のアプリケーションではログイン後の情報をユーザ情報として保持しています。
これを解決するためにCookieやセッションという技術が用いられています。

CookieとはWebサーバからWebクライアントに渡されるメモのようなものになります。
クライアントからサーバへの初回のリクエスト時にサーバ上でCookieが生成されます。
メモを通信時に添えるだけでログイン情報をやり取りしなくても済むようになります。

セッションとはHTTP通信の接続が確立された時から切断されるまでの一連の流れを指します。

具体的なデータの保持の仕方は以下の図を参照してください。
初回のリクエスト時にサーバ側でCookieが生成されます。
また初回セッションが開始されたことでセッションIDが採番され、Cookieに保存します。
例えばこの後に商品購入ページでデータをカートに入れた時に
セッションIDとともにカートの情報をメモリ上に保持します。
セッションIDをCookieに入れる事で以降はセッションIDから購入情報を
メモリ上から参照できるようになります。

なお、Cookie自体にユーザ情報を保持することも可能ですが、
セキュリティ上アンチパターンとされています。
Cookieを利用した情報のやり取りはリクエストやレスポンスのヘッダに残ります。
そのため、開発ツールなどで簡単に第三者が閲覧できます。
Cookieで大切な個人情報を保持することは絶対にやめましょう。

ポート番号

自分はどのプロトコルから接続されたかどうかを識別する事が必要になります。
それに応じて通信の解釈の方法が変わってくるからです。
ポート番号と呼ばれる値を、ホスト名やIPアドレスの後に指定することでプロトコルを指定できます。

http://localhost:3000/home

なおポート番号は0~65535の間で割り振られます。

私たちがよく使用するサイトのURLは基本的にポート番号を指定していませんよね？
これはどういうことなのでしょうか。zennのページを例に説明します。

https://zenn.dev/

これはURLの冒頭にHTTPSプロトコルを指定することで
受信側のコンピュータは443番をデフォルトの宛先ポート番号として指定します。
このようによく使われるポート番号は「well-known ports(よく知られたポート)」と呼ばれます。
代表的なものとしてHTTPは80番、HTTPSは443番などがあります。

終わりに

技術的な投稿は初めてになります。
文章を構成するのは難しいですね。
誤りや説明に至らぬ点などありましたらご指摘頂けると幸いです。

なお書籍自体は2010年度に出版されているため、
若干内容としては古いものの非常にわかりやすく説明されていました。

歴史的な背景などを詳しく説明しているため読み物として.
さらっと読み終える事ができました。

webの知識を一通り俯瞰したいかたは非常におすすめです。