Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話

[
  {
    "heading": "民法",
    "event_name": "civilLaw",
    "id": "xxx",
    "title": "書籍X",
    "author": "XXXX",
    "published_at": "2020年",
    "thumbnail_url": "XXX.png",
  },
  {
    "heading": "民法",
    "event_name": "civilLaw",
    "id": "yyy",
    "title": "書籍Y",
    "author": "YYYY",
    "published_at": "2020年",
    "thumbnail_url": "YYY.png",
  },
  {
    "heading": "一般民事",
    "event_name": "civilCase",
    "id": "zzz",
    "title": "書籍Z",
    "author": "ZZZZ",
    "published_at": "2020年",
    "thumbnail_url": "ZZZ.jpg",
  },
  // ...
]

import { GetStaticProps, NextPage } from 'next'
import * as R from 'ramda'
import React from 'react'

import { BookListPartLabel } from '~/src/types/domain/googleAnalyticsEvents/Labels'

// ドメインで利用する型
type BookListItem = {
  id: string
  title: string
  author: string
  publishedAt: string
  thumbnailUrl: string
}

type Props = {
  bookGroups: {
    heading: string
    books: BookListItem[]
    part: BookListPartLabel // GA イベント名
  }[]
}

// トップページの表示用のコンポーネント
// 後述します
// const Component: NextPage<Props> = (props) => ( )

// API のレスポンスボディの型
type TopPageBooksBody = {
  heading: string
  event_name: string
  id: string
  title: string
  author: string
  published_at: string
  thumbnail_url: string
}[]

export const getStaticProps: GetStaticProps<Props> = async () => {
  // GOOGLE_APPS_SCRIPT_TOP_PAGE_BOOKS は GAS の API の URL
  const endpoint = GOOGLE_APPS_SCRIPT_TOP_PAGE_BOOKS
  const authKey = process.env.AUTH_KEY
  // プログラムから GAS の API をコールするためには、オプションとして { redirect : 'follow' } が必須
  const res = await fetch(`${GOOGLE_APPS_SCRIPT_TOP_PAGE_BOOKS}?auth_key=${authKey}`, { redirect: 'follow' })
  const json: TopPageBooksBody = await res.json()

  // 変数 groups の中身は以下。ramda.js の groupBy 関数で heading が同じ書籍をまとめる
  // {
  //   '民法': [{ heading: '民法', event_name: 'pickup', ... }, {...}, ... ],
  //   '一般民事' : [{ heading: '一般民事', event_name: 'popular', ... }, {...}, ... ],
  //   // ...
  // }
  const groups = R.groupBy((book: TopPageBooksBody[number]) => book.heading)(json)
  const bookGroups = Object.entries(groups).map(([heading, bookGroup]) => ({
    heading,
    part: bookGroup[0].event_name
    books: bookGroup.map<BookListItem>((book) => ({
      id: book.id,
      title: book.title,
      author: book.author,
      publishedAt: book.published_at,
      thumbnailUrl: book.thumbnail_url,
    })),
  }))

  return {
    props: { bookGroups },
    revalidate: 300, // 5分単位で更新
  }
}

export default Component

// 上記で省略した表示用のコンポーネントの中身
const Component: NextPage<Props> = (props) => (
  <>
    {/* Top Page */}
    <HeroComponent />

    {/* 書籍一覧 */}
    <section className={css['bookList']}>
      {props.bookGroups.map((group) => (
        // 以下はさらに小さい粒度でコンポーネントとして切り出していますが、
        // ここでは説明のためにコンポーネントとして切り出していない形で記述しています
        <div className={css['bookList__content']} key={group.heading}>
          <h2 className={css['bookList__heading']}>{group.heading}</h2>
          <ul className={css['bookList__list']}>
            {group.books.map((book, i) => (
              <li className={css['bookList__item']} key={i}>
                <Link href={`${PATH.SITE_BOOK}/${book.id}`}>
                  <a className={css['bookList__itemLink']}>
                    <BookListItem
                      part={group.part}
                      src={book.thumbnailUrl}
                      title={book.title}
                      author={book.author}
                      publishedAt={book.publishedAt}
                    />
                  </a>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  </>
)

import React from 'react'
import LazyLoad from 'react-lazyload'

import { event } from '~/src/lib/googleAnalytics/gtag'
import { BookListPartLabel } from '~/src/types/domain/googleAnalyticsEvents/Labels'

import css from './style.module.scss'

type Props = {
  part: BookListPartLabel
  src: string
  title: string
  author: string
  publishedAt: string
}

const Component: React.FC<Props> = (props) => (
  <button
    className={css['bookList__itemButton']}
    type="button"
    onClick={() =>
      // GA イベント
      event({
        action: 'click',
        category: 'book',
        label: { part: props.part, title: props.title },
      })
    }
  >
    <LazyLoad>
      <div className={css['bookList__itemCover']}>
        <img className={css['bookList__itemCoverImage']} src={props.src} alt={props.title} />
      </div>
    </LazyLoad>
    <div className={css['bookList__itemInformation']}>
      <p className={css['bookList__itemTitle']}>{props.title}</p>
      <p className={css['bookList__itemAuthor']}>{props.author}</p>
      <small className={css['bookList__itemPublication']}>{props.publishedAt}</small>
    </div>
  </button>
)

export default Component

const AUTH_KEY = 'some_key'
const SHEET_ID = 'sheet_id'
const SHEET_NAME = '書籍一覧'

type Book = {
  heading: string
  event_name: string
  id: string,
  title: string,
  author: string,
  published_at: string,
  thumbnail_url: string,
}

type Books = Book[]

const doGet = (e) => {
  // GET のパラメータ
  const authKey = e.parameter.auth_key

  // 認証 key が一致しない場合
  if (!authKey || authKey !== AUTH_KEY) {
    // GAS ではレスポンスの status code を設定できないため、text を返却している
    return createText('401 unauthorized. Invalid auth_key.')
  }

  // スプレッドシートのデータを全て取得
  const rows = findAll(SHEET_ID)
  // API で返却する値に変換する
  const books = rows.map(row => array2Obj(row))
  // JSONにする
  return encode(books)
}

const findAll = (sheetId: string): string[][] => {
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(SHEET_NAME)
  const lastRow = sheet.getLastRow()

  return sheet.getRange(2, 1, lastRow - 1, 7).getValues()
}

const array2Obj = (array: string[]): Book => {
  // カラムごとの値に名前をつける
  const [heading, event_name, id, title, author, published_at, filename] = array
  return {
    heading,
    event_name,
    id,
    title,
    author,
    published_at,
    thumbnail_url: `/book/thumbnail/${id}/${filename}`
  }
}

const encode = (data: Books): GoogleAppsScript.Content.TextOutput => {
  const json = JSON.stringify(data)
  const output = ContentService.createTextOutput(json)
  return output.setMimeType(ContentService.MimeType.JSON)
}

const createText = (text): GoogleAppsScript.Content.TextOutput => {
  const output = ContentService.createTextOutput(text)
  return output.setMimeType(ContentService.MimeType.TEXT)
}