SSG___CSRで乗り切るiframe内ルーティング_AIコーディング拡張版_in_Funabashi.dev.pdf

Transcript

1. 自己紹介 社内システムを改修したり、インフラを作ったり、APIを生やしたり...etc 趣味：トンチキ技術グッズを作ったり 河村 直樹（@iwonder118） かわむら　なおき
2. グッズ①：Rustyなカニペンホルダー
3. グッズ②：Pug(Data dogの置物) ※余談：名前は「STRIKE JADE」Pug記法で JADE
4. グッズ新作！：ラバーDuckDB 上か見るとロゴに
5. SSG + CSRで乗り切るiframe内ルーティング in React Tokyo LT 2025/05/17 1. なんのために？ 業務系SaaS (ローコード/ノーコードプラットフォー ム) の機能的なカスタム限界 ・要望が出る 　　　↓ ・ローコード /ノーコードの範囲でなんとか対応して みる 　　　↓ ・とりあえずは納得してくれるが、画面構成上の都 合や業務 (ドメイン )などで細かいカスタムが必要に なる 　　　↓ ・カスタム画面を作るしかないか ...←ｲﾏｺｺ 大抵の業務系SaaSには外部リンク先をiframeで埋 め込める機能がある 2. どうやって？ ・ Next.jsでSSGして、それをホスティング ・１つのパスのページ内でクライアントコンポーネン トを切り替えてルーティング 3. メリット ・共通コンポーネントを使って、複数の SPA画面を作 れる (1つのパスで1SPA) ・基本はSaaSのAPIで取得したデータを状態管理で API呼び出しを削減 ・今後、画面自体が肥大化し、別システム化すると きのリスクヘッジ ・CI/CDのパイプラインの恩恵 (SaaS依存の外) 4. 気をつけるところ ・SaaS独自ライブラリが親ページと内部 iframeと通 信機能のグローバル変数考慮 ・CRSですべてやるがゆえの状態管理とレンダリン グ対策 今回のターニングポイントは 画面遷移で状態を持つかどうか
6. 8割(約2万行/1.5ヶ月)ぐらいをAI生成の Vibe Coding 1. 使ったもの ・v0 複雑な機能のコンポーネントがすぐに出力されるあ りがたみ (例：ソート機能を持ちつつ、カラムごとにドラッグア ンドドロップで並び変更ができるテーブル ) ・Cline (Anthropic 3.7) 言わずと知れたコーディングエージェント 2. 前提 ・画面のリプレース 生のJavascriptで作った画面(HTML 1000行、 JS 1500行 + Tailwind)はあった ・フロントエンドのスキル感 React、Next.js、TypeScriptは趣味で触っていて、 ジュニアに毛が生えた程度 3. 結果 ・useEffectまつり コンテキストに含んでいない state更新による循環更 新で無限ループクラッシュ ・重複コードの乱立 〇〇を参考にと言うとそのまま使い始める 生成された2万行ぐらいの内、20%ぐらいは減らせ られるのではないか Reactで書きたいのに元の Dom操作実装に引っ張 られる ・応答が遅い、金がかかる 生のJavascriptで作った画面をコンテキストとすると ウィンドウに収まらない 毎日5ドルを消費 合計で170ドル(2万円)ぐらい飛ん でった思い出
7. 良かったところ ・なんとか動くものが作れる 詰まらずになんとか動くものができた ・知らないことを取り組む自信 なんとかなるだろうという変な自信で、１歩目が踏み出しやすくなった プログラミングを始めたてのときの万能感 (が得られれるかも...?)
8. つらみ① ・初速は速いがそれを維持できない
9. つらみ① ・初速は速いがそれを維持できない AIが書いたコードの理解 得られた効果 プログラマのコード Anthropicから の請求金額 (本来するべきだった) コードのデザイン 設計 AI驚き屋の表現、約束
10. つらみ② ・Next.jsのnpm run devとの相性が最悪 上から順にすべて書き換えてくので、そのたびに走るビルド 落ちるコンテナ 負荷のかかるボリューム、I/O ・コミットのタイミングを見失う 〇〇画面と〇〇機能＋〇〇を修正みたいなコミットになってしまった ・理解していないコードのバグ修正 なんか知らないけど動いているコードの修正 意図していないところでバグが起きている モダンな構成なのにレガシーコードを修正している感覚
11. 工夫点 ・コンポーネントごとの適切な要件の切り出し 体感200行ぐらいが限度 1000行を超えると応答でファイルが途切れだして無限修正課金編 ・SSGのファイルを配信で回避 AIの修正後に毎回ビルド 小さい画面規模なのでなんとかなる (10秒程度)が今後、ここの待ち時間が増大するおそれ ・AIの書いたコードを無視する勇気 とりあえず動いてくれて、それ改修していきたい気持ちが強くなる (資産と錯覚する)が それよりも自分で制御できるところを増やす (AIのコーディング量)富豪プログラミング
12. 教訓 ・習った漢字は書けなくても、読めるし、日常生活で使う (感覚でのコーディングになっていく？） 　　....が、初めて見る漢字は読めないし、使えない ・コードの 3定(定置・定品・ 定量) 　最適なコードコンテキスト量の制御 (お金と精度 )のため 余談 朝9時過ぎにアクセスが多いのか、 APIのリクエストを受け付けなくなる