YovStudio

article 第 2 章:ざっくり伝えてみた

公開日: 2025-06-23著者: Yov in YovStudio

さっそく開発してみよう

さっそく AI と一緒に開発していきましょう。
この章では、思い描いたアプリを「ざっくり」AI に伝えてみたらどうなるかを試してみます。
結果として何が返ってきたか、どんな工夫が必要そうか、一緒に見ていきましょう。

用意するものは パソコン と ChatGPT(無料のプランでok) です。
ChatGPT は会話の履歴を活用できるので、できればサインインして使うのがおすすめです。

今回使うプロンプト

ここでいう「プロンプト」は、ChatGPT に送るお願いや指示のことです。 今回はこんなふうにお願いしてみました。

気分を記録して、カレンダーっぽい感じで色分けして
表示できるWebアプリって作れますか?
色の濃さで気分の違いを見せられると嬉しいです。
名前は MOOD TRACKER でお願いします!
あと、ダークモード/ライトモードの切り替えと、
テーマカラー(気分の色)の切り替え機能もつけてほしいです。

ChatGPT からの返答

10 秒前後で「コード」と「機能概要」、「今後の拡張提案」が返ってきました。
さすが AI、わずかな時間でこれほどの内容を返してくれるのは本当にすごいですね。

返ってきた内容は以下の通りです。

コード

コードは長いので折りたたんでいます。
コード内に含まれるコメントも含め、すべて ChatGPT が作成したものです。

コードはこちら
import { useState } from "react";
import { Calendar } from "@shadcn/ui/calendar";
import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import { Switch } from "@/components/ui/switch";
import { Sun, Moon, Palette } from "lucide-react";
import { format } from "date-fns";

const moodLevels = ["#d3e5ff", "#a4c8ff", "#5591ff", "#2b6eff", "#003cb3"];

export default function MoodTracker() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [moods, setMoods] = useState({});
  const [darkMode, setDarkMode] = useState(false);
  const [themeIndex, setThemeIndex] = useState(0);

  const handleMoodClick = (level) => {
    const key = format(selectedDate, "yyyy-MM-dd");
    setMoods({ ...moods, [key]: level });
  };

  const getMoodColor = (date) => {
    const key = format(date, "yyyy-MM-dd");
    const level = moods[key];
    return level !== undefined ? themeColors[themeIndex][level] : "transparent";
  };

  const themeColors = [
    ["#e0f7fa", "#b2ebf2", "#4dd0e1", "#00acc1", "#007c91"], // blue
    ["#f3e5f5", "#e1bee7", "#ce93d8", "#ab47bc", "#6a1b9a"], // purple
    ["#fbe9e7", "#ffccbc", "#ffab91", "#ff7043", "#bf360c"]  // orange
  ];

  return (
    <div className={darkMode ? "dark bg-black text-white min-h-screen" : "bg-white text-black min-h-screen"}>
      <div className="p-4 max-w-xl mx-auto">
        <div className="flex justify-between items-center mb-4">
          <h1 className="text-2xl font-bold">MOOD TRACKER</h1>
          <div className="flex items-center space-x-2">
            <Switch checked={darkMode} onCheckedChange={() => setDarkMode(!darkMode)}>
              {darkMode ? <Moon size={16} /> : <Sun size={16} />}
            </Switch>
            <Button onClick={() => setThemeIndex((themeIndex + 1) % themeColors.length)}>
              <Palette size={16} />
            </Button>
          </div>
        </div>

        <Calendar
          mode="single"
          selected={selectedDate}
          onSelect={setSelectedDate}
          modifiers={{}}
          modifiersClassNames={{}}
          modifiersStyles={{}}
          className="border rounded shadow"
          renderDay={(date) => {
            const bgColor = getMoodColor(date);
            return (
              <div
                className="w-full h-full rounded"
                style={{ backgroundColor: bgColor }}
              >
                {date.getDate()}
              </div>
            );
          }}
        />

        <div className="mt-6">
          <p className="mb-2 font-semibold">今日の気分を選ぶ:</p>
          <div className="flex space-x-2">
            {themeColors[themeIndex].map((color, idx) => (
              <button
                key={idx}
                onClick={() => handleMoodClick(idx)}
                className="w-10 h-10 rounded-full border-2 border-gray-300"
                style={{ backgroundColor: color }}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

機能概要

  • カレンダー表示:日付ごとに気分を記録
  • 気分の色分け:5段階の気分を色の濃淡で表示(青系、紫系、オレンジ系のテーマから切替可能)
  • ダーク/ライトモード切替:スイッチで即座に切替
  • テーマカラー切替:パレットアイコンでテーマカラーを変更

今後の拡張提案

  • データの保存(ローカルストレージ or Firebase)
  • コメント入力(気分の詳細メモ)
  • 月単位の統計可視化(グラフ)
  • モバイル対応のレスポンシブ調整

実際のやり取り

興味のある方向けに原文のリンクも載せておきますね。ただ、コード部分は ChatGPT の Canvas という機能で保存されているようで、リンクからは見ることができないようです。私の画面では、リンク先の「ドキュメントが作成されました」の部分にコードが表示されています。
実際のやり取りはこちら

思ってたのと違う…

さて、さっそくコードを実行しましょう。
── って React で書かれてるじゃん!しかも、Button などいくつかの実装がなくてそのままでは動かないし…

あちゃー、失敗しました。
「プロンプト」がざっくりしてたせいで、ChatGPT が「Web アプリか。じゃあ人気の React でも使っとくか。」といい感じに気を利かせてくれたのでしょう。

ですが、今回は「インストール不要 / ログイン不要 / すぐに動かせる」もアプリの仕様なので、これでは求めていたことができません。

それと、今回出てきた React のコードは、今回のテーマではないので理解できなくても大丈夫です。「Button の実装がなくてそのままじゃ動かない」も、「何か準備しないと動かないコードだったんだな」くらいの感覚で OK です。

もう少し具体的に「プロンプト」を作ろう

現時点で想定していることはなるべく「プロンプト」に混ぜた方がいいですね。特に、使用言語などの前提条件はしっかり伝えておくべきだということがよくわかりましたね。

次回はこの辺りを改善して再チャレンジしましょう!

補足:React ってなに?

今回、 AI が React(リアクト) という技術を使ったコードを返してきました。 React は、Web アプリをボタンやリストのアイテムといった色々な「部品ごと」に作れる道具のようなもので、Facebook や Instagram などの大きなサービスでも使われるほど人気もあります。

ただ、少しむずかしい内容なので、このシリーズでは登場しません。 「へぇ、そんな道具もあるんだな」くらいでOKです。

複雑な Web アプリを開発することになれば、こういった道具を使うこともあるでしょう。