1.はじめに
2.内容
3.おわりに
1. はじめに
GoogleBooksAPIとaxiosを使用して書籍検索システムを作りました。
画像とタイトルを表示させたいと思います。
2. 内容
axiosでGoogleBooksAPIからデータを取得
GoogleBooksAPIから情報を取得するたにaxiosでリクエストを送ります。
data () {
return {
books: [],
keyword: '',
url: 'https://www.googleapis.com/books/v1/volumes?q='
}
}
URLとユーザーが検索できるkeywordはdataで取り扱います。空のbook配列には取得した書籍データを格納します。
<v-text-field
v-model="keyword"
/>
keywordはtemplateのテキストと結び助けておくことで検索機能として動くようにしました。
methods: {
get () {
this.$axios.$get(this.url + this.keyword + '&maxResults=15')
.then(this.setBooks)
},
setBooks (res) { this.books = res.data.items }
keywordを入力した後に検索ボタンを押すとgetメソッドが発火して書籍情報を取得→bookに格納というように動いてくれます。
<v-card
v-for="book in books"
:key="book.id"
class="ma-0"
>
<v-row>
<v-cols class="my-4 ml-7">
<img :src="volumeInfo.imageLinks.thumbnail">
</v-cols>
<v-cols>
<v-card-title>{{ book.volumeInfo.title }}</v-card-title>
<v-card-text>{{ book.volumeInfo.authors) }}</v-card-text>
</v-cols>
</v-row>
</v-card>
items以降のデータを取り出してfor文で表示させたら完成です
問題が見つかる
問題が見つかりました。タイトルや著者情報がない時や、サムネイル画像がないとundefinedでエラーになってしまいます。特に画像のない本が結構あったので対策は必須です。
解決策①
v-ifを使って条件分岐で情報を切り替える
これは真っ先に思いついたのですが、だいぶ冗長になってしまうのと、そもそも公式で非推奨のやり方になってるのでやめました。
解決策②
methodsで条件分岐してくれるオブジェクトを作成
スマートだしかっこいい気がする！ということでこちらを採用！
title (valu) { return valu.volumeInfo.title ? valu.volumeInfo.title : 'No title' },
authors (valu) { return valu.volumeInfo.authors ? valu.volumeInfo.authors : 'No authors' },
image (valu) { return valu.volumeInfo.imageLinks ? valu.volumeInfo.imageLinks.thumbnail : noImage }
<v-cols class="my-4 ml-7">
<img :src="image(book)">
</v-cols>
<v-cols>
<v-card-title>{{ title(book) }}</v-card-title>
<v-card-text>{{ authors(book) }}</v-card-text>
</v-cols>
引数をとって処理を分けることでかっこよくなりました。
こういうのってなんか気持ちいですよね〜
5. おわりに
これでなんとか検索結果を表示させることはできました。初めての実装でしたが オブジェクトを用意して条件分岐をするというのは非常に勉強になりました。
課題〜誰か助けて〜
今度はオブジェクトとfor文を使って表示させた画像、タイトル、著者をクリックするとすぐ下に表示されるという機能を追加したいです。やり方を考えているのですが、なかなか見つけられないのと、思いつかなくて困っています。誰か教えてください泣
①検索リスト表示 ←今回のとこ
②ユーザークリック
③クリックした情報がすぐ下に表示される ← ここがわからない
④表示されたものを保存する
という流れを想定しています。
とりあえず根気強く調べてみようと思います。ではまた！
↧
