質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

779閲覧

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

mintia123

総合スコア20

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/10/16 17:21

質問したいこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hentaiman

2020/10/16 18:11

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

回答2

0

ベストアンサー

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

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

投稿2020/10/16 17:27

gentaro

総合スコア8947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mintia123

2020/10/16 17:50

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

2020/10/16 18:23

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

2020/10/18 08:05

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

0

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

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

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

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

投稿2020/10/17 00:18

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問