Webとは何か(プロになるためのWeb技術入門のレビュー)

# 概要
WebエンジニアになろうーということでRailsやLaravelで学習プログラミングから始める方は多いです。
しかしその学習や開発の過程で
***バグが起きた時にうまく対応できなかったり、技術を学習してもなかなか習得ができない人が多い***みたいです。その原因は***Webの仕組みを理解していないことが原因***みたいです。

# 書籍対象者
⚫︎Webアプリケーションを開発する人
⚫︎Webアプリケーションがどんな仕組みで動いているか説明できない人
⚫︎現場の技術がいまいちわからない人


# Webエンジニア必読書

https://www.amazon.co.jp/%E3%80%8C%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEWeb%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80%E3%80%8D-%E2%80%95%E2%80%95%E3%81%AA%E3%81%9C%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AFWeb%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B-%E5%B0%8F%E6%A3%AE-%E8%A3%95%E4%BB%8B/dp/4774142352

### 使い方が記載されている動画

https://www.youtube.com/watch?v=9P0AEjjpqQE

### 学習ポイント
上の動画から引用します。

1. ***全体像を抑える***のが大切です。
細かい点は***Webサービスを作る過程で調べて復習すればいい***みたいです。

2. ***図で書いて説明できればいい***
ざっくり処理の流れなどがわかればいい。

# Webアプリケーションとは何？
インターネット上でいつも利用しているWebブラウザに表示されるサービスです。
処理はデスクトップアプリケーションみたいに手元のPCにインストールしてから行われる必要はなく
ググったりすればすぐにサイトなどにアクセスできます。

ex)  食べログ　ココナラ　など

# Webの歴史
### WWW(World-Wide-Web)の誕生と普及
インターネット(ネットを相互につなぐもの)の普及の歴史を見ていきます。
1969年にインターネットの原型ができました。最初は1部の人だけが使っているモノでしたが、
***www***が誕生し、Webブラウザの原型である***NCSA Mosaic***と呼ばれるソフトウェアの登場がきっかけでした.wwwは冷戦が終わる頃の1989年の核素粒子の実験実験結果を全世界の研究者と共有しようとなったことがきっかけでした。この時に***HTMLで表現***することが考えられテキストファイルだけで表現できるようにしました。
そしてHyperText(ハイパーテキスト)と呼ばれる仕組みができ、文書間の参照が```HyperLink(ハイパーリンク)```と呼ばれるコンピューターに理解できる形式で記述され、閲覧できます。これで手作業が不要になり、ネットワーク上でリンクされたハイパーリンクの繋がりを蜘蛛の巣みたいに見えることからWorld-Wide-Web(世界に広がる蜘蛛の巣)と名付けられました。こうして情報伝達が大幅に向上し、自由に閲覧できるようになっていきました。インターネット誕生のきっかけは東西冷戦でしたし、冷戦が終わってから普及し始めていきました。Moasicをベースとして発展していったのがFireFoxやInternetExploreです。

### サーバーとクライアント
***クライアントからサーバーへリクエストをして、サーバーからクライアントへレスポンスが返ってくる仕組み***があります。下のサイトから参考にしてください。

https://atmarkit.itmedia.co.jp/ait/articles/0804/14/news107.html

クライアントが見たい情報をピンポイントで取得できる仕組みが***URL***です。

ex)
```
http://www.webstudy.jp/webtext/index.html
```
みたいな感じです。スキームはリソースを取得するための方法でWebアプリケーションの場合は
ほぼ***http(https)***です。リソースがある時は（コンピューター）名を表し、
ネットワークに接続されて他のコンピューターから要求を受け取って、処理した結果を返すコンピューターを***ホスト***と呼びます。
```
www.webstudy.jp
```
***jp(日本)のwwbstudyという組織のwwwサーバーというコンピュター***という意味です。
パス名はホスト名で指定されたコンピューター上のリソースの位置を示し、
***webtext/index.htmlというwebtextディレクトリのindex.htmlというファイル***です。
そして***通信プロトコルによって異なるコンピューター同士でもやりとり***ができるようになりました。これは***HTTP***です。

# HTTP
```HTTP```とは***Webのクライアントとサーバーを通信するプロトコル***です。

都合により画像が貼れないのですが、HTTPの流れは下の記事が詳しいです。

https://itsakura.com/network-http-get-post

代表的なメソッドは以下の通りです。
```
GET : データの取得
POST : 新規作成(データ送信)
PUT : 既存データの更新(データ送信)
DELETE : データの削除
```

TCPIPやHTTP、Webブラウザの通信などが書かれていますが、下の記事を
理解すればこの記事ではいいと思いました。結構細かい点まで書いてあるので汗

https://www.infraexpert.com/study/tcpip16.html

