# Qiita API × Firebase Hostingでシンプルな検索アプリを構築する方法

## 目次

1. はじめに
2. 必要なツールと設定
   1. Firebase プロジェクトの準備
   2. Qiita APIの利用登録
3. 開発環境のセットアップ
   1. フロントエンド構築（Next.js）
   2. Firebase Hostingの設定
4. 検索アプリの開発
   1. フロントエンド開発
   2. API呼び出しとデータ表示
5. デプロイと運用
   1. GitHubとの連携
   2. Firebase Hostingへのデプロイ
6. まとめ

## 1. はじめに

Web 開発において、Firebase Hosting と Qiita API を活用した検索アプリの構築は、迅速かつスケーラブルなプロジェクトを作成する上で非常に有効な方法です。本記事では、Firebase Hosting を利用して、Qiita の記事を検索し表示するシンプルなアプリを構築する方法について解説します。

## 2. 必要なツールと設定

### 2-1. Firebase プロジェクトの準備

まず、Firebase コンソールで新しいプロジェクトを作成します。Firebase プロジェクトは、アプリのホスティングやバックエンドのサービスを含む一連の Firebase 機能を管理する中心的な要素です。

1. Firebase コンソールにアクセスし、新しいプロジェクトを作成します。
2. プロジェクトの作成時に Google Analytics を設定するか選択します。

### 2-2. Qiita APIの利用登録

Qiita APIを使用するためには、Qiita アカウントを用いてアクセストークンを取得する必要があります。以下の手順で進めます。

1. Qiita のアカウントを作成し、アカウントにログインします。
2. Settings ページから "Applications" に移動し、新しいアクセストークンを生成します。
3. アクセストークンのスコープを設定し、取得したトークンをメモしておきます。

## 3. 開発環境のセットアップ

### 3-1. フロントエンド構築（Next.js）

Next.js は React ベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成の機能を提供します。このため、検索結果を効率的に表示することが可能です。

1. 新しい Next.js アプリケーションを作成します。

   ```bash
   npx create-next-app@latest qiita-search-app
   cd qiita-search-app
   ```

2. 必要なライブラリをインストールします。

   ```bash
   npm install axios
   ```

### 3-2. Firebase Hostingの設定

Firebase CLI を用いて、Firebase Hosting の準備を行います。

1. Firebase CLI をインストールし、ログインします。

   ```bash
   npm install -g firebase-tools
   firebase login
   ```

2. プロジェクトディレクトリで Firebase 初期化コマンドを実行し、Hosting の設定を行います。

   ```bash
   firebase init hosting
   ```

## 4. 検索アプリの開発

### 4-1. フロントエンド開発

Next.js アプリケーションのページ構造と UI を設計します。

