【Astro Actions入門】いいねボタンを実装する完全ガイド｜手順・コード例付き

import { defineAction } from 'astro:actions'
import { z } from 'astro:schema'

export const server = {
  getLike: defineAction({ // アクション名の定義 (このコードでは getLike)
    input: z.object({
      blogId: z.string() // Zod スキーマでのアクションの引数を定義 (このコードでは blogId)
    }),
    handler: async ({ blogId }) => { // アクションで実行される関数を定義
      // 処理の内容
    }
  })
}

Copy

---
---
<button id="like-button" data-blog-id={blogId}>いいね</button>

<script>
  import { actions } from 'astro:actions'

  actions.getLike({ blogId })

Copy

import { addLike } from './addLike'
import { getLike } from './getLike'

export const server = { // ファイルを分けて定義することも可能
  addLike,
  getLike
}

Copy

export const getLike = defineAction({
  input: z.object({
    blogId: z.string()
  }),
  handler: async ({ blogId }) => {
    // ID が blogId であるデータソースからいいね数を取得しそれを返す関数
    const blogResponse = await client.get({contentId: blogId}) // データソースに合わせて実装を変更してください
    const likeCount = blogResponse.like_count ?? 0
    return { likeCount }
  }
})

Copy

export const addLike = defineAction({
  input: z.object({
    blogId: z.string()
  }),
  handler: async ({ blogId }) => {
    // ID が blogId であるデータソースからいいね数を取得
    // いいね数を +1 し、blogId であるデータソースを更新
    // 新しいいいね数を返す関数
    const blogResponse = await client.get({contentId: blogId}) // データソースに合わせて実装を変更してください
    const newLikeCount = blogResponse.like_count + 1
    await client.update({ // データソースに合わせて実装を変更してください
        contentId: blogId,
        content: {
          like_count: newLikeCount
        }
      })
    return { likeCount: newLikeCount }
  }
})

Copy

 ---
/*
いいねボタンコンポーネント

上位コンポーネントから blogId を受け取る
blogId に対応するいいね数を Astro Actions で取得し、ボタンのテキストに表示
button がクリックされたら Astro Actions の addLike メソッドを呼び出し、いいね数を増やす
*/
interface Props {
  blogId: string
}

const { blogId } = Astro.props 
---

<button id="like-button" data-blog-id={blogId}>いいね: 読込中</button>

<script>
  import { actions } from 'astro:actions'

  const button = document.getElementById('like-button')
  const blogId = button.dataset.blogId

  // 記事のいいね数を取得してボタンに反映
  actions
    .getLike({ blogId })
    .then((like) => {
      button.innerText = `いいね: ${like.likeCount}`
      // ボタンのイベントリスナーにいいね追加処理を登録
      button.addEventListener('click', async () => {
        const beforeInnerText = button.innerText
        button.innerText = 'いいね中...'
        const addLikeRes = await actions.addLike({ blogId })
        button.innerText = `いいね: ${addLikeRes.likeCount}`
      })
    })
</script>

Copy

export const addLike = defineAction({
  // 入力値のバリデーション
  input: z.object({
    blogId: z.string()
  }),
  handler: async ({ blogId }) => {
    // 処理
  }
})

Copy

export const addLike = defineAction({
  input: z.object({
    blogId: z.string()
  }),
  handler: async ({ blogId }) => {
    try {
      // 処理の内容
    } catch (error) {
      throw new ActionError({
        code: 'INTERNAL_SERVER_ERROR',
        message: `内部エラー: ${error}`
      })
    }
  }
})

Copy