🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Python】jsonモジュール入門！Web制作で必須のデータ形式を完全マスター

PythonをコマンドプロンプトやPowerShellでPC上で動かすには、Pythonをダウンロードしてインストールする必要があります。
まだの方はPythonのインストールと開発環境の構築の記事を参考にして、Pythonをインストールしてください。

こんにちは！ほんの数ヶ月前までプログラミングの「プ」の字も知らなかった僕が、AIと二人三脚でWebサイトを立ち上げるまでになった、その過程で得た知識を共有しています。

皆さんは「JSON（ジェイソン）」と聞いて、どんなイメージを持ちますか？「なんだか難しそう…」「Webの専門家が使うやつでしょ？」と感じるかもしれません。僕も最初はそうでした。でも、Webサイト制作、特にイマドキの「動的なサイト」を作る上で、JSONは避けては通れない、そして一度仲良くなればこれ以上ないくらい頼りになる相棒なんです。

この記事では、Pythonのjsonモジュールを使って、JSONデータを自由自在に操る方法を、僕が実際につまずいたポイントを交えながら、世界一わかりやすく解説します。目標は、この記事を読み終える頃には、皆さんが「なるほど、JSONってこう使うのか！」と手を動かしながら実感できるようになることです。コピペOKな「動くコード」もたくさん用意したので、一緒に「動いた！」を体験しましょう！

そもそもJSONって何者？なぜWeb制作に必要なの？

難しい定義は一旦置いておきましょう。JSONをものすごくシンプルに言うと、「異なるプログラム同士が情報をやり取りするための共通言語」です。

例えば、あなたのWebサイトの裏側（サーバー）で動いているPythonくんが、ユーザーのプロフィール情報（名前、年齢、趣味など）を持っているとします。その情報を、ユーザーが見ている表側（ブラウザ）で動いているJavaScriptくんに渡して、綺麗なプロフィールカードとして表示したい。

  1. Pythonくんが、持っている情報を「JSON」という世界共通語に翻訳して渡す。
  2. JavaScriptくんが、そのJSONを受け取って、自分のわかる言葉に翻訳し直す。
  3. 無事に情報が伝わり、プロフィールカードが表示される！

このように、サーバーサイドとフロントエンドがデータを交換する際の「橋渡し役」として、JSONは欠かせない存在なのです。Web API（外部のサービスからデータを取得する仕組み）から天気予報やニュース記事のデータを取得する時にも、ほぼ100%このJSON形式が使われています。便利ですよね！

PythonでJSONを操る4つの基本魔法

Pythonには、この便利なJSONを扱うためのjsonという標準モジュールが最初から用意されています。pip installは不要で、import jsonと書くだけですぐに使えます。

このモジュールにはたくさんの機能がありますが、初心者のうちは、まず以下の4つの関数（魔法の呪文）だけ覚えればOKです！

「え、似たような名前でややこしい！」って思いました？大丈夫、僕もそうでした（笑）。簡単な覚え方があります。

末尾にsが付く (dumps, loads) のは、String（文字列）を扱う方だと覚えてください。sが付かない方はファイルを直接扱います。これでもう混乱しませんね！

1. PythonデータをJSON文字列に変換: json.dumps()

まずは、Pythonの辞書（dict）データをJSON形式の文字列に変換してみましょう。これが基本のキです。 


# python-code
import json

