はじめに

webエンジニアになるためには、web周辺の知識はマストで必要であり、プログラミングの知識だけでなくその周りの情報をキャッチアップする必要があると思い読み始めました。

本書は図がとても多くwebについての技術が少ししかない私でもわかるような作りになっているのでとてもおすすめです。
またインデックス的に学ぶことができるので次に何を勉強したらいいかや、webにかかわってきてる技術などをサラッと知ることができます。

1章 web技術の基本

webとは

本書では以下のように書かれていました。

インターネットを通じて提供される情報や商材を公開する、あるいはそれらをやり取りするためのしくみ
そういった膨大なもの中にwebサイトやwebアプリが存在しているということになります。

またこれらは、ハイパーリンクという仕組みによってあらゆるwebページに行くことができます。

webサイトとwebアプリ

これは何となく使っている方も多いかもしれませんが実は別物です。

webサイト

本書では以下のように書かれています

文章情報を中心としたwebページで構成される集合体です。

webアプリ

webアプリケーションの略称で、ショッピングなどの動的なしくみを指します。
構成はwebサーバーに加えてアプリケーションサーバー（APサーバー）やデータベースサーバー（DBサーバー）などが加わります。

つまり、静的で情報を伝えるのがメインなものをwebサイト、動的で会員登録やamazonのようなショッピングのカート機能、おすすめ機能などが搭載されているものをwebアプリと呼ぶということです。
webサイト1つ1つを構成しているのがwebページということです。

URLとは

皆さんもよくきくURLですが、実際にそれを見て何を意味しているのかご存じでしょうか。
例えば、このようなサイトがあったとします。

https://www.taira.com/about/index.html

https://

これはスキーム名といいます。これでホームページをみるためのプロトコルを表します。
プロトコルというのはいわば、ルール的なものです。
なのでhttps://はホームページを見るために最初につけておく必要があります

"www.taira.com"

これはFQDN（Fully Qualified Domain Name）といいます。
お恥ずかしながら初めて聞きました、、、

また、www（World Wide Web）はホスト名といいtaira.comはドメイン名といいます。

以前自分でWordPressを使用してホームページを作成したことがありますが、その際にドメイン名を取得した覚えがあります。とても懐かしい、、、

about/index.html

これはパス名といいます。WordPressでサイトを作ったことのある方はわかると思いますがaboutの部分は変えることができます。というより、最初の値だとなんのwebページかわからないので変える必要があります。

index.htmlはつけなくてもブラウザが認識して補足してくれるのでつけなくてもホームページを見ることができます。

webシステムの置き場所

企業でサービスを抱えている場合、webサーバーはどうしているのでしょうか。
大きく2種類あり、自社でwebサーバーを管理するか他社に管理を委ね、IT資産を借りる2種類があります。
後者については、主にAWSなどのクラウドサービスが主流ではないでしょうか。

現時点での主流はどちらなのかというと、2つめのクラウドサービスのようです。
これは本書に書いてありませんでしたが、なぜクラウドサービスのほうが普及しているか自分なりに考えてみました

初期コストが安い
自社サーバーを置く場所がない/その分スペースを節約できる

ほかにもいろいろ考えましたが、この2つに集約されるかなと思いました。
特に短い期間で成果を求められるスタートアップは、成果が出るか不確定なのに自社サーバーで費用を使っていては元も子もないのでクラウドサービスのほうが多いのではないかと思いました。

2章web独特の仕組み

HTTPプロトコルの概要

ここで章がかわりwebの裏側についての記載が増えてきました。
本書ではHTTPプロトコルの概要を電話を例に挙げて説明しています

電話は相手と電話が切れるまでやり取りを続けますが、HTTPは1回ごとに相手とのやり取りを完結させるステートレスという特徴があります。

HTTPリクエスト

HTTPを利用してwebページを参照するのですが、その際にHTTPリクエストとHTTPレスポンスが実行されます
HTTPリクエストにはさまざまなものがありますが、中でもHTTPメソッドが有名です。
HTTPメソッドの代表例に以下のものがあります。

GET（HTMLファウルや画像データを取得）
HEAD（日時やデータサイズなどのヘッダー情報のみを取得）
POST（データを送るときに使用）
PUT（ファイルを送信したいときに使用）
CONNECT（別のサーバー経由で通信）

リクエストによるレスポンス

