クラウドサインのフロントエンドミーティングと、その勉強会で発表した話

こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の篠田 (@tttttt_621_s) です。 普段は Vue.js と TypeScript を使ってクラウドサインのフロントエンドの実装を担当しています。

本記事では、クラウドサインのフロントエンドミーティングと、その勉強会で実際に発表した内容を紹介いたします。

フロントエンドミーティングの内容

クラウドサインでは、フロントエンドに興味があるエンジニアで集まって毎週火曜日にバーチャルオフィスツールの oVice を使ってミーティングを行なっています。

ミーティングの内容は以下になります。

• 実装の相談や改善提案
• 技術情報の共有
• ぷち勉強会（隔週）

実装の相談や改善提案

各々が今担当しているタスクを進めるうえで困ったことの相談や、現状のクラウドサインの課題に対する改善提案を行なっています。

直近だと以下のような話をしました。

• v-on のイベント名も eslint で制御したい
• リポジトリによっては eslint の warning で CI 落ちるようになってるよ
• moment.js から date-fns に移行してるけど他にも良さそうなものあったら教えてね

技術情報の共有

各々が気になった技術記事を持ち寄って共有し知見を深めたり、クラウドサインにおいてプラスになりそうなものは実際に導入できないか掘り下げて議論しています。

技術共有のスレッド

最近共有があったものを一部紹介いたします。

• Bun is a fast all-in-one JavaScript runtime
• RedwoodJS: The App Framework for Startups
• Crypto.randomUUID() - Web APIs | MDN
• Reactivity Transform | Vue.js

ぷち勉強会

ぷち勉強会とは、ただ調べるだけではなくちょっとさわって味見するところまでやるというテーマで、毎回担当者がさまざまな発表をしています。

oVice でのミーティングの様子

最近は以下のようなテーマで発表がありました。この記事では、私が担当したときに発表した内容を共有いたします。

• Go 1.18 Release Notes を読んだ
• Chorme 拡張機能を作る ~ Vite を添えて ~
• Vite の scaffolding template を試してみた
• Fresh を試してみる

ぷち勉強会で発表した内容

概要

• Next.js 12.1 で On-demand Incremental Static Regeneration という機能が出たのでさわってみました
• 実際に作ったデモサイトは、API で麦わらの一味の中からランダムに 1 名の情報を取得し表示しています

{
  "date": "2022/04/25 10:47:30",
  "name": "モンキー・D・ルフィ",
  "img": "https://1.bp.blogspot.com/-tVeC6En4e_E/X96mhDTzJNI/AAAAAAABdBo/jlD_jvZvMuk3qUcNjA_XORrA4w3lhPkdQCNcBGAsYHQ/s400/onepiece01_luffy.png",
  "berry": "15億",
  "role": "船長"
}

今回作成したデモサイト

ISR: Incremental Static Regeneration

ISR とは

On-demand Incremental Static Regeneration の前に、ISR (Incremental Static Regeneration) を簡単に紹介いたします。

ISR とはサイトを構築した後、一定時間経過するたびにバックグラウンドでデータを検証しページを再生成する機能です。

ISR の動作例

ISR を行なっているデモサイトのコードは以下です。

import type { GetStaticProps } from 'next'
import { fetchData } from '../lib/fetch-data'

const Isr = ({ data }) => {
  return (
    // 略
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const data = await fetchData()
  return {
    props: {
      data,
    },
    revalidate: 10,
  }
}
export default Isr

getStaticProps に revalidate を追加することでそのページは ISR になります。

ビルド時にプリレンダリングされたページに対してリクエストが発生すると最初はキャッシュされたページが表示されます。その後、revalidate の値（今回は 10 秒）以内に行われたリクエストはキャッシュされたページが表示されます。

revalidate の値を過ぎた後も最初のリクエストではキャッシュされたページが表示されます。その時に、Next.js はバックグラウンドでページを再検証します。

ページの再検証に成功すると、Next.js はキャッシュを無効化し、更新されたページを表示します。もしバックグラウンドでの再検証に失敗しても、古いページは変更されず最後に正常に生成されたページが表示されます。

ISR の問題点

デモサイトの ISR のページでは、 revalidate の値を 10 に設定したのですべての訪問者が 10 秒間キャッシュされたサイトをみることになっています。つまり、サイトの情報に更新があっても一定時間古い情報が表示されてしまいます。

On-demand ISR : On-demand Incremental Static Regeneration

On-demand ISR とは

On-demand ISR とはデータが更新されたときなど任意のタイミングでページを再検証し更新できる機能です。ISR の問題点であった、一定時間古い情報が表示されてしまう問題を解決します。

On-demand ISR の動作例

On-demand ISR を行なっているデモサイトのコードは以下です。

import type { GetStaticProps } from 'next'
import { fetchData } from '../lib/fetch-data'

const OndemandIsr = ({ data }) => {
  const revalidate = () => {
    fetch('/api/revalidate')
  }
  return (
        <button onClick={revalidate}>
            Revalidate
        </button>
        // 略
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const data = await fetchData()
  return {
    props: {
      data,
    },
  }
}

export default OndemandIsr

pages/api 配下にページを再検証するための API ルートを作成します。

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    await res.unstable_revalidate('/ondemandIsr')
    return res.json({ revalidate: true })
  } catch(err) {
    return res.status(500).send('Error revalidating')
  }
}

デモサイトでは、Revalidate というボタンを押下したときに unstable_revalidate が呼ばれ /ondemandIsr といパスのページをオンデマンドで再検証しています。これにより、ボタンを押下すると新しい情報が表示され、それ以外はキャッシュされた情報を表示しています。

実際のユースケースでは、ドキュメントにもあるようにヘッドレス CMS のコンテンツが作成または更新された場合や、 E コマースのメタデータが変更された場合などが考えられます。

おわりに

クラウドサインで行なっているフロントエンドミーティングとその勉強会で実際に発表した内容を紹介いたしました。

私自身前職では、フロントエンドの話題でミーティングしたり、実際にプロダクトに導入できないか掘り下げて議論する経験がなかったので入社当初は良い意味でギャップを感じました。

ぷち勉強会では、普段の業務でさわる技術以外にもさまざまな技術のキャッチアップができ学びになっているので今後の継続していければと思っています。

Next.js の ISR や On-demand ISR は聞いたことある程度だったので、フロントエンドの技術的なトレンドをキャッチアップを兼ねて実際にさわってみることで理解が深まりました。

また On-demand ISR は発表当時 Beta だったのですが、先日リリースされた 12.2 で Stable になっています。個人的に作っているサイトでは ISR を採用しているのでこの機会に On-demand ISR を使ってみようかと考えています。

最後まで読んでいただき、ありがとうございました。

参考

• https://nextjs.org/docs/basic-features/data-fetching/overview
• https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
• https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta