1년 전에 만든 북 리뷰 앱 검색의 정확도를 높이고 포트폴리오를 강화하려고 하면 2021년 현재 너무 관련 정보가 넘치고 있기 때문에 완성시켜도 포트폴리오로서는 가치가 없다고 생각했기 때문에 도중이지만 공양합니다.

Nuxt-bookreview

↑책의 타이틀을 검색해 표지를 표시하는 곳까지 만들고 있습니다.

표시된 이미지는 버튼으로 되어 있으며 누르면 해당 이미지만 표시됩니다.
특히 의미는 없습니다만, 앞으로 여러가지 놀아 보려고 생각합니다.

외형

<template>
  <div class="">
    <div class="text-center">
      <input class="ex-form" v-model="bookTitle" />
      <button class="ex-btn_default" @click="search">検索</button>
    </div>

    <img
      style="width:200px"
      class="m-auto mt-48 justify-center"
      v-if="buttonImage"
      v-bind:src="buttonImage"
    />

    <div v-else>
      <div class="flex-wrap justify-center">
        <div class="m-5 inline-flex" v-for="(booksArray, key) in booksArray" :key="key">
          <img
            class="inline-block ex-test"
            style="width: 150px; min-width: 150px"
            @click="doAction(booksArray)"
            v-bind:src="booksArray"
          />
        </div>
      </div>
    </div>
  </div>
</template>

스크립트

<script>
const axios = require("axios");
let url = "https://www.googleapis.com/books/v1/volumes?&maxResults=30&q=";
export default {
  data: function() {
    return {
      json_data: {},
      items: [],
      bookTitle: "",
      booksArray: [],
      buttonImage: ""
    };
  },
  methods: {
    doAction: function(booksArray) {
      this.buttonImage = booksArray;
    },
    list: function() {
      let booksArray = [];
      let book = [];
      for (let i = 0; i < 30; i++) {
        if (!this.items[i].volumeInfo.imageLinks) {
          continue;
        }
        book = this.items[i].volumeInfo.imageLinks.thumbnail;
        booksArray[i] = book;
        this.booksArray.push(booksArray[i]);
        console.log(booksArray);
      }
    },
    search: function() {
      this.booksArray = [];
      this.buttonImage = "";
      axios
        .get(url + this.bookTitle)
        .then(response => ((this.items = response.data.items), this.list()));
    }
  }
};
</script>

입력 양식에 제목을 입력

검색 버튼을 누르면 search 메소드가 발화

axios.get에서 json 얻기

응답을 변수 items에 저장

list 메소드를 발화

list 메소드 정보

items 이하에 복수의 voluminfoinfo 컬럼이 있다. for문으로 각각 전개해, 배열 booksArray에 격납한다.
imageLinks 이하를 가지지 않는 컬럼도 있으므로, 그 경우는 스킵 한다.

list 메소드의 다른 작성 방법

while을 사용한다.

    list: function() {
      this.booksArray = [];
      let booksArray = [];
      let book = [];
      let i = -1;
      while (true) {
        i += 1;
        if (!this.items[i].volumeInfo.imageLinks) {
          continue;
        }
        book = this.items[i].volumeInfo.imageLinks.thumbnail;
        booksArray[i] = book;
        this.booksArray.push(booksArray[i]);

        if (i == 30) {
          break;
        }
      }
    },

CSS

기본은 Tailwindcss이지만, 버튼이나 폼등의 파트는 css로 쓴다.
Tailwindcss와 차별화하기 위하여 자작 CSS는 이름에 "ex-"를 클릭한다.

<style>
.t-book-w {
  max-width: 150%;
}

.ex-test {
  display: flex;
  flex-wrap: wrap;
}

/* 入力フォーム */
.ex-form {
  height: 36px;
  background-color: #efefed;
  border-radius: 5px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  outline: none;
  font-size: 14pt;
  color: #444444 !important;
  margin-top: 50px;

  width: 50% !important;
}
.ex-form:focus {
  box-shadow: 0 0 0 2px #ebd800;
  background-color: #ffffff;
}

/* ボタン */
.ex-btn_default {
  border-radius: 5px;
  background-color: #98f0ff;
  min-height: 40px;
  min-width: 160px;
  width: 160px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: Bold;
  font-size: 18px;
  letter-spacing: 0.05em;
  filter: drop-shadow(1px 3px 5px rgba(68, 68, 68, 0.1));
  outline: none;
  border-radius: 30px;
  color: white;
  padding: 1px 30px 1px 30px;
}

.ex-btn_default:hover {
  background-color: #77e6fa;
  filter: drop-shadow(1px 3px 5px rgba(68, 68, 68, 0.2));
}

.ex-btn_default:focus {
  outline: none;
}
</style>

감상

자바 스크립트 쓰기 재미.
애니메이션이라든지 넣어 놀아 보자, 라는 기분이 되어 왔습니다.