API通信で生成されるWebページの仕組み

Question

質問したいこと

WebAPI形式でバックエンドと通信する場合はどのように画面が表示されるのでしょうか？
ブラウザやWebアプリケーション画面を表示するには下記の2パターンがあると理解しています。
①リクエストに対してhtmlやjsをレスポンスし画面を表示
②リクエストに対してjsonやXMLをレスポンスし画面を表示(WebAPI)

①はhtmlやjsをクライアント端末に渡すことで画面表示されることは理解できるのですが、②のjson形式はブラウザに対し画面表示ができるのでしょうか。
拡張機能「JSON Formatter」を使用すればChromeで表示できるのですが、拡張機能を入れていない端末には表示できないとなると、WebAPI形式が主流になってきている意味が理解できないです。

初歩的な質問で申し訳ありませんが、ご回答をお待ちしております。

Comments

[hentaiman]

無償で使えるAPIはたくさんあるので、試しに使ってwebページを作ろうとしてみたらその過程で理解出来ると思う

Answer 1

②のjson形式はブラウザに対し画面表示ができるのでしょうか。

そのような事をやっているサイトは、あらかじめJavaScriptのプログラムをWebページに仕込んでおり、そのプログラムが受け取ったデータ（JSONなりXMLなり）をHTMLで表示できるように変換しているだけです。

Comments

[mintia123]

このようなイメージでしょうか。
①クライアント端末がURLを叩いて○○トップページのhtml+javascriptをバックエンドサーバからレスポンスとして受け取る
②○○トップページ内の送信ボタンを押してバックエンドサーバからレスポンスとしてJSONデータで受け取る
③クライアント端末が持っている○○トップページのjavascriptで受け取ったJSONデータをHTML形式に変換し、別の画面を表示

結果として、バックエンドからの通信はjson形式のデータのみとなる

[gentaro]

トップページかどうかは知りませんが、まぁだいたいそういうことです。

[mintia123]

理解することができました。ありがとうございます。

Answer 2

②のjson形式はブラウザに対し画面表示ができるのでしょうか。

「どのような画面にするのか」次第ですが、
結局はJSONといっても返ってくるのはオブジェクトなので、オブジェクトを解析してほしい情報を取り出してHTMLに組み込んでいます。

データだけを組み込むか、HTMLもJavaScriptで生成するかは要件次第ですが、一般的にJavaScriptでHTMLを生成するのはそれなりにコストがかかる（簡単に言うと「重くなる」）ので、テンプレートHTMLだけ置いておいて、innerHTMLすることのほうが多いかもしれません。

もちろん、「必要な情報を必要なだけ置いておく」という意味では、JavaScriptでHTMLを組むこともあります。
チャットなど、追記していく必要があるアプリケーションではその傾向があるかもしれません。