HTTPリクエストに対して応答するのですがそれをHTTPレスポンスといいます。
HTTPレスポンスもHTTPリクエスト同様様々なデータがありますが、その中でもレスポンス行にはリクエストがどのように処理されたかを表すステータスコードがあります。

ステータスコード

サイトを見ていると404 Not Foundのような表記を見たことあるのではないでしょうか。
200はHTTPリクエストが正常に処理されていることを表しています。
ステータスコードは100～500番台まで存在し、ステータスコードを理解していることでなぜこのサイトにアクセスできないかを理解することができます。

動的ページのトリガー

上記でHTTPリクエスト・レスポンスについて触れましたが、その中でも動的ページはデータの入力→処理の実行→結果の出力・表示までを行う必要があります。
この一連のながれのトリガーとなる仕組みをCGIといいます。

こちらのサイトがとても分かりやすかったので参照したのですが、
要はクライアント（ブラウザ）からHTTPリクエストを受けてwebサーバー上で行われる仕組みのことを指すようです。

web開発に固有の技術

CGI以外にも動的な処理を実行するためにはスクリプト言語※を利用する必要があります。

※ちなみにスクリプト言語は難易度がそこまで高くないが複雑な処理ができるプログラミング言語を指すようです

クライアント側ではjavascriptやtypescript（著者はtypescript推しらしい）、サーバー側はJava,PHP,ruby,Pyhonがあるようです。
Node.jsを使用すればjavasriptでサーバ側をいじることもできます。

これらに関してはすでに知っていましたが、サーバーの言語のことをスクリプト言語というのは初めて知りました。

CMSとPHP

CMS(Content Management System)とは、基本的なwebページ、ブログ、管理機能がすでにあるものを指し、代表的なものとしてWordPressがあります。
CMSはHTMLとCSS以外にPHPを使用しています。
実際に私自身WordPressでホームページを作成したことがあり、すこーしだけPHPをいじった覚えがあります。

PHPはHTMLの記述に埋め込んで使うことができ、比較的簡単にコードを書くことができるようです。

Cookie

近年スマートフォンの普及によりwebサイトを見る機会が増えたと思いますが、その中でも「Cookieに同意する」といった画面を見たことはあるのではないでしょうか。

さきほどHTTPプロトコルはステートレスで電話のようにずっと通信しあっておらず、その都度通信していることを説明しました。

CookieはWebサーバーからのHTTPレスポンスに合わせて情報を送ります
そしてCookieを送られたブラウザが再びアクセスすると、「このユーザーは以前このサイトに来たことがあるな」と認識します。
ログイン情報を保持したり、2回目の人には1回目の人とはwebサイトの表示を変えるなど異なる対応をすることができます。

とても便利なしくみですが、一方では恐ろしい一面もあります。
あるAというサイトのCookieを確認するとB社やC社のCookie情報が使われてることがあるようです。

3章webを支える仕組み

前回はweb独特の技術を扱いましたが、今回はweb周りの技術について触れていきます

webを取り巻く技術

webをとりまくサーバーや機能としてFTP,DNS,Proxy,SSL,SMTP,POP3サーバーがあります。
またクライアントがwebサーバーに行くにはProxyやDNSを経由する必要があり、通信のプロトコルとしてはTCP/IPが利用されています。

TCP/IPの概要

クライアントとwebサーバーの間にはTCP/IPプロトコルが使われていますが、
仕組みは以下のようになっています。

参照）図解からまるわかりweb技術のしくみ p.71 図3-3

まずはどのようにしてデータをやり取りするかのアプリケーション層があります。
その後、トランスポート層がありますがここには2つのプロトコルが存在します
1つ目がデータを送信するたびに送信先のデータを明示するTCPプロトコルです。
TCPはウェブページのローディング・ファイルのダウンロード・メールの送受信・データベースへのクエリなどが含まれます。特にデータの欠損や順序の乱れが許されない状況での選択として重宝されます。またTCPは接続指向といって通信前に送受信間での接続を確認します。そのためしっかりデータを送れるので信頼性が高いといえます。

2つ目は電話のように継続してやり取りし続けるUDPプロトコルです。UDPはリアルタイムの音声や動画ストリーミングやゲームのオンラインマルチプレイ、DNSクエリなどのアプリケーションで利用されます。これは非接続指向なのでTCPと反して信頼性は低いといえます。

続いてインターネット層でどのコースで行くかを決めるのですが、その際にIPアドレスを使用します。
IPアドレスはネットワークで通信相手を識別するための番号です。いわばweb上の住所といえるでしょう。

