この記事のきっかけ
昔作ったGithub Pages、演算子オーバーロードを備えたJavaScriptをブラウザで実行できるものをよりよく実行できるものとしてTS Playgroundというものを教えてもらった。
さらにこれを自作できないかと聞くとその方法、技術スタックも教えてもらったのでそれを使って新しいGithub Pagesを作った。
その時のChatGPTとのやり取りなどを簡単に解説したい。
以前のものの問題点
やりたいことは演算子オーバーロードと自作の数値計算ライブラリをWebのTypeScript実行環境に組み込みたい。
また、昔のものは無理矢理やってる感も強く、CLIでの実行は完全に捨てていた。そこでCLI環境でのテストも組み込みたいと考えていた。
使っている技術
提案された技術
ViteとMonaco Editorというものである。
Monaco EditorはVS code風のブラウザで使えるエディタのようである。
とりあえずPlayground風のモックまではほとんど作ってくれた。しかしながら、ここに自分のやりたいことを取り入れようとすると自分の技術の理解不足もあってスタックすることになった。
またCLIツールなどを作りこみ始めるとそちらとの干渉もあり一度破綻してしまった、これはChatGPT任せにしていて一部ツールを誤認していたような節もあると思われる。
以前からあった技術
Babelプラグインによる演算子オーバーロードa + bをadd(a, b)のように変換。
困難だった点
作業フローが明確でなかった
JSでもTSでも演算子オーバーロードは出来ない、なのでBabelプラグインでASTレベルの変換をする必要がある。
それをどこに、TS → JS変換前か変換後かという問題があった。
また、ライブラリのビルドとテスト用スクリプトのトランスパイルがあった点もごっちゃになっていたと思う。
そこで、完成したフローが
- ライブラリビルド ---
calc_src/**/*.ts(演算子オーバーロード)->calc/**/*.ts(tsc)->modules/calc/**/*.js - テストスクリプト ---
public/test/**/*.ts(演算子オーバーロード)->temp/**/*.ts(tsc)->test-js/**/*.js
という風になった。
Web Page(Vite)設定
空のMonaco EditorのMockに関してはすぐに出してくれた。なのでここから開発を進めようとしたのが罠だった。よく知らないVite環境にBabelプラグインを入れようとするといろいろなものが破綻して崩壊した。
そこで、一度作り直して影響が少ないCLIツールから作り直そうとした。それが前章であり、そこでフローを見直すこととなった。
CLIツールが整備された後にWeb Pageに似たようなものを追加する際にもいくつかの問題が出た。
最も大きかったのは動的にコードを読み込んでトランスパイル、そして実行する、ということであった。
特に静的読み込み(事前に読み込んでおく)形ならimport/export形式が使えるが動的実行だとこの形式は使えずdynamic import形式const { a } await import "${url}"のような形式しか使えない。
そのためにWeb Pageでは静的importを動的importに変えるBabelプラグインも導入することになった。この、問題提言はChatGPTからもらい、この解決方法は自分で考えた、またプラグインコード自体はほぼChatGPTに書いてもらった。これは、その前に演算子オーバーロードのプラグインの情報を与えていた効果もあるかもしれない。
その他に、読み込み元がurlなのでローカルテストとデプロイ(今はGithub)で違うという問題もあったがこれもブラウザの${location.origin}を使うというかなりテクニカルな方法で解決(逃げて)いるが、これも私の方法である。
また、デプロイした際にライブラリの一部が見えない(404 not found)になるという問題もあったがこれもmainプロセスで参照されてないとの提言だった。これに関して公開ディレクトリpublicに置くという根本的方法は自分で提言した。
良かった点
- Vite+MonacoEditorの初期設定 --- ただ、お任せすると余計なものまでつけてくる
- Babelプラグインや単体CLIツール --- これはある程度しっかりやりたいことや他設定を伝える必要がある。
- エラーの原因提言 --- 原因については理解できるし概ね当たってる気がするが解決策は試行錯誤する必要あり
- JSコードをTSコードへの書き換え --- 時間があれば別記事にしたい
全体的な所感
よく使われているものの初期設定や単体ツールなどはかなりいい感じに作ってくれるがツール間の競合や干渉などに関しては自分でやる(決める)必要があると感じた。
あと、理解が浅いツールなどについてはきちんと聞いて理解を深める必要があると感じた。そのための手助けするツールとしてはものすごく有用だと感じた。
因みに新しいほうのREADME.mdとLICENSEはほぼほぼChatGPTで作られたものを流用している。少し、軽い感じはするが読みやすくて大変いいと思っています。