tools.gomiba.coをSveltekitで書き換えた

結論

移行前のVuexコード全体（src以下）で4000 - 5000行くらい。10ページくらい。計算のロジックはいっぱい。というアプリケーションを、トータル3時間でSvelteに移行した。

何をしたの？

最近Sveltekitを触ってみてめちゃくちゃ良かったので、勢いよくtools.gomiba.coをVuexから書き換えた。

とはいっても、書き換えの50%くらいはAIにまかせてみた。具体的には、Junieに任せてみた。Junieがどれくらい使えるものかわからなかったのでしっかり目のタスクでお願いした。

Junie - JetBrains のコーディングエージェント

Junieに移行タスクの依頼

最初に一言「このプロジェクトはVuexを使って実装したものです。Sveltekitの実装に置き換えてください」、あとは、Junieが勝手に仕事をするのを見るだけ。

• Sveltekitの初期化をしようとして失敗した
  • コードを全部backupに入れて解決してた
  • ライブラリの差分を確認して、足りない機能を自動的に追加していた
• レイアウト周りから移行して、各ページを1つずつ取り組んでいった
  • が、何かしらの制限に当たっているらしくて作業途中で停止する…
    • 「まだ作業が残っているようです。続きをお願いします」で解決
  • 方向性大丈夫だよね？を定期的に見れるという点ではありがたい
• スタイリングの指示まではしてなかったので、レイアウトがぶっ壊れてる
  • マテリアルデザインを使っているっぽいな？というのでいい感じのライブラリを探してきて当てようとはしてくれたんだけど、中途半端だった
• クレジットの謎
  • クォータが残り1/3くらいまでどんどん消費されていったけれど、そもそもどれくらいあって、1処理毎にどれくらい使うのか謎…
  • 見積もり出てくれると嬉しいな
  • 上位プランだとクォータが増えるぞ！とあるけれど、どのくらいになるのか不明
  • 作業前のプランニング、実際のコード生成、生成後のレビュー、結果のサマリ、みたいな順でAIリクエストしていそう
    • 結果のサマリは出さなくてもいいんじゃないか？その分コストが下がると…
• 動作はほぼ完璧だった
• 生成されたコードは一部古い記述があった
  • 具体的には $: とかLegacyAPIと書かれている機能を基本的に使っていた
    • https://svelte.dev/docs/svelte/legacy-overview
    • 知識が入ってないのかな？
  • 生成された後、ESLintの結果を確認しているっぽくて自動的に小さなミスは修正されていた
• 全部生成してもらうまで1時間くらいかなあ
  • 人力で1個ずつ確認してちまちまやってたらもっとかかってると思う

完璧な仕上がりではなかったので、残りは引き受けて細かいあれこれ対応

そうして全部一旦Svelteになったので、デザインの対応をしたり、細かいところをあれこれと。1-2時間くらいやって移行作業は完了した。

デザインはちょっと調べたらFlowbiteというのがよさそうだったのでこれをベースにした。

Flowbite Svelte - UI Component Library

マテリアルデザインだけどぶっ壊れた状態のコードをまるっと選択して、JetbrainsAIに「flowbite-svelteのコンポーネントに置き換えて」で1ファイルずつ対応していった。その後はTailwind使って微調整しただけで概ね仕上がった。

これ、結果としてはJunieでもよかったんだけど、クォータ消費されるばっかりで怪しい予感がしてしまった。

その他にも、例えばグラフはflowbite-svelteにはApexChartが付属しているので、これを使うように設定値を変換してもらったりもした。

ApexCharts.js - Open Source JavaScript Charts for your website

自分がやったのは、動作確認とか、微調整とか。コードは全然書いてないと思う。

感想: AIすげー

CursorとかDevinもそうであるように、動作するものがここまで勝手にできちゃうのはすごいなあ。

自分でやるよりも全然早いし、知識も豊富だし、同じ土俵ではもう無理だよね。いきなり職を失うことはないと思うけれど、人がやる強みをしっかりと持っていないと優位性アピールは難しそうだなあ。

例えば「AIの課金はXX円です。あなたを雇おうとするとXX+ZZ円になります。この差額であなたはAIと比べて何ができますか？」といった質問をされたときに、自分がどういう答えができるのかいまいちわからない。言語化の問題のような気もするけれど、明確に回答できるカードは持っておきたいな。

感想: いろいろなものが作りやすくなった

こういうの欲しいんだよなあ、こういうの作ってみたいなあ、とかとかの、これまでやりたかったけれどできなかったことに手が伸ばしやすくなってきたように思う。やってね、でしばらく待ってたら大体それっぽいのが出来上がっちゃうんだもの。

小さなアイデアの種を元手に、チャット系のAIを使ってブラッシュアップしたり、DeepResearch系のAIで競合優位性を考えたり、そこからコーディング系AIでアプリケーションを作って、デプロイして、世に送り出して。