Webで使われるデータ形式とは何か？HTML・CSS・JavaScript・JSONを整理して理解する

はじめに

Webの学習を進めていると、
こんな疑問が必ず出てきます。

「HTML、CSS、JavaScript、JSONって何が違うの？」
「どれがサーバーで、どれがブラウザ？」

これが曖昧なままだと、

• フロントエンドが怖くなる
• APIの意味が分からなくなる

でも安心してください。

それぞれの役割を分けて理解すれば、一気に整理できます。

この記事では、

• Webで使われる代表的なデータ形式
• それぞれの役割と使われ方
• Webエンジニアがどこまで理解すればいいか

を、初心者向けにまとめて解説します。

Webでは「データ」がやり取りされている

まず大前提です。

Webでは、

HTMLやJSONなどの「データ」が
HTTPでやり取りされている

という構造になっています。

Webで使われる代表的なデータ形式

Webでよく使われるのは、主に次の4つです。

• HTML
• CSS
• JavaScript
• JSON

それぞれ
役割がまったく違います。

HTMLとは何か？

HTMLとは、

Webページの構造を表すデータ形式

です。

• 見出し
• 段落
• リスト
• フォーム

といった
骨組みを担当します。

HTMLの役割

HTMLは、

• 「ここは見出し」
• 「ここは本文」

といった
意味構造を表現します。

👉
見た目はHTMLの仕事ではありません。

CSSとは何か？

CSSとは、

Webページの見た目を指定するデータ形式

です。

• 色
• フォント
• レイアウト
• 余白

などを担当します。

CSSの役割

CSSは、

• HTMLの構造を変えずに
• 見た目だけを変更する

ための仕組みです。

👉
デザイン担当と考えると分かりやすいです。

JavaScriptとは何か？

JavaScriptとは、

Webページに動きを与えるプログラミング言語

です。

• ボタン操作
• フォームチェック
• 画面の動的更新
• API通信

などを担当します。

JavaScriptはどこで動く？

重要ポイントです。

JavaScriptはブラウザ上で実行される

つまり、

• フロントエンド側
• ユーザーの端末

で動いています。

JSONとは何か？

JSONとは、

データをやり取りするための形式

です。

主に、

• API通信
• サーバーとブラウザのデータ交換

で使われます。

JSONの特徴

• 軽量
• 人が読める
• プログラムで扱いやすい

という理由から、
現在のWeb APIの標準になっています。

HTMLとJSONの違い

ここは混乱しやすいポイントです。

項目	HTML	JSON
用途	画面表示	データ交換
主な使い道	Webページ	API
人向け	⭕	△
プログラム向け	△	⭕

Webページ表示とAPI通信の違い

• Webページ表示：HTMLを返す
• API通信：JSONを返す

Laravelでは、

• ブラウザ向け：HTML
• フロント／外部連携：JSON

という
使い分けをします。

DOMとは何か？（概要）

DOMとは、

HTMLをプログラムで操作できる形にしたもの

です。

JavaScriptは、

• DOMを操作して
• 画面を書き換えます

👉
詳細は
フロントエンド章で扱います。

画像・動画などのデータ形式

Webでは、

• 画像（JPEG / PNG / WebP）
• 動画（MP4など）

といった
メディアデータも使われます。

これらも
HTTPでやり取りされるデータです。

Content-Type（メディアタイプ）とは？

HTTP通信では、

このデータは何の形式か

を
Content-Typeで伝えます。

例：

• text/html
• application/json
• image/png

👉
ブラウザは
これを見て処理方法を判断します。

Webエンジニアはどこまで理解すればいい？

結論です。

以下が説明できれば十分です。

• HTML：構造
• CSS：見た目
• JavaScript：動き
• JSON：データ交換

この役割分担が分かれば、
Web開発の全体像が見えます。

データ形式を理解すると何が良い？

• フロントとバックの境界が明確になる
• API設計が理解できる
• Laravelの役割が見える

👉
迷子にならなくなります。

次に学ぶべきこと

データ形式が理解できたら、
次は👇です。

👉 Webアプリケーションとは何か？
Webサイトとの違いと基本構造

まとめ

• Webではデータがやり取りされている
• HTML / CSS / JS / JSONは役割が違う
• APIはJSONが主役
• Web開発の基礎知識

この記事は
Web基礎章の重要な整理回です。