Webってどうやって表示されてるの？サーバーやブラウザの基礎知識

こんにちは

セカンドセレクションのUmeharaです。

今回は研修中に教えていただいた「Webの仕組み」を紹介していきます。

入社前まではネットといえばGoogleを見ることにしか使っていませんでしたが、「Webの構造」を教えてもらい非常に興味がわいてきています。

できるだけ初心者目線でざっくりと解説しますので、是非最後までご覧ください。

Webシステムの概要

Webシステムはフロントエンドとバックエンドの2つに分類されます。

まずはフロントエンドとバックエンドの仕組みを紹介します。

フロントエンドはWebサイト・アプリケーションにおいて、ユーザーに見える部分を指します。

上図ではWebブラウザに当たります。

例えばユーザーが文字を入力する、ボタンを押して注文するという「機能」を実行し、バックエンドのソフトウェアとデータをやり取りします。

フロントエンドのソフトウェア開発は「HTML・CSS・Javascript」の言語でプログラミングされます。

バックエンドは、ユーザーに見えない部分を指します。役割として、フロントエンドでユーザーが入力したデータを処理し、データベースへの保存、検索した結果を出力します。

上図では、Webサーバーとデータベースに当たります。

主にバックエンド開発言語は「PHP、Python、Ruby、Java」です。

バックエンド開発をする際には、効率的に質の高いアプリケーションを作るため、フレームワークを用いて必要な部分のみプログラミングを行います。

ブラウザはインターネット上のサイトを閲覧するために使われるアプリケーションです。

Chrome・Safari・Internet Explorer・Firefoxなどは皆さんもご存じではないでしょうか。

・ブラウザでは、Webページを表示する際にHTMLファイルを解析し、表示（レンダリング)をしてくれます。

・Webサーバーはフロントエンドからの「このファイルデータが欲しい」というリクエストに対して、レスポンスを行います。

今見ているブログもあなたの使っている端末からWebサーバーにリクエストを送り、HTML・CSS・画像などがレスポンスで返ってきていると考えるとわかりやすいでしょう。

・データベースは膨大なデータを管理するためのソフトウェアです。

フロントエンドから出されたリクエストに対して、Webサーバー側で必要な「データ」をデータベースへ保存・取得していきます。データベースを操作する場合に用いられる言語がSQLです。

研修中に「SQL攻略」でひたすらSQL文を書いたのが今に活きています。

インターネットは1990年ごろから一般的に使われるようになりました。

（確かもっと前は軍事用の連絡手段だった気がしますが・・・）

テレビの誕生が1920年ごろ（およそ90年前）と考えるとインターネットの誕生が比較的最近に感じますね。

さて、フロントエンド（ブラウザ）とバックエンド（Webサーバー・データベース）をつないでいるのがインターネットです。普段はGoogleしか使っていない人もネットの裏側を意識してみてください。

近年ではスマートフォンをはじめ、いろいろなモノが通信機能を持ち始めています。今後5GやAI技術によるテクノロジーの発展でますます社会に浸透していくと僕は思います。

Webに関する研修で教えていただいた内容をざっくりとまとめてみました。本記事でWebの仕組みが全然わからない方がWebの枠組みを理解し、少しでも興味を持ってもらえると嬉しいです。登場人物を理解すればWebも理解できるはず