【JavaScript】JSONの読み込み方法を初心者向けに解説

はじめに

JavaScriptで何らかのデータを扱う際、 JSON (JavaScript Object Notation) は多くの場面で活躍します。
しかし初心者の方にとっては「JSONって何だろう？」とか「どうやってデータを読み込むんだろう？」という疑問が生まれやすいかもしれません。

ここでは、JavaScriptを使ったJSONの読み込み方法を中心に、実務でどのように活かせるかを踏まえながら丁寧に解説します。
難しい言葉をなるべく使わず、具体例を通してわかりやすく紹介していきますので、皆さんが「JavaScriptでJSONを取り扱えるようになる」というゴールを一緒に目指しましょう。

この記事を読むとわかること

• JSONとは何か
• JavaScriptでJSONを読み込むさまざまな方法
• fetchやNode.jsでのファイル読み込みの基本的な流れ
• JSONを扱うときのよくあるエラーや対処法
• 実務でのJSON活用事例とポイント

JSONとは何か

JSONはテキストベースでデータを表現する形式の一つです。
キーと値の組み合わせを波括弧（{}）や配列風の角括弧（[]）で表現しますが、プログラミング初心者の方でも直感的に理解しやすい構造になっています。

たとえば、ユーザー情報をJSONで表すと次のようになります。

コピー
{
  "id": 1,
  "name": "Yamada Taro",
  "isActive": true,
  "tags": ["beginner", "javascript"]
}

このように、シンプルな文法でオブジェクトや配列を表現できる点が特徴です。
JavaScriptをはじめ、多くのプログラミング言語がJSON形式のデータをやり取りする仕組みを標準機能や外部ライブラリでサポートしています。

JSONの基本構造

JSONの基本構造はとても単純です。
データを表す際、オブジェクト と 配列 を組み合わせる形で記述します。

• オブジェクト: { } で囲み、内部に "キー": 値 の形でデータを配置
• 配列: [ ] で囲み、複数の値をカンマで区切って並べる

加えて、値として使える型は以下のとおりです。

• 文字列（"Hello"など）
• 数値（123 など）
• 真偽値（true または false）
• null（null）
• オブジェクト（{ ... }）
• 配列（[ ... ]）

実際には、これらを使って柔軟にデータ構造を作ることが可能です。
一見するとXMLやYAMLといった形式を連想するかもしれませんが、JSONは可読性が高く軽量な点がよく評価されています。

JSONを扱うメリット

JSONを扱うメリットとしては、データ交換をシンプルかつスムーズにできることが挙げられます。
特にフロントエンドとバックエンド間でデータをやり取りするときに非常に便利です。

また、JavaScriptとの相性が良く、構文がシンプルなので、初心者の方でも誤りを起こしにくいという特徴があります。
加えて、他の言語でもパーサーが充実しているため、プロジェクトによって異なる言語が使われていてもJSON形式なら互換性を保ちやすいです。

JavaScriptでのJSON読み込み方法の全体像

ここからは、実際にJavaScriptでJSONを扱う際にどのような方法があるのかを、大まかな流れに沿って確認していきましょう。
フロントエンド（ブラウザ上）での読み込み方法と、Node.jsを使った読み込み方法に分けて考えると理解しやすいかもしれません。

といっても、実務ではフロントエンドとバックエンドのどちらでJSONを使うケースも多いため、全体像を把握することが重要です。
フロントエンドではfetchなどを利用し、バックエンド（Node.js）ではfsモジュールを利用してファイルを読み込むことがよくあります。

JSON.parseを使った基本的な読み込み

JavaScriptでJSONを扱ううえで、まず押さえておきたいのが**JSON.parse()** 関数です。
これは、文字列として表されているJSONをJavaScriptのオブジェクトに変換する関数です。

コピー
const jsonString = '{"name":"Tanaka","age":25}';
const user = JSON.parse(jsonString);

console.log(user.name);  // "Tanaka"
console.log(user.age);   // 25

JSON.parse() の引数が正しいJSON形式でなければ、エラーが出てしまいます。
たとえば、カンマの付け忘れなどで構文が崩れているときはすぐに見つけやすい反面、初心者の方は慣れるまでタイポしがちなので気をつけましょう。

fetchを使ったサーバーからのJSON取得

ブラウザのJavaScript（フロントエンド）でサーバーからJSONを取得するときは、fetch() 関数がよく使われます。
これはURLからリソースを取得する非同期関数で、取得結果をJSONとして扱うことが可能です。