最後にネットワークインターフェース層で物理的な通信を行います。

DHCP

インターネット通信において、IPアドレスで相手に呼びかけをしますが、相手から自分を見た際のIPアドレスが同様に必要となります。
DHCP(Dynamic Host Configuration Protocol)がその役割を担ってくれます。
DHCPは企業内サーバーやネットワーク機器は重要な存在かつ役割が変わらないので固有のIPアドレスを与えています。
一方、クライアントに対して動的にIPアドレスを割り当ててくれます。ただし動的に与えてくれているので、日時が異なると端末が同じでもIPアドレスが異なる場合があります。

DNS

DNS(Domain Name System)はドメイン名とIPアドレスを紐づけてくれる役割をしています。
URLにはドメイン名があるのでそこから目的のリンクに行くことができますが、DNSによってドメイン名とIPアドレスを紐づけていることによってそれが可能となっています。

Proxy

Proxyはインターネット通信の代行をする機能と効率化を図ることができるサーバーです。
本来であればクライアントからwebサーバーに直接通信するのですが、その間にproxyが入ることでwebサーバーへの通信を代理でやってくれるのです。第三者にお願いしているので、身元を隠すことができます。
また、Proxyが以前に訪れたことがあるサーバーであればサーバーを経由しなくてもすぐに答えを返してくれるので効率化しているというわけです。
また、Proxyはクライアントとwebサーバーの間に入るのでクライアントが閲覧する情報を制限することも可能です。学校でおもしろフラッシュ倉庫が見れないてきな感じです。（いまの子たちはわかるのだろうか、、ｗ）
内部だけでなく外部からの不適なアクセスからも守る役割をしています。

SSL

SSLとはクライアントからwebサーバーの通信のデータを暗号化し見れなくすることで機密性を高めてくれる仕組みです。
httpsのsの部分を指します。一方でhttpだけのものは通信が暗号化されておらず外部から何をしているか見られてしまうのであまり使わないようにしましょう。

5章 webと異なるシステム

※4章は一般的な内容だったので飛ばしました。

webと相性のよいメールサーバ

メールを送信するために使用されるサーバをSMTP(Simple Mail Transfer Protocol)サーバといいます。
相手にメールを送る一連の流れは以下の通りです

クライアントからSMTPにメールデータを送る
ドメイン名から相手のSMTPサーバをDNSへ問い合わせる
相手のSMTPサーバにメールを送る

一方メールを受信するために使用されるサーバをPOP3(Post Office Protocol Version3)サーバといい、これも同様受信の流れを載せておきます。

SMTPサーバ経由でPOP3サーバにメールが届いている
クライアントのアカウント名、パスワードが正しければPOP3からクライアントへ送られてきたメールを受信ボックスへ送る

6章 webとクラウドとの関係

私はまだエンジニアとして働いていませんが、友達のエンジニア曰く作業はクラウド上で行うといっていたので、webエンジニアになるためにはそこの知識が必要不可欠であると感じました。

クラウドとは

ITに詳しくない方でもicouldなど、クラウドという言葉は一度は聞いたことがあると思います。本書では以下のように定義されていました

クラウドとはクラウドコンピューティングの略称で、情報システムならびにサーバーやネットワークなどのIT資産をインターネット経由で利用する形態

図解からまるわかりweb技術のしくみ p.132 より引用

クラウドの特徴として以下のものがあげられます。

従量課金制度を採用
利用料の拡大や縮小が容易
サービス料を支払えば、クラウド事業者が利用枠を広げてくれます。オンプレミスだとなかなかそうはいかないと思います。
*IT機器や関連設備はクラウド事業者が保有
データセンターを自社で抱える必要がないので費用カットすることができます
機器や設備などの運用はクラウド事業者が行う
これによって自社のソフトウェア開発のみに力を入れることができます
セキュリティや多様な通信手段への対応が整備されている

本書にも書いてありましたが、変化が想定されたり、先の見通しが立てにくいサービスやシステムはクラウドが適しており、スタートアップは特にその一例だと思います。

クラウドサービスの分類

クラウドサービスは3つのサービスに分かれます

SaaS(Software as a Service)

ユーザーがアプリケーションとその機能を利用するサービスで、アプリケーションの設定・変更などを行います

図解からまるわかりweb技術のしくみp.134より引用

