Datamuse API 編 1日目へようこそ
今日は 「API 通信アプリの基礎を“実際に動く形”で理解する」 ことがゴールです。
Datamuse API は「単語の関連語・類義語・韻を踏む単語」を返してくれる、とても扱いやすい API なので、
fetch / async-await / エラーハンドリングの練習に最適 です。
ここからは、プログラミング初心者でも迷わないように、
例題を交えながら丁寧に解説していきます。
Datamuse API とは何か
Datamuse API は、次のような情報を返してくれる語彙検索 API です。
- 類義語（意味が近い単語）
- 連想語（その単語から連想される語）
- 韻を踏む単語
- 前方一致（◯◯で始まる単語）
例えば、
https://api.datamuse.com/words?ml=happy
にアクセスすると、
「happy と意味が近い単語」が JSON で返ってきます。
fetch をかみ砕いて理解する
fetch は「ブラウザに API へ行ってきて」とお願いする関数
JavaScript の fetch は、
「この URL にアクセスして、結果を持ってきて」
とブラウザに頼む仕組みです。
例：
fetch("https://api.datamuse.com/words?ml=happy");
ただし、fetch はすぐに結果を返しません。
「Promise（未来の結果の箱）」 を返します。
async/await を使うと読みやすくなる
Promise を then でつなぐと読みにくいので、
async/await を使うと“同期処理のように”書ける ようになります。
async function getWords() {
const response = await fetch("https://api.datamuse.com/words?ml=happy");
const data = await response.json();
console.log(data);
}
await は
「fetch が終わるまで待つ」
という意味です。
エラーハンドリングの基本
API 通信では、次のようなエラーが起きます。
- ネットワークエラー（Wi-Fi が切れているなど）
- HTTP エラー（404, 500 など）
- JSON の形式が想定外
これらをまとめて扱うのが try-catch です。
try {
// 成功するかもしれない処理
} catch (error) {
// 失敗したときの処理
}
今日作るミニアプリのイメージ
1日目は、次のような最小構成のアプリを作ります。
- 単語を入力
- モードを選択（類義語 / 連想語 / 韻）
- 「検索」ボタンを押す
- Datamuse API から結果を取得
- ローディング表示
- 通信失敗時のメッセージ表示
これだけで、API 通信アプリの基本がすべて詰まっています。
ローディング表示を入れる理由
API 通信は数百ミリ秒〜数秒かかることがあります。
その間、ユーザーは「固まった？」と不安になります。
だから、
- 「取得中です…」と表示
- ボタンを無効化して連打を防ぐ
という UI が必要です。
Datamuse API を叩く基本コード（重要）
ここからは、実際に動くコードを例にしながら説明します。
DOM 要素を取得する
const wordInput = document.getElementById("wordInput");
const modeSelect = document.getElementById("modeSelect");
const searchButton = document.getElementById("searchButton");
const statusDiv = document.getElementById("status");
const resultDiv = document.getElementById("result");
ローディング開始・終了の関数
UI を整えるために、ローディング処理を関数化します。
function startLoading() {
statusDiv.textContent = "取得中です…";
searchButton.disabled = true;
}
function endLoading() {
searchButton.disabled = false;
}
Datamuse API からデータを取得する関数（1日目の完成形）
async function fetchWords() {
const word = wordInput.value.trim();
const mode = modeSelect.value;
if (!word) {
statusDiv.textContent = "単語を入力してください。";
resultDiv.textContent = "";
return;
}
startLoading();
resultDiv.textContent = "";
try {
const url = `https://api.datamuse.com/words?${mode}=${word}`;
const response = await fetch(url);
if (!response.ok) {
statusDiv.textContent = `サーバーエラーが発生しました。（${response.status}）`;
return;
}
const data = await response.json();
if (data.length === 0) {
statusDiv.textContent = "該当する単語が見つかりませんでした。";
return;
}
statusDiv.textContent = "取得に成功しました。";
renderWords(data);
} catch (error) {
statusDiv.textContent = "通信に失敗しました。ネットワークを確認してください。";
console.error(error);
} finally {
endLoading();
}
}
結果を画面に表示する関数
function renderWords(data) {
let html = "<h3>検索結果</h3>";
data.forEach((item) => {
html += `<p>${item.word}（スコア: ${item.score}）</p>`;
});
resultDiv.innerHTML = html;
}
ボタンにイベントを付ける
searchButton.addEventListener("click", fetchWords);
1日目のまとめ
今日あなたが身につけたのは、
API 通信アプリの基礎そのもの です。
- fetch で API にアクセス
- async/await で読みやすく
- try-catch でエラーを扱う
- ローディング表示で UX を改善
- 結果を画面に表示
これらは、どんな API アプリでも共通する“型”です。
今日いちばん深く理解してほしいこと
1日目の本質は、
「API 通信は fetch → await → JSON → UI の流れでできている」
ということです。
この流れを理解すれば、
Datamuse だけでなく、
天気 API、翻訳 API、ニュース API など、
どんな API でも扱えるようになります。
次の 2日目では、
検索モードの追加・入力補助・ローディング改善
などを行い、アプリを一段レベルアップさせていきます。