コピー
fetch("https://example.com/data.json")
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // ここで data を使ってUIを更新したり、別の処理を行う
  })
  .catch(error => {
    console.error("読み込みに失敗しました", error);
  });

fetchを使うと、レスポンスを受け取ったあとに.json()でパース処理を実行し、JavaScriptオブジェクトとして取得できます。
ただし、ネットワークエラーや取得先ファイルが存在しない場合などさまざまな要因で失敗し得るため、エラーハンドリングをしっかり行うことがポイントです。

Node.js環境でのJSON読み込み

Node.jsでは、サーバーサイドでJavaScriptを実行できます。
この場合、JSONの読み込み方として**require** や import を使う方法も存在します。
特に設定ファイルなど、プロジェクト直下にある固定ファイルを読み込むときに便利です。

コピー
// CommonJSの場合
const config = require("./config.json");
console.log(config);

// ES Modulesの場合
import config from "./config.json" assert { type: "json" };
console.log(config);

多くのプロジェクトでは、設定やデフォルト値をJSONファイルにまとめておき、Node.js側で読み込んで使う方法が採用されています。
扱い方がシンプルなため、初心者にも理解しやすいでしょう。

ファイルシステムからの読み込み (Node.jsの場合)

Node.jsのプロジェクトでは、ファイルシステム（fsモジュール）を使うことでJSONファイルを読み込む方法もよく用いられます。
動的にファイルを読み込みたいケースや、ファイルのパスが実行時に決まるようなシーンではこちらが必須になるでしょう。

コピー
const fs = require("fs");

try {
  const data = fs.readFileSync("data.json", "utf-8");
  const jsonData = JSON.parse(data);
  console.log(jsonData);
} catch (error) {
  console.error("ファイル読み込みに失敗しました", error);
}

このように、ファイルを文字列として取得したあとに JSON.parse() でオブジェクトに変換します。
同期的な readFileSync を使うと簡単に書けるものの、大きなファイルを読み込むケースではパフォーマンス面を考慮して非同期処理を検討することも大切です。

JSON読み込み時のよくあるつまづきポイント

実際にJSONを読み込み始めると、意外なところでハマることがあるかもしれません。
ここでは初心者の方が特につまづきやすいポイントを整理します。

JSONの形式エラー

最も多いのがJSONの形式に関するエラーです。
たとえば値がダブルクオートで囲まれていない、末尾のカンマを消し忘れた、文字列に改行を直接入れてしまった等、ちょっとしたミスでエラーが起こりがちです。

形式エラーが起きると JSON.parse() の時点でエラーになりやすいので、エラー発生箇所を調べつつJSONが正しい書式になっているかを一つずつ確認してみてください。

fetchでのCORSエラー

フロントエンド側でfetchを使うとき、 CORS (クロスオリジン リソース シェアリング) の設定によってはエラーになる場合があります。
サーバーが正しくCORS対応していないと、ブラウザがセキュリティ上ブロックする仕組みがあるからです。

初心者の方は最初「あれ、URLを指定してるのに取ってこられない…」と戸惑うことがあるかもしれません。
CORSポリシーが原因であればサーバー側の設定が必要になるため、状況に応じてバックエンドのチームやサーバー設定ファイルを確認する必要があります。

非同期処理のタイミング

fetchやfs（非同期メソッド版）など、処理が完了する前に次のステップが実行されてしまい、データがまだ読み込まれていない状態なのに処理を進めようとしてエラーになるケースがあります。
特にJavaScript初心者は同期処理と非同期処理の違いに慣れるまで戸惑いやすいかもしれません。

この場合、then() や async/await を使って結果が返ってきたタイミングで処理を続けるように書くことが必要です。
慣れるまでは実装時にコンソールログを出力して、どのタイミングでデータが取得できるのか確認すると良いでしょう。

実務での活用シーン

JSONの読み込み方法を学んだだけでは、実際にどこで使うのかピンとこない方もいるかもしれません。
そこで、実務における具体的な活用シーンを簡単に紹介します。

Webアプリケーションのフロントエンドでの利用

たとえばWebアプリケーションのフロントエンドでは、サーバーからユーザーデータや商品リストなどをJSON形式で取得して、ページを動的に表示することが多いです。
ユーザーの操作に応じて追加のJSONリクエストを送ったり、取得したデータをUIに反映したりすることで、動的なコンテンツを提供できます。

