タイトルは釣りです。すいませんm(_ _)m

シンプルに『プロになるためのWeb技術入門』という書籍を読んで内容をサクッとまとめているだけです。

ただ、最近はプログラミングスクールに通う人が増えて、RailsやLaravelなどのフレームワークをメインに勉強する初心者エンジニアさんが多いと思います。（僕含め）

そのような方はおそらくWebアプリ・サービスが『どうやって動いているのか』を知らないのではないでしょうか...?

例えば「HTTP,プロトコル,TCP/IP,IPアドレス,ポート,サーバーの種類,Cookie,ORM,SQLインジェクション,etc...」などの用語を理解していない人も多いはず！（僕も。。。）

しかし、これらをきちんと理解しておかないと新しい技術を学ぶときに理解が遅くなったり、エラーが発生してもその場しのぎでしか解決できない！みたいな「そこそこのエンジニア」にしかなれないと思います。（異論は認めます!!!）

ということで、僕と同じようにそもそもWeb技術の知識がないという方はぜひこの機会に理解してみては(´ω｀)ﾉ

多分、この記事をざっと読むだけでもある程度は理解できるはずです！！

もっと詳しく知りたい方は、ぜひ著者さんに還元する意味でもプロになるためのWeb技術入門を手に取ってみてください！

前書き（注意事項（（保険...）））

・この記事はあくまで自分が理解できるようにメモをとっただけなので、箇条書きが多いです。より詳しく知りたい方は本書を手に取ってください。

・今回は記事がかなり長くなりそうだった（なった）ので、折り畳み式にしました。

・「サーバー」・「サーバ」など表記揺れがちょくちょくあると思いますが、ご了承くださいm(_ _)m

・若干、僕の解釈が違うところもあるかもなので、そのときはご指摘してもらえると嬉しいです。（優しいコメントはなお嬉しい🥺）

・「ここもっとわかりやすく書け小僧！」みたいなのがあったらコメントください。がんばります。

Webが発展した経緯・背景

World Wide Web（ワールド・ワイド・ウェブ）の概要・誕生背景・成り立ち

WWW（web）とは、HTTPを利用して文章や画像、音声、映像などデータのデータを送受信する仕組みのこと。

・World Wide Web（略：www、読み：ワールド・ワイド・ウェブ）は現在では「web」・「webサイト」・「ホームページ」と呼ばれているもののこと。

・発端は欧州原子核研究機構（CERN：「セルン」又は「サーン」）という組織が核素粒子の実験結果を全世界の研究者に共有したかったこと。

・そこで、CERNのバーナーズ=リー博士が「HTML」と呼ばれる統一された形式で研究成果を表現しようとした。

・HTMLのすごいところは他のファイルと繋がるテキスト（ハイパーリンク：一般的には「リンク」と言われている）の機能。（ちなみに、ハイパーテキストとは、他のファイルと繋がっている形式のファイルのこと。）

・これにより資料が複数あっても共有しやすく、見やすくなった。

・しかし当時のWWWは、画像が別タブで開く感じでファイル自体は文字ばかりで見にくく、まだまだ一般人には普及しないレベル。

・そこで、NCSA Mosaic（モザイク）というWebブラウザが誕生。

・これにより、Webページに文字と画像を混在させて表示できるようになり、一般人にも普及していった。

HTTPについて

HTTPって言われたら、とりあえず「クライアントとサーバー間でデータを送受信する約束事！」ってイメージしておけばOK。

・HTTPとは「通信プロトコル」の一つ。
・通信プロトコルとは情報をやりとりするための取り決め。
・WWWの世界でHTMLをやりとりするために定められたプロトコルが「HTTP」

HTTPリクエスト

クライアントがサーバー側に「こんなデータくれ！」ってリクエストすること。

・HTTPリクエストは下記のような内容になっている。
・リクエスト・ヘッダ部分（1行目以下）は[フィールド名]：[フィールド値]という記述になっている。

＊上記の画像は「ITSakura.com」さんの「「HTTPリクエスト」と「HTTPレスポンス」」という記事にて掲載されていたものになります。わかりやすくまとめてくれているので、こちらを拝借して解説していこうと思います。

①：リクエストラインと呼ばれるHTTPリクエストで最も重要な部分。
②：メッセージ・ヘッダと呼ばれる部分。
③：メソッド。リクエストの種類を表すもの。他にはPOSTやDELETEとかある。
④：URI（Uniform Resource Identifire）。URLとほぼ同じ。
⑤：HTTPバージョン。HTTP/1.0などもある。
⑥：User-Agent。利用しているWebブラウザの種類やバージョンを示す。「スマホ用のHTMLを返す」などの判断や統計に使われる。
⑦：Accept。Webクライアントが受け取ることのできるデータの種類を表したもの。Content-Typeという形式で表される。（例：text/html)これにより、Webサーバーは不要な情報を送信しなくて良くなる可能性がある。
⑧：Referer（リファラ）。リンク元（直前に見ていた）ページ。
⑨：Accept Encoding。ブラウザがデコードできるエンコーディング形式。
⑩：Accept Language。Webクライアントが受け取れる自然言語の種類を示す。自然言語とは人間が使用する言語。（日本語、英語など）
HOST：リクエストの送信先ホスト名やポート番号を指定する。

