HTML と JSON

読了目安約3分

レスポンスのボディに入る 2 大形式である HTML と JSON の読み方を、競プロの入力形式や Go の型と対比しながら学ぶ。

この章の目次

レスポンスの本体（ボディ）の形式は、実用上ほぼ 2 つに集約されます。人間（ブラウザ）向けの HTML と、プログラム向けの JSON です。

HTML は入れ子の文書

HTML（HyperText Markup Language）は、ブラウザが画面を組み立てるための文書形式です。 <p> のようなタグで、文章の部品に意味を付けます。

HTML
<!doctype html>
<html>
  <head>
    <title>ねじき教室</title>
  </head>
  <body>
    <h1>ようこそ</h1>
    <p>これは<strong>強調</strong>を含む段落です。</p>
  </body>
</html>

<p> が開始タグ、</p> が終了タグで、挟まれた範囲がその要素の中身です。 <html> の中に <head>（ページの情報）と <body>（表示される本文）が入れ子で入っています。競プロで木構造を扱ったことがあれば、タグの入れ子は根付き木そのものだとわかるはずです。

開発者ツールで実物を覗く

主要なブラウザには開発者ツールという機能が組み込まれています（手順は Chrome の例です）。

適当なページを開き、右クリックして「検証」を選びます（Windows では F12 キーでも開きます）。
「Elements」（要素）タブに、いま表示しているページの HTML が入れ子のまま表示されます。
「Network」（ネットワーク）タブに切り替えてページを再読み込みすると、そのページを表示するために送られたリクエストが一覧になります。前章で述べた「1 ページの裏で何十回もリクエストが飛ぶ」を、ここで実際に数えられます。
一覧の行をクリックすると、前章で読んだメソッド、ステータスコード、ヘッダー、そしてボディをそのまま確認できます。

JSON は名前付きの入れ子データ

JSON（JavaScript Object Notation）は、プログラム同士がデータを受け渡すための形式です。

競プロの入力は、行とスペース区切りで値を並べ、順番と個数の約束で意味を決めます。

テキスト

2
alice 1200
bob 950

JSON で書くとこうなります。

JSON
{
  "users": [
    { "name": "alice", "rating": 1200 },
    { "name": "bob", "rating": 950 }
  ]
}

それぞれの値に名前が付き、しかも入れ子にできます。記述は長くなる分、順番の約束を別途共有しなくても意味が伝わるので、他人のプログラムとのやり取りで読み間違いにくくなります。

JSON の型と Go の型

JSON に登場する値は 6 種類しかなく、Go の型と対応します。

JSON の型	例	対応する Go の型
文字列	`"alice"`	`string`
数値	`1200`、`3.14`	`int` や `float64`
真偽値	`true`、`false`	`bool`
null	`null`	「値がない」ことを表す
配列	`[1, 2, 3]`	slice
オブジェクト	`{"name": "alice"}`	struct（キーが決まっているとき）や map（キーが可変なとき）

このうちオブジェクトは、「名前と値の組」の集まりです。名前の側をキーと呼びます。 Go で JSON を読み書きする方法は Part 3 で扱います。

Web ページと API

HTML を返す口は、人間がブラウザで見るための Web ページです。一方、JSON を返す口は、プログラムから呼び出すためのもので、API（Application Programming Interface）と呼ばれます。

スマホアプリが表示するデータの多くは、裏でアプリのプログラムが API を呼んで受け取った JSON です。 ISUCON で渡されるアプリケーションにも、両方が混ざっていることが多いです。

ボディが HTML か JSON かを機械的に見分ける手がかりが Content-Type ヘッダーで、text/html と application/json がそれぞれに対応します。