補足で```プロキシサーバー(Proxy Server)```という日本語でいうい***代理サーバー***というものがあり、
WebブラウザによるHTTPリクエストを代理として受け取り、本来のWebサーバーへ渡す役割があります。


***TCP/IPはIPアドレスを頼りに情報を届けてくれます***。
Webブラウザから受け取ったHTTPリクエストなどの情報を```パケット(Packet)```と呼ばれる
小さな単位に分割して送受信しています。

そしてICANNという団体がIPアドレスを決めています。

# CGIからWebアプリケーション
ここでは***cooikie***と***セッション***を説明していきます。
ログインの認証機能やログイン状態の時に出てくる用語ですね。

### ステートフルなプロトコルとステートレスなプロトコル
***Webページを開く時にログインしているかどうかをチェック***しなければいけません。
***HTTP通信はプロトコルがステートレスであるつまり状態を持ちません***。
例えばYoutubeとかでそれぞれの人がYoutubeにログインしているかどうかは管理していないです。
だけど自分だけの情報とかを管理したり見たりする時に使うのが***Cookieを使ったセッション管理***です。

ex) 床屋さんを例にすると

ステートレスな床屋さんはお客さんの情報管理はしていない1000円カットです。
毎回こういうふうに切ってくださーいってやりとりします。

だけどステートフルな床屋さんはお客さんの情報を管理しているのでいつもの髪型を伝えれば
すぐにわかるようにしてあります。

### Cookieを使って状態保持
***WebブラウザとWebアプリケーションの間で情報交換できるようにし、ブラウザにテキスト情報を保存できる仕組み***です。これで***ログイン状態を保持***できます。

***Webアプリケーション側でCookieを調べることで、アクセスしてきた相手を知ることができ、
例えCookieを受け取った後でも、Cookie受け取ったサーバーと違うWebサーバーに対してはCookieを送りません。この仕組みによって、意図しない情報が他のWebサーバーに送られてしまうことを防げます***。


### セッションという安全に状態を保持するための技術
```セッション(session)は始まりから終わりまでの一連の処理```のことです。
本では銀行口座開設を例に出しているのでわかりやすいです。

例えばamazonにログインして買い物してからログアウトするまでの流れです。
その中でも```セッションID```というものがあり***Webサイトで利用者を識別するためのID***です。
これのおかげで***誰からのリクエストかわかる***ようになっています。
この***セッションIDを使って通信相手状態を管理***するのを```セッション管理```と言います。

この動画の解説よかったら見てみてください。

https://www.youtube.com/watch?v=t8Xxp_dk214&t=23s

https://www.youtube.com/watch?v=0Zx9TAZrl10


# Webアプリケーションの構成要素
#### データベースサーバー登場
大量の情報を管理したり処理をするために```DB(データベース)```が登場し、
```DBMS（データベース管理システム)```と呼ぶソフトウェアも出てきました。
データベースの操作法として```CRUD```と呼ばれ、
このような```処理（命令）をデータベースに効率よく伝える言語```として```SQL```があります。

⚫︎CRU処理とSQL文の関係
|CRUD操作|対応するSQL文|
|-------|----------|
|生成(Create)|INSERT文|
|読み取り(Read)|SELECT文|
|更新(Update)|UPDATE文|
|削除(DElete)|DELETE文|

### サーバーの分離
このようにするとコンピューターの仕事が分散されて負荷が下がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/46ba9157-be04-9645-dcaa-62e396849ce2.png)

>　引用https://qiita.com/Marusoccer/items/585a191f4d44c4b75386#cookie%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E7%8A%B6%E6%85%8B%E3%82%92%E4%BF%9D%E6%8C%81%E3%81%99%E3%82%8B



#### アプリケーションサーバーの提供する機能
以下の４つの機能があります。
・セッション管理

・トランザクション管理（& ロールバック）

・データベース接続の管理（コネクションプーリング）

・Webアプリケーションの管理とシステムの可用性・性能の向上（セッションレプリケーション→アプリケーションサーバ同士が連携してセッションの状態を共有）

⚫︎***トランザクション***
ここではトランザクションを紹介します。Webアプリケーションが実現する業務システムでは、一連の処理を「確実」に完了させることが求められます。
ex) クレジットカードで商品を購入するサイトでユーザーによる購入要求があると
・商品在庫１つ減る
・クレジットカードの請求処理

このように実行すべき一連の処理を***トランザクション***と言います。
トランザクションで大事なのは含まれる処理が全て成功しなければいけません。
1つでも失敗した時は成功した他の処理も元に戻さなければいけないです。これが***ロールバック***です。


### WEBシステムの三層構造
Webアプリケーションの３つの構成要素、Webサーバー、アプリケーションサーバー、データベースサーバーのよくある構成例です。

