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はいきなり動くコードが得られるのが便利です。