# Google Places APIとNext.jsを組み合わせた店舗検索アプリの作り方

## 目次
1. はじめに
2. 必要な準備
   2.1 Google Cloud プロジェクトの作成とAPIキーの取得
   2.2 Next.js プロジェクトのセットアップ
3. Google Places API の概要
   3.1 APIの機能と用途
   3.2 プライシングについて
4. Next.js での基本的なページセットアップ
   4.1 ページの作成
   4.2 CSSを使ったスタイリング
5. 店舗検索機能の実装
   5.1 APIリクエストの作成
   5.2 検索結果の表示
   5.3 ページネーションの実装
6. 店舗詳細情報の表示
   6.1 詳細情報取得のためのAPIエンドポイント
   6.2 詳細ページの作成
7. カスタムフックとコンポーネントの活用
   7.1 利便性を高めるカスタムフック
   7.2 再利用可能なコンポーネントの構築
8. まとめ

## 1. はじめに

店舗検索アプリケーションは、ユーザーにとって便利な情報源となり得ます。Google Places APIを使うことで、ユーザーに最新の店舗情報を提供できます。この記事では、Next.jsを使ってGoogle Places APIを組み合わせた店舗検索アプリをゼロから構築する方法を詳しく説明します。

## 2. 必要な準備

### 2.1 Google Cloud プロジェクトの作成とAPIキーの取得

1. **Google Cloud Console**にアクセスし、新しいプロジェクトを作成します。
2. API & Services > Libraryで「Google Places API」を検索し、有効化します。
3. API & Services > CredentialsからAPIキーを作成します。安全性を考慮し、IPアドレスの制限を設けましょう。

### 2.2 Next.js プロジェクトのセットアップ

1. Node.jsがインストールされていることを確認します。
2. 新しいNext.jsプロジェクトを作成します:
   ```bash
   npx create-next-app google-places-search
   cd google-places-search
   ```

## 3. Google Places API の概要

### 3.1 APIの機能と用途

Google Places APIは、詳細な店舗情報や場所の写真、ユーザーレビューを取得することができます。場所の検索やレビューの収集、詳細情報の提供など、さまざまな機能があります。

### 3.2 プライシングについて

APIのリクエスト料金は、操作によって異なります。使用する前にGoogle Cloud Platformの料金ページを確認し、予算に応じた設定を行いましょう。

## 4. Next.js での基本的なページセットアップ

### 4.1 ページの作成

プロジェクトの`pages/index.js`を開き、基本的なページを設定します。

![img](/mosaic-code.jpg)

### 4.2 CSSを使ったスタイリング

`styles/index.module.css`で基本的なスタイリングを行います。

## 5. 店舗検索機能の実装

### 5.1 APIリクエストの作成

次に、Google Places APIを使用して検索リクエストを送信します。`getStaticProps`または`getServerSideProps`を使用してAPIを呼び出すことができます。

![img](/mosaic-code.jpg)

### 5.2 検索結果の表示

返ってきたデータを画面に表示します。`useState`を使用して検索結果を管理することもできます。

![img](/mosaic-code.jpg)

### 5.3 ページネーションの実装

多数の検索結果がある場合、Google Places APIではページネーションをサポートしています。`next_page_token`を利用して、さらなる結果を取得可能です。

## 6. 店舗詳細情報の表示

### 6.1 詳細情報取得のためのAPIエンドポイント

特定の店舗について詳細情報を取得するためのエンドポイントを用意します。

![img](/mosaic-code.jpg)

### 6.2 詳細ページの作成

次に、選択した店舗の詳細情報を表示するためのページを作成します。

![img](/mosaic-code.jpg)

## 7. カスタムフックとコンポーネントの活用

### 7.1 利便性を高めるカスタムフック

再利用性と効率を上げるために、データフェッチ用のカスタムフックを作成してみましょう。

![img](/mosaic-code.jpg)

### 7.2 再利用可能なコンポーネントの構築

検索結果や詳細情報の表示に再利用可能なコンポーネントを作成します。

![img](/mosaic-code.jpg)

## 8. まとめ

このチュートリアルでは、Google Places APIを使用してNext.jsで店舗検索アプリを構築しました。Google Cloud Platform上でAPIを設定し、Next.jsを用いてシンプルなデータ取得と表示を行う方法を学びました。こうしたスキルは、さらなるカスタマイズや拡張に役立ちます。ぜひ、独自の機能を付け加えて、自分だけの店舗検索アプリケーションを完成させてください。 [cv:issue_marketplace_engineer]

# Google Places APIとNext.jsを組み合わせた店舗検索アプリの作り方

## 目次
1. はじめに
2. 必要な準備
   2.1 Google Cloud プロジェクトの作成とAPIキーの取得
   2.2 Next.js プロジェクトのセットアップ
3. Google Places API の概要
   3.1 APIの機能と用途
   3.2 プライシングについて
4. Next.js での基本的なページセットアップ
   4.1 ページの作成
   4.2 CSSを使ったスタイリング
5. 店舗検索機能の実装
   5.1 APIリクエストの作成
   5.2 検索結果の表示
   5.3 ページネーションの実装
6. 店舗詳細情報の表示
   6.1 詳細情報取得のためのAPIエンドポイント
   6.2 詳細ページの作成
7. カスタムフックとコンポーネントの活用
   7.1 利便性を高めるカスタムフック
   7.2 再利用可能なコンポーネントの構築
8. まとめ

## 1. はじめに

