Zenn
👶

IT業界で働くなら絶対に知っておくべきWeb基礎知識（非エンジニア、駆け出しエンジニア向け）

2022/08/15に公開
Web
#
サーバー
#
バックエンド
#
基礎
#
クライアント
tech

はじめに

以前お世話になってるスタートアップ企業で勉強会に登壇することになり、そのときに作った資料がもったいないので、それを元に記事を書いてみました。

プログラミングやらなんやらの前に、色々と知っておく必要がある基礎的な情報を書いてます。
が、正直調べ直したりしながら書いたりもしていて、いい復習にもなりました。
間違っているところがあったらコメントで優しく教えてくれると嬉しいです・・・

本題の前に

恥ずかしながら、エンジニアになる前の私は、普段私達がアクセスしているGoogleやYahoo、そして検索結果で出てくる各Webサイトがどのように動いているか理解できていませんでした。
Webの世界に入ったとき、htmlもcssも知らなかったし、「ブラウザ」っていう言葉すら知りませんでした…。

みなさんもこんなことありませんか？

  • ドメインとか取るけどどんな意味があるのかよくわからない
  • クライアントとかサーバーとか言うけど仕組みがわからない
  • 結局エンジニアが書いてくれたコードってどこに保管されているの？
  • HTMLとかJavaScriptとかどこでどうやって動いているの？
    などなど。

今回は、エンジニアではない人（営業さん、ディレクター、デザイナー、その他いろいろ）が、このような話をつなぐことができて、WEBサービスがどのように動いているか知ることで、新しい知識を入れるときの土台となることを目指していきたいと思います。
エンジニアの方は復習に聞いてもらえれば嬉しいです。

1. Webサービスの大まかな仕組み

1-1. クライアントサーバーシステムとは

Webサービスは一体どのようにしてページを変えたり、入力した情報をデータベースに蓄積したりしているのでしょうか。
私達の使っているwebサービスは「クライアント・サーバーシステム」によって支えられています。
※この形が、今のWebの基本になっています。

クライアントサーバシステムとは、通信ネットワークを利用したコンピュータシステムの形態の一つで、機能や情報を提供する「サーバ」（server）と、利用者が操作する「クライアント」（client）をネットワークで結び、クライアントからの要求にサーバが応答する形で処理を進める方式。
引用: クライアントサーバシステム（クラサバ）とは - IT用語辞典 e-Words

クライアント

クライアントは、基本的に私達が使っている端末（PC/スマホ/タブレット） などのことです。
サーバから機能や情報の提供を受けるコンピュータやソフトウェアで、利用者が手元で操作し、画面表示や入力の受付などを担当することが多いです。
サーバからきた情報を、クライアントで受け取って、いい感じに表示してくれるのがWEBブラウザ（chromeとかsafariとか）ですね。

サーバー

サーバーはシステムで利用されるデータを保存・管理したり、接続された周辺機器などのハードウェアを管理したり、何らかのデータ処理機能を有するコンピュータやソフトウェアで、これらの機能や情報などをネットワークを通じて外部に提供することができます。
最近はAWSとかFirebaseとかのクラウドを使う人が多いですね。その他にもレンタルサーバーとか簡単にサーバーを立てられるサービスが今は色々ありますね。

1-2. IPネットワークについて

IPとかインターネットとかなんとなく知ってるけど結局何？って人多いと思います。
私も未だに難しいなあと思います…。

IPネットワークとは

IPネットワークとは、コンピュータネットワークの種類の一つで、インターネットプロトコル（IP：Internet Protocol）というプロトコル（通信規約/通信手順）によってデータの送受信を行うもの。最も大規模で有名なIPネットワークは「インターネット」（The Internet）として知られる
引用: IPネットワーク 【IP network】 IP網 - IT用語辞典 e-Words

インターネットとは

さてここからが本題で、インターネットとは前述したIPネットワークのひとつです。
インターネットプロバイダーを契約した人同士を結び、結果として世界中をつなげまくっている接続の仕組みです。

インターネットサービスプロバイダ（英語: Internet Service Provider）とは、インターネット接続の電気通信役務を提供する組織のことである。 プロバイダやISPなどと略して呼ばれることが多い。日本では、電気通信事業者であり、インターネット接続事業者（略して接続事業者）と訳されることがある。
引用: インターネットサービスプロバイダ - Wikipedia

インターネットがない時代は、例えば学校内だけしか使えない、その会社だけしか使えない接続（イントラネットといいます）を使っていました。要は1つのネットワークで閉じていたんですね。

しかし、そのネットワーク同士をつなげることで、世界中の端末がつながることとなります。この場合の「端末」はクライアントでもありサーバーでもあります。

