## 機能概要
Google Books APIを用いて、Google Booksから書籍検索をできる機能を作成していこうと思います。

## レイアウト作成
はじめに、HTMLとCSSで簡単に画面を作成していこうと思います。
CSSは主に、BootStrapを使用していこうと思います。
```index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
        <meta name="generator" content="Hugo 0.83.1">
        <title>書籍検索アプリ</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <meta name="theme-color" content="#7952b3">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>    
        <main>
            <section class="py-5 text-center container">
                <div class="row py-lg-5">
                    <div class="col-lg-6 col-md-8 mx-auto">
                        <h3 class="fw-light">本のタイトルを入力!!</h3>
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">タイトル</span>
                                <input type="text" id="formText" name="myFormText" class="form-control" placeholder="書類タイトルを入力" aria-label="books" aria-describedby="basic-addon1">
                            </div>
                            <button id="btn" class="btn btn-primary my-2">本を検索！</button>
                        <p>
                        </p>
                    </div>
                </div>
            </section>
            <div id="bookItem" class="album py-5 bg-light">
            </div>
        </main>
    </body>
    <script src="index.js"></script>
</html>
```
このような画面になります。
![スクリーンショット 2023-03-25 13.56.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/bf7c69f5-13f5-5661-6c47-bd649c0f49f8.png)

これで書籍名を入力するフォームはできました。
ここからは、JavaScriptを実装していきます。

## JavaScript
以下がJSファイルのコードになります。
あまりスマートなコードじゃなくてごめんなさい。コードの説明はコメントアウトで記入してあります。
```index.js
const btn = document.getElementById("btn");

btn.addEventListener('click', async() => {
    // フォームに入力されたテキストの取得
    const textValue = document.getElementById("formText").value;
    // 書籍検索ができるGoogle Books APIのエンドポイントにフォームから取得したテキストを埋め込む
    const res = await fetch(`https://www.googleapis.com/books/v1/volumes?q=${textValue}`);
    const data = await res.json();
    const bookItem = document.getElementById("bookItem");
    for(let i = 0; i < data.items.length; i++){
        // 例外が起きなければtryブロック内のコードが実行される
        try{
            // JSONデータの取得
            // 画像を表示するリンク
            const bookImg = data.items[i].volumeInfo.imageLinks.smallThumbnail;
            // 本のタイトル
            const bookTitle = data.items[i].volumeInfo.title;
            // 本の説明文
            const bookContent = data.items[i].volumeInfo.description;
            // 各書籍のGoogle Booksへのリンク
            const bookLink = data.items[i].volumeInfo.infoLink;
            // 取得したデータを入れるための要素を作成
            const makeElement = document.createElement("div");
            // 要素別に識別できるようにidに数字を埋め込む
            makeElement.setAttribute("id", `bookItem${i}`);
            // 取得した要素に作成した要素を挿入
            bookItem.appendChild(makeElement);
            // 作成した要素を習得
            const getBookItem = document.getElementById(`bookItem${i}`);
            // APIで取得したデータの分だけHTML要素を作成し、取得した要素にを埋め込む
            const setBookElement = `
                <div class="container">
                    <div class="col">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <img src="${bookImg}"><br>
                                <a id="link${i}" class="card-text" target="_blank">${bookTitle}</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <p>${bookContent}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            // APIから取得した、実際のGoogle Booksのサイトに飛ばすためのリンクを埋め込む
            getBookItem.innerHTML = setBookElement;
            const link = document.getElementById(`link${i}`);
            link.href = bookLink;
            // 途中で例外が発生した場合はcatchブロック内のコードが実行される
        }catch(e){
            continue;
        };
    };
});
```
そうすると以下のような挙動になるはずです。

1.本のキーワードを入力して、検索ボタンを押す。
今回は「野球」というキーワードを入力してみます。
![スクリーンショット 2023-03-25 13.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/84d6e635-e2f7-dddc-6c1c-aa5ba09d33d7.png)
2.そうすると、入力したキーワードに沿った本の一覧が表示されました。
気になった本のタイトルのリンクを押します。
![スクリーンショット 2023-03-25 13.50.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/4905a8b5-ada4-fe60-1576-3cea033804b4.png)
3.押下した本のGoogle Booksの書籍ページに移動します。
![スクリーンショット 2023-03-25 13.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8c6a3b42-89ee-f78e-afdb-9505bac97019.png)

こんな感じで、簡単ですが書籍検索アプリを作成することができました。
[cv:issue_marketplace_engineer]

機能概要

レイアウト作成

続きを読むには単価診断を受けてください（30秒）