はじめに
今日はwebアプリケーションを使用する際にブラウザにページが表示される仕組みをまとめていきます。
そもそもブラウザに表示されるwebアプリケーションとは
「webアプリケーション」とはブラウザ上で操作するアプリのことで、webサーバーにインストールされていて、インターネットを通じて世界中のwebサーバーにあるwebアプリケーションを見ることができます。
「webアプリケーション」に対し「ネイティブアプリ」は、PCやスマホなどの端末にインストールを行い動くアプリのことで、webアプリケーションはwebサーバー上でプログラムが動くのに対し、ネイティブアプリは端末上でプログラムが動くという特徴があります。
webアプリケーションを表示する流れ
①ブラウザのアドレスバーでURLを入力。 (webサーバーへHTTPリクエストを送信)
↓
②リクエストを受け取ったwebサーバーがHTML、CSS、JS、画像ファイルを返し(HTTPレスポンス)、ブラウザへ反映する。(HTTPリクエストを受けたあとに必要であればDBサーバーにリクエストを送りデータの送受信を行いHTMLへ反映させる。)
掘り下げます
①について
まずブラウザのアドレスバーにURLを入力・送信すると、インターネットを通じてwebサーバーに対しHTTPリクエストが行われます。
HTTPリクエストは、
・リクエストライン
・ヘッダーフィールド
・ボディ
の３つから構成され、GET(リソースの取得)・POST(リソースの作成)・PUT(リソースの更新)・DELETE(リソースの削除)などのメソッドやクライアント側の情報などが記載されています。
②について
リクエストを受け取ったwebサーバーがリクエストの内容に合うファイルをブラウザに対しHTTPレスポンスを返します。
HTTPレスポンスは、
・ステータスコード
・ヘッダーフィールド
・ボディ
の３つから構成され、リクエストの結果を示す番号のステータスコードやリクエスト内容のボディがあります。
以上、非常に簡単にですがURLを入力してEnterキーを押してからブラウザに画面が反映されるまでの仕組みを整理してみました！
参考
- アプリの学校 powered by yappli ネイティブアプリとは？webアプリとの違い・PWA・ハイブリッドアプリも解説。
- Qiita HTTPの仕組み
- Qiita APサーバとDBサーバなどについてのざっくりまとめ
コメント