これにより、どこでもインターネットに繋がってさえいればクライアント・サーバーの関係になることができ、どこでもwebサービスを使うことができるようになりました。

今では当たり前に世界中の人と繋がれますよね。
それってすごいことで、当時のことを考えるとインターネットって超画期的だったんですね〜

1-3. IPアドレスについて

IPネットワーク（インターネットやイントラネット）上で通信を行うためには、IPアドレスという住所が必要です。
住所が分からないと、行先を特定できないですよね。

IPアドレスは、通信を行う機器全てに必ず１つ以上割り振られています。
0～255で示される、４つの数字を「.」で区切った文字列がIPアドレスです。
このIPアドレスでのみ、インターネットをはじめとするIPネットワークは、通信相手を特定する事が出来ます。

例えばこちら。アクセスしてみてください。
172.217.175.110

Googleのページが表示されましたでしょうか？
そうです。GoogleのIPアドレスです。

先ほどで示した通り、IPアドレスは数字の羅列なので人間にとって分かりにくいものです。
そのため、通信先をIPアドレスではなく英数字で「www.google.com」というように名前で表そう、という事になりました。これが「ホスト名」です。

しかしながら、IPネットワークではIPアドレスでしか通信相手を特定できません。
そこで、ホスト名からIPアドレスを変換するという作業が必要となるわけです。

この「ホスト名からIPアドレス」の変換のために使われる情報が、「hostsファイル」です。

# hostsファイルの記述例
172.217.175.110 www.google.com
172.217.175.110 google.com

要はこのホスト名の場合はこのIPですよ〜的なのを管理するファイル(みんなのPCにも必ず入ってるはず)

PCに保存されている場所はこちら
Linux: /etc/hosts
Windows: C:\Windows\system32\drivers\etc\hosts

IPネットワークが出来た当初は、こういったファイルを皆で作成、管理しあうという事を行っていたそうです・・・（怖
しかし、インターネットをはじめとするIPネットワークの利用者が増えてくると、こういった管理は段々難しくなってきますよね。
配布先が膨大になりますし、ホスト名を各々が勝手に決める事が出来てしまうので、ホスト名が重複する、という事も起き始めてきました。

そこで出てきたのが「ドメイン」です。

1-4. ドメインの発明

偉い人達は考えました。膨大に増えたホスト名を、うまく管理するための概念「ドメイン」を発明したのです。
まず、ホスト名を次のような名前で管理するように決めました。

www.google.com
ホスト名を途中「.」で区切り、ホスト名を管理する範囲（つまりこれが「ドメイン」です）を明示出来る様にしたのです

ドメインとかはこれ以上書くとかなり長くなっちゃうのではしょります。。。

ドメイン関連でよく出てくるのだけちょっとご紹介

「DNS(Domain Name System)」

Domain Name Systemとは、インターネット上のホスト名や電子メールのアドレスに使われるドメイン名と、IPアドレスとの対応づけを管理するために使用されているシステムである。

DNSサーバ（ネームサーバ）

DNSサーバは、コンピュータ・ネットワークにおいて、Domain Name Systemの「名前解決」機能が実装されたサーバである。

1-5. URLについて

みなさんもURLは馴染み深いですよね。
URLは、一貫した通信の決まり事を作る（プロトコルといいます）ことで、どんなクライアントでも同じURLでリクエストすると同じレスポンスをしてくれる仕組みです。

URLをコピペしたら、他の端末で見ても同じように見ることができますが、それはURLの一貫した決まりの中で行われているからこそ、実現できていると言えます。

「https」は「メソッド」と呼ばれ、通信の仕組みを表します。
「www.zenn.dev」の部分は「ホスト」と呼ばれ、サーバー名を表す部分です。
そしてその後ろに「指示（パス）」が書いています。

Webサービスの大まかな仕組みまとめ

長くなりましたが、世界中が正しくつながるための仕組みとして「クライアントサーバーシステム」「インターネット（IPネットワーク）」「URL（IPアドレス・ドメイン）」が必要であることを説明してきました。
この全体の仕組みをWebと呼んでいます。

それでは、わたしたちエンジニアが日々書いているコードはどこにあって、どんな形で動作しているのでしょうか。
結論から言うと、コードが入ったファイルはサーバーに置かれています。

サーバーはたくさんのクライアントからリクエストを受け取るコンピュータです。

Webサイトなどを公開するためには、まずは先程出たホスト名を取得し、そのホスト名をサーバーにつけて、サーバーにファイルをアップロードします。

ホスト名（ドメイン名）は、他のホスト名と一緒になってはいけません。「www.zenn.dev」がふたつあると、どちらにリクエストを送るべきかわからなくなってしまうからです。

クライアントのリクエストに応じて、サーバーは持っているファイルをクライアントに送り、ページが表示されます。

