コンテンツをブラウザで表示する
コンテンツをAPIから取得することができたら、実際にそのデータをブラウザで表示してみましょう。
※microCMSで取得できるのはJSONデータのみのため、ユーザーに内容を見せるためには何らかの表示ロジックが必要です。
ここではサンプルとして HTML/JavaScript を使って表示してみます。
実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。
こちらが今回作成した index.html です。
<!DOCTYPE html>
<html lang="ja">
<body>
<main>
<h1 id="title"></h1>
<div id="body"></div>
</main>
<script>
fetch("https://micro.microcms.io/api/v1/news/0ik_dv015", {
headers: {
"X-MICROCMS-API-KEY": "1598164e-2d58-488c-a4af-c51bd7d131a5"
}
})
.then(res => res.json())
.then(json => {
document.getElementById("title").innerHTML = json.title;
document.getElementById("body").innerHTML = json.body;
})
</script>
</body>
</html>
Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。
（何らかのテンプレートエンジン/フレームワークを用いることで、より効率的な実装も可能です）
このHTMLをブラウザから開くと次のように表示されます。
APIプレビュー