[AI Coding Challenge] AIにジョークを言ってもらうアプリを作ってみた！

はじめに

毎日ひとつ、AIアプリをつくる。
日替わりでテーマに沿って小さなアプリを開発します。Claudeで。

この記事は AI Code Challenge Advent Calender 2025 の 12 日目の記事です！

11日目の記事：AIが提案してくれるやることルーレットアプリを作ってみた！
　 13日目の記事：音から音符に変換するアプリを作ってみた！

AI アプリ

概要

AIにもお笑いはわかるのだろうか？

AIにおもしろいジョーク言ってもらうアプリを作ろう！
お手並み拝見！

AI 実装

Claude Desktopでプロンプトを与えて実装してもらいます。

プロンプト：

AIがジョークをおしえてくれるアプリ
テーマを与えたら、AIがジョークを言ってくれる。

AIがジョークを生成してくれるアプリを作成しました！

完成したアプリ

できました！

　　 AIジョークメーカー

のリンクからアプリを確認できます

使い方：

• テーマを入力すると、AIがそのテーマに関連したジョークを日本語で生成
• おすすめテーマボタンで簡単にテーマ選択

こんなイメージです。

試しに「こども」をテーマにジョークを言ってもらいました。

プログラム解説

ポイントとなるプログラムを解説します。

const generateJoke = async () => {
  if (!theme.trim()) return;

  setLoading(true);
  setJoke('');

  try {
    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: 'claude-sonnet-4-20250514',
        max_tokens: 500,
        messages: [
          {
            role: 'user',
            content: `
「${theme}」というテーマで、面白いジョークを1つ考えてください。日本語で、短くて分かりやすいジョークをお願いします。ジョークだけを返してください。
`,
          },
        ],
      }),
    });

    const data = await response.json();
    const generatedJoke = data.content[0].text;

    setJoke(generatedJoke);
  } catch (error) {
    console.error('Error generating joke:', error);
    setJoke(
      'ジョークの生成中にエラーが発生しました。もう一度お試しください。'
    );
  } finally {
    setLoading(false);
  }
};

• ClaudeのArtifacts上でAnthropicのAPIを実行します。

response = await fetch("https://api.anthropic.com/v1/messages" ...)

• 生成AIのモデルは「claude-sonnet-4」です。

model: "claude-sonnet-4-20250514"

• こちらがClaudeが生成したユーザプロンプトです。

「${theme}」というテーマで、面白いジョークを1つ考えてください。日本語で、短くて分かりやすいジョークをお願いします。ジョークだけを返してください。

おわりに

• 何回か試してみると、意味のわからないジョークも生まれてくる。
• 暇つぶしにどうぞ。笑

AI で楽しいアプリ開発を！！

この記事は AI Code Challenge Advent Calender 2025 の 12 日目の記事です！

11日目の記事：AIが提案してくれるやることルーレットアプリを作ってみた！
　 13日目の記事：音から音符に変換するアプリを作ってみた！