2. クライアントサイド（フロントエンド）について

それでは、情報を受け取るクライアントはどのような仕組みでユーザーに画面を表示しているのでしょうか。（クライアントサイドはユーザーの最前線に位置しているため、フロントエンドとも呼ばれます）
先程説明したように、URLでサーバーにリクエストをすると、サーバーからURLに応じたファイルがレスポンスとして送られてきます。

しかしここで問題が発生します。
URLのリクエストを受けてサーバーから同じファイルが送られてきたとしても、様々な種類のクライアントがいるため、それを読み取ることができるかは、クライアントの性能次第ということになってしまいます。

そこで、URLのときと同じように、「ファイルにこのように書いたら、ユーザーにこのように表示します」という取り決めを決めておき、それに基づいて書くようにします。

この取り決めはDOMと呼ばれ、DOMに基づいて書かれているのがHTMLであり、DOMを読み取ってユーザーに表示するのがブラウザです。ブラウザはChromeやSafari、Edgeが有名ですね。

※DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み。

フロントエンドエンジニアとしてはまさにここからが専門分野なんですが、まあ今回はWebの基礎知識ってことなんでこの辺で・・・
別途フロントエンドの技術に関する記事は今後書いていきたいと思います。

3. サーバーサイド・バックエンドについて

4-1. サーバーについて

先ほど説明したのは物理的なサーバーです。
そのサーバーと別に、それぞれ違う役割をもつサーバーがあり、そのサーバーとは役割を示すもので、物理的なサーバーとは違います。

4-2. Webサーバー

Webサーバーは、クライアントと直接やり取りして処理を行うサーバーです。
クライアントからURLを受け取り、どのような処理を行うか決めます。処理には大きく2種類の処理があります。

  1. 静的処理
  2. 動的処理
    Webサーバー例: Apache, Nginx, CloudFront

1. 静的処理

Webサーバーが保持しているファイルを「そのまま」ブラウザに送ります。「このページがほしいです！」という指令がブラウザから来て、誰が見ても同じ画面になるときにこの処理を行います。
HTML（+ CSS、jsなど）だけで構成されているページとかのことを静的ページと言います。

2. 動的処理

単にブラウザにファイルを送るだけではなく、何かしらの処理をして送る場合があります。
例えば、ECサイトの多くは全ての商品詳細ページのファイルが用意されている訳ではなく、一度サーバーでURLに合致する商品を検索し、その結果をHTMLファイルに乗せてブラウザに送り返しています。

このとき、Webサーバーではそれ単体で処理を行わず、アプリケーションサーバーを呼び出し、アプリケーションサーバーで処理を行います。

場合によっては貯めているデータから情報を持ってくることもあるので、その場合はデータサーバーとも連携して結果を作成し、それをブラウザに送り返します。

これらの動きを制御しているのが、サーバーサイドで動く言語であり、サーバーがその言語を読み取って処理を行っています。Python、Java、PHP、Ruby、GOなどが有名です。

4-3. アプリケーション（AP）サーバー

Webサーバーの中でお話ししたように、動的な処理が加えられる時、アプリケーションサーバーが呼び出されます。
そして、ブラウザからWebサーバーにリクエストが送られたように、今度はWebサーバーからアプリケーションサーバーにリクエストが送られ、そのリクエストに応じて計算や検索などの処理を行います。
中にはデータへのアクセスが必要な処理もあるので、それに関してはデータサーバーとのやり取りを行います。

4-4. データベース（DB）サーバー

データサーバー（データベースサーバー）は、アプリケーションサーバーからのリクエストに応じて、データの読み書きを行います。
ここでは計算などの処理は行わず、あくまでデータベースへの読み書きを行います。
ここで実行するための言語として、SQLがあります。

4-5. WEB3層アーキテクチャ

Webサーバー・アプリケーションサーバー・データベースサーバーで構築されるサーバーの仕組みはWeb3層アーキテクチャと呼ばれ、多くのWebアプリケーションで採用されています。
理解してもらえれば、それぞれのサーバーで求められることが違うことがわかるでしょう。
あえて3層に分けずに構築することも可能ですが、このように分けておくことで、部分的な機能増強やセキュリティの向上、運用のしやすさなどがあります。
サービスが大きくなればなるほど重要となるこれらの設計が、一般的にインフラと呼ばれる部分となります。

Web開発の全体像


これで、クライアントサーバー間のやりとり、クライアントの詳細、サーバーの詳細を説明したので、Web開発の全体像を見たことになります。

いやああ長かった・・・。
他にも話すべきことはたくさんあると思うのですが、まずはこの辺押さえておくといいのかなと。

今後はもう少し自分の専門分野の話を書きたいなあ〜

Discussion