# Pythonの辞書データ
user_data = {
    "name": "コピコード太郎",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# Python辞書をJSON形式の文字列に変換
json_string = json.dumps(user_data)

print(json_string)
# 型も確認してみましょう
print(type(json_string))

実行結果:


{"name": "\u30b3\u30d4\u30b3\u30fc\u30c9\u592a\u90ce", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
<class 'str'>

【つまずきポイント①】日本語が `\uXXXX` みたいになる！

上の実行結果を見て、「あれ？名前が変な記号になってる！」と気づいたあなた、素晴らしい観察眼です。これは「文字化け」の一種で、僕も最初にめちゃくちゃハマりました。

原因は、json.dumps()がデフォルトでASCII文字（ざっくり言うと半角英数字）以外をエスケープ（安全な表記に変換）してしまうためです。これを解決するには、ensure_ascii=Falseというおまじないを追加します。 


# python-code
import json

user_data = {
    "name": "コピコード太郎",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# ensure_ascii=False を追加して日本語をそのまま出力
json_string_jp = json.dumps(user_data, ensure_ascii=False)

print(json_string_jp)

実行結果:


{"name": "コピコード太郎", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}

見事、日本語が正しく表示されましたね！日本のWebサービスを作るなら、このensure_ascii=Falseはほぼ必須のパートナーです。

【つまずきポイント②】JSONが1行で読みにくい！

もう一つの問題。データが増えてくると、全部が1行に繋がってしまって非常に読みにくいです。これもオプションで解決できます。indent（インデント）を指定すると、人間が読みやすいように改行と字下げをしてくれます。数字は半角スペースの数を表し、4がよく使われます。 


# python-code
import json

user_data = {
    "name": "コピコード太郎",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# ensure_ascii=False と indent=4 を両方指定
json_string_pretty = json.dumps(user_data, ensure_ascii=False, indent=4)

print(json_string_pretty)

実行結果:


{
    "name": "コピコード太郎",
    "age": 30,
    "is_creator": true,
    "skills": [
        "HTML",
        "CSS",
        "JavaScript",
        "Python"
    ]
}

どうですか？一気に見やすくなりましたよね。この2つのオプションはセットで使うことが多いので、ぜひ覚えておきましょう。 Python公式ドキュメントでも、これらのオプションについて詳しく解説されています。

2. JSON文字列をPythonデータに戻す: json.loads()

次は逆の操作です。Web APIなどから受け取ったJSON形式の「文字列」を、Pythonで扱える辞書データに戻してみましょう。sの付くloadsを使います。 


# python-code
import json

# Web APIからこんな文字列が送られてきたと仮定
received_json_string = """
{
    "id": "001",
    "productName": "すごいキーボード",
    "price": 15800,
    "inStock": true
}
"""

# JSON文字列をPython辞書に変換
product_data = json.loads(received_json_string)

print(product_data)
# 型も確認してみましょう
print(type(product_data))

# 辞書になったので、キーを指定して値を取り出せる
print(f"商品名: {product_data['productName']}")
print(f"価格: {product_data['price']}円")

実行結果:


{'id': '001', 'productName': 'すごいキーボード', 'price': 15800, 'inStock': True}
<class 'dict'>
商品名: すごいキーボード
価格: 15800円

文字列だったJSONが、見事にPythonの辞書（dict）に変換されました！これで自由にデータを加工したり、必要な情報だけを取り出したりできますね。

3. PythonデータをJSONファイルに書き出す: json.dump()

次はファイル操作です。sが付かないdump()を使います。Webサイトの設定情報や、処理結果をファイルとして保存したい時によく使います。

dump()は2つの引数を取ります。1つ目は書き込みたいPythonデータ、2つ目はファイルオブジェクトです。with open(...)構文を使うのが安全で一般的です。 


# python-code
import json

# 保存したい設定データ
app_settings = {
    "theme": "dark",
    "language": "japanese",
    "notifications": {
        "email": True,
        "push": False
    },
    "version": "1.0.2"
}

# 'w'は書き込みモード(write)を意味します
# encoding='utf-8' は日本語を含む場合に指定するのがお作法です
with open('settings.json', 'w', encoding='utf-8') as f:
    # indentとensure_asciiも同じように使えます
    json.dump(app_settings, f, indent=4, ensure_ascii=False)

print("settings.json ファイルに設定を書き出しました。")

このコードを実行すると、Pythonスクリプトと同じ階層にsettings.jsonというファイルが作成されます。中身はdumpsで整形した時と同じ、見やすい形式になっているはずです。

4. JSONファイルを読み込んでPythonデータにする: json.load()

最後に、先ほど作成したsettings.jsonファイルを読み込んでみましょう。ファイル操作なのでsの付かないload()を使います。 


# python-code
import json
import os # ファイルの存在確認のためにosモジュールをインポート

file_path = 'settings.json'

# ファイルが存在するかどうかチェック
if os.path.exists(file_path):
    # 'r'は読み込みモード(read)を意味します
    with open(file_path, 'r', encoding='utf-8') as f:
        # ファイルオブジェクトを渡すだけ
        loaded_settings = json.load(f)

    print("settings.json から設定を読み込みました。")
    print(loaded_settings)
    
    # 読み込んだデータを使って処理
    print(f"現在のテーマ設定: {loaded_settings['theme']}")
else:
    print(f"エラー: {file_path} が見つかりません。")
    print("先にjson.dump()のサンプルコードを実行してください。")

実行結果:


settings.json から設定を読み込みました。
{'theme': 'dark', 'language': 'japanese', 'notifications': {'email': True, 'push': False}, 'version': '1.0.2'}
現在のテーマ設定: dark

これで4つの基本魔法は全てマスターです！文字列を扱うならs付きのdumps/loads、ファイルを扱うならsなしのdump/load。これだけです！

【コピペで動く】実践！JSONデータで動的なプロフィールカードを作ろう

お待たせしました！ここがこの記事のクライマックスです。これまで学んだことを総動員して、PythonとJavaScriptを連携させ、JSONデータから動的にHTMLコンテンツを生成する体験をしてみましょう。

Web開発の現場では、まさにこのような形でデータと表示を分離します。これを体験すれば、JSONの本当のパワーが理解できるはずです！

まるっと動く完全HTMLコード

以下のコードをすべてコピーして、profile.htmlという名前でファイルを作成し、保存してください。そして、そのファイルをWebブラウザで開いてみてください。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONデータから生成したプロフィール</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            padding: 2rem;
            width: 320px;
            border: 1px solid #333;
        }
        .card h1 {
            color: #669df6;
            margin-top: 0;
            border-bottom: 2px solid #669df6;
            padding-bottom: 0.5rem;
        }
        .card p {
            line-height: 1.6;
        }
        .card .label {
            font-weight: bold;
            color: #8ab4f8;
        }
        .skills {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .skills li {
            background-color: #333;
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<!-- ここにプロフィールカードが挿入されます -->
<div id="profile-container"></div>

<!-- 
    【ここが重要！】
    本来、このJSONデータはPythonが動くサーバーから送られてきます。
    このサンプルでは、その動きをシミュレートするために、
    JSONデータを直接 <script> タグ内に埋め込んでいます。
-->
<script id="user-json-data" type="application/json">
{
    "name": "AIアシスト君",
    "age": 2,
    "bio": "PythonとJavaScriptが得意なAIアシスタントです。あなたのWeb制作を全力でサポートします！",
    "is_active": true,
    "skills": ["データ分析", "Web開発", "自然言語処理", "デバッグ"]
}
</script>

<script>
    // このJavaScriptコードがブラウザで実行されます
    document.addEventListener('DOMContentLoaded', function() {
        // 1. <script>タグからJSON文字列を取得
        var jsonScriptTag = document.getElementById('user-json-data');
        var jsonString = jsonScriptTag.textContent;

        // 2. JSON文字列をJavaScriptのオブジェクトに変換
        var userData = JSON.parse(jsonString);

        // 3. 取得したデータを使ってHTMLコンテンツを組み立てる
        var container = document.getElementById('profile-container');
        
        // スキルリストのHTMLを生成
        var skillsHtml = userData.skills.map(function(skill) {
            return '<li>' + skill + '</li>';
        }).join('');

        // プロフィールカード全体のHTMLを文字列連結で作成
        var profileCardHtml = 
            '<div class="card">' +
                '<h1>' + userData.name + '</h1>' +
                '<p><span class="label">年齢:</span> ' + userData.age + '歳</p>' +
                '<p><span class="label">自己紹介:</span> ' + userData.bio + '</p>' +
                '<p><span class="label">ステータス:</span> ' + (userData.is_active ? 'アクティブ' : 'お休み中') + '</p>' +
                '<h2 style="color: #669df6; font-size: 1.2em;">スキル</h2>' +
                '<ul class="skills">' +
                    skillsHtml +
                '</ul>' +
            '</div>';

        // 4. 組み立てたHTMLをページに挿入
        container.innerHTML = profileCardHtml;
    });
</script>

</body>
</html>

ブラウザで開くと、CSSで装飾された綺麗なプロフィールカードが表示されたはずです。HTMLファイルにはカードの要素を直接書いていないのに、です！

このコードでは、<script id="user-json-data">内に書かれたJSONデータを、下のJavaScriptが読み込んでいます。JSON.parse()というのが、JavaScript版のjson.loads()です。そして、そのデータを使って動的にHTMLを組み立て、id="profile-container"の場所に挿入しているのです。

実際のWeb開発では、Python（サーバー）がこのJSONデータ部分を動的に生成し、HTMLテンプレートに埋め込んでブラウザに送ります。まさにその基本の仕組みを、この1ファイルで体験できたわけです。感動しませんか？

まとめ：JSONは怖くない、最強の武器だ！

今回は、Pythonのjsonモジュールを使ったデータの扱いや、Web制作におけるその重要性について、僕の体験談も交えながら解説しました。

最初はとっつきにくく感じるかもしれませんが、JSONの仕組みがわかると、作れるWebサイトの幅が一気に広がります。外部APIと連携したり、ユーザーごとの設定を保存したり、可能性は無限大です。

ぜひこの記事のコードを色々書き換えて、「こう変えたらどうなるかな？」と実験してみてください。その試行錯誤こそが、あなたを成長させる最高のスパイスになりますから！

次のステップへ

JSONでデータの扱い方に慣れたら、次はプログラムを起動する際に外部から情報を受け取る方法を学んでみましょう。コマンドライン引数を扱えるようになると、さらに本格的なツールが作れるようになります。

sysモジュールでコマンドライン引数を処理しよう

関連テンプレート