昔作った3DCGライブラリをAIで補完してnpmへ登録しました

はじめに
3DCGライブラリ登録へ
おわりに

はじめに

ちょっと前の記事の続きとなります。

はじめにこんにちは、今日は昔作ったJavaScriptライブラリをAIを使って補完しnpmへ登録しましたので、ちょっとその話をします。マイライブラリ元となるJavaScriptライブラリとは2013年あたりに作成を開始したSenkoというラ...

3DCGライブラリ登録へ

前回のまとめ

昔作ったSenkoJSというJavaScriptライブラリがあるのですが、当時npmやJSDocといったものを知らずに作っていたため、説明不足、ごった煮のような闇鍋状態になっていました。

2019年に大型のライブラリ

2023年には小型のライブラリ

とたまに一般公開できる形として抽出してnpmへ登録をしてきたのですが、中々大変で特に大型のライブラリについてはまだSenkoJS内部に取り残されており放置していました。

5月に転職して心に余裕が出てきたの、最新技術であるAIを使ってちょっとずつ公開作業を再開して中旬に3つ公開することができました。

3DCGライブラリ公開へ

あれから2週間かけて、取り残された機能の3DCGライブラリをようやくnpmへ公開することができました。

3DCG描写ライブラリ

これでようやくやり残していた1つの宿題が片付きすっきりしました。

AIの活用について

引き続き、前回の記事と同様のAI活用をしました。使用したのは ChatGPT4.1でプロジェクト機能を活用しています。プロジェクト機能ではファイルを20個までアップロードできるのですが、今回3DCG描写ライブラリは、ファイル数が30個ほどあったため、分けて部分部分で作成を進めていきました。

あと今回はARCHITECTURE.mdというのも作ってみました。指示は普通に以下のような１文です。

ARCHITECTURE.md を作ってください

以下のようなものを作ってくれました。

中身はざっとしか見ていませんが、だいたいあっているかと。本当は全てのファイルを入れて作成したかったのですが、ファイル数制限があるため、入れるファイルを分けて作成してみました。まあないよりましということでdocsの中に入れておきました。

あと「～というファイルのJSDocを作成してください」という指示の場合、内部のthis.hoge的なクラス内プロパティに対しては、一発でJSDocを作ってくれませんでした。なので後から追加要望を追加して作成していきました。

ファイル内に this から始まるプロパティについても JSDoc を作ってください

JSDoc以外にもサンプルコードについて、いつも通りコメントをつけ足してくれました。シェーダーについてもめちゃ詳しく作ってくれたので感激です。

JSDocについて

いつもdocs配下のファイルを何を使って作ろうかと模索しているのですが、ESDocは更新が停まってしまい、前回JSDocに切り替えていました。ただ、JSDocはtypeof 型を定義すると避けられないエラーが発生してどうしようもなくなるということで、やはり安定のESDocに戻しました。巨大なライブラリになると、結構複雑な型を使用するのでどうしてもESDoc出ないと表現ができないんですよね。

JSDocでエラーが出るパターン

以下のようなtypeof 型が構文エラーが発生する。

/**
 * TypedArrayのコンストラクタ型定義（Int32Array, Float32Array など）。
 * @typedef {(typeof Float32Array | typeof Int32Array)} S3GLTypedArrayConstructor
 */

ESDocの問題点

ただ実はESDocにも問題がありまして、数学ライブラリのkonpeitoを設計時に遭遇して解決はしたのですが、一応同じような型がいるかもしれないので解決策を展開します。

ESDocでエラーが出るパターン1

以下のような型定義について

@param {abd : ?(number|string)}

以下のエラーが発生します。

SyntaxError: Invalid regular expression: /[~](string$/: Unterminated group
at new RegExp (<anonymous>)
at ClassDocBuilder._findByName (\konpeito\node_modules\esdoc-publish-html-plugin\out\src\Builder\DocBuilder.js:117:20)

以下のように書き換えると回避できます。

@param {test : (?number|?string)}

\node_modules\esdoc-publish-html-plugin\out\src\Builder\DocBuilder.js を書き換えると発生しなくなります。

修正前

const regexp = new RegExp(`[~]${name.replace('*', '\\*')}$`); // if name is `*`, need to escape.
if (kind) {

修正後

const regexp = new RegExp(`[~]${name.replace(/[\(\)]/g, "").replace('*', '\\*')}$`); // if name is `*`, need to escape.
if (kind) {

ESDocでエラーが出るパターン2

以下のような型定義について

@param {function(integer, string): integer}

以下のエラーが発生します。

SyntaxError: Invalid function type annotation: `function(Array<Complex>): Array<Complex>`
at inner.split.map.v (\konpeito\node_modules\esdoc-publish-html-plugin\out\src\Builder\DocBuilder.js:675:39)

以下のように書き換えると回避できます。

@param {function(value : integer, name : string): integer}

\node_modules\esdoc-publish-html-plugin\out\src\Builder\DocBuilder.js を書き換えると発生しなくなります。

修正前

// e.g. function(a: number, b: string): boolean
matched = typeName.match(/function *\((.*?)\)(.*)/);
if (matched) {

修正後

// e.g. function(a: number, b: string): boolean
const is_function = typeName.match(/function *\((.*?)\)(.*)/);
let typeName2 = "";
if(is_function) {
    let prm_num = 1;
    const prm_rep = function(text) {return text + " prm" + (prm_num++) + ":"}
    typeName2 = typeName.replace(/\(|,/g, prm_rep);
}
matched = typeName2.match(/function *\((.*?)\)(.*)/);