HTTPレスポンス

レスポンスは「「HTTPリクエスト」と「HTTPレスポンス」」をみてください。（本にもざっくりと書かれていた感じなので、、、笑）

GETとPOSTリクエスト（メソッド）の違い

一言でまとめると「パラメーターの格納場所が違う」って感じかな...

**** **【GETメソッド】** ・GETメソッドはURLにパラメーターを格納する。（例`https://qiita.com/search?q=test`の`?`以降がパラメーター）・だから他人から簡単にパラメーターが見られる。（URLを見ればわかるし、Webサーバーのログにも残る）・ただし、逆に言えばURLにパラメーターが記述されてるから、URLをコピペした時とかに同じ結果が出る。（そのおかげで、ブックマークもできるし、友達にシェアもできる）・このように同じ要求を何度繰り返しても、同じ結果が得られることを**「副作用がない」**といったりする。

【POSTメソッド】
・POSTメソッドはメッセージ・ボディにパラメーターを格納する
・だから、セキュリティ面は比較的高い
・でもパラメーターの保存がしにくい。URLをシェアしても違う結果になる。

TCP/IP

**IPアドレスで宛先を判断し、情報（データ）を届けるプロトコル。例えるなら手紙を書いて、ポストに書けば、宛先の住所に届けてくれる「郵便配達」みたいなイメージ。**

・HTTPによる通信は誰に（どのサーバーに）情報を届けるかを**『IPアドレス』**によって判断している。

・IPアドレスがわかれば宛先のホストが特定できるので「TCP/IP（ティーシーピー・アイピー）」というプロトコルがホストへ任意の情報を届けている。

・TCP/IPはブラウザなどから受け取ったHTTPリクエストなどの情報を「パケット（Packet）」と呼ばれる小さな単位に分割して送信している。

・受け取った側のTCP/IPが元のように組み立てから、Webサーバーなどに渡している。

・では、なぜそんな面倒なことをしているのか？

・理由は単純で『一気に大量のデータを送信できないネットワークがあるかもしれないから』。小さな単位（パケット）で送っておけば、送信に失敗してもそのパケットだけ送りなおせばいいから効率的でもある。

IPアドレス

IPアドレスとはネットワークに接続された機器を特定するための住所みたいなもの。

・IPアドレスは誰が管理しているのか？
→ICANNという民間非営利法人が世界のIPアドレスを管理している。日本ではJPNICがICANNから委託を受けて国内のIPアドレスを管理している。

・ICANN→JPNIC→インターネット・サービス・プロバイダー（ISP）というような順に「このIPアドレスの範囲で使ってね！」と割り当てられている。

・僕たちがインターネットを利用する度にISPが確保しているIPアドレスの1つが一時的に自分に割り当てられるようになっている。

グローバルIPアドレス

・インターネット上で唯一のIPアドレスのこと。

プライベートIPアドレス

・インターネットなどの他のネットワークに接続されていないネットワーク（プライベート・ネットワーク）上で使われるIPアドレス。

・他のネットワークと繋がっていないから、IPアドレスが重複していても問題にならない。

DNS（Domain Name System）

ドメイン名からIPアドレスに変換する仕組みのこと。

・IPアドレスで各コンピューターを特定できることはわかった。

・でも、URLにはIPアドレスとか記述されてないよね？どうやって、わかるの？

・それを実現するのがDNS

・DNSはドメイン名とIPアドレスの対応表を持ったコンピューター（DNSサーバー）をインターネット上に配置しておいて、DNSに問い合わせればドメイン名に対応するIPアドレスを教えてもらえるというもの。

・ちなみにDNSサーバーはいつかに分散されている。（リスク回避、処理速度などの理由のため）

・一番トップにあるのが「ルートDNSサーバ」といわれる、トップレベルドメイン（.jpや.com）などを管理しているDNSサーバ。

・その下に各トップレベルドメインごとに、例えば「.jpドメインのDNSサーバ」のように分散管理されている。

ポート番号

コンピュータの中のどのアプリケーションが送られてきた情報を処理するか分別するための番号。

・TCP/IPはIPアドレスを見て、どこに情報を送ればいいのか理解した。