この処理の中でfetch()などを活用し、サーバー側で生成したJSONファイルを読み込むことが重要になります。
さらに、必要に応じてJSONの整形やフィルタリングを行い、ユーザーにとって見やすい情報に変換して表示するケースが一般的です。

Node.jsを使ったバックエンドでの利用

Node.jsでは、バックエンドとして動くアプリケーションの設定ファイルやルーティング情報をJSONで管理するケースがあります。
また、APIサーバーとして動かすときには、クライアント（フロントエンド）から送信されたJSONをパースして処理することになるでしょう。

実務では、データベースから取り出した結果をJSON形式にまとめてクライアントに返すような流れが普通に行われています。
そのため、バックエンド側での読み込みや書き込みをしっかり理解しておくことで、フロントエンドとの連携がスムーズになります。

SPAやSSRとの連携

最近のWebアプリケーションでは、 SPA (Single Page Application) や SSR (Server-Side Rendering) といった構成が増えています。 これらのアーキテクチャでも、JSONによるデータ通信は必須といえるでしょう。

• SPA: ページ遷移をせずに画面を書き換える仕組み。非同期でJSONをやり取りし、必要な部分だけ更新する。
• SSR: サーバーサイドで必要なデータを取得し、HTMLを生成して返す仕組み。バックエンドのNode.js側でもJSONを使ってデータを管理する。

それぞれのアプローチにより、効率的かつ柔軟にデータを取り扱えるようになるのがJSONの大きな強みです。

JSON読み込みを使いこなすためのポイント

JSONを読み込む方法自体はそれほど難しくありませんが、実務で安定的に使い続けるためには、いくつか注意しておきたいポイントがあります。
以下の点を意識すると、プロジェクト規模が大きくなったり、チーム開発になった場合でもスムーズに進めやすくなります。

エラー処理の設計

JSONを読み込む際にエラーが起きることを前提に設計することは非常に重要です。
たとえばネットワーク経由で読み込む場合は、サーバー側の問題や通信障害で取得に失敗する可能性があります。
ファイルシステムから読み込む場合は、ファイルが存在しない、文字コードが異なるなどの問題も起こり得ます。

こういった状況に対して、例外処理（try...catch）やfetchの.catch()などでしっかりハンドリングしておくと、アプリケーション全体が落ちるようなトラブルを防ぎやすくなります。
JSONの読み込みが失敗したら代替処理を行う、エラーメッセージを表示するなど、具体的な対策を検討してみてください。

データの整形とバリデーション

受け取ったJSONをそのまま使うのではなく、必要なデータだけを抽出して扱う習慣をつけると、予期しない変更に強くなります。
なぜなら、外部サービスなどから返ってくるJSONの構造が急に変わる場合もあるからです。

また、バリデーション（妥当性確認）も大切です。
「キーが必ず存在する」と思い込んでコードを書いていると、実際には存在しない場合にエラーが出てしまいます。
バリデーションを入れて想定外のデータを弾く仕組みを作っておくことで、安定したシステムが実現できます。

アプリケーションの拡張性

大規模なシステムになると、JSONのスキーマが複雑になったり、他サービスとの連携で多くのフォーマットが登場する可能性があります。
その際、拡張しやすいJSON構造 を心がけることで、後から項目が追加されてもスムーズに対応できます。

また、フロントエンド・バックエンドそれぞれのチームで、JSONの形式や利用方法を統一する規約を作るのも有効です。
プロパティ名の命名規則や、数値と文字列の扱い方などを事前に取り決めておけば、データ連携時の混乱が少なくなるでしょう。

まとめ

この記事では、JavaScriptでのJSON読み込みに焦点を当てながら、実務と紐づけた形で解説してきました。
初心者のうちはまず JSON.parse() の仕組みや fetch の使い方をおさえ、Node.js側ではfsやrequireを使った基本的な読み込みを理解しておくことが大切です。

さらに、エラーハンドリングやバリデーションといったポイントを意識することで、実務におけるトラブルを軽減できます。
Webアプリケーションの開発ではJSONが欠かせない存在ですので、これらの知識を身につけていくと開発の幅がぐんと広がるでしょう。

皆さんも、まずは小さなJSONファイルを読み込むサンプルから試してみて、取り扱いのコツに慣れていってください。
そのうちに、サーバーとの通信や複数ファイルの取り扱いなど、より高度なテクニックが自然と身につくはずです。
少しずつステップを踏みながら、安心してJSONの世界へ踏み込んでみてください。