データベースを使ってみる(後編)

後編はじまるよ

さて、前編に引き続きデータベースのおはなしです。 後編は、弊観測所に実物のデータベースを導入したおはなしになります。

なんか生えてない？

突然ですが、数日前から何かの数字がトップページに生えてますね。 お気づきになりましたか……

これはデータベースに接続してトップページのアクセス数¹を実装したものになります。以下から順に実装の手順を追っていきましょう🌟

データベースにRedisを使う

家計簿確認アプリではSQL (SQLite)を扱いました(というより使わざるを得なかった)が、観測所ではRedis²を使います。 以下の流れでやってきます。

1. UpstashでRedisのデータベースを作成
2. APIルートを作成
3. フロントエンド側で実装

UpstashでRedisのデータベースを作成

Upstash でアカウントを作成し、Redisのデータベースを作成します³。 最近はこういう外部サービスが発達して、自前でサーバーを用意したり維持費⁴かけたりしなくてよくなったのは本当に神だと思います。

なお、Upstashの無料プランは1日10,000回まで処理を実行することができます。 弊観測所の規模的に、無料プランでも余裕があっていいですね。

APIルートを作成

まずは必要なパッケージをインストールします。

1pnpm add @upstash/redis

Upstashで取得したデータベースのURLと認証トークンを環境変数にセットしておきます。

.env.local
1UPSTASH_REDIS_REST_URL=<your-upstash-redis-url>
2UPSTASH_REDIS_REST_TOKEN=<your-upstash-redis-token>

これで準備完了！APIルートを作成します。

api/views/route.ts
1import { NextResponse } from "next/server";
2import { Redis } from "@upstash/redis";
3
4/**
5 * Redis (環境変数から作成)
6 */
7const redis = Redis.fromEnv();
8
9export const POST = async () => {
10  const count = await redis.incr("views");
11  return NextResponse.json({ count: count });
12};

とても簡単に実装できますね！

• Redisのインスタンスを環境変数から作成しておいて(7行目)
• POSTメソッドが飛んで来たらviewsというカウントをインクリメントし(1増やし)、その結果をcountに代入(10行目)
• countをレスポンスとして返す(11行目)

GETメソッドは、どこかでカウント数を増やさずに現在の値を取得したいなら書くべきですが、カウントを増やす目的だけならGETはなくてもいいでしょう。

フロントエンド側で実装

あとは任意のコンポーネントからuseEffect内でAPIをPOSTメソッドでfetchしてあげると、カウント数を1増やしたのちにカウント数を取得することができます！ 以下のコードは例になります。

1"use client";
2import { useEffect, useState } from "react";
3import { NextPage } from "next";
4
5const Home: NextPage = () => {
6  const [views, setViews] = useState<number | null>(null);
7
8  useEffect(() => {
9    const fetchViews = async () => {
10      const res = await fetch("/api/views", { method: "POST" });
11      const data = await res.json();
12      setViews(data.views as number);
13    };
14    fetchViews();
15  }, []);
16
17  return <p>{views !== null ? views : "Loading..."}</p>;
18};
19
20export default Home;

まとめ

これにて、カウンター？の設置が完了です！ 前回の苦労と比べたら比較的シンプルにできましたね。

まあ今回は値を増やすというシンプルなことしかしませんでしたが、眠星観測所にとっては大きな一歩となったかと思います。すなわち、

このサイトがデータベースと接続したことで、ユーザーのアクションを記録することができ情報伝達の双方向化が可能になった

ということになります。

さて、後編はこれくらいにしておいて、深き眠りにつこうね……💤⭐