ClineにNext.jsのプロジェクト改善をお願いしてみた / 20250321_reacttokyo_LT

Transcript

1. © 2019-2025 OPTiM Corp. All rights reserved. ClineにNext.jsのプロジェクト改善をお願いしてみた 2025/3/21(金)
2. © 2019-2025 OPTiM Corp. All rights reserved. 2 こんなアイコンでRimlという名前で活動してます(@Fande4d) 基本情報 自己紹介  名前: 高橋(Takahashi)  所属: 技術統括本部 プラットフォームサービス開発部  役職: フロントエンド リードエンジニア  入社: 2022年新卒  好き ◼ フロントエンド/技術散策/イベント参加 ◼ VTuber(ホロライブ)  やってること ◼ 製品: ⚫ OPTiM Asset(Nuxt3) ⚫ OPTiM サスマネ(Next.js) ◼ 有志活動 ⚫ デザインシステム、共通改善ツール作成 ⚫ 全社フロントエンドの相談窓口/コミュニティ作成 ⚫ 技術標準化活動(デザイン設計・実装)
3. © 2019-2025 OPTiM Corp. All rights reserved. 3 参考: https://zenn.dev/mizchi/articles/all-in-on-cline
4. © 2019-2025 OPTiM Corp. All rights reserved. 4 「魂が震えた」ポイント Clineがもたらす圧倒的なPDCA速 度は • 後回しにしていた作業の解消 • エンジニア不足 を補えるのでは？ 圧倒的なスピード感 人間の役割の変化 AIとの協働 安い？？ 早い？？ 美味い？？ 安い、早い、美味いを実現できるのでは？！ 人間がAIに指示を出す側に回ると いうパラダイムシフトによって • 本質的なタスクに集中 • リファクタリング/テスト作成 をAIに頼む のような並行作業が実現できより 効率よくなるのでは？ AIと人間が互いの得意分野を生か し協力することで • 新しい提案/より良い実装 • 学習コストの簡易化 のような相乗効果が出るかもしれ ない？
5. © 2019-2025 OPTiM Corp. All rights reserved. 5 記事を読んだ直後、「これは全部賭けるしかない！」とちょっと考えました。 しかし、冷静に考えると、いきなり全てをClineに託すのはリスクが高い ◼ 他にもAIツール系は複数ある ◼ 流れがめっちゃ早い ◼ 金額が未知数 ならばやることは「Clineの検証にお金を賭けよう！」でした。 まずは検証を通じてClineの可能性と限界を自分で体験することが重要だと考えました。 【補足】個人ではperplexity、v0、GithubCopilot、Cursorを利用しています。 全部賭ける？まずはプロジェクト改善でCline検証！ 希望 Amazon Bedrock Claude 3.7 sonnet Continue Cline VSCode PR Agent 想定 参考: • Amazon Bedrock • PR Agent • Continue 推測するな、計測せよ！
6. © 2019-2025 OPTiM Corp. All rights reserved. 6 Clineの設定 Roo Code(ルーコード)を導入 -> Codeモードを利用 Codeモード 生成や編集に特化。 ユーザーからの指示 に基づいてコードを 生成または修正しま す。 Askモード 質問や説明を求める 場合に使用。コード の内容や動作につい ての質問に答えます。 Architectモード アーキテクチャ設計 や設計タスクに使用。 プロジェクトの構造 や設計に関する提案 を行います Debugモード アーキテクチャ設計 や設計タスクに使用。 プロジェクトの構造 や設計に関する提案 を行います  .clinerules(AI支援ルールを定義する設定ファイル)の作成 ◼ 後述  .clineignore の設定(読まれたくないファイル)  メモリーバンクの設定(記憶を保持しようとする試みのファイル) ◼ 公式のプロンプトを利用し追記する形 -> Cline Memory Bank ◼ 日本語で返答するや実行内容の試行回数で再検討させるなど ◼ 覚えさせたいことを記述する 参考: • Cline • Roo Code
7. © 2019-2025 OPTiM Corp. All rights reserved. 7 結論
8. © 2019-2025 OPTiM Corp. All rights reserved. 8 結論 • コンポーネント単位改善(a11y等) • 純粋関数の抜き出しとテスト作成 • Reactの機能を利用した改善 • コンポーネントモックアップ • バグ修正/マイグレーション できたこと うまくいかなかったこと 難しかったこと • ページ単位の大きい範囲での改 善・リファクタリング • SC、CC、Composition Patternなど跨 いだものの改善 • 最新のCSSを活用してコンポーネン ト改善させる • TDD(テストを修正されてしまう) • Lighthouseスコア単位での改善 AIとの協働 圧倒的なスピード感 強く感じられた！ .clinerules不足？ MCPサーバ利用で解決しそう？ 元手の情報が少なかった故の問題？
9. © 2019-2025 OPTiM Corp. All rights reserved. 9 結論 • コンポーネント単位改善(a11y等) • 純粋関数の抜き出しとテスト作成 • Reactの機能を利用した改善 • コンポーネントモックアップ • バグ修正/マイグレーション できたこと AIとの協働 圧倒的なスピード感 強く感じられた！ 人件費よりは安い？ 早い！！ 美味い！ 早い、美味いは満たせてそう！ 人件費よりは圧倒的に安いが まあまあ高い、、
10. © 2019-2025 OPTiM Corp. All rights reserved. 10 検証内容
11. © 2019-2025 OPTiM Corp. All rights reserved. 11 修正依頼なし($5.8)+修正依頼($1.9)=$7.7(1,150円)  司令 (mizchiさんのailabの.clineをベースに作成) 1. Uithubでリポジトリをコード化してclineに読ませる 2. 自分のプロジェクトのコードを読ませる 3. Auto-approveで自動で進めさせて自分は別作業 4. AIがビルドコマンド叩いて.clinerulesを出力までして完了！  追加修正依頼 ◼ 無駄なファイル、コードも残っている ⚫ ルールないのでしかたない? ◼ 完了まで約30分、総ファイル: 12ファイル 計5000行ほど ◼ 必要ではないファイルの削除依頼(試行回数: 4回 $1.5) ◼ ファイル名に連番つけさせる($0.4) 検証1 : .clinerulesをClineに作らせる 後はまかせた！ 合計だよ 860円くらいかぁ これも直して〜 … 参考: • ailab • uithub
12. © 2019-2025 OPTiM Corp. All rights reserved. 12 単位が小さいため多少抽象的でも一発で成功できた  司令 1. Cardコンポーネント(@components/Card/)の読み込み 2. アクセシビリティ対応の指標の提示、URLの共有 3. いままでの仕様を変えないこと 4. 他にできることがあったらやってほしい旨 修正なし一発で成功  追加司令 1. 修正してもらったコンポーネント群のパフォーマンス改善依頼 2. 複数個表示される前提なので主にmemo化などしてほしい 3. 他にもReactの機能を駆使して対応してほしい 修正なし一発で成功 検証2: 既存のコンポーネントをアクセシブルにしてもらう Done! Done! メモ化とかして〜 アクセシビリティ対応お願い！ 完了したのだ！
13. © 2019-2025 OPTiM Corp. All rights reserved. 13 一部は成功するが、失敗、約束を破られてしまった  司令 1. 画面の機能コンポーネント(@features/Members/)の読み込み 2. 純粋関数は分離、煩雑な処理の削除、分離してテストを記述 ⚫ 分離、テストOK 3. 画面の読み込みが遅いのでReact機能を駆使して修正してほしい ⚫ useTransition、useActionStateを利用し改善 ⚫ 一部意味のないところをmemo化されてた ⚫ useEffectマシマシにされてしまった ⚫ URLと絞り込みを同期させる機能を消された ⚫ SC、CCのComposition Patternを崩された 4. Webpack Analyzer、Lighthouseの結果をベースに改善 ⚫ 無駄なSuspenseの削除、Skeletonローダの実装をしてくれた(LCP、CLS) ⚫ それっぽい処理を入れてくれたがそこまで変わらず(INP) ⚫ 画像等の処理はとくに変更なし 検証3: 画面単位の改善をしてもらう
14. © 2019-2025 OPTiM Corp. All rights reserved. 14 合計: $125.4429 → 約18,700円 ◼検証期間は5日間で計利用時間は10時間  コーディングメイン(AI駆動の成果物) ◼新規コンポーネント5個作成 ◼バグ修正5件 ◼ページ改善 失敗含め3件  利用しながら金額が見れるので自制はできる ◼Auto Approvedは運用を考えて対象を設定  疑似E2Eテストも込み (Tips) ◼ClineでもComputer Use機能が利用可能 ◼Token数/お金は食うが簡単なE2Eテストが可能 ◼Storybook Play Functions 風にAIを動かせる ◼URLを渡して命令するだけなのでページレベルも可能 検証: 結果
15. © 2019-2025 OPTiM Corp. All rights reserved. 15 感想
16. © 2019-2025 OPTiM Corp. All rights reserved. 16 感想 開発PDCAは高速に回してくれる 何をしているか察知が必要 解釈がズレた成果物を上げてくる ことが多々ある • Auto Approvedで 再考ループに 陥り結局解消ができない • Tokenを消費しすぎてしまう 知識を与えればAIは得意 何をやらせるかの判断は人 Next.jsやReactの新機能などの知識 も自身が知っていることで判断、 活用ができる • マイグレーション手段 • experimentalが外れたら移行 小さい単位であれば安く済む 明確に伝えられるかが重要 ミニマムにタスクを切ってあげる こと、やることやらないことを決 めてあげるとまあまあコスパ良い • コンポーネント、モック作成 • メモ化、React最新機能の活用 なんとなくAI活用フロー? タスク分割 明確な制約の設定 PDCA (AI) レビュー 情報の言語化 データソース 人が頑張る 基本レビュー体制 知識の重要性 タスク分割の重要性 負債陳腐化の改善 役割の一部委任 学習コスト削減
17. © 2019-2025 OPTiM Corp. All rights reserved. 17 最後に お金とToken使いすぎて申し訳ございませんでした
18. © 2019-2025 OPTiM Corp. All rights reserved. 18 ご清聴ありがとうございました！
19. © 2019-2025 OPTiM Corp. All rights reserved. 19