こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第二回、「WEBサイトが表示される仕組み」を説明していきます。
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
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などを触れていこうかと思います。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！