エンジニアではない人向けのWebサービス技術の基礎知識

こんにちは
----
- **<font color="Orange">ラクス Advent Calendar 2017</font>**の21日目です
- 今回は、弊社社内の非エンジニアさんの要望により
「**<font color="Red">最低限これだけ知っておくと、エンジニアさんが話している内容が、理解しやすくなるよ</font>**」的な知識を共有します

----

- 弊社商材に従事している非エンジニアさん向けなので、情報に少々偏りがあります
- それでは、どうぞ
![p21.png](https://qiita-image-store.s3.amazonaws.com/0/151447/5389de21-aaef-fda1-a31d-38b23ed40578.png)

----
もくじ
----

----

![p3.png](https://qiita-image-store.s3.amazonaws.com/0/151447/f06e357b-ee10-a3bd-902c-4992bf7266d7.png)

----

![p3.png](https://qiita-image-store.s3.amazonaws.com/0/151447/e90df421-77b6-fe51-a902-44b114c09546.png)

----
Webサービスの流れ
----

----

Webサービスは、PCまたはスマホとインターネット上のWebサーバが通信し合うことで実現します

![p3.png](https://qiita-image-store.s3.amazonaws.com/0/151447/e1a7c4e0-a495-b701-faf8-f4992b97d2e3.png)

----

サービスを利用する側は**<font color="Red">クライアントサイド</font>**、サービスを提供する側は**<font color="Red">サーバサイド</font>**と呼ばれます

![p4.png](https://qiita-image-store.s3.amazonaws.com/0/151447/4d436613-4d80-fc2a-e8af-ca15a1f42e63.png)

----

クライアントサイドからサーバサイドへ何か要求することを**<font color="Red">リクエスト</font>**と呼びます

![p5.png](https://qiita-image-store.s3.amazonaws.com/0/151447/de8143fc-4b9f-5119-f078-3dd0b28ec84d.png)

----

サーバサイドがクライアントサイドの要求に応答することを**<font color="Red">レスポンス</font>**と呼びます

![p6.png](https://qiita-image-store.s3.amazonaws.com/0/151447/1ab8b35e-b413-fb96-33cc-3a7c253b0c38.png)

----

Webサービスは、この**<font color="Red">リクエスト</font>**と**<font color="Red">レスポンス</font>**の一連の通信で実現します

![p7.png](https://qiita-image-store.s3.amazonaws.com/0/151447/bc8757b1-9494-d369-85c5-5c789a831653.png)

----
この通信は一般的に**<font color="Red">HTTP</font>**と呼ばれる通信プロトコルで実現しています
----

----
通信プロトコル？
----

----

- 「プロトコル」は直訳すると「**<font color="Red">お約束ごと</font>**」
- 例えば「人が話し合いをする上でのお約束事」といえば「同じ言語が話せること」ですよね

![p8.png](https://qiita-image-store.s3.amazonaws.com/0/151447/a20fa11e-a760-d551-b5c4-392edb4451d9.png)

----

- システム同士の通信も同じで、通信する際は互いに同じ「お約束ごと」が使えることが必要になります
- 通信の場合は、これを「**<font color="Red">通信プロトコル</font>**」と呼んでいます

![p9.png](https://qiita-image-store.s3.amazonaws.com/0/151447/da33a518-3c60-417f-a392-3fd34e36e3d1.png)

----
HTTPSとは
----

----

- Webサービスに従事すると、**<font color="Red">HTTPS</font>**と呼ばれるプロトコルを聞くことがあると思います
- HTTPと同じで、Webページをやりとりする際に使われるプロトコルです
- HTTPよりも**<font color="Red">セキュリティレベル</font>**が高いプロトコルです

----
WebサービスではHTTPよりも**<font color="Red">HTTPS</font>**で通信することが強く推奨されています
----

----
もくじ
----

----
![p12.png](https://qiita-image-store.s3.amazonaws.com/0/151447/1d3e1e28-4f8f-5678-88db-6723f235fbaa.png)
----

----
クライアントサイドの仕組み
----

----

サーバサイドからのレスポンスは、下図のように**<font color="Red">ブラウザ</font>**上で**<font color="Red">クライアントサイドスクリプト</font>**が実行されてから、私たちの目に届いています
![p13.png](https://qiita-image-store.s3.amazonaws.com/0/151447/3b8a78f6-f14a-9afb-443a-cf0d1557d8cc.png)

----
ブラウザとは
----

----

- サーバサイドからのレスポンスを、PCやスマホ画面上に表示するためのソフトのことです
- ブラウザでは、**<font color="Red">クライアントサイドスクリプトの実行</font>**、**<font color="Red">HTMLのレンダリング</font>**など、様々な処理が実行されます

----

Windows標準ブラウザが Internet Exploer（IE） なので、日本での認識率No.1はおそらくIEです

![p14.png](https://qiita-image-store.s3.amazonaws.com/0/151447/05b7bd95-ad20-6868-056c-1d0bf1dfb32e.png)

----
ブラウザ別の普及率
----

----

- しかし世界規模で見ると、Chromeがとてつもないスピードで普及していることがわかります（**<font color="Green">緑グラフ</font>**＝Chrome）
- 日本も基本的には同じ傾向ですが、世界に比べIEの比率がやや高めです（**<font color="Blue">青グラフ</font>**＝IE）

![p15.png](https://qiita-image-store.s3.amazonaws.com/0/151447/0ee516f1-a49a-81e6-c76b-f39f1f0e1351.png)

----
クライアントサイドスクリプトとは
----

----

- **<font color="Red">ブラウザ上で実行される</font>**プログラムのことを指します
- サーバサイドからのレスポンスにこのプログラムが記載さているとブラウザ上で実行されます

![p16.png](https://qiita-image-store.s3.amazonaws.com/0/151447/9af242b7-8ca5-dd76-a8ae-6511bf215134.png)

----

一般的には**<font color="Red">JavaScript</font>**というプログラミング言語がメジャーです
----

----
クライアントサイドスクリプトの良し悪し
----

----

![p17.png](https://qiita-image-store.s3.amazonaws.com/0/151447/c751bd86-2cda-27c0-1517-8cd8baed8604.png)
重要な処理（データの抽出・更新など）は、クライアントサイドスクリプトで行わないなど、**<font color="Red">使いどころ</font>**に注意して使用することが大切です

----
もくじ
----

----

![p18.png](https://qiita-image-store.s3.amazonaws.com/0/151447/edf9bc7a-cddb-260c-0eff-102e3de2c82c.png)

----
サーバサイドの仕組み
----

----

クライアントサイドからのリクエストは、下図のように①**<font color="Red">サーバサイドスクリプト</font>**を実行して、②**<font color="Red">データベース</font>**へ処理を行い、その結果をクライアントサイドへ返しています

![p19.png](https://qiita-image-store.s3.amazonaws.com/0/151447/82c70c11-8fac-7f8c-d0ca-95e16d32b94c.png)

----
サーバサイドスクリプトとは
----

----

- **<font color="Red">Webサーバ上で実行される</font>**プログラムのことを指します
- クライアントからの要求を加工してデータベースに渡すこと、データベースからの応答を加工してクライアントに返すことこれが主な役割です

![p20.png](https://qiita-image-store.s3.amazonaws.com/0/151447/52299875-8722-b2c1-4515-69cd42d69880.png)

----

一般的には**<font color="Red">Java、PHP、Python、Ruby</font>**などのプログラミング言語がメジャーです
----

----
データベースとは
----

----

クライアントが入力した**<font color="Red">データを保存する</font>**システムです
![p22.png](https://qiita-image-store.s3.amazonaws.com/0/151447/097a84cd-3009-eec8-d796-5dad6ffaf0ef.png)

----

- データベースは通常、下図のエクセルのような表形式で保存されます
- １つの表のまとまりを**<font color="Red">テーブル</font>**と呼び、１つのサービスで何百、何千のテーブルが使用されることもあります
![p23.png](https://qiita-image-store.s3.amazonaws.com/0/151447/ded9754b-a122-5bd3-ed10-595b8515f2bb.png)

----
PostgreSQL、MySQL、Oracle Databaseなど様々なデータベースシステムが存在します
----

----
以上です。
----

----
まとめ
----

----

1. Webサービスの流れ
2. 通信プロトコルについて
  - HTTPSとは
3. クライアントサイドの仕組み
4. ブラウザとは
  - ブラウザ別の普及率
5. クライアントサイドスクリプトとは
  - クライアントサイドスクリプトの良し悪し
6. サーバサイドの仕組み
7. サーバサイドスクリプトとは
8. データベースとは

----

- 今回は、大まかにWebサービスがどのようにして動いているのかを中心に説明しました
- もし続きを作ることがあれば、次回は少し踏み込んだ技術知識やリアルなエンジニアの業務内容なんかも共有していきたいと思います