■ 最小構成のWebシステム構成
サーバーサイドは１台のコンピューターの中でAPサーバーとDBサーバーのみを稼働させて、
Webサーバーを省略して、APサーバーが提供するWebサーバーの機能を利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ad97ab42-a3c9-5291-d9ba-0cea56acd2c1.png)

■ 最小構成にWEBサーバーを追加するシステム構成
WEBサーバーを省略せずにAppacheなどを使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d40a10a4-2491-9008-c4d1-a2c30e447fe7.png)

■一般的なシステム構成
それぞれのサーバーを別々のノード上に置いて、それぞれのコンピューターの持つリソースを
各サーバーへ最大限振り分けができます。中規模以上のWebシステムで採用されるケースが多いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/1d165120-37d7-d798-9f4f-ad83f5c12f8d.png)

> 引用　https://qiita.com/Marusoccer/items/585a191f4d44c4b75386#cookie%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E7%8A%B6%E6%85%8B%E3%82%92%E4%BF%9D%E6%8C%81%E3%81%99%E3%82%8B

# Webアプリケーションを効率よく開発するための仕組み
### WEBアプリケーションのアーキテクチャ
WEBアプリケーションの構築をするときに必要な考え方に***ロジックとデザインの分離***があります。
ユーザーの入力された情報が正しいか判定する処理などの部分がロジックで、画面表示部分がデザインです。
設計スタイルとその設計に基づく全体構造を***アーキテクチャ***と言います。

### MVC
MVCモデルでは```「モデル」「ビュー」「コントローラー」```の３つの役割があります。
ModelとViewの制御を担当がコントローラー、表示や入出力などのユーザーインターフェースを担当がビュー、
ビジネスロジックを担当する部分がモデルです。下の記事に画像があるので良かったら読んでください。

https://system-kaihatu.com/archives/3204#:~:text=MVC%E3%83%A2%E3%83%87%E3%83%AB%E3%81%A8%E3%81%AF%E3%80%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0,%E3%83%A2%E3%83%87%E3%83%AB%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

### フレームワーク
アーキテクチャの知見を簡単に実現できるようにするための手法として```フレームワーク```があります。
フレームワークという言葉の意味は「枠組み」や「構造」という意味です。

ex) Rails,Laravel,Next.jsなど

### レイヤーパターンによるデータアクセス層の分離

Webアプリケーションのようなさまざまな技術を組み合わせて作る複雑なシステムでは、
MVCモデルと合わせてレイヤーと呼ばれるアーキテクチャが利用されます。
システムを断層化し、上位レイヤが下位レイヤの提供する機能を利用することで、
各レイヤの作りを単純化しています。

```
-------------------------------------------
プレゼンテーション層 (コントローラー、ビュー)
-------------------------------------------
↓
--------------------------------------------
ビジネスロジック層(モデル)
↓
データアクセス層(モデル)
----------------------------------------------
```
■ ***プレゼンテーション層***
システムと利用者のインターフェースを担当するレイヤ。
Webブラウザからユーザーの入力を受けとり下位レイヤであるビジネスロジック層へ渡し、その処理結果を再びWebブラウザへ表示させたり、画面遷移する役目があります。

■ ***ビジネスロジック層***
アプリケーションが実現すべき固有の処理を実行するためのレイヤ。
ビジネスロジックは、ユーザーが入力した情報をプレゼンテーション層から受け取り、必要に応じてデータアクセス層を通じてDBを利用し、処理を実行します。
処理結果は再びプレゼンテーション層に返します。

■ ***データアクセス層***
データアクセス層は、ビジネスロジック層とデータベースの仲立ちを行うためのレイヤです。
データベースへの細かなアクセス手順を意識せずとも利用できるようにするのがデータアクセス層の役目です。
この記事を書いている段階ではLaravelを使った開発をしているのですが、
裏側まで理解しないとなんとなくの理解で止まりそうな感じはしました。

### フレームワークの注意点
本に書かれている通り、Laravelなどの***フレームワークは開発スピードも速く便利ですが、
PHPなどの言語の本質的なとこまで知っておかないと技術力の向上はない***のは同感です。
この記事を書いている段階ではLaravelを使った開発をしているのですが、
***裏側まで理解しないとなんとなくの理解で止まりそう***な感じはしました。

### この本には載っていないアーキテクチャースタイルREST
RESTはWebのアーキテクチャースタイルで設計思想のことです。
この思想の元作られたのがRESTAPIです。
```
--------------------
アーキテクチャー　 REST
---------------------
↓
----------------------------
アーキテクチャ　サーバー、ブラウザ
---------------------------
↓
---------------------
実装 Apache　chromeなど
-------------------
```
RESTを構成化する6つのアーキテクチャスタイル
```
1.クライアント:サーバー　UIと処理と分離
2.ステートレス:クライアント状態を管理しない
3.キャッシュ:サーバーから取得したリソースの再利用
4.統一システムインターフェース: 操作可能なインターフェースを限定
5.階層化システム:システムを階層に分離
6.コードオンデマンド:クライアントでDL&実行
```
下の動画もよかったら見てください。

