jQueryを外したい

    coffeescript javascript shogi chess cordova

    長年の懸案事項

    　スマホアプリのGUI作成時に安易に飛びついてしまったjQueryとjQuery-Mobileですが、外してVanilla.jsにしたいなぁと思いながらも長年放置していました。将棋・チェス関連アプリ作成当時、CUI版にCoffeeScriptを使ったことは今でも良かったと思ってますが、GUI作成時楽をするためにjQueryに手を出したことは後悔してました。
    　でも、生成AIを使えば一気に置き換えてくれるかもと期待して試してみました。

    まずはGrokで試す

    　無料版でも結構大きなサイズのファイルもアップロード出来ます（但し無料版の場合はファイル単位でアップロード出来ず、コピペ作業が必要です）。
    　ソースファイルと画像イメージをアップロードして「jQueryを外して」と依頼すると、すぐに簡略化された独自デザインのHTMLとCSSを作成してGUIのコードの修正に掛かりました。画面をレンダリングする処理はGameGUIクラスのdisplayメソッド一つに纏まってますが、独自に追加したイベントハンドラ類も全部jQueryを使っているので、それらを一発でエラー無くVanilla.jsに置き換えた時は「すごい！」と思いましたが、独自のHTML画面から始めてますのでその後が全然うまく行きません。特にソースをアップロードした時点で、こちらとしてはGrokがソースコードを把握しているような錯覚を覚えますが、範囲が広いのでソースの意味を把握しているはずもなく、見当違いのリファクタリングをして後戻りが多く手間がかかりすぎるんですよね。数時間奮闘しましたが、「こりゃ無理だ」と思い諦めました。
    　有料版だと違ってくると思いますが、たとえ生成AIを使っても既存のソースを修正するのは大変なのだと痛感しました。

    次はChatGPT

    　無料版ChatGPTだと1600行程の一つのファイルをアップロードするのもtoo longと言われてファイルサイズの制限に引っかかったので、ChatGPT Plusに課金して試しました。ChatGPT Goというもっと安いプランもありますが、入力ファイルサイズは無料版と変わらないそうです。
    　ChatGPT Plusでも最初Grokと同じようなアプローチを取ってきましたが、こちらの場合はHTMLのデザインそのものはこちらがアップロードしたオリジナルのHTMLデザインとほぼ同じものを出力してきました。しかしGrokと違って出力されたCoffeeScriptのコードはシンタックスエラーばかりで試しにブラウザ上で起動することも出来ません。

    
* 「いいところに気づきました。これは典型的な CoffeeScriptのインデント崩れです。」
* 「正直に言います。今の派生ファイル群は、もう局所修正で救える段階を超えています。」
* 「機械変換で壊れたコードがまだ多数残っている状態」
* 「gameGui.coffee 全体をもう一度アップしてください 」

    　開発言語がCoffeeScriptというマイナーな言語であることも原因なのかもしれませんが、自分でファイルを壊して出力しておきながら、上記のような発言をしてきて全然話になりません。特に構文エラー状態で何度も出力して来ることに呆れて、「これなら無料のGrokの方がマシじゃないか！」と思い、すぐに解約手続きをしました。

    再度ChatGPT、まるで人が変わった

    　Claude CodeでやってみようかとかGrokの有料版はどうなんだろうとか迷っていたところ、ChatGPT Plusは解約手続きをしても約一ヶ月は使えるようなので、思い直してもう一度ソースファイルとは別にpackage.jsonやpackage-lock.json等の環境ファイルもアップロードして「そちらでビルドエラーが出ないことを確認してから出力することは出来ますか？」と聞いて再度やり直したところ、

    これは「Vanilla に全面書き換えた完成版」ではなく、同じビルド環境でまず通しやすくする安全寄りの再出発版です。

    　と言って、初めてトランスパイルエラーが出ないソースを出力してきました。始めからこうやればよかったのかもしれません。
    　ただ、出力された中身を確認すると、こちらが全く想定していなかったやり方でした。jQueryを使ったソースをVanilla.jsに置き換えるのではなく、アプリが使っているjQueryの機能を代替する新たなクラスを新規作成して、jQueryを外すという目的を果たすやり方です。これはこれで「すごい！」と感心しました。まさかjQuery代替品を自作するとは！自分では全く思いつきませんし、思いついても作れないです。わすか200行程のクラス（ChatGPTはshimと呼んでました）を自分のアプリとVanilla.jsとの隙間を埋める部品（まさにshim）として追加することで、jQueryライブラリを使わずに済ませるという解決策には驚きました。
    　以下はChatGPTによるものです。

    jQuery → shimで代替済み
jQuery Mobile → 画面遷移だけ自前実装でOK

① このまま運用（おすすめ）
    安定してる
    修正少ない
    すぐリリースできる
② 徐々にjQuery依存を消す
    $('#x') → document.getElementById
    .on → addEventListener
👉 時間あるときに少しずつ

    　その後ChatGPTとのやり取りは２０回程？ありましたが、そのほとんどは見た目に関する修正で、コードの変更は僅かで済み、あっという間に完成しました。
    　ChatGPTもこれが最善でないことは分かっているようですし、もっと高額なプランならもしかしたらこういう一種の妥協？のような方法は取らずに一気にVanilla.jsに置き換えられるのかもしれませんが、自分にとってはこのやり方のほうが都合がいい面もあります。
    　既存のコードはほとんど修正する必要がないので新たなバグが入り込む心配がありませんし、複数の将棋・チェス関連アプリに対して同じようなしかも大量のコードを書き換える必要がなく、shimとそれ用のCSSさえ追加すればjQuery関連ライブラリ一式をプロジェクトから完全削除することが出来ます。

    切が良いので一気にアップデート

    　自分の将棋・チェス関連アプリは以前の記事の冒頭で書いたような処理を施して、若干の速度アップをしていたのですが、「わざわざ新しいバージョンとしてリリースする程の変更じゃないな」と判断して放置していたのですが、すべてのアプリを脱jQueryして順次アップデートしていこうと思ってます。
    　既にアプリを購入済みの方には新バージョンリリース時にBOOTHから通知が届くようにします。
    　今回は７七将棋アプリを対象にして脱jQueryを果たしたのですが、他のアプリの修正作業を始めると今回ChatGPTが作ってくれたshimでは不足する部分が出てくるかもしれません。その場合はその部分だけ自力でVanilla化しようと思ってますので、アプリによっては少し時間がかかるかもしれません。