JavaScriptは、「オブジェクト指向プログラミング言語」と呼ばれるプログラミング言語の種類の1つで、「オブジェクト」というものを作って、いろいろな処理を行います。ここでは、そんなオブジェクトを使って、JSONという形式のニュースデータを読み込んで一覧表示するプログラムを作成してみましょう。

オブジェクトのメリット

例えば、ニュースの一覧を表示したいという場合に、前のページで紹介した「配列」を利用して次のようなプログラムを作ることができます。

const news = [
  'サイトを公開しました',
  '新商品を発売しました',
  '夏期休暇のお知らせ'
];

しかし、配列ではニュースの日付と、タイトルや、さらにカテゴリーなど、いろいろな情報を扱いたいという場合でも、配列には1つの要素しか含めることができません。

オブジェクトを作ろう

このようなときに便利なのが「オブジェクト」です。次のように準備してみましょう。

const newsItem = {
  "title": "サイトを更新しました",
  "date": "2025-08-25",
  "link": "news1.html"
}

「{ }」で囲んで、次のような書式で複数の要素を指定することができます。

キー: 値,
キー: 値 

こうして準備したオブジェクトの要素は、次のように表示することができます。

document.write(newsItem.title);

すると、画面にはタイトルの内容が表示されます。

この1つ1つの要素を「プロパティ」といい、次のように取り出すことができます。

オブジェクト名.プロパティ名

例えば、日付を取得したい場合は次のようにします。

document.write(newsItem.date);

また、プロパティの指定には次のようにブラケット記号を使って指定することもできます。

document.write(newsItem['link']);

どちらを使っても構いません。

オブジェクトを配列にしよう

オブジェクトは、それらをまとめて配列にすることもできます。次のようにしましょう。

const news = [
  {
    "title": "サイトを更新しました",
    "date": "2025-08-25",
    "link": "news1.html"
  },
  {
    "title": "新商品を発売しました",
    "date": "2025-08-20",
    "link": "news2.html",
  },
...
];

すると、繰り返し構文を使って複数のオブジェクトを扱うことができます。例えば、次のようにするとニュースの一覧を表示できます。

for (let item of news) {
  document.write(item.title + '<br>');
}

文字列連結などを使って、各プロパティとHTMLのタグの要素をつなげば、HTMLを生成して表示することもできます。例えばここでは、リンクを設定してみましょう。

for (let item of news) {
  document.write(
    '<a href="' + item.link + '">' +
    item.date + ' ' +
    item.title + '</a><br>');
}

JSONファイルを作成しよう

ここまでのプログラムでは、ニュースの内容が直接プログラムに書かれていました。しかしこれでは管理がしにくいので、別のデータファイルとして作成しましょう。

JavaScriptで扱いやすいデータ形式の1つに「JSON（ジェイソン）」という形式があります。これは、「JavaScript Object Notation」の頭文字を取ったもので、JavaScriptのオブジェクトがそのままデータ形式になっているので、非常に扱いやすい形式で、現在では非常に広く利用されています。

ここでは、「news.json」というファイルを作成して、先の内容をそのまま貼り付けましょう。

const news = [
  {
    "title": "サイトを更新しました",
    "date": "2025-08-25",
    "link": "news1.html"
  },
  {
    "title": "新商品を発売しました",
    "date": "2025-08-20",
    "link": "news2.html",
  },
...
];

そしたら、このJSONファイルを読み込むプログラムを作成します。「json.html」などのファイルを、今のJSONファイルと同じ場所に配置して、次のように入力しましょう。

<script>
async function load() {
  const response = await fetch('news.json');
  const json = await response.json();
  document.write(json[0].title);
}
load();
</script>

このプログラムを実行すると、画面には1個目のタイトルである「サイトを更新しました」が表示されます。

なお、このプログラムを動作させるにはWebサーバーが必要です。Visual Studio Codeを利用している場合は、以下の「Live Server」拡張機能をインストールすることで、簡易的なサーバーが利用できるので利用すると良いでしょう。

• Live Server

ここでは、「fetch」という関数を使ってJSONのファイルを読み込みます。

const response = await fetch('news.json');

先頭に「await」と記述されているのは、「非同期通信」をするための記述です。

非同期通信とは

非同期通信とは「通信が終わるのを待たずに、次の処理を行う」という種類の通信です。その逆に、通信の終わりを待つことを「同期通信」といいます。

同期通信の場合、通信中が画面が表示されず、処理が止まってしまったように見えることがあり、ユーザーが不安に感じたり、使い勝手が悪いように感じてしまうことがあります。そこで、JavaScriptでは通信中も画面上の操作が可能な「非同期通信」が利用されます。

非同期通信をする場合、まずその対象となる関数に「async」と付加します。

async function load() {

そして、この中で実際に通信などを行う箇所に「await」と付加します。

  const response = await fetch('news.json');
  const json = await response.json();

こうして、通信中も処理を止めずに処理を行うことができます。

読み込まれたデータは、「response」という通信の結果などが格納されたデータ群を受け取る事ができます。

このオブジェクトの「json」というメソッドを使うと、JSONの内容を取得できるので、これを定数に代入しました。

後はこれを配列として扱い、さらにその内容をオブジェクトとして扱えば、処理することができます。

json[0].title;

HTMLを作成しよう

それでは、このJSONデータを使って、実際にHTMLを作成してみましょう。まずは、表示するエリアを作成します。

<div class="container">
</div>

ここに、DOMを使って挿入しましょう。

...
  const json = await response.json();

  let html = '<ul>';
  for (let item of json) {
  html += '<li><a href="' +
    item.link + '">' +
    item.date + ' ' +
    item.title + '</a></li>';
  }
  html += '</ul>';

  document.querySelector('.container').innerHTML = html;
}
load();

ここでは、for of構文でJSONの内容をすべて取得しながら、「html」という変数にHTMLを作っていきます。

そして、できあがったHTMLを「querySelector」メソッドで先ほど準備したHTMLの内容として挿入しています。

これで、ニュースの一覧が表示されました。

以降は、JSONファイルを編集するだけでニュースを更新することができるようになります。

例外処理を実装しよう

さて、これでプログラムとしては完成ですが、JSONファイルの指定を間違えてしまったり、ファイルがなくなってしまった場合、現状では正しく動作しません。ここではファイル名をあえて間違えてみましょう。

const response = await fetch('error.json');

すると、画面は真っ白になり、Google Chromeの開発者ツールにはエラーが表示されます。

しかし、これではユーザーにはなにが起こったのか分かりません。このような時は「例外処理」を実装します。

例外処理とは、「try … catch」という構文で記述し、「try」の中で作られたプログラム中に、なにか異常が発生したとき（例外が発生したとき）、「catch」でその処理を受け取る事ができるというものです。

ここでは、全体を「try」で囲みましょう。そして、最後にcatchの処理を追加します。

try {
  const response = await fetch('error.json');
  ...
  document.querySelector('.container').innerHTML = html;
} catch (error) {
  document.querySelector('.container').innerHTML = '読み込めませんでした';
}

すると、例外が発生すると「catch」側のプログラムが実行され、ここでは画面に「読み込めませんでした」と表示されます。

例外処理はJSONの処理以外でもさまざまな場面で利用できます。エラーが発生しそうな箇所には、是非例外処理を実装しておきましょう。