はじめに
こんにちは。
こちらの記事では、取得したデータをランダムに表示する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。
前提
- ヘッドレスCMS(microCMS)からAPIを取得するものとする
- Nuxtの新規プロジェクトの作成が済んでいる
- microCMSのアカウント登録〜コンテンツ作成まで済んでいる
microCMSの導入については、前回の記事で解説しているので先に読んでいただけるとスムーズに進められると思います!
実装手順
今回はAPIを取得して、ランダムでタイトルを表示させる実装を行います。
1. APIの取得
Nuxtの新規プロジェクトのpages配下の表示させたいページに以下のように記述する。変数test
に格納されたデータをコンソールで確認してみると、オブジェクトが返ってくる。
(asyncData()
は、コンポーネントがインスタンス化される前に呼び出されます。)
<script>
import axios from "axios";
export default {
async asyncData() {
const test = await axios.get(
'https://サービス名.microcms.io/api/v1/APIのエンドポイント',
{
headers: { "X-API-KEY": "APIキーを入力" }
}
);
console.log(test)
}
}
</script>
2. 各コンテンツのタイトルを取得する
.map( )メソッドを使用して各コンテンツのタイトルを変数titles
に格納する。
※microCMSで、取得するタイトルのフィールドIDをtitle
にしておく。
<script>
import axios from "axios";
export default {
async asyncData() {
const test = await axios.get(
'https://サービス名.microcms.io/api/v1/APIのエンドポイント',
{
headers: { "X-API-KEY": "APIキーを入力" }
}
);
const titles = test.data.contents.map(e => e.title)
return {titles}
}
}
</script>
titles
をreturnで返すときに{ }で囲うのは、titles
の中身が配列のインデックス:タイトル
という形でオブジェクト形式になっているため。
3. ランダムにタイトルを表示させる
ライフサイクルフックのmounted()
で、DOMがマウントされた後にtitles
のインデックスをランダムに処理を実行する。
DOM操作が必要な場合はmounted()
で、不要な場合はcreated()
で使い分けられると良い。
<script>
import axios from "axios";
export default {
async asyncData() {
const test = await axios.get(
'https://サービス名.microcms.io/api/v1/APIのエンドポイント',
{
headers: { "X-API-KEY": "APIキーを入力" }
}
);
const titles = test.data.contents.map(e => e.title)
return {titles}
},
mounted: function(){
this.randomTitle = this.titles[
Math.floor( Math.random() * this.titles.length)
]
}
}
</script>
<template>
<div>
{{ randomTitle }}
</div>
</template>
templateで描画すると、ランダムでタイトルが表示される。
おわりに
ここまでAPIから取得したデータのタイトルをランダム表示する方法についてまとめました。
コードの記述が多くなってくるほど、可読性を意識して書かないといけないと感じたので、自分でも見直したりレビューを受けながら開発を進めていきます!
以上、最後まで読んでいただきありがとうございました!