ChatGPTにプログラムを書かせよう

　AIが進歩すると、色々な職業がAIに仕事を奪われると言われていますね。

　私はIT屋で、システム開発を生業としているのですが、プログラマーもそのうち要らなくなると言われています。恐ろしいことだ...

　でもAIが台頭してくる流れは変えられないので、今からAIを上手に活用してAIがプログラムを組める時代になった時に、AIプログラマーをマネージングできるスキルを身に着けておくのもいいかもと思っています。時代の流れには逆らえんのじゃ～

　前回、ChatGPTとの対話でSVG形式のテキストファイルを出力してもらったので、今回はそのテキストファイルを実際にグラフィックとして出力するプログラムをやはりChatGPTに組んでもらおうと考えています

いきなりプログラム作れよ指示

　とりあえず作らせてみましょう。細かい調整は後々すればよいや...と考えていたのですが...

ChatGPTへの指示

JavaScriptで、テキストエリアにSVG形式のテキストファイルを張り付けて、「実行」ボタンを押すと、画面上にそのSVGのイメージを出力するプログラムを組んでください。

ChatGPTの応答

以下は、JavaScriptを使用してテキストエリアにSVG形式のテキストファイルを張り付けて、画面上にSVGのイメージを出力するプログラムの例です。

HTML:

html
<textarea id="svg-textarea"></textarea>
<button id="execute-btn">実行</button>
<div id="output-container"></div>

JavaScript:

javascript
const executeBtn = document.getElementById("execute-btn");
executeBtn.addEventListener("click", () => {
    const svgTextarea = document.getElementById("svg-textarea");
    const outputContainer = document.getElementById("output-container");

    // テキストエリアの値を取得し、SVG画像を生成する

      const svgText = svgTextarea.value;
    const svgImage = new Image();
    svgImage.src = "data:image/svg+xml;base64," + btoa(svgText);

    // 画像を表示する
    outputContainer.innerHTML = "";outputContainer.appendChild(svgImage);
});

このプログラムでは、execute-btnというIDを持つボタンをクリックすると、svg-textareaというIDを持つテキストエリアからSVGのテキストを取得し、output-containerというIDを持つ要素にSVG画像を表示します。btoa関数を使用してSVGのテキストをBase64エンコードし、data:image/svg+xml;base64,のプレフィックスを付けて、src属性に設定されたImageオブジェクトを生成しています。

このプログラムを使用するには、テキストエリアにSVG形式のテキストを貼り付けて、「実行」ボタンをクリックするだけです。

　あれ？まじで自分、必要？いや、必要です。これをちゃんとしたHTMLにまとめてサーバースペースにアップするという大事な役割が（焦り）
　提案されたものはパーツなので、そのままでは動きません。

　以下のようなHTMLファイルを作成しました。自分が入力したところは赤文字にしています。

作成したHTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.addEventListener( "load", () =>
{
const executeBtn = document.getElementById("execute-btn");
executeBtn.addEventListener("click", () => {
const svgTextarea = document.getElementById("svg-textarea");
const outputContainer = document.getElementById("output-container");

// テキストエリアの値を取得し、SVG画像を生成する
const svgText = svgTextarea.value;
const svgImage = new Image();
svgImage.src = "data:image/svg+xml;base64," + btoa(svgText);

// 画像を表示する
outputContainer.innerHTML = "";
outputContainer.appendChild(svgImage);
});
});
</script>
</head>
<body>
<textarea cols="160" rows="30" id="svg-textarea"></textarea><br>
<button id="execute-btn">実行</button>
<div id="output-container"></div>
</body>
</html>

修正は、HTMLとしての体裁を整えることと、テキストエリアの幅と高さを変更すること。テキストエリアとボタンが横並びで嫌だったので、改行<br>を入れたこと。だけです。

あとは、このファイルをサーバーにアップします（ローカルでChrome等にドラッグしても使えます）。

実行してみると...何も出ない？

F12でChromeのデバッガーを起動してみたところ、何やらエラーが...

エラーの内容「Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.」をググってみると日本語文字列を直接btoaかけるとダメ見たい。この辺りは作られたものの確認をきちんとしないとダメってことが分かりますね（AIに限らず、人間が作ったものでもテストは必須ですから）

ChatGPTへの指示

上記のコードだと、svgTextに日本語文字列が入っていた場合btoaでエラーが発生するんだけど

ChatGPTの応答

確かに、日本語を含むテキストをBase64エンコードするときには、UTF-8でエンコードする必要があります。そのため、以下のように、encodeURIComponent関数を使用してSVGのテキストをUTF-8エンコードし、Base64エンコードする必要があります。

javascript
const executeBtn = document.getElementById("execute-btn");
executeBtn.addEventListener("click", () => {
    const svgTextarea = document.getElementById("svg-textarea");
    const outputContainer = document.getElementById("output-container");

    // テキストエリアの値を取得し、SVG画像を生成する
    const svgText = svgTextarea.value;
    const svgData = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgText)));
    const svgImage = new Image();
    svgImage.src = svgData;

    // 画像を表示する
    outputContainer.innerHTML = "";
    outputContainer.appendChild(svgImage);
});

このプログラムでは、encodeURIComponent関数を使用してSVGのテキストをUTF-8エンコードし、unescape関数を使用して、エンコードされたテキストをデコードしています。その後、btoa関数を使用して、Base64エンコードを行います。最後に、data:image/svg+xml;base64,のプレフィックスを付けた文字列として、Imageオブジェクトのsrc属性に設定しています。

これにより、日本語を含むSVGのテキストをエンコードし、画像として正しく表示できるようになります。

これで解決です。JavaScriptの部分だけきちんとしたコードを出力してくれたので、その部分を丸っと差し替えます（赤が差し替えた部分）

作成したHTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.addEventListener( "load", () =>
{
const executeBtn = document.getElementById("execute-btn");
executeBtn.addEventListener("click", () => {
const svgTextarea = document.getElementById("svg-textarea");
const outputContainer = document.getElementById("output-container");

// テキストエリアの値を取得し、SVG画像を生成する
const svgText = svgTextarea.value;
const svgData = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgText)));
const svgImage = new Image();
svgImage.src = svgData;

// 画像を表示する
outputContainer.innerHTML = "";
outputContainer.appendChild(svgImage);
});
});
</script>
</head>
<body>
<textarea cols="160" rows="30" id="svg-textarea"></textarea><br>
<button id="execute-btn">実行</button>
<div id="output-container"></div>
</body>
</html>

今度はちゃんと動きました。

試したい人はこちらからどうぞ

まとめ

　AIが普及すればプログラマーは不要になる。あながち間違っていないかもしれません。ただ、現状ではAIをマネージメントする人が必要ですね。あとテスターやデバッガーなども今のところ必要ですが、ホワイトボックステストのマトリックス作ったり、関数のテストをしたりすることも現状のChatGPTで行えるかもしれません

　将来が楽しみと同時に恐怖も感じます。次回はChatGPTのお絵かきセンスを検証したいと思います。

このブログを検索

ChatGPTのある生活