1. `pages/index.js` に以下のコントローラーを設定し、入力フォームを作成します。

   ```javascript
   import React, { useState } from 'react';
   import axios from 'axios';

   const HomePage = () => {
     const [query, setQuery] = useState('');
     const [articles, setArticles] = useState([]);

     const handleSearch = async () => {
       try {
         const response = await axios.get(`https://qiita.com/api/v2/items?query=${query}`);
         setArticles(response.data);
       } catch (error) {
         console.error(error);
       }
     };

     return (
       <div>
         <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
         <button onClick={handleSearch}>Search</button>
         <ul>
           {articles.map((article) => (
             <li key={article.id}>{article.title}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default HomePage;
   ```

### 4-2. API呼び出しとデータ表示

Qiita API に検索クエリを送信し、取得したデータを表示します。アクセストークンを含めることを忘れずに。

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

## 5. デプロイと運用

### 5-1. GitHubとの連携

GitHub リポジトリを作成し、ローカルプロジェクトをプッシュします。

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

### 5-2. Firebase Hostingへのデプロイ

Firebase CLI を使って、アプリを Firebase Hosting にデプロイします。

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

## 6. まとめ

Firebase Hosting によって、Next.js アプリケーションを簡単かつ迅速にデプロイできました。Qiita API の利用により、リアルタイムな検索機能を実装しました。Firebase と GitHub の連携により、スムーズなデプロイフローを実現し、開発者としての作業効率を向上させることができました。 [cv:issue_marketplace_engineer]

# Qiita API × Firebase Hostingでシンプルな検索アプリを構築する方法

## 目次

1. はじめに
2. 必要なツールと設定
   1. Firebase プロジェクトの準備
   2. Qiita APIの利用登録
3. 開発環境のセットアップ
   1. フロントエンド構築（Next.js）
   2. Firebase Hostingの設定
4. 検索アプリの開発
   1. フロントエンド開発
   2. API呼び出しとデータ表示
5. デプロイと運用
   1. GitHubとの連携
   2. Firebase Hostingへのデプロイ
6. まとめ

## 1. はじめに

Web 開発において、Firebase Hosting と Qiita API を活用した検索アプリの構築は、迅速かつスケーラブルなプロジェクトを作成する上で非常に有効な方法です。本記事では、Firebase Hosting を利用して、Qiita の記事を検索し表示するシンプルなアプリを構築する方法について解説します。

## 2. 必要なツールと設定

### 2-1. Firebase プロジェクトの準備

まず、Firebase コンソールで新しいプロジェクトを作成します。Firebase プロジェクトは、アプリのホスティングやバックエンドのサービスを含む一連の Firebase 機能を管理する中心的な要素です。

1. Firebase コンソールにアクセスし、新しいプロジェクトを作成します。
2. プロジェクトの作成時に Google Analytics を設定するか選択します。

### 2-2. Qiita APIの利用登録

Qiita APIを使用するためには、Qiita アカウントを用いてアクセストークンを取得する必要があります。以下の手順で進めます。

1. Qiita のアカウントを作成し、アカウントにログインします。
2. Settings ページから "Applications" に移動し、新しいアクセストークンを生成します。
3. アクセストークンのスコープを設定し、取得したトークンをメモしておきます。

## 3. 開発環境のセットアップ

### 3-1. フロントエンド構築（Next.js）

Next.js は React ベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成の機能を提供します。このため、検索結果を効率的に表示することが可能です。

1. 新しい Next.js アプリケーションを作成します。

   ```bash
   npx create-next-app@latest qiita-search-app
   cd qiita-search-app
   ```

2. 必要なライブラリをインストールします。

   ```bash
   npm install axios
   ```

### 3-2. Firebase Hostingの設定

Firebase CLI を用いて、Firebase Hosting の準備を行います。

1. Firebase CLI をインストールし、ログインします。

   ```bash
   npm install -g firebase-tools
   firebase login
   ```

2. プロジェクトディレクトリで Firebase 初期化コマンドを実行し、Hosting の設定を行います。

   ```bash
   firebase init hosting
   ```

## 4. 検索アプリの開発

### 4-1. フロントエンド開発

Next.js アプリケーションのページ構造と UI を設計します。

1. `pages/index.js` に以下のコントローラーを設定し、入力フォームを作成します。

   ```javascript
   import React, { useState } from 'react';
   import axios from 'axios';

   const HomePage = () => {
     const [query, setQuery] = useState('');
     const [articles, setArticles] = useState([]);

     const handleSearch = async () => {
       try {
         const response = await axios.get(`https://qiita.com/api/v2/items?query=${query}`);
         setArticles(response.data);
       } catch (error) {
         console.error(error);
       }
     };

     return (
       <div>
         <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
         <button onClick={handleSearch}>Search</button>
         <ul>
           {articles.map((article) => (
             <li key={article.id}>{article.title}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default HomePage;
   ```

### 4-2. API呼び出しとデータ表示

Qiita API に検索クエリを送信し、取得したデータを表示します。アクセストークンを含めることを忘れずに。

```javascript
const response = await axios.get(`https://qiita.com/api/v2/items?query=${query}`, {
  headers: {
    Authorization: `Bearer ${process.env.QIITA_API_TOKEN}`,
  },
});
```

## 5. デプロイと運用

### 5-1. GitHubとの連携

GitHub リポジトリを作成し、ローカルプロジェクトをプッシュします。

```bash
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin YOUR_GITHUB_REPO_URL
git push -u origin main
```

### 5-2. Firebase Hostingへのデプロイ

Firebase CLI を使って、アプリを Firebase Hosting にデプロイします。

```bash
firebase deploy
```

## 6. まとめ

Firebase Hosting によって、Next.js アプリケーションを簡単かつ迅速にデプロイできました。Qiita API の利用により、リアルタイムな検索機能を実装しました。Firebase と GitHub の連携により、スムーズなデプロイフローを実現し、開発者としての作業効率を向上させることができました。 

Qiita API × Firebase Hostingでシンプルな検索アプリを構築する方法

目次

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