📆

【Next.js】Google Calendar APIで日本の祝日を取得

2022/08/10に公開

Next.js

React

googlecalenderapi

tech

やりたいこと

自作カレンダーを作る上で、祝日表示が必要なので祝日マスタを取得したい。
色々ライブラリはあるが、今回はGoogle Caledarを使って取得することにする。

解決策

google-api-javascript-client のREADMEを見れば詳細はわかるので、細かい説明は割愛。Next.jsの場合どのように対応するかを記載する。

カレンダーIDとAPIキーを取得する
- カレンダーID：ja.japanese#holiday@group.v.calendar.google.com
- APIキー：GCPの認証情報から作成できる

_app.tsxでscriptタグをHeadに設置してAPIを読み込む

import { AppProps } from 'next/app'
import { ThemeProvider } from '@mui/material'
import { theme } from 'src/styles/theme'
import Head from 'next/head'

const MyHead = () => {
  return (
    <Head>
      <script src="https://apis.google.com/js/api.js" />
    </Head>
  )
}

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ThemeProvider theme={theme}>
      <MyHead />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

使用したいファイルで祝日データの取得

useEffect(() => {
    const gapi = (window as any).gapi
    gapi.load('client', () => {
      gapi.client
        .init({
          apiKey: apiKey, // 取得したAPIキー
        })
        .then(() => {
          return gapi.client.request({
            path: calendarApiUrl + encodeURIComponent(calendarId) + '/events',
          }) // 取得したカレンダーID
        })
        .then((response: { result: { items: any[] } }) => {
          const holiday: Date[] = response.result.items.map((item) => item.start.date )
　　　　　　　　　　　　    // 昇順に並び替え
          holiday.sort(function (a, b) {
            if (a < b) return -1
            if (a > b) return 1
            return 0
          })
        })
        .catch((reason: { result: { error: { message: string } } }) => {
          console.log('Error: ' + reason.result.error.message)
        })
    })
  }, [])

補足

<Head>は_document.tsxにも設置できるが、SSRのみの実行なのでクライアントサイドの処理は_app.tsxに記載する必要がある。

【Next.js】Google Calendar APIで日本の祝日を取得

やりたいこと

解決策

補足

参考サイト

Discussion