【入門書／前半】プロになるためのWeb技術入門

# はじめに
今回は「プロになるためのWeb技術入門」について、要点をまとめます。

※おことわり※
基本的に学習内容のアウトプットです。
初学者であるため、間違い等あればご指摘いただけますと嬉しいです。

# 本の概要
「何年経っても役に立つ基本的な考え方を伝えること」を目的とした、Web技術に関する入門書です。
[![スクリーンショット 2022-08-12 10.50.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/6b68feb9-cff5-94cb-585d-18c1b1f0fed9.jpeg)](https://www.amazon.co.jp/dp/4774142352/ref=as_sl_pc_as_ss_li_til?tag=sutabaopen-22&linkCode=w00&linkId=bc6d34809cf5215cd73bfff904af1e28&creativeASIN=4774142352)

# この記事の内容

**前半**
１. Webアプリケーションは何か
２. Webはどのように発展したか
３. HTTPを知る 

**後半**
４. CGIからWebアプリケーションへ
５. Webアプリケーションの構成要素
６. Webアプリケーションを効率よく開発するための仕組み
７. セキュリティを確保するための仕組み

# 1. Webアプリケーションは何か
**■ Webアプリケーションとは**
（Google, クックパッドなど）
- Webブラウザ上で動作するアプリケーションソフトウェアのこと
- インターネットを使用しているため、インストール不要
- サーバが処理を行う

**■ Webサイトとは**
（ECサイトなど）
- webページのまとまった集合体のこと

**■ デスクトップアプケリーションとは**
（Word, Excelなど）
- アプリケーションをPCへインストールし、すべての処理を手元のPCで行う
- OS上で動作する

**■ インターネットとは**
- 世界中のコンピュータを接続するネットワーク網のこと

# 2. Webはどのように発展したか
### この章の目的
「技術とは偶然ではなく必然をもって生まれてくる」ものだからこそ、
必然性を理解し、新しい技術を素早くキャッチするための知識を身につけること。

### この章のまとめ
研究者同士の情報共有ツールとしてWWWが誕生し、Webの利用が一般化されるとともに動的コンテンツが普及した。Webアプリケーション開発において、現在進行形で課題の発生と解決が繰り返し行われ、開発は大規模になり、技術は複雑化している。現在では、フロントエンドとバックエンドの分業や、フレームワークを使用した開発が主流である。


**■ Webの歴史**

- 「**World-Wide Wed**」の誕生
研究者同士の情報共有ツールとして開発された、現在でいう「**Web**」のこと。
**WWW**の仕組みを使い、**HTML**形式で研究結果などを共有していた。

- 「**NCSA Mosaic**」の登場
テキストだけでなく、画像や文字を混合させて表示することができる、現在でいう「**Webブラウザ**」のこと。

**■ クライアントとサーバの役割**
不特定多数の利用者に多様なWebコンテンツを公開するため、役割が分かれている。
- クライアント：インターネットに接続し、手元のPCから自由に閲覧
- サーバ：コンテンツを1ヶ所にまとめて管理

**■ URLの役割**
インターネット上のコンテンツを一意に指定するための仕組み。
「スキーム+ホスト名+パス名」という構成。

- **通信プロトコル**
情報のやり取りのための取り決めを、コンピュータ同士の通信に利用したもの。
HTMLに適したプロトコルとして、「**HTTP**」が考案された。

**■ CGIの誕生**
Webサーバ上で動作するプログラムがHTMLを生成し、レスポンスとしてクライアントに返す仕組みのこと。（動的コンテンツ）
「リクエストに応じて、処理を行うアプリケーション」の作成が**CGI**の技術により実現する。

**■ Java／サーブレット／JSPの登場**
CGIの技術を補うべくして誕生し、大規模なシステムの開発に貢献した。
- **Javaの特徴**
    - オブジェクト指向の機能をフルサポート
    - 特定のOSやハードウェアに依存せず動作する

- **サーブレット**
  - Javaで作られたコンテンツを生成するためのプログラム

- **JSP**
フロントエンドとサーバエンドのエンジニアによる、アプリケーション開発の分業に貢献した。
**サーブレット**がJavaの中にHTMLを埋め込むのに対し、**JSP**はHTMLの中にJavaコードを埋め込むことによって分業が実現した。

# 3. HTTPを知る 
### この章の目的
WebサーバとWebクライアントを繋ぐ根幹である、HTTPを知ること。

### この章のまとめ
現在の開発で用いられるフレームワークでは、HTTP通信を知らなくても実装できてしまうが、
Webアプリケーションの根幹となる技術の仕組みを理解することによって、適切な情報の受け渡しを行うことできる。

**■ HTTPについて**
- 前章の復習
HTTPとは、WWWの世界で定められたHTMLをやりとりするための通信プロトコルのこと。

- HTTPの特徴
  - 1回のリクエストで1つのリソースを取得する。
  例：多くの画像を含むページの場合、場号の数だけリクエストを発行する。

  - デフォルトのファイルを返す機能
  Webサーバ側の機能であり、URLを短く設定することができる。

- HTTPの構造について
リクエストとレスポンスの構造は、以下のようになっています。
[![Image from Gyazo](https://i.gyazo.com/b9dae54d224232178e90986f1b337661.png)](https://gyazo.com/b9dae54d224232178e90986f1b337661)

**■ 情報の送受信について**
- **IPアドレス**
HTTPリクエストに含まれているホスト名は、IPアドレスに置き換えて識別される。（例：住所と宛名）
    - ドメイン：IPアドレスを人間が覚えやすいように文字列に変換したもの
    - `hostコマンド` ：ドメインからIPアドレスを調べるコマンド
```terminal
# GoogleトップページのIPアドレスを調べる
% host google.com

# 戻り値
google.com has address 142.250.206.206　　←IPアドレス
google.com has IPv6 address 2404:6800:400a:813::200e
google.com mail is handled by 10 smtp.google.com.
```

- **TCP/IP**
IPアドレスを頼りに、ホストへ任意の情報（パケット）を届ける役割。（例：郵便局）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/88cbc3bc-a55a-d0ba-dcd2-910aba6d03e9.png)



- **パケット**
やりとりされる情報は、パケット単位に分割し、インターネットを介して送受信が行われる。
※理由：送信に失敗した場合、そのパケットだけを送り直せば済むから

- **DNS**
ドメイン名からIPアドレスに変換する仕組みのこと。
DNSは、ドメイン名に対応したDNSサーバによって情報は分散管理されている。
  - ルートサーバ：DNSサーバを管理する大元締めであり、世界に13個存在している（※2022年現在）
  - トップレベルドメイン(TLD)：最上位のドメイン
 
- **ポート(Port)**
サーバ側に「待ち受けポート」が用意されており、TCP/IPによって運ばれた情報がポートで受け取る。

- **ウェル・ノウン・ポート(well-know ports)** 
デフォルトでポートが決められている代表的なプロトコルのポートのこと。

- **Origin(オリジン)**
URLを構成する以下3点をまとめた総称のこと。
例：http\://localhost:3000 など
    - スキーム（プロトコル）
    - ホスト（ドメイン）
    - ポート
  
  URLとの違い・・URLの場合、http\://localhost:3000/hoge/hoge まで該当する
# 最後に
「プロになるためのWeb技術入門」を前半と後半に分けてまとめています。
後半の内容は、**【入門書／後半】プロになるためのWeb技術入門** にてまとめます。

**後半の内容について**
４. CGIからWebアプリケーションへ
５. Webアプリケーションの構成要素
６. Webアプリケーションを効率よく開発するための仕組み
７. セキュリティを確保するための仕組み