itLinkedInB!HatenaLINELINECopy【初心者】ホームページとは?Webサイトが表示される仕組みについて解説どうも、UT(@ut_1029)です。ホームページが表示される仕組みやWebサイトに必要な技術などを解説して紹介します。今回は、Webサイトが表示される仕組みについて解説します。プログラミング初心者は必見の内容です。【PHP超入門】HTTP(GET・POST)について」を参考にしました。前回の記事「【初心者】ホームページとは?Webサイトとホームページの違いについて解説」も是非ご覧ください。知らない単語が出てきますが、まず最初は全体の流れを通して見るだけで大丈夫です。まとめスポンサーリンクWebページ表示の仕組みWebページがブラウザで表示される仕組みについて紹介します。「ブラウザ(クライアント)はWebページのデータをWebサーバから取得」してWebページは表示されています。クライアントみなさんのパソコン、スマホなどのブラウザをクライアントと呼びます。Webサーバ簡単に言うと、HTMLファイルや画像ファイルなどが保存されているパソコンです。それでは、もう少し深掘りしてみます。ブラウザは、WebページのデータをWebサーバへリクエストを行います。Webサーバはブラウザへレスポンスします。この時ブラウザとWebサーバは、HTTP通信でやりとりを行います。Protocolの略です。HTTPを簡単に言うと「ハイパーテキストでWebデータをやり取りする時の決まり事」です。Hypertext(ハイパーテキスト)ハイパーリンクで複数のWebデータを結びつける「文章を超える」機能です。ハイパーリンクは、世界中のWebページを結びつける参照のことです。Transfer(トランスファー)翻訳すると「転送」という意味です。Protocol(プロトコル)規約または決まり事という意味です。Webについての詳しい内容は「【初心者】ホームページとは?Webサイトとホームページの違いについて解説」で紹介したので、是非ご覧ください。Webページ表示の流れ次にブラウザとWebサーバでWebページが表示されるまでに行われるHTTP通信の流れを解説します。表示するWebページのHTMLが以下のコードだったとします。alt="猫の画像"></li></ul></body></html>上記HTMLの場合、Webページが表示されるまでのHTTP通信は以下の流れになります。ブラウザは、WebサーバへWebページのHTMLをリクエストWebサーバは、WebページのHTMLをブラウザへレスポンスブラウザは、HTMLを解釈ブラウザは、Webページの"犬の画像(/sample/dog.jpg)“をWebサーバへリクエストWebサーバは、ブラウザへWebページの"犬の画像"をレスポンスブラウザは、Webページの"猫の画像(/sample/cat.jpg)"をWebサーバへリクエストWebサーバは、ブラウザへWebページの"猫の画像"をレスポンスブラウザは、Webページを表示ポイントは、「犬の画像」と「猫の画像」を別々にHTTP通信している点です。Webページに表示する画像が2つあると、ブラウザとWebサーバでHTTP通信を2回行います。Webページを表示する際に画像が多いとWebページの表示に時間がかかる画像のデータが大きいとWebページの表示に時間がかかるということが言えます。Webページを作成する際は、上記のことに注意しないといけません。Webページ表示のHTTP通信さらに深掘りしていきます。ブラウザとWebサーバのHTTP通信のリクエストとレスポンスで送受信されるデータについて解説します。HTTPリクエストヘッダの内容HTTP通信においてブラウザがWebサーバへリクエストを行う際のデータ(HTTPリクエストヘッダ)は、以下のような内容です。HTTP/1.1このHTTPリクエストヘッダの一行目の記述について解説すると「HTTPメソッドはGETメソッドで、HTTP/1.1のバージョンを使ってhttp://localhost/index.htmlのファイルを要求します」という意味になります。HTTPメソッドGETメソッドリソースをWebサーバへリクエストするPOSTメソッドデータをWebサーバへ送信するHEADメソッドHTTPヘッダのみをWebサーバへリクエストするHTTPレスポンスヘッダの内容HTTP通信においてWebサーバがブラウザへレスポンスする際のデータ(HTTPレスポンスヘッダ)は、以下のような内容です。OKこのHTTPレスポンスヘッダの一行目の記述について解説すると「HTTP/1.1のバージョンで要求されたリクエストは、正常でした」という意味になります。HTTPステータスコードHTTP通信のリクエストに対するレスポンスの状態を番号で表記しています。HTTPステータスコードを確認することでHTTP通信の状態を知ることが出来ます。1XXInformation(情報)リクエストを受け取れた。2XXSuccess(成功)リクエストを受け取れた。3XXRedirection(リダイレクション)リクエストを完了する為に追加処理が必要。Error(クライアントエラー)クライアントのリクエストに誤りがある。Error(サーバエラー)サーバがリクエスト処理に失敗した。正常にWebページが表示される場合は、通常2XXが返ってきます。(コンピュータと通信)Webページが表示されるHTTP通信について紹介しました。最後にインターネットに関する決まりごとをまとめた団体などを紹介します。IETFとは、インターネットにおける技術の標準化を推進する組織です。Commentsの略。RFCとは、IETFで決定された規格や決まりごとをまとめた文章です。RFC文書といいます。2616のような通し番号で表記されています。今回は、Webページが表示されるまでの仕組みや流れ、HTTP通信などについて解説しました。いった知識はプログラミングを行う際に知っておくべき知識です。Webページの表示速度が遅いWebページが正しく表示されないなどの原因調査および改善を行います。した時に仕組みを知っておくことで速やかに対応を行うことができます。プログラミングだけ勉強するのではなく、仕組みなどを理解しておくこともとても重要です。当ブログの管理者UT(プロフィール)です。無理せず投稿をモットーに頑張っています。Linux、PHP、JavaScript、JQuery、MySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。...JavaScriptについてJavaScriptのコードって何がキレイなコードなの?と思うことが多いです。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。UTのプロフィール1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。