Web制作者ならおさえておきたい!httpの仕組みをかんたん解説

http

WebサイトのURLに必ず付いてるhttp。最近ではサイト全体をhttps化する流れになってきています。当サイトも全ページhttps化しました。

そもそもhttpとは?という疑問に少しでも回答できればと思います。httpの仕組みを理解してWeb制作や運用に役立てましょう。

  • ページが404エラーになるのはなぜ?
  • ページの表示速度が遅いんだけど?

こういった問題もhttpの仕組みを理解することが解決の手がかりとなり、未然に防ぐのにも役立ちます。

概要を理解してもらうために書くので、詳細を理解している人にはツッコミどころ満載かもですがご容赦ください。より詳細に知りたい方は専門的なサイトをご覧ください。

スポンサーリンク

対象読者

Webに関わるひとすべてです。httpがよくわからない方が概要をつかめることを目指して書いています。

httpとは

httpとはブラウザ、サーバー間の通信手段です。ブラウザのことをクライアントという場合もあります。ブラウザとサーバーのやりとりだと理解してもらえれば十分です。やりとりのことを専門用語で、リクエスト、レスポンスと呼びます。

httpsはこのやりとりを暗号化して安全な通信を行うものです。通常のhttp通信だと悪意のある者に盗聴される可能性があります。個人情報やパスワードが漏れないためにもhttps化が必須になってきています。

リクエストとは

リクエストとは、ブラウザからサーバーへお願いすることです。

リクエストの方法は

  • アドレスバーにURLを入力してエンターキー
  • リンクをクリック
  • 検索フォームに入力して検索ボタンをクリック

などです。普段何気なくやってることですね。ぜんぶに共通して、“このページを送ってください”ってお願いしてます。自分でURLを入力する以外は、”このページ”がどのページかは制作者が指定しています。コーディングする方は自分で書いているはずです。

<a href="https://webtatan.com/blog">Home</a>

みたいな感じで。

フォームに入力した値は”このページを送ってください”というのと一緒にサーバーへ送ります。よく使われる送り方が2種類(Get,Post)あって、制作者が指定しています。ここでは一緒に送られるという部分だけ押さえてください。

ページ内リンクはリクエスト?

リクエストの説明に”リンクをクリックする”がありますが、ページ内リンクはリクエストには入りません。すでに表示されているページ内を行き来するだけなので、リクエストを送る必要がないからです。

レスポンスとは

レスポンスとは、サーバーが、リクエストされたものをブラウザに返すことです。リクエストとは”このページをください”とお願いすることでしたね。

レスポンスの仕組みは

  • リクエストされたページを探す
  • 見つかったらページを返す
  • 見つからなかったら、見つかりませんでしたと結果を返す

という流れです。

http01

受け取ったページをブラウザが表示します。表示することを専門用語でレンダリングと呼びます。

ちょっと寄りみちーレンダリングとは

レスポンスで返ってくるのはhtml,css,js,画像などです。そのままだと画像以外はエディタで見るのと同じで、ただの文字です。それでは見づらいので、ブラウザがhtml,css,jsなどを解析し、指定された位置に指定されたスタイルで表示します。そういった仕組みがあるから、今まさに見ているページのように整形され表示されます。

各ブラウザにレンダリングエンジンというものが組み込まれています。レンダリングエンジンが解析を行います。Chrome、Firefox、IEなど、ブラウザによってレンダリングエンジンが異なります。レンダリングエンジンが違うので、ブラウザによって微妙に表示が変わったり、ページの表示速度が変わるのです。

レスポンスを実際に見てみる

実は、ChromeやFirefox標準の検証ツールでリクエストやレスポンスの状態を見ることができます。お使いのブラウザの検証ツールで、ネットワークタブを開いてください。開いた状態で再読込するといろいろと状態が出てきます。詳しい見方は割愛します。

http02

これは当サイトのトップページをFirefoxの検証ツールで表示した状態です。

ちょっとだけ専門的なレスポンス解説

サーバーがリクエストを受けてからレスポンスを返すまでの仕組みをもう少しだけ掘り下げます。

サーバーに、制作したhtml,css,jsやPHPなどのプログラムソースなどを置きます。制作者の方はFTPなどで転送しているのではないでしょうか。置いたファイルのどれかがリクエストされるので、サーバーが見つけて返します。

html,css,jsは静的なものなのでそのまま返します。PHPなどのプログラムソースはそのまま返してもブラウザが理解できないので、サーバーで処理してhtmlに書き換えて返します。

例えばPHPだと、

<a href="<?php echo home_url();?>"><?php the_title();?></a>

といった書き方をしますが、PHPの部分はブラウザが理解できません。PHPを理解できるのはサーバーです。リクエストを受けたときに、サーバーがPHPを読み取り、ブラウザが理解できるhtmlに変換しています。

大事なのはhttpの仕組みを意識すること

ごく簡単にhttpの仕組みを書きました。だいじなのは制作・運営者としてhttpの仕組みを意識して作業することです。

サイト訪問者はリクエストを送ります。サイト制作・運営者はレスポンスの部分を制作、管理しています。サイト訪問者が期待しているものを制作・運用するのがWeb制作者の使命です。

404NotFoundはなぜ起こるのか。

404NotFoundは、リクエストされたページが存在しないエラーです。エラーとなる原因は主に

  • リクエストURLは正しいが、ページが存在しない
  • リクエストURL自体が間違っている

のいずれかです。運営中になんらかの理由でページを削除した、制作の時点でリンク設定を間違えているなどが原因です。404エラーが返ってきたとき、専用の404ページを制作すること、トップページへリダイレクトすることなどが正しい対応策ではありません。存在しないページにリクエストされないことが正しい対応策です。

ページの表示速度が遅いのはなぜか

ページ表示速度が遅くなる原因はさまざまです。大きくわけて、サーバーからのレスポンスが遅い場合と、レスポンスはすぐに返ってきてるが、ブラウザの表示に時間がかかる場合の2パターンがあります。

必要以上に高解像度の画像をたくさん使ってませんか?ファイルサイズの大きい画像をたくさんリクエストするとサーバーに負荷がかかりますし、ブラウザの表示にも時間がかかります。

デザイン段階でhttpの仕組みを理解し、本当に必要なデザインなのか、サイト訪問者がストレスなく閲覧できることが担保できるのか意識することが大事です。理解していれば画像書き出しの解像度、圧縮にも気を配るはずです。

まとめ

httpの仕組みについて意識するきっかけになれば幸いです。書いたことはほんのさわりです。httpの説明として書いてますが、Webサーバーの仕組みが混ざってます。ブラウザ、http、Webサーバーそれぞれの仕組みを理解することがよりよい制作・運営に繋がると思います。あまり意識されてこなかった方、あいまいな方はこれを機に考えてみてはいかがでしょうか。私自身もわからないことだらけなので、また勉強したいと思います。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev WordMoveでWordPressの本番環境とローカル環境をらくらく同期する方法 next WP REST API v2 WordPressの新着記事をアイキャッチ画像付きで取得する方法

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です