・しかし、コンピュータに送ったはいいものの、受信側のTCP/IPはそのコンピュータの中のどのアプリケーションにこの情報を渡せばいいのかわからない。また、どのようなプロトコルのものであるかもわからない。（例えるなら、マンションはわかったけど、部屋番号がわからないみたいなイメージ。）

・そこで、ポート番号を使う。

・ポート番号は本来HTTPリクエストを送るときにqiita.com:80みたいな感じで指定する必要がある。

・でも、それは面倒なので、あらかじめ一般的なプロトコルで指定されるポートは決めておこう！ってなっている。（これを「ウェル・ノウン・ポート（よく知られたポート）」と呼ぶ。）

・例えば、スキーム（httpなどのurlの先頭についてるやつ）でHTTPプロトコルを使用するとわかった場合は、ポート80を使うと決まっている。

Cookieについて

CookieとはWebブラウザに状態を持たせる技術のこと。これによりログイン情報の保持などが可能となる。

・WebサーバがWebブラウザにHTTPレスポンスを返すとき、「名前 = 値」（これをCookie）という組み合わせをヘッダを利用して送る。例えば、レスポンス・ヘッダには`Set-Cookie:user=test`みたいなのが書かれている。

・Webブラウザは次回、同じWebサーバにリクエストするときはヘッダに受け取ったCookieをそのまま入れて送る。

・別のサーバーにリクエストするときはCookieの情報は入れない。

・このようにすることで、サーバー側でCookieの情報が漏れないようにしている。

・しかし、Cookieの値は簡単に覗かれてしまうので危険がある。

Session

クッキーをより安全に管理するために開発された仕組み。

・Cookieの仕組みだけでは危険なのでSessionという仕組みも合わせて使えばより安全性高まる。

・仕組みとしては次の通り。

・まずはサーバがセッションIDを発行して、セッション情報にログイン中ユーザ名を記録する。

・そして、CookieにセッションIDを格納して、レスポンスとして返す。

・次に同じサーバにリクエストを送るときはセッションIDを格納したCookieを渡す。

・サーバー側は受け取ったセッションIDと一致するセッション情報を確認する。

・このようにセッションIDをcookieに保存する仕組みにすることで、仮にcookieが覗かれても、そこにはセッションID（ただの識別子）しかないので、問題ない。

Webアプリケションの構成要素

さまざまなソフトウェア

ソフトウェアとはコンピューターを動かすプログラムや文書の総称。対比はハードウェア（マウス、キーボードなど）。

コンピュータの世界では同じものを指すのに複数の言葉を使うことがあったり、微妙にニュアンスが違ったりする。

その一つがソフトウェア系の言葉。

プログラム

コンピュータの行う処理の手順を指示したもので、ソースコードそのものを指すことが多い。

アプリケーション

PC上で動作して、コンピュータを道具として利用する人に機能を提供するためのもの。

applicationは元々「応用する」という意味もあって、「特定の目的を果たすソフトウェア」という意味から「アプリケーション」と呼ばれているらしい。（コピ）

サーバー

サーバーは特定の機能を提供することに特化したソフトウェアで、それ単体ではシステムを成さないので、アプリケーションなど他のソフトウェアと組み合わせて使う。

プロセス

コンピュータ上で動作しているソフトウェアのこと。実行単位。「2つのプロセスが実行されている」みたいな感じで使う。

データベース

コンピュータ上で扱う情報の集合

・人が顧客管理とか紙でやるのは、大変だよね！ってことでデータベースが生まれる。

・しかし、何十万件とかの情報から高速に計算・集計するソフトウェアを開発するのはむずいし、大変。

・そこでデータベースの実現と取り扱いに特化した**「データベース管理システム（DBMS：データベースマネ・ジメント・システム）」**が開発され、みんなが使うようになった。

・ちなみにDBMSを単に「データベース」と言ったり、「RDBMS」と言ったりすることもある。（本来は違うけど、同一呼びされる。）

サーバー

サーバーとは、英語で書くと「Server」となり、提供する側という意味を持つ言葉です。利用者の要求（リクエスト）に対して、それに応答したデータを提供するコンピュータやプログラムのことを“サーバー”と呼んでいます。
参考：サーバーとは？種類や用途について簡単に解説

サーバーにもいくつか種類がある。

Webサーバー

・HTTPに則って、Webブラウザからの処理に対してレスポンスを返すソフトウェア、またはそのコンピュータそのもののこと。

・もちろんWebサーバー用のソフトウェアをインストールしないといけない。

・種類としては「ApacheHTTPDServer（略：Apache）」や「MicrosoftInternetInformationServices(ISS)」。最近は「nginx（エンジンエックス）」などもある。

DBサーバー

・データベースをWebサーバ（コンピュータ）上で動作させることは可能。

・でも、WebサーバはHTTPリクエストの処理とかしないといけないので、データベースの操作まで一緒にすると大変。

