WEBアプリの基本的な仕組みと考え方

WEBアプリの基本的な仕組みを説明します。まずは、WEBアプリで頻繁に登場する用語の説明を交えながら、ホームページの仕組みについて復習します。

わかりやすくするためにかなり噛み砕いて説明しているため、実際の動きとは異なる箇所があるかもしれません。

また、用語は厳密に定義されているわけではなく、「このように呼ぶことが多い」という程度です。

あくまで簡単なイメージとして学習してください。

  • ホームページを表示させるには、ユーザがブラウザでhtmlなどのファイルがおいてあるサーバにアクセスします。
    • ブラウザでサーバにアクセスすることをリクエスト(Request)といいます。
  • サーバ側でブラウザに主力するデータを作成し、ユーザ側にデータを返します。
    • ユーザ側にデータを返すことをレスポンス(Response)といいます。
  • レスポンスされたデータをブラウザで表示します。
  • ユーザ側をクライアントサイド、サーバ側をサーバサイドといいます。

サーバのファイルがhtmlファイルの場合は、ファイルの内容がそのままレスポンスされます。

例えば下記のような内容のhtmlファイルの場合、レスポンスの内容も同じになります。

レスポンスの確認方法はブラウザで右クリックをして、コンテキストメニューの「ソースを表示」(ブラウザにより文言は若干異なります)を選択すると出力されたレスポンスを確認できます。

<!DOCTYPE HTML>
<html>

<head>
  <title>商品マスタ</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
  <table class="common-table">
    <caption>商品マスタ</caption>
    <thead>
      <tr>
        <th>商品コード</th>
        <th>商品名</th>
        <th>単価</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>ペン</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>ノート</td>
        <td>200</td>
      </tr>
    </tbody>
  </table>
  商品名:<input type="text">
  単価:<input type="text">
  <input type="button" value="登録">
</body>
</html>

関連記事