Tweet
Tweet

Slide 1

Slide 1 text

シェアLT
 AIコーディングの取 り組み


Slide 2

Slide 2 text

C O N T E N T S 
 © INGAGE Inc. All Rights Reserved. 1. Cursor導入
 2. MCPの活用
 3. 効果
 4. 生産性...3倍になった？


Slide 3

Slide 3 text

© INGAGE Inc. All Rights Reserved. キムハンセ 
 
 株式会社インゲージ
 Vue.js・Ruby on Railsエンジニア
 
 開発生産性3倍プロジェクト　リーダー
 
 自己紹介
 プライベートではバンドやってます🎸


Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

© INGAGE Inc. All Rights Reserved. お客様からのお問い合わせを一元管理するサービス 


Slide 6

Slide 6 text

© INGAGE Inc. All Rights Reserved. 様々なツールに対応している 


Slide 7

Slide 7 text

01
 © INGAGE Inc. All Rights Reserved. Cursor導入


Slide 8

Slide 8 text

© INGAGE Inc. All Rights Reserved. 主な導入理由 ：企業の使用事例が多い
 →情報を得やすい、リスク管理しやすい
 
 その他よかったポイント 
 - Teamプランからはプライバシーモードが適用され、コードを学習しない
 - VSCode基盤のため乗り換えやすい
 Cursor 


Slide 9

Slide 9 text

© INGAGE Inc. All Rights Reserved. 約３ヶ月の間10名のエンジニアに試験運用
 
 生産性3倍チームを中心に、セキュリティの検証を行いながら、
 ルール設定やベストプラクティスの確立を行っている
 社内半分くらいが導入 


Slide 10

Slide 10 text

© INGAGE Inc. All Rights Reserved. CopilotのようにTabキーで
 AIにサジェストしてもらったものをどんどん入れられる
 
 エージェントと並ぶCursorのメイン機能
 Cursor Tabが有能 


Slide 11

Slide 11 text

© INGAGE Inc. All Rights Reserved. .cursorrulesをプロジェクト内に作って、必要な情報を渡すことができる
 
 Cursorは全コードにインデックスを貼る仕組みがあるため、
 ルールがなくてもかなり精度の高い回答が返ってくる
 ルール


Slide 12

Slide 12 text

© INGAGE Inc. All Rights Reserved. - Cursorの設定から不要モデルのチェックを外す必要あり
 - アップデート時に新しいモデルに自動でチェックが入ることがある 
 
 セキュリティ(一般ユーザー) 
 deepseekなどのモデルも選択肢としてある 


Slide 13

Slide 13 text

© INGAGE Inc. All Rights Reserved. - 生成AIは古いバージョンのライブラリーを推薦することがある
 - package.jsonで最新バージョンを使っているか見てくれる拡張機能導入 
 - .cursorrulesにライブラリーバージョンを最新にするように書いておく 
 - セキュリティに問題がある拡張機能・MCPを使わない
 - コードが学習されてしまう可能性があるため 
 - MCPはある程度公認されているものを使う 
 セキュリティ（一般ユーザー） 


Slide 14

Slide 14 text

© INGAGE Inc. All Rights Reserved. - 不正な言語モデルの使用
 - Cursorのダッシュボードで、ユーザーがどんなモデルを使用しているか確認可能 
 - 安全なMCPの選定
 セキュリティ（管理者） 


Slide 15

Slide 15 text

02
 © INGAGE Inc. All Rights Reserved. MCPの活用


Slide 16

Slide 16 text

© INGAGE Inc. All Rights Reserved. MCP(Model Context Protocol) 
 https://www.anthropic.com/news/model-context-protocol

Slide 17

Slide 17 text

© INGAGE Inc. All Rights Reserved. Langchainでもすでにツールはあった 


Slide 18

Slide 18 text

© INGAGE Inc. All Rights Reserved. Cursorはいいホスト 
 LLM ツール Thought Action Observation どんなツールを使う？ ツール呼び出し ツール呼び出した結果 cursorが担ってくれる MCPをつけるだけ

Slide 19

Slide 19 text

© INGAGE Inc. All Rights Reserved. MCPは全てをハブのように繋ぐ 
 https://medium.com/@jefferylee73/mcp-%E7%A0%94%E7%A9%B6%E7%AD%86%E8%A8%98-ead850439603

Slide 20

Slide 20 text

© INGAGE Inc. All Rights Reserved. 要するに、USB Type Cみたいな存在です 


Slide 21

Slide 21 text

© INGAGE Inc. All Rights Reserved. CursorがMCPを取り入れてから流行り始めた 
 https://trends.google.com/trends/explore?q=mcp&hl=ja cursorがサポートし始める

Slide 22

Slide 22 text