https://www.youtube.com/watch?v=Mg83BHYfzSY

https://www.youtube.com/watch?v=rEGmSRZ-dWY


# セキュリティ
***Webアプリケーションを開発する上でセキュリティは大事***です。
特にセキュリティでは以下のことを大切にします。

```1.第三者への流失を避ける（機密性）```
```2.第三者への情報の改竄を防ぐ（完全性```
```3.適切な権限を持った人間が適切な情報を利用できる（可用性)```

代表的なWebアプリケーションの攻撃手法を見ていきます。

```1. SQLインジェクション```
***第三者がSQLコマンドを悪用してのDBへ不正にアクセスし、情報を改ざんしたりするサイバー攻撃***のです。

https://qiita.com/Hashimoto-Noriaki/items/7fe115a419c229adf43e

⚫︎***SQLインジェクションの対策***
***入力値のチェック***が挙げられます。これが自動的にできるのが***バリデーション***です。
もう一つの方法は***プリペアードステートメント***がありWHERE句など条件によって変化する部分をプレースホルダーとして登録したSQLを用意しておき、後からパラメーターを割り当てます。

https://qiita.com/wakahara3/items/d7a3674eecd3b021a21e


```2. クロスサイトスクリプティング（XSS)```
***HTMLの中に悪意のある動作をするJavaScriptを埋め込む攻撃手法***です。

⚫︎***XSSの対策***
HTMLへ出力する時に***サニタイジング(Sanitizing)***と呼ばれる処理が有効です。これは消毒するという意味です。HTMLの構造を変えたり、破壊したりする文字列を、削除したり無害な文字列に変換したりする処理です。

https://www.shadan-kun.com/waf_websecurity/xss/


```3. セッションハイジャック```
***クライアントとサーバーの間のセッションIDを第三者が盗み取り、Webサイトの利用者になりすます攻撃***です。

⚫︎***セッションハイジャックの対策***
***XSSの対策***と通信経路を***SSL(Secure Socket Layer)***によって暗号化が必要です。
他にも***セッションタイムアウト値の変更、セッションIDのランダム化***などがあります。

⚫︎補足
***SSL***とはTCP/IPの通信を暗号化したもので第三者が盗聴しても内容をわからなくするための技術です。
HTTPによる通信を暗号化したものが```「HTTP over SSL」```です。```https://~```などが該当します。

```4.クロスサイトリクエストフォージェリ（CSRF)```
***攻撃者がねつ造したフォームから強制的に情報をサブミットすることで、自分が意図していない動作が起こってしまう攻撃***です。

対策としては***ワンタイムトークンを生成し、hiddenパラメーターで埋め込んで***おきます。

```5.強制ブラウズ(Forcefull Browsing)```
***WebブラウザのアドレスバーにURLに直接入力することで本来表示されない画面を表示***させる攻撃です。

```6.ディレクトリトラバーサル```
***閲覧可能な公開ファイルがあるディレクトリから、非公開ファイルのあるディレクトリ階層に移動して不正にファイルを閲覧すること***です。

https://www.lrm.jp/security_magazine/directory_traversal/

対策としては***サニタイジングや/、¥などファイル名にない文字を削除***するのがいいみたいです。

セキュリティ対策の詳しい本としては

https://www.amazon.co.jp/%E4%BD%93%E7%B3%BB%E7%9A%84%E3%81%AB%E5%AD%A6%E3%81%B6-%E5%AE%89%E5%85%A8%E3%81%AAWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E7%AC%AC2%E7%89%88-%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E7%94%9F%E3%81%BE%E3%82%8C%E3%82%8B%E5%8E%9F%E7%90%86%E3%81%A8%E5%AF%BE%E7%AD%96%E3%81%AE%E5%AE%9F%E8%B7%B5-%E5%BE%B3%E4%B8%B8/dp/4797393165

などを読んでおくといいみたいです。

# この書籍が難しい場合、またはもっと深く学びたい場合は？
Web技術の入門編はこの本がみたいです。

https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3-ebook/dp/B06XNMMC9S

さらに学習を深めたい場合はこの書籍がいいみたいです。

https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%EF%BC%8CURI%EF%BC%8CHTML%EF%BC%8C%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus-ebook/dp/B07JK7FZH2

紹介されているサイト




# 紹介されている動画
色々Youtubeの中でも紹介されています。

https://www.youtube.com/watch?v=L3pEmLuHx-0

# まとめ
全部は本の内容は紹介できませんでしたが良書なので読んでみてください。



# 参考資料

https://qiita.com/Marusoccer/items/585a191f4d44c4b75386


https://qiita.com/hide27k/items/754c84528ccdcc924555#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E7%99%BB%E5%A0%B4