はじめに
こんにちは。
こちらの記事では、取得したデータをランダムに表示する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。
前提
- ヘッドレスCMS（microCMS）からAPIを取得するものとする
- Nuxtの新規プロジェクトの作成が済んでいる
- microCMSのアカウント登録〜コンテンツ作成まで済んでいる
microCMSの導入については、前回の記事で解説しているので先に読んでいただけるとスムーズに進められると思います！
実装手順
今回はAPIを取得して、ランダムでタイトルを表示させる実装を行います。
1. APIの取得
Nuxtの新規プロジェクトのpages配下の表示させたいページに以下のように記述する。変数testに格納されたデータをコンソールで確認してみると、オブジェクトが返ってくる。
（asyncData()は、コンポーネントがインスタンス化される前に呼び出されます。）
script
<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
<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
<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
<template>
<div>
{{ randomTitle }}
</div>
</template>
templateで描画すると、ランダムでタイトルが表示される。
おわりに
ここまでAPIから取得したデータのタイトルをランダム表示する方法についてまとめました。
コードの記述が多くなってくるほど、可読性を意識して書かないといけないと感じたので、自分でも見直したりレビューを受けながら開発を進めていきます！
以上、最後まで読んでいただきありがとうございました！