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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2019-2025 OPTiM Corp. All rights reserved. 2 こんなアイコンでRimlという名前で活動してます(@Fande4d) 基本情報自己紹介  名前: 高橋(Takahashi)  所属: 技術統括本部プラットフォームサービス開発部  役職: フロントエンドリードエンジニア  入社: 2022年新卒  好き ◼ フロントエンド/技術散策/イベント参加 ◼ VTuber(ホロライブ)  やってること ◼ 製品: ⚫ OPTiM Asset(Nuxt3) ⚫ OPTiM サスマネ(Next.js) ◼ 有志活動 ⚫ デザインシステム、共通改善ツール作成 ⚫ 全社フロントエンドの相談窓口/コミュニティ作成 ⚫ 技術標準化活動(デザイン設計・実装)

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 2019-2025 OPTiM Corp. All rights reserved. 4 「魂が震えた」ポイント Clineがもたらす圧倒的なPDCA速度は • 後回しにしていた作業の解消 • エンジニア不足を補えるのでは？圧倒的なスピード感人間の役割の変化 AIとの協働安い？？早い？？美味い？？安い、早い、美味いを実現できるのでは？！人間がAIに指示を出す側に回るというパラダイムシフトによって • 本質的なタスクに集中 • リファクタリング/テスト作成をAIに頼むのような並行作業が実現できより効率よくなるのでは？ AIと人間が互いの得意分野を生かし協力することで • 新しい提案/より良い実装 • 学習コストの簡易化のような相乗効果が出るかもしれない？

Slide 5

Slide 5 text

© 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 推測するな、計測せよ！

Slide 6

Slide 6 text

© 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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© 2019-2025 OPTiM Corp. All rights reserved. 8 結論 • コンポーネント単位改善(a11y等) • 純粋関数の抜き出しとテスト作成 • Reactの機能を利用した改善 • コンポーネントモックアップ • バグ修正/マイグレーションできたことうまくいかなかったこと難しかったこと • ページ単位の大きい範囲での改善・リファクタリング • SC、CC、Composition Patternなど跨いだものの改善 • 最新のCSSを活用してコンポーネント改善させる • TDD(テストを修正されてしまう) • Lighthouseスコア単位での改善 AIとの協働圧倒的なスピード感強く感じられた！ .clinerules不足？ MCPサーバ利用で解決しそう？元手の情報が少なかった故の問題？

Slide 9

Slide 9 text

© 2019-2025 OPTiM Corp. All rights reserved. 9 結論 • コンポーネント単位改善(a11y等) • 純粋関数の抜き出しとテスト作成 • Reactの機能を利用した改善 • コンポーネントモックアップ • バグ修正/マイグレーションできたこと AIとの協働圧倒的なスピード感強く感じられた！人件費よりは安い？早い！！美味い！早い、美味いは満たせてそう！人件費よりは圧倒的に安いがまあまあ高い、、

Slide 10

Slide 10 text

Slide 11

Slide 11 text

© 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

Slide 12

Slide 12 text

© 2019-2025 OPTiM Corp. All rights reserved. 12 単位が小さいため多少抽象的でも一発で成功できた  司令 1. Cardコンポーネント(@components/Card/)の読み込み 2. アクセシビリティ対応の指標の提示、URLの共有 3. いままでの仕様を変えないこと 4. 他にできることがあったらやってほしい旨修正なし一発で成功  追加司令 1. 修正してもらったコンポーネント群のパフォーマンス改善依頼 2. 複数個表示される前提なので主にmemo化などしてほしい 3. 他にもReactの機能を駆使して対応してほしい修正なし一発で成功検証2: 既存のコンポーネントをアクセシブルにしてもらう Done! Done! メモ化とかして〜アクセシビリティ対応お願い！完了したのだ！

Slide 13

Slide 13 text

© 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: 画面単位の改善をしてもらう

Slide 14

Slide 14 text

© 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を渡して命令するだけなのでページレベルも可能検証: 結果

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2019-2025 OPTiM Corp. All rights reserved. 16 感想開発PDCAは高速に回してくれる何をしているか察知が必要解釈がズレた成果物を上げてくることが多々ある • Auto Approvedで再考ループに陥り結局解消ができない • Tokenを消費しすぎてしまう知識を与えればAIは得意何をやらせるかの判断は人 Next.jsやReactの新機能などの知識も自身が知っていることで判断、活用ができる • マイグレーション手段 • experimentalが外れたら移行小さい単位であれば安く済む明確に伝えられるかが重要ミニマムにタスクを切ってあげること、やることやらないことを決めてあげるとまあまあコスパ良い • コンポーネント、モック作成 • メモ化、React最新機能の活用なんとなくAI活用フロー? タスク分割明確な制約の設定 PDCA (AI) レビュー情報の言語化データソース人が頑張る基本レビュー体制知識の重要性タスク分割の重要性負債陳腐化の改善役割の一部委任学習コスト削減