どうも、Kohei(@koheinishino_)です。
プログラミングを勉強し始めたけど、そもそもWebサービスの仕組みをあんまり理解できていない気がするんだよな…。
Webサービスの仕組みや用語を理解できるようになりたい！
という方は意外と多いのではないでしょうか？
正直、Webサービスについての理解が浅くてもプログラミングでWebサービスはつくれます。言い換えれば、Webに関する断片的な知識があればプログラミングはできるということです。
しかしWebサービス全体の仕組みを分かっていないと、システムエラーが発生した際に原因の特定に時間がかかったり、非エンジニアのチームメンバーやクライアントと話すときに上手く伝えられずに認識齟齬が発生したりする可能性があります。
なので、Webサービス全体の仕組みを理解することは重要です。
本記事では下記の動画を参考にさせていただき、Webサービスの仕組みや頻出用語について解説していきます。すべて解説しようとすると物凄いボリュームになってしまうので、各技術についてはあまり深堀りせずに全体を理解できるように説明します。
記事を読み終わった頃には、Webサービスの仕組みや用語についてザックリと理解できるようになっていると思います！是非ご覧になってください！
リクエストとレスポンス
まず本記事で一番覚えていただきたいことが1つあります。
それは「Webサービスとはリクエストとレスポンスの連続で成り立っている」ということです。
例えばGoogleのトップページを見たいとしましょう。
まず、PCやスマホからサーバーという場所に対してリクエストを送ります。その後、サーバーがGoogleのトップページをレスポンスとして返します。
普段何気なく色々なページを遷移していると思いますが、その遷移の最中にリクエストとレスポンスが行われているというわけです。
では、リクエストの結果をレスポンスとして我々のPCやスマホに返してくれるサーバーとは一体何なのでしょうか？
サーバー
サーバーとは「リクエストに対していつでもレスポンスを返すように設定されたコンピュータ」です。
私達がPCやスマホから送ったリクエストに対して、サービスを提供するというかたちでレスポンスを返す役割を担っています。ちなみに”serve”という単語は”提供する”という意味で使われることもあります。
そしてサービスを提供される側のことをクライアントと言います。言い換えるとリクエストを送る側のことですね。
このようにクライアントとサーバーで成り立つシステムのことを、そのままクライアントサーバシステムと言います。略してクラサバとか言ったりしますね。
ここまででサーバーとは何なのかが分かったと思います。では、そのサーバーはどこに存在するのでしょうか？
サーバーにリクエストを”送る”と言っているくらいなので、送り先があります。それがIPアドレスです。
IPアドレス
IPアドレスとは「ネットワークに接続されている機器を見分けるためのインターネット上の住所」です。
例えばGoogleのトップページを開きたいとき、通常「https://www.google.com/」とブラウザに入力して表示させると思いますが、実は「216.58.220.131」と入力しても表示されます。
この「216.58.220.131」がIPアドレスです。IPアドレスはすべて数字の羅列で構成されています。よく2進数や10進数で表記されます。学生の頃に情報の授業で習ったアレですね。
ちなみに私達のPCやスマホにもIPアドレスはあるのですが、基本的に固定されていません。これはセキュリティの観点からそのようになっています。逆にサーバーはリクエストを受ける必要があるので固定されています。
でも、IPアドレスって普段使わないですよね？先程の例で言えば、馴染みがあるのは「https://www.google.com/」の方だと思います。これがドメインです。
ドメインとDNS
ドメイン
ドメインとは「人間が分かりやすいように付けたIPアドレスの別名」です。つまり、「インターネット上の住所」という意味ではIPアドレスと同じです。
では、なぜ同じ意味を持つモノが2つ存在するのでしょうか？
まず、IPアドレスをなくしてドメインだけにすることはできません。なぜなら、コンピュータは数字でしかモノを覚えられないからです。しかし、IPアドレスは数字の羅列なので人間からすると覚えづらいです。そこで、
「https://www.google.com/」と入力したら「216.58.220.131」にリクエストが送信されるようにすればいいのでは？
と考えたのですが、これを実現するにはIPアドレスとドメインを関連付けなければいけません。そのために必要なのがDNSです。
DNS
DNSとは「インターネット上のドメイン名を管理するシステム」です。DNSはDomain Name Systemの略です。そのままですね。
クライアントが「https://www.google.com/」と入力したら、まずDNSにドメインに該当するIPアドレスを聞きにいきます。
そうするとDNSが「https://www.google.com/」は「216.58.220.131」にあるよと教えてくれるので、そこで初めてクライアントから「216.58.220.131」にリクエストを送ります。
このドメインからIPアドレスを取得する処理のことを名前解決といいます。
- リクエスト：クライアントからサーバーに対して情報を要求すること
- レスポンス：サーバーからクライアントに対して情報を返すこと
- サーバー：リクエストに対していつでもレスポンスを返すように設定された電源つけっぱのコンピュータ
- IPアドレス：ネットワークに接続されている機器を見分けるためのインターネット上の住所
- ドメイン：人間が分かりやすいように付けたIPアドレスの別名
- DNS：インターネット上のドメイン名を管理するシステム
Webサービスの仕組み
「Webサービスとはリクエストとレスポンスの連続で成り立っている」という話をしました。
ここからは「レスポンスにおいてサーバーはクライアントにHTMLとCSS（+JavaScript）を返却している」ということを覚えていただきたいです。
HTMLとCSS
HTML
HTMLとは「Webサイトの文章や画像の構成を決める言語」です。WebサイトのほとんどがHTMLで作られています。
このブログで例えると、今みなさんが読んでいる部分は段落に当たります。上記の「HTMLとCSS」は見出しに当たります。また、記事タイトルの下には画像が配置してあります。
これらの違いを伝えてあげなければ、コンピュータは文章や画像を人間の思ったとおりに表示してくれません。そこでHTMLが必要になるわけですね。HTMLは1ページ1ファイルで構成されることが多いです。
しかし、HTMLはあくまで文章や画像の構成を決めるためのもので、デザイン（見た目）とは切り離されています。デザインと切り離されていないと厄介なことが起こりうるからです。
例えば、各段落に直接文字の大きさを指定してしまうと
今日中に段落の文字の大きさを少し大きくしといてくれ！
なんて上司から言われてしまったら日が暮れます…。なので、デザインはCSSに定義します。
CSS
CSSとは「Webサイトのスタイル（見た目）を指定する言語」です。
先程の例でいうと、あらかじめ段落の文字の大きさをCSSに定義しておけば、その部分を変えるだけで全ての段落の文字の大きさを変えられます。もちろん個別でも指定できます。
ここでは詳しく言及しませんが、Webサイトに動きをつけるためにJavaScriptというプログラミング言語も使われます。例えば下から広告がシュッと出てきたり、ボタンを押すと吹き出しが表示されたりするのはJavaScriptに定義されていることが多いです。
HTML+CSS（+JavaScript）をサーバーに保管しておき、リクエストがきたらクライアントにそれらを送信します。クライアントがブラウザでそれらを読み込んで初めてWebサイトが表示されるのです。
HTML+CSS（+JavaScript）をサーバーに保管しておくだけでもWebサイトは構築できます。しかし、これだけではずっと同じページが表示されてしまいます。
Amazonのトップページから商品を検索しようと思って検索ボタンを押しても、トップページに戻されてしまうのです。なぜなら、商品を検索するための処理の内容がどこにも書いていないからです。
その処理の内容を決めるのがサーバーサイドスクリプトです。
サーバーサイドスクリプト
サーバーサイドスクリプトとは「サーバー内での処理の内容を記述するための言語」です。いわゆるプログラミング言語で、Ruby・Java・PHPなどがそれに当たります。
では、このサーバーサイドスクリプトは具体的にどんなことを記述するのでしょうか？先程と同様、Amazonを例に説明します。
通常、Amazonで商品を検索するときの手順は下記のようになるかと思います。
- トップページの検索ボックスに検索したいワードを入力する。
- 検索ボタンを押す。
- トップページから検索結果の画面に表示が切り替わる。
上記の②と③の間の処理内容を書くのがサーバーサイドスクリプトの役割です。
ところで、検索結果の画面って検索結果によって異なりますが構成自体は同じですよね。表示される商品は違うけど、商品の同じ場所は同じです。
これってつまり、検索結果ページのHTML+CSS（+JavaScript）はあらかじめ用意してあって、中身だけ変えているということなんです。
それらを踏まえた上で、Amazonで検索結果を表示するためにサーバーサイドスクリプトでは下記のような処理を記述します。
- 入力された検索ワードを元にデータを取得する。
- 取得したデータをあらかじめ用意しておいた検索結果ページのHTML+CSS（+JavaScript）に当てはめる。
- 検索結果ページのHTML+CSS（+JavaScript）をクライアントに送信する。
実際、処理はもっと複雑になっていると思いますが大体こんな感じだと思います。
ところで①に「データを取得する」とありますが、そのデータはどこにあるのでしょうか？お気づきかと思いますが、データベースの中にあります。
データベースとSQL
データベース
データベースとは「あらゆるデータを保存しておくための場所」です。エンジニアの人はよくDB（デービー）と言います。
データベースは表形式のものがよく使われます。表のことをテーブルと呼び、データによって別々のテーブルに分けられています。（ex. 商品情報を保存するProductsテーブル、アカウント情報を保存するAccountsテーブル等）
例えば、下記のように商品情報を保存するProductsテーブルがあるとしましょう。
| id | 商品名 | 価格 |
|---|---|---|
| 1 | Apple AirPods Pro | 28980 |
| 2 | Sony WF-1000XM3 | 21073 |
| 3 | Bose QuietControl 30 | 33348 |
ではこれらのデータは一体どのように取り出せばいいのでしょうか？そのときに必要なのがSQLです。
SQL
SQLとは「データベースを操作するための言語」です。
例えば上記のProductsテーブルからid=1のデータを取り出したいときは、下記のSQLをデータベースに送信します。
SELECT * FROM Products WHERE id = 1;
上記のSQLではデータを取得していますが、他にもデータを更新（変更）したり削除したりすることができます。
- HTML：Webサイトの文章や画像の構成を決める言語
- CSS：Webサイトのスタイル（見た目）を指定する言語
- サーバーサイドスクリプト：サーバー内での処理の内容を記述すための言語
- データベース：あらゆるデータを保存しておくための場所
- SQL：データベースを操作するための言語
まとめ：Webサービスの仕組みを簡単に説明できるようになっておこう
私自身、この記事を執筆する前までは上記の仕組みや用語を他人に説明できませんでした。 何となくは分かっていたつもりなのですが、自分の中で明確に定義できていなかったんですよね。
特に非エンジニアの方とお話する機会があったときにWebについて分かりやすく説明できるようになっておきたいので、自分で書いたこの記事を何度も読み返そうと思いますw
というわけで、自戒の念を込めて執筆した本記事が読者の皆様のお役に立っていただけたら幸いです。
また、Webサービスの仕組みを体系的に学びたい方に下記の教材がオススメです。コチラも是非チェックしてみてください！