一番耳なじみのある言葉で私はSaas(サース）しか知らなかったです。
これだけではあまりイメージがわかなかったので代表的なサービスを調べてみました

Googleのアプリ（GmailやGoogleドライブなど）
Officeのwebアプリ
Dropbox

Paas(Platform as a Service)

IaaSに加え、ミドルウェアとアプリケーションの開発環境が実装されています。ISPのレンタルサーバはwebシステムに特化したIaasやSaaSです

図解からまるわかりweb技術のしくみp.134より引用

これだけでは理解できなかったので、具体的なサービスも調べてみました。

AWS
Google Cloud Platform
Microsoft Azure

IaaS(Infrastructure as a Service)

事象者がサーバやネットワーク機器、OSを提供するサービスで、ミドルウェアや開発環境、アプリケーションは、ユーザーがインストールします

図解からまるわかりweb技術のしくみp.134より引用
こちらの具体例を見てみましたが聞いたことがないサービスでした。

Google Compute Engine
Amazon Elastic Compute Cloud

PaaSとIaasの違いについて

とても分かりやすいサイトがありましたので引用させていただきました。

アイティーエムHPより引用

図の通りですがPaaSとIaaSでは対応している範囲が異なるようです。
こちらのサイトでは2つの違いについてこのように記載しています。

APIや、開発環境にインストールされているデータベース機能やオブジェクトストレージなどのミドルウェアはサービス提供側が用意しているため、利用側はインストールしたり、ゼロベースで機能開発をすること無く利用できます。

PaaSのほうが開発をする上でのツールが整っており、開発スピードをより上げることができるということです。

クラウドの2つの潮流

クラウドサービスを利用するにあたって、大まかに2種類に分けることができます

パブリッククラウド
プライベートクラウド
パブリッククラウドは一般的に皆さんが知っているようなAWSやAzure、Google Cloud Platformがあります。
コストメリットや最新技術をいち早く使用することができる一方で、どのサーバを使用しているか把握することが難しい点があります

一方プライベートクラウドはおもに自社のために使用するクラウドサービスを指します。この形態であればどのサービスがどのサーバを使用しているかがわかります。

VPC

VPC(Virtual Public Cloud)とはパブリッククラウド上でプライベートクラウドを実現できるサービスを指します。
仮想環境のためセキュリティ面も高く、パブリッククラウドの拡張性も持ち合わせている便利なクラウドになります。

7章 webサイトの開設に関して

webでもっとも重要な業務

稼働率はサービスを出すまでが大変ですが、サービスを出してからの管理運用業務も重要です。
Webサイト単体であれば、webサーバ上で制作して公開から運用までを行うコンテンツ管理システムCMSの利用が主流となっています。
CMSの例としてOSSであればWordPressが有名です。
私も使用したことがあるのですが、SEO対策やSSLなどとても楽に設定できたのでお勧めです。

ドメイン名の取得

webページを公開するなら必要なドメイン名ですが、以下のような流れで申請します

ISPやクラウド事業者に申請
上記事業者がドメイン名の登録申請を受け付けるレジストラに申請
レジストラからレジストリと呼ばれる管理事業社に申請データを渡す

webサイトに必須のメニュー

webサイトの中でも個人情報を扱う場合は個人情報保護法の観点から個人情報保護やプライバシーポリシーを定める必要があります。
また、2020よりCookieの同意も必要になりました。
オンライン上で販売や金銭による取引がある場合は特定商取引法を定める必要があります。

8章 webシステムの開発

OSSのバージョンアップには注意

この情報はIT業界入る前に知っていてよかったです。
OSSに限らずですが、頻繁にバージョンやレベルアップがありますが、むやみあたらに更新してはならないこと。

これは少し直観に反しました。というのもiPhoneやその中のアプリにおいても、よくアップデートしてね。と通知が来ます。
しかし、webシステムとなるとまた話は変わってくるようです。
1つのOSSなどのソフトウェアを仮にバージョンアップをしてしまうと、連動しているほかのソフトウェアの動作環境が保証されていない可能性があるようです。

私のみの一存でソフトウェアを更新することはおそらくないと思いますが、忘れないようにしておく必要があると思いました。

Webアプリにおける設計モデル

名前だけは聞いたことがありましたがMVCモデルといいます。
Web3層サーバのうちのアプリケーション層で使用されます

M:Model
Controllerからの命令を受けて、データベースや関連するファイルとのデータの受け渡しや処理を行う
V:View
Controllerから処理結果を受けて、描画表示する
C:Controller
ブラウザからのリクエストを受けて、Model,Viewと連携してブラウザへレスポンスを返すまでを制御する

現在rubyを勉強していますが、フレームワークを学ぶ際にもう少し詳しく勉強するはずなのでこれくらいにとどめておきます

マッシュアップ

マッシュアップとはクライアント側で処理を実行して複数のWebサービスを組み合わせて1つに見せる技術です。
GoogleMapに何かを表示させるアプリなどあると思いますがあればマッシュアップです。

サーバの仮想化技術

実は現在のWebシステムは仮想サーバ上で実装されることが増えているようです。
仮想化の技術は大まかに3つあるようです

ホストOS型
ホストOS型仮想化は、通常のオペレーティングシステム（ホストOS）上に仮想化ソフトウェアをインストールして、複数の仮想マシン（VM）を動作させるタイプの仮想化です。
メリットとして導入が比較的簡単で、ホストOSを既存のシステムに加えるだけで仮想化環境を構築できる点があげられます
一方デメリットはホストOSと仮想化ソフトウェアの両方がリソースを消費するため、オーバーヘッドが発生し、パフォーマンスが低下する可能性がある。
ハイパーバイザー型
ハイパーバイザー型は、物理サーバー上に直接ハイパーバイザーをインストールして仮想マシンを実行する仮想化技術です。ホストOSは存在せず、ハイパーバイザーが直接物理ハードウェアを制御します。
メリットとしてはホストOSが存在しないため、リソースのオーバーヘッドが少なく、パフォーマンスが高い。また、大規模なサーバー環境に適していることです
一方デメリットは導入には専門的な知識が必要で、ハードウェア依存性が高いことがあげられます。
コンテナ型
コンテナ型仮想化は、ホストOSのカーネルを共有しながら、各アプリケーションを独立したコンテナとして隔離する仮想化手法です。
コンテナは軽量で、仮想マシンよりもオーバーヘッドが少ないです。
メリットはコンテナは非常に軽量で、起動やシャットダウンが高速。物理リソースを効率よく利用できるため、スケーラビリティが高い。
デメリットは、各コンテナはホストOSのカーネルを共有しているため、異なるOSを実行することができない。また、セキュリティや隔離性は仮想マシンに劣ることがある。

コンテナの作成にはDockerと呼ばれるソフトウェアを使用するようで、環境構築をするためにはweb業界では当たり前に使われているとのことらしいです。

コンテナの管理

Dockerを使用してコンテナを作成するという話をしましたが、Dockerde作成したコンテナは必ずしも同じ物理サーバにある必要はないようです。

ただし、どのコンテナから作動させるかのいわばオーケストレーションという管理をする機能が必要でKubernetes(クーバネティス)というソフトウェアを使用します。

9章セキュリティと運用

セキュリティ対策の物理的構造

セキュリティ対策は内部向けと外部向けの両方があるようですが、物理的構造は同じで上記の図のようになっています。
基本的にはファイアーウォールと緩衝地帯で不正なアクセスはブロックしており、あらかじめ定められたルールで正しく許可されたデータだけが通過できるようになっています。

緩衝地帯(DMZ)

緩衝地帯はDMZ(DeMilitarized Zone)と呼ばれており、セキュリティ専用ネットワークです。
主にセキュリティ専用のハードウェアを増やす方法とソフトウェアで成業する方法がありますが、最近では仮想化技術により一緒になったといえます。
DMZには3つのシステムがあります

IDS(Intrusion Detection System)侵入検知システム
ネットワークやシステム上で不正なアクセスや異常な活動を監視し、検出するシステムです。あくまで「検出」に特化しており、攻撃を防ぐためのアクションは自動的には行いません。
IPS(Intrusion Prevention System)侵入防止システム
検出に加えて不正なアクセスや攻撃を自動的にブロックするシステムです。
「検出」と「防御」の両方を行います。
不正アクセスや攻撃的な通信と判断すると以降はアクセスできないようにします
WAF(Web Application Firewall)
Webアプリケーションに対する攻撃を防御するために特化したファイアウォールです。
主にSQLインジェクションやクロスサイトスクリプティング（XSS）など、Webアプリケーション層に対する攻撃を防ぎます。
難易度の高い仕組みなので、大規模サイトやクラウド事業者などで使用されます。