© INGAGE Inc. All Rights Reserved. PostgreSQL MCP 
 → 一番効率向上を体感しやすい 
 　スキーマ構造、レコードを元に回答してくれるのでかなり精度が高まる 
 LINE MCP
 →テストメッセージ送信などに使える 
 　ドキュメントを見ながらcURLを作る手間が省ける 
 Docker Desktop MCP 
 →コンテナの中で打つコマンドがある場合、Dockerを使ってくれる 
 　他のツールとの拡張性が高い 
 使えたMCP 


Slide 23

Slide 23 text

© INGAGE Inc. All Rights Reserved. Figma MCP 
 - MCPの動きとしては素晴らしい
 - ただ、Figmaの命名を開発上での単位に合わせて作っていないと見た目だけが同じ ものが出来上がってしまう
 Vue Developer Tool MCP 
 - Docker内のクライアントにうまくつながらず
 - フロントエンドに慣れていない人が使えたら便利そう
 - AIとの会話でコンポーネントをすぐ見つけることができる 
 試したMCP 


Slide 24

Slide 24 text

© INGAGE Inc. All Rights Reserved. GitHub Wikiの内容をローカルにCloneし、
 markdownファイルを読み込むMCPサーバー開発
 
 →今まで運用してきたwikiをMCPで使うことができる
 自作MCPサーバー 


Slide 25

Slide 25 text

03
 © INGAGE Inc. All Rights Reserved. 効果


Slide 26

Slide 26 text

© INGAGE Inc. All Rights Reserved. モノレポだったプロダクトからマイクロサービス化している途中
 
 ゼロから１を作るのに強いため、マイクロサービスの開発に向いている
 初見の人でもAIと会話することですぐ追いつけられる
 
 But, 別レポの内容を取り入れるための努力は必要
 （MCPで対応可）
 バイブコーディング 


Slide 27

Slide 27 text

© INGAGE Inc. All Rights Reserved. Claudeなどのツールを使うと会話の制限があったりする
 →オチを考えながら進めると脳のリソース使う
 
 一つのサービスに入ることで多様なモデルが使える
 
 
 月6000円でこれができる！
 生成AIチャットとしての活用 


Slide 28

Slide 28 text

© INGAGE Inc. All Rights Reserved. i18nでTypeScript、YAMLファイルの中に
 “// 要翻訳”のようにコメントを残したものを翻訳する仕組み
 
 機械翻訳だと、一般的な意味での翻訳はできるが、
 プロダクトの文脈を理解していないことが問題だった
 
 直接翻訳した時代に比べ、生産性10倍増加！
 翻訳


Slide 29

Slide 29 text

© INGAGE Inc. All Rights Reserved. CursorはVSCodeからforkしているものであるため、
 JetBrainのユーザーは乗り換えなければならない
 
 
 JetBrainでもWindSurfの拡張機能などは使えるものの、
 ネイティブに繋がっていないため限界がある
 JetBrain使えない 🥺


Slide 30

Slide 30 text

© INGAGE Inc. All Rights Reserved. - プロダクトが大きくなるとインデックスにメモリが使われる
 - 間違ったコードがレビューで見つからなかった時の手戻り
 - セキュリティ面を完璧には防げない
 
 副作用


Slide 31

Slide 31 text

04
 © INGAGE Inc. All Rights Reserved. 生産性、3倍になった...?
 


Slide 32

Slide 32 text

© INGAGE Inc. All Rights Reserved. 一人で3人分の生産性を生み出すことが目標
 
 しかし、客観的数値ではわかりにくい
 - 一番わかりやすいcommitとPRの数だけでは生産性の指標にならない
 - タスクも絶対的な単位ではない
 生産性の指標は？ 


Slide 33

Slide 33 text

© INGAGE Inc. All Rights Reserved. コミット数 


Slide 34

Slide 34 text

© INGAGE Inc. All Rights Reserved. - フロントエンドの方が使用回数が多い
 - フロントエンド開発者はCursor Tabの使用回数が圧倒的に多い 
 - 使われた言語はRubyが一番多い
 - 効率はバックエンドの方が高い？ 
 ポジションによってそれぞれ 


Slide 35

Slide 35 text

© INGAGE Inc. All Rights Reserved. サジェストの受け入れ率は50%を上回る 


Slide 36

Slide 36 text

© INGAGE Inc. All Rights Reserved. 3倍にはなっていないな... 🧐


Slide 37

Slide 37 text

© INGAGE Inc. All Rights Reserved. 実際の開発に大きな割合を占めているものは？
 - コードレビュー
 - 動作テスト
 
 → Devin・Copilot・Claude Codeなどを活用する
 3倍にするためにはどんなことが必要？ 


Slide 38

Slide 38 text

© INGAGE Inc. All Rights Reserved.