AiSOUKO

Websim AIでTypeScriptは使える?

Websim AIにてAIによるTypeScriptのコード生成や編集は利用できるのかどうかについて検証&紹介しています。

TypeScriptは使える?

TypeScriptはJavaScriptのフレームワークになっており、本来Node.jsのnpm(Node Package Manager)を利用してインストールし、制作したコンテンツを公開する際は、通常はJavaScriptにコンパイルしたものを用意する必要があります。

Websim AIでは、ひとつのHTMLファイル以下でしか実装できませんので、TypeScriptファイル(.ts)を作成できませんし、コンパイルする機能もありません。

では、Websim AIでTypeScriptの開発は不可能かというとそうではなく「typescript.min.js」をHTMLで読みこんでTypeScriptコードをHTMLに記述、最終的にJavaScriptでTypeScriptコードをコンパイルして実行するという方法で利用することができます。

<html><head><base href="." /><meta charset="UTF-8">
<title>TypeScript Hello World</title>
 <!-- typescript.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.0.4/typescript.min.js"></script>
</head>
<body>
<div class="container">
    <div id="message" class="message"></div>
</div>

<script type="text/typescript">
    // TypeScriptのコード
    const message_text: String = "Hello, World";
    const messageElement: HTMLElement | null = document.getElementById("message");
    messageElement.textContent = message_text;
</script>

<script>
    // TypeScriptのコードをコンパイルして実行
    var tsCode = document.querySelector('script[type="text/typescript"]').textContent;
    var jsCode = ts.transpile(tsCode);
    eval(jsCode);
</script>

</body></html>

AIはTypeScriptの記述が不得意というわけではなく、むしろ得意分野だと考えられます。
実装環境下でTypeScriptをJavaScriptにコンパイルして設置すれば良いので、取り敢えずのTypeScript開発環境としては十分かもしれません。

ただ、AIによるコーディング支援はすでにコーディングの手助けをするという状態から、既に人が手直しする程度というレベルにまで迫ってきています。

TypeScriptは、人がコーディングしやすくなるフレームワークであるため、AIにとっては あまり関係ない部分かもしれません。
そうなると最初からJavaScriptで作成していっても問題ないようにも思います。