店舗検索アプリケーションは、ユーザーにとって便利な情報源となり得ます。Google Places APIを使うことで、ユーザーに最新の店舗情報を提供できます。この記事では、Next.jsを使ってGoogle Places APIを組み合わせた店舗検索アプリをゼロから構築する方法を詳しく説明します。

## 2. 必要な準備

### 2.1 Google Cloud プロジェクトの作成とAPIキーの取得

1. **Google Cloud Console**にアクセスし、新しいプロジェクトを作成します。
2. API & Services > Libraryで「Google Places API」を検索し、有効化します。
3. API & Services > CredentialsからAPIキーを作成します。安全性を考慮し、IPアドレスの制限を設けましょう。

### 2.2 Next.js プロジェクトのセットアップ

1. Node.jsがインストールされていることを確認します。
2. 新しいNext.jsプロジェクトを作成します:
   ```bash
   npx create-next-app google-places-search
   cd google-places-search
   ```

## 3. Google Places API の概要

### 3.1 APIの機能と用途

Google Places APIは、詳細な店舗情報や場所の写真、ユーザーレビューを取得することができます。場所の検索やレビューの収集、詳細情報の提供など、さまざまな機能があります。

### 3.2 プライシングについて

APIのリクエスト料金は、操作によって異なります。使用する前にGoogle Cloud Platformの料金ページを確認し、予算に応じた設定を行いましょう。

## 4. Next.js での基本的なページセットアップ

### 4.1 ページの作成

プロジェクトの`pages/index.js`を開き、基本的なページを設定します。

```jsx
import Head from 'next/head';
import styles from './index.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>店舗検索アプリ</title>
        <meta name="description" content="Google Places APIを利用した店舗検索アプリ" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          店舗を検索する
        </h1>
        <input type="text" placeholder="Search for stores..." />
      </main>
    </div>
  );
}
```

### 4.2 CSSを使ったスタイリング

`styles/index.module.css`で基本的なスタイリングを行います。

## 5. 店舗検索機能の実装

### 5.1 APIリクエストの作成

次に、Google Places APIを使用して検索リクエストを送信します。`getStaticProps`または`getServerSideProps`を使用してAPIを呼び出すことができます。

```jsx
// pages/index.js
import { useState } from 'react';

export async function getServerSideProps(context) {
  const response = await fetch('https://maps.googleapis.com/maps/api/place/textsearch/json?query=stores&key=YOUR_API_KEY');
  const data = await response.json();
  return {
    props: {
      places: data.results || [],
    },
  }
}

export default function Home({ places }) {
  return (
    <div>
      {/* 検索機能および検索結果の表示 */}
    </div>
  );
}
```

### 5.2 検索結果の表示

返ってきたデータを画面に表示します。`useState`を使用して検索結果を管理することもできます。

```jsx
{places.map(place => (
  <div key={place.place_id}>
    <h2>{place.name}</h2>
    <p>{place.formatted_address}</p>
  </div>
))}
```

### 5.3 ページネーションの実装

多数の検索結果がある場合、Google Places APIではページネーションをサポートしています。`next_page_token`を利用して、さらなる結果を取得可能です。

## 6. 店舗詳細情報の表示

### 6.1 詳細情報取得のためのAPIエンドポイント

特定の店舗について詳細情報を取得するためのエンドポイントを用意します。

```jsx
const getDetails = async (placeId) => {
  const response = await fetch(`https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&key=YOUR_API_KEY`);
  const data = await response.json();
  return data.result;
};
```

### 6.2 詳細ページの作成

次に、選択した店舗の詳細情報を表示するためのページを作成します。

```jsx
import { useRouter } from 'next/router';

export default function PlaceDetails() {
  const router = useRouter();
  const { id } = router.query;

  const [details, setDetails] = useState(null);

  useEffect(() => {
    if (id) {
      getDetails(id).then(data => setDetails(data));
    }
  }, [id]);

  if (!details) return <div>Loading...</div>;

  return (
    <div>
      <h1>{details.name}</h1>
      <p>{details.formatted_address}</p>
      {/* 詳細情報の追加表示 */}
    </div>
  );
}
```

## 7. カスタムフックとコンポーネントの活用

### 7.1 利便性を高めるカスタムフック

再利用性と効率を上げるために、データフェッチ用のカスタムフックを作成してみましょう。

```jsx
import { useState, useEffect } from 'react';

export function usePlaceSearch(query) {
  const [places, setPlaces] = useState([]);

  useEffect(() => {
    const fetchPlaces = async () => {
      const response = await fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&key=YOUR_API_KEY`);
      const data = await response.json();
      setPlaces(data.results || []);
    };

    fetchPlaces();
  }, [query]);

  return places;
}
```

### 7.2 再利用可能なコンポーネントの構築

検索結果や詳細情報の表示に再利用可能なコンポーネントを作成します。

```jsx
function PlaceCard({ place }) {
  return (
    <div>
      <h3>{place.name}</h3>
      <p>{place.formatted_address}</p>
    </div>
  );
}
```

## 8. まとめ

このチュートリアルでは、Google Places APIを使用してNext.jsで店舗検索アプリを構築しました。Google Cloud Platform上でAPIを設定し、Next.jsを用いてシンプルなデータ取得と表示を行う方法を学びました。こうしたスキルは、さらなるカスタマイズや拡張に役立ちます。ぜひ、独自の機能を付け加えて、自分だけの店舗検索アプリケーションを完成させてください。 

Google Places APIとNext.jsを組み合わせた店舗検索アプリの作り方

目次

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