WEBサイト

普段調べ事や買い物をする際、様々なサイトに訪問していますよね？
現実のお店のように足を運んで実際に目で見ているわけではないにも関わらず、インターネットの力と工夫で多くの情報が手元の画面にあっという間に表示されています。
その仕組みを今回は学んでいきましょう。

二つの軸

WEBサイトを語るにあたり、二つの軸が存在します

WEBサイトの軸.

1. 「クライアント」「サーバ」などの立場を中心とした捉え方
2. 「フロントエンド」「バックエンド」などの役割を中心とした捉え方

これらは雰囲気が近いので混同されがちですが、それぞれ別のモノを指しています。
一つずつ見ていきましょう

クライアントとサーバ

この軸は立場中心の見方をした時のシステムの説明になります。

クライアント.

WEBサイトを欲しがる側の立場
・PCのブラウザ
・スマホのブラウザ

サーバ.

WEBサイトを渡す側の立場

基本的には

クライアントが特定のURLにアクセスする
クライアントがブラウザの機能でサーバにWEBサイトをリクエストする
サーバがリクエストを受け取る
サーバがリクエストに合うWEBサイトのデータを返却する
クライアントが受け取ったWEBサイトのデータを表示する

以上がWEBサイト表示までの流れになります。
どんなサービスか、どんな仕組みのWEBサイトか、どんなプログラミング言語を使っているか、これらに左右されないWEBサイトの表示に関わる仕組みの説明がクライアントとサーバの関係になります。

WEBサイト以外だと、印刷なんかでは似たような動きが起きていますね。

フロントエンド、バックエンド、インフラ

この軸は役割中心の見方をした時のシステムの説明になります。

フロントエンド.

画面の見た目に関わる動作をする領域
WEBサイトの最終成果物
・HTML
・CSS
・JavaScript/TypeScript

バックエンド.

データベースとのやり取りや計算をする領域
・Java
・PHP

インフラ.

データベースやファイルそのものを管理する領域
・サーバマシン
・AWS
・Azure

この分類の難しい点は必ずしも「クライアント=フロントエンド」「サーバ=バックエンド」とはならない点です。
例えばPHPという言語はバックエンドを主に扱う言語ですが、クライアント側の仕事もする事ができます。同じようにJavaScriptもクライアント・サーバ両方での仕事が可能です。
サーバ上でも画面デザインは作成できるし、クライアント側でも計算は可能だからです。

先ほどの印刷に照らし合わせて考えてみましょう。

クライアントとサーバで作業を分担しているパターン、負担を分けることで一定の速さがあります。

サーバ側に寄せて完成品を表示する処理だけクライアントに任せるパターン、サーバの方が強いマシンを使っていることが多いのでサイトの表示をとても速くできる特徴があります

サーバ側にはデータだけ渡してもらって細かいことはクライアント側で行うパターンです。
あまり見ないパターンですが、状況次第では通信料の削減が可能なことがあります。

まとめ

WEBサイトはサーバが持っていて、それをクライアントがお願いして表示する
フロントとかバックというのはあくまで仕事内容が違うだけで、仕事場所に左右されるとは限らない

多少はイメージがついたでしょうか？
本当はもっとクライアントとサーバの間に色々挟まっていたりするのですがそれは次回以降とします。

特に「フロントエンドエンジニアだからサーバ知識がゼロ」みたいな謎の偏見がたまにあるので、そういう事が減っていくと嬉しいです。

二回目にして突然難しめな内容になってしまいましたがいかがでしょうか？
次回はインフラ関連として、データベースやCDNなどを触れていこうかと思います。

おまけ

株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！

新卒の方
https://www.customatrix.co.jp/newgrads/index.html
中途の方
https://customatrix.co.jp/career/index.html