いつも記事を読んでいただきありがとうございます！
モブエンジニア（@mob-engineer)です！

ChatGPTの有料プラン限定ですが、ChatGPT o3 high-mini（コード推論に特化したモデル）を使って、簡単なタスク管理ツールを作ってみたので記事化してみました。

プロンプト画面

プロトタイプとしてタスク管理ツールを作らせてみたいと思います。

プロンプト内容と推論に関しては以下の通りです。

生成コード

アウトプットした生成コードは以下の通りでした。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タスク管理システム</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 2rem;
    }
    input {
      padding: 0.5rem;
      font-size: 1rem;
    }
    button {
      margin-left: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      margin: 0.5rem 0;
    }
  </style>
</head>
<body>
  <!-- Vue アプリケーションのマウント先 -->
  <div id="app"></div>

  <!-- Vue 3 の CDN を利用 -->
  <script src="https://unpkg.com/vue@3"></script>
  <script type="module">
    // Vue 3 の Composition API を利用してアプリケーションを構築
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        // 新しいタスクの入力内容を保持する変数
        const newTask = ref('');
        // タスク一覧を保持する配列
        const tasks = ref([]);

        // タスクを追加する関数
        const addTask = () => {
          // 入力が空文字でなければ追加
          if (newTask.value.trim() !== '') {
            tasks.value.push(newTask.value);
            // タスク追加後、入力欄をクリア
            newTask.value = '';
          }
        };

        // 指定したインデックスのタスクを削除する関数
        const removeTask = (index) => {
          tasks.value.splice(index, 1);
        };

        // 必要に応じて追加のボタンや機能をここに実装できます

        // テンプレートで利用するデータ・関数を返す
        return {
          newTask,
          tasks,
          addTask,
          removeTask,
        };
      },
      // テンプレート部分（HTML）
      template: `
        <div>
          <h1>タスク管理システム</h1>
          <div>
            <input v-model="newTask" placeholder="新しいタスクを入力" />
            <button @click="addTask">タスクを追加</button>
          </div>
          <ul>
            <li v-for="(task, index) in tasks" :key="index">
              {{ task }}
              <button @click="removeTask(index)">削除</button>
            </li>
          </ul>
        </div>
      `
    }).mount('#app');
  </script>
</body>
</html>

1分くらいでコードが生成できました。
コードをhtmlファイルで保存し画面を見てみたいと思います。

画面イメージ

意外ときちんとしたアプリが実装できました。
タスクが追加されるか確認してみたいと思います。

テストタスクを追加

タスク追加、タスク削除機能は一応実装できていますね。

まとめ

ChatGPT o3 high-miniを触ってみた感想として、

生成時に推論状況を可視化しているため、生成の流れを理解できる
プロンプト技術を活用しなくてもそれなりのアプリは生成できそう
メソッド名・変数名についても可読性が高いものになっている

やはり、コード生成に特化したモデルということなので、いい感じのアウトプットを出してくれる印象を持ちました。そのうえで、脆弱性がコードに含まれる可能性については検証ができていないため、コーディングを全く理解していない方が利用するとやけどする可能性があると個人的に思います。（CDNの設定がURLべた書きなので、業務ではアウト）

そのうえで、1回のアウトプットだけでなく、**チューニングしながら利用していく（今回の場合、コード脆弱性についてもChatGPTに考えさせるなど）**が必要だと思いました。

個人的には、アプリケーションのプロトタイプ生成で役立つかなぁと思いました。

小ネタレベルの記事ですが、最後まで読んでいただきありがとうございました