・それなら分けちゃえば良くない？ってなって、DBサーバーができた。

アプリケーションサーバー

・そもそもWebサーバーは静的なコンテンツ（決まったHTMLファイル）を返すだけ。

・でも、Webアプリには動的コンテンツ（ユーザーの入力値によって、HTMLファイルを書き換えること）も必要。

・じゃあ、書いたプログラム（ソースコード）をサーバ側で実行しないとね。

・Webサーバと同一のノード（コンピュータ）で実行することも可能だけど、それだと負荷がかかりすぎるなどのデメリットが大きい。

・だから、アプリケーション（プログラム・ソースコード）を実行する用の別のノード（コンピュータ）を作ろう。

・このように、プログラムを実行するサーバをアプリケーションサーバという。

Webシステムの三層構成について

Webシステムでは利用シーンや規模に応じて、様々な構成（いくつノードを使うかなど）をとるが、サーバーサイドでは「Webサーバ・アプリケーションサーバ・データベースサーバ」の3つの構成要素が登場する。

このようにWebシステムを構成するソフトウェアを大きく3つの役割に分けて連携させる構成を**「三層構成」**と呼ぶ。

その他の用語や本書を読んでいるときに調べて理解したこと

本書を読んでいる中で、調べたことや上手く上記でまとめれなかった部分があったのでメモっておきます。

トランザクション

トランザクションとは、webアプリケーションが実装するシステムで「確実に」完了させる必要のある一連の処理のこと。

アーキテクチャ

設計スタイルとその設計に基づく全体構造のこと。

例えば、『MVCモデル』などがアーキテクチャに当たる。

そもそもインターネットとは？

インターネットとは**「ネットワークとネットワークを繋いだ環境のこと」**です。

じゃあネットワークとは？

複数のコンピュータ（PCやスマホ）同士が有線や無線（電波）で繋がっている状態や仕組みのこと。

（無線で繋ぐ場合は電波を飛ばして、繋がります。）

LANとは？

狭い範囲でのネットワークをLAN（local area network）と呼びます。

例えば、学校間や家族間などの狭いエリア（一般的な認識は建物単位）で有線や無線でコンピューター同士を繋いだ環境（ネットワーク）のこと。

無線LAN（≒ wi-fi）とは？

無線でデータの送受信を行うLANシステム（通信技術）そのもののこと。

無線LANの中に「Wi-fi」や「blutooth」が位置付けられる。

無線LANの世界的標準規格は「IEEE 802.11」といいます。
正確にいうと「IEEE 802.11という通信規格を採用した無線LAN機器を製造するメーカーの業界団体が『Wi-Fi』という共通規格を作り、Wi-Fiが無線LANの世界的標準となった。そのWi-Fiの採用している通信規格がIEEE 802.11である」
参考：無線LANの基礎知識

しかし、上記の通りで、LANまたは無線LANといえばWi-fiを指すのが一般的。

無線LANルーターとは？

LAN（Wi-fiなど）でコンピュータ（スマホやPC）とインターネットを繋ぐ役割を果たす機械。

インターネット系のまとめ

要するに、有線などでコンピュータ同士が繋がったネットワーク（LAN）だけだと、遠くのコンピューター（サーバーなど）とデータの送受信ができない。

これだと近くのパソコンやスマホのデータを送受信するだけになる。例えば、Airdropとかは近くのios同士でデータを送受信できるが、まさにあれ。

そこで、LANルーターがインターネットとコンピューターが繋がる橋渡しをしてくれているってイメージ。

LANルーターとコンピューター（例えばスマホ）は一般的にはWi-Fiで繋がる。

ブラックボックス

内部の構造を知っていなくても、操作が可能という概念的なもの。

最後に

『プロになるためのWeb技術入門』を読んでメモしただけなのですが、おかげでかなりweb技術の理解が深まりました。

本書での経験を通して、これら最新技術の「根本の仕組みと考え方」を身につけようと思うようになる方が1人でも多くなることを願っています。

と、最後に書かれており、僕はもっと深い部分を知りたいなぁと思いました。

この本を読む前は「HTTPリクエスト・ポート番号ってなんだろ...?」みたいな雑魚だったのですが、今では人に解説できるぐらいのレベルにはなったと思います。（多分、嘘です。）

本書は図解が多くて、かなりわかりやすかったです！！！

あと思ったのは、やはり技術書はKindleより、生の方が良きですね。（一度Kindleで買ったのありますが、結局放置してしまっている。。。）

この記事を読んで、少しでも役に立ったと思う人がいれば幸いです。お疲れ様です！

追伸：この本読めば、もっとエンジニアとしてレベルアップできるよ！みたいなのがあればぜひコメントくださいm(_ _)m