ChatGPTは自然言語による質問に対して、それっぽい答えを返してくれるAIです。自然言語同士の質問と回答の場合、合っていないことも多々あるのですが、ことプログラミングコードについては割と精度が高いように思います。

今回はこのChatGPTを使って、NCMBのデモアプリを作ってみました。コーディングは一切行っていません。

1回目

1回目のメッセージは以下の通りです。

NCMBのJavaScript SDKを使ってTodoアプリを作るサンプルコードを書いてください

できあがったコードは以下の通りです。requireを使っているので、Node.jsなどで動くものになるようです。

// Import the SDK
var NCMB = require("ncmb");

// Initialize the SDK with your application key and client key
var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

// Define the Todo class
var Todo = ncmb.DataStore("Todo");

// Add a new to-do item
var todo = new Todo({
  title: "Buy milk",
  completed: false
});
todo.save()
  .then(function(todo) {
    console.log("To-do item added successfully:", todo);
  })
  .catch(function(error) {
    console.error("Error adding to-do item:", error);
  });

// Get all to-do items
Todo.fetchAll()
  .then(function(todos) {
    console.log("All to-do items:", todos);
  })
  .catch(function(error) {
    console.error("Error fetching to-do items:", error);
  });

// Update a to-do item
todo.set("completed", true)
  .update()
  .then(function(todo) {
    console.log("To-do item updated successfully:", todo);
  })
  .catch(function(error) {
    console.error("Error updating to-do item:", error);
  });

// Delete a to-do item
todo.delete()
  .then(function() {
    console.log("To-do item deleted successfully");
  })
  .catch(function(error) {
    console.error("Error deleting to-do item:", error);
  });

2回目

上記のコードはUIがないので、ちょっとサンプルとしては使いづらいです。そこでWeb UIを作ってもらいます。

メッセージは以下を入力します。

HTMLのUIも作成してください

このように書くと、以下のコードが書かれました。かなりそれっぽいです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Todo App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ncmb@2.13.0/ncmb.min.js"></script>
</head>
<body>
  <h1>Todo App</h1>
  <input type="text" id="todo-title">
  <button id="add-button">Add</button>
  <ul id="todo-list"></ul>
  <script>
    // Initialize the SDK with your application key and client key
    var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

    // Define the Todo class
    var Todo = ncmb.DataStore("Todo");

    // Get all to-do items and render them in the UI
    Todo.fetchAll()
      .then(function(todos) {
        todos.forEach(function(todo) {
          $("#todo-list").append(`
            <li id="todo-${todo.objectId}">
              ${todo.get("title")}
              <button class="delete-button">Delete</button>
            </li>
          `);
        });
      })
      .catch(function(error) {
        console.error("Error fetching to-do items:", error);
      });

    // Add a new to-do item
    $("#add-button").click(function() {
      var todo = new Todo({
        title: $("#todo-title").val(),
        completed: false
      });
      todo.save()
        .then(function(todo) {
          $("#todo-list").append(`
            <li id="todo-${todo.objectId}">
              ${todo.get("title")}
              <button class="delete-button">Delete</button>
            </li>
          `);
          $("#todo-title").val("");
        })
        .catch(function(error) {
          console.error("Error adding to-do item:", error);
        });
    });

    // Delete a to-do item
    $("#todo-list").on("click", ".delete-button", function() {
      var todoId = $(this).closest("li").attr("id").split("-")[1];
      var todo = new Todo({objectId: todoId});
      todo.delete()
        .then(function() {
          $(`#todo-${todoId}`).remove();
        })
        .catch(function(error) {
          console.error("Error deleting to-do item:", error);
        });
    });
  </script>
</body>
</html>

3回目

ここで気になったのはNCMB JavaScript SDKのバージョンが2.13.0ということです。これは参考にしたコードが2.13.0だったのか、学習元データが2.13.0が最終版だった時代だったのかは不明です。

いずれにしても古いバージョンなので変更してもらいます。また、then/catchよりもasync/awaitの方が見やすいので変更してもらいます。

NCMBのライブラリバージョンを3.1.5にしてください。また、Promiseをasync/awaitに変更してください。

その結果が以下のようなコードです。NCMB JavaScript SDKのバージョンが変わっています。また、各関数がasync/awaitに書き換わっています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Todo App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ncmb@3.1.5/ncmb.min.js"></script>
</head>
<body>
  <h1>Todo App</h1>
  <input type="text" id="todo-title">
  <button id="add-button">Add</button>
  <ul id="todo-list"></ul>
  <script>
    // Initialize the SDK with your application key and client key
    var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

    // Define the Todo class
    var Todo = ncmb.DataStore("Todo");

    // Get all to-do items and render them in the UI
    async function fetchTodos() {
      try {
        var todos = await Todo.fetchAll();
        todos.forEach(function(todo) {
          $("#todo-list").append(`
            <li id="todo-${todo.objectId}">
              ${todo.get("title")}
              <button class="delete-button">Delete</button>
            </li>
          `);
        });
      } catch (error) {
        console.error("Error fetching to-do items:", error);
      }
    }

    fetchTodos();

    // Add a new to-do item
    $("#add-button").click(async function() {
      try {
        var todo = new Todo({
          title: $("#todo-title").val(),
          completed: false
        });
        await todo.save();
        $("#todo-list").append(`
          <li id="todo-${todo.objectId}">
            ${todo.get("title")}
            <button class="delete-button">Delete</button>
          </li>
        `);
        $("#todo-title").val("");
      } catch (error) {
        console.error("Error adding to-do item:", error);
      }
    });

    // Delete a to-do item
    $("#todo-list").on("click", ".delete-button", async function() {
      try {
        var todoId = $(this).closest("li").attr("id").split("-")[1];
        var todo = new Todo({objectId: todoId});
        await todo.delete();
        $(`#todo-${todoId}`).remove();
      } catch (error) {
        console.error("Error deleting to-do item:", error);
      }
    });
  </script>
</body>
</html>

他にもvarをconstに変えたり、jQueryを取り除くことも可能です。

デプロイしてみる

このコードをJSFiddleにデプロイしてみます。 YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY は自分のアプリのものと書き換えます。

リンク先で動作を確認できますが、ちゃんと動いているのが分かります。

まとめ

ChatGPTを使うことで、ちょっとしたデモアプリであればノーコーディングで作成できます。学習元になるコードが十分にないと難しいでしょうが、試してみる価値はあるでしょう。

SDKなどの使い方をGoogleで検索するのも良いですが、ChatGPTはいきなり動くコードが得られるのが便利です。

mBaaSでサーバー開発不要！ | ニフクラ mobile backend