どうもこんにちは、たくびーです。
弊社では生成AIを業務に取り入れる流れが活発です。
また、Roo CodeやChatGPT、Cursor等の生成AI使用に関して補助制度があるので気軽に使うことができます。
その中で今回はフロントエンドチームではどのように生成AIが使われているのか意見を募集してみました。
メンバーそれぞれが独自の使い方を試行錯誤しながら、日々の業務効率化に活用しています。
ここでは、実際の利用例や悩み、工夫した点についてご紹介します。
Cursorを使っているメンバーの使い方
まずはフロントエンドチームでCursorを導入している私を含めたメンバーの使い方についてご紹介しようと思います。
私の場合: Cursorを活用
主な使い方
-
インラインEditでのコメントやテストデータ作成
コーディング中に「このコンポーネントのTSDocを追加してください」や「このテストで使うテストデータを生成してください」といった手軽な編集作業に利用しています -
ChatペインでのAgent利用
壁打ち感覚で質問しながら、課題解決に向けたブレインストーミングで使用しています
リファクタリングの相談やエラー対応、テスト作成などはAgentをよく使います -
利用しているモデル
Sonnet系やGPT系の新しめのものを使用、最近はAgentでGemini2.5系を使うことが多いです -
Project Rulesの設定
独自ルールを設定することで、開発環境に合わせた最適な活用方法を模索中です。ルールの参考にしたのは以下のリポジトリです
Project Rulesのディレクトリ構成例
.cursor
└── rules
├── dev-rules
│ ├── directorystructure.mdc
│ └── technologystack.mdc
└── global.mdc
悩み
- Sonnet3.7ではProject Rulesがうまく反映されないため、切り替えが必要になっています
- プライベート環境にも同じ設定を引き継ぐ仕組みがなく、設定の同期に課題があります
まっくすさんの場合: Cursor、Devinを活用
フロントエンドの別のチームのメンバーです。
SlackのtimesチャネルでよくCursorの使い方を教えていただいています。
Zennのプロフィールは以下になります。
主な使い方
-
リファクタリングサポート
AIにコードのリファクタリング可能なポイントを指摘してもらい、見本のコミットをいくつか作成することで、そのスタイルを真似させる運用を実施しているとのことです -
単純作業の自動化
面倒な定型作業をAIに任せ、非同期で作業するツール（例：Devinなど）との連携を図るため、Cursorから細かく指示を出し、コンテキストを抽出してからツールに投げる運用方法を取り入れているようです -
コードの解説やポイントの質問
実装に踏み込んだアドバイスはあまり期待しておらず、あくまで細かい実装指示を中心に利用中
課題
- チーム全体での共通ルールの設定が浸透しておらず、ディレクトリ構成やテスト戦略、コーディングガイドラインといった標準化の推進が課題と言っていました
zukkieさんの場合： Cursorを中心とした多彩な用途
フロントエンドの別のチームのメンバーです。
個人開発をやっていたり業務での吸収力など見習うべき点がたくさんある方です。
Zennのプロフィールは以下になります。
主な使い方
-
モックデータの作成、ファイル名やテストケースの案出し
日々の開発で必要な案を次々と生成し、検討材料とする方法を取っているとのことです -
バグの特定や実装パターンの比較
異なる実装パターンの候補を複数提示してもらい、どれが最適か理由も含めて解説してもらうことで、学習効果も期待 -
自信のない実装のチェック
自身のコードに不足がないか、念のため確認するためにAIへ相談するケースも多い -
ライブラリアップデート
個人開発のアプリなどで、最新のライブラリアップデートをAgentに任せ、実際に試してもらうこともあるようです
課題
-
設定面の戸惑い
良いRules設定の方法や、RooCodeとCursorのAgentの使い分けがいまひとつ定まらないという点に課題があると言っていました
koyablueさんの場合： CursorとChatGPTをシンプルかつ効率的に活用
フロントエンドの同じチームのメンバーです。
同じチームなのですが、実はどのような使い方をしているのか知らなかったです。
今回その実態が知れたのはいい刺激になりそうです。
Zennのプロフィールは以下になります。
主な使い方(Cursor)
-
Tabキーによる補完を活用
モックデータ作成、テスト実装、ランダムテストケース作成、Storybookの実装、類似画面の再現、巨大な処理の分割、命名、実装の解説といった幅広いタスクをカバー -
大量の案出しからの取捨選択
適切な文脈と指示を与えることで、出力されたコードや案をそのまま使ったり、手直しして利用したりしているとのことです
主な使い方(ChatGPT)
- おしゃべり
-
文章のチェック
丁寧なSlackメッセージ作成や技術記事の要約、ライブラリのドキュメント読解、さらには自身のテックブログの添削などを依頼しているとのことです
Roo Code, Copilot, ChatGPTなど複数ツールを使い分けるハイブリッド運用
Cursorユーザーではないのですが、弊社でRoo Codeの第一人者と言っても過言ではない方の生成AIへの取り組みを紹介します。
zomysanの場合
フロントエンドの別のチームのメンバーです。
zomysanは、生成AIツールを複数組み合わせて利用している点が特徴です。
弊社でも活発に発信していて日々使い方など学ばせてもらっています。
Zennのプロフィールは以下になります。
Roo Code
使い方
-
モデル
Claude 3.5 Sonnetを使用 -
実装相談
命名やコンポーネント設計など、中規模なタスクから細かな実装依頼まで幅広く相談 -
モード切替とタスク管理
Cmd + . でモード切替えを行い、用途に合わせた柔軟なタスク管理を実践
感想
-
Good Point
頻繁にタスクを分割・指示することで、費用対効果が高く感じられるとのこと（1日稼働しても約10ドル程度）
VSCodeのエラー修正や、clinerulesの手直しなど、開発現場での手間を大幅に削減 -
Bad Point
VSCodeのアドオンゆえにUIの制約があり、一人で迷宮入りするケースも。作業中は別窓でのリアルタイムレビューが求められる場合もあるみたいです
GitHub Copilot
使い方
- 主にコード補完や、小さな手直しタスクの補助に利用
- Copilot Agent自体はまだ使いこなせていない状況とのことです
感想
- コード補完が時に余計な提案をする点や、選択肢が少ない点への不満があるようです。clinerulesのような柔軟なカスタマイズが可能になれば、より使いやすくなると言っていました
ChatGPT
使い方
- 全体的な技術相談や調査、ググるよりも迅速に情報を引き出すために利用
- 自分では検証が難しい実装に対して、第三者の視点を取り入れるためのツールとして活用されているようです
- 採用中のモデル
現在は「o3-mini-high」を信頼しており、適宜Deep Researchも使っているとのことです
ChatGPT中心のシンプル利用
シンプルにChatGPTのみの一刀流の方もいます。
実装が早い方なので生成AIに頼るよりも手を動かした方が良い場合もあるということですね！
steshimaさんの場合
同じチーム内のメンバーで古参メンバーの一人です。
今回は意見を募った時にはあまり活用できていないとのことでしたが、いつもコードの品質が高くレビューでは発見が多いです。
実はChatGPTを上手く使いこなしているのではないかと思っています。
Zennのプロフィールは以下のリンクです。
主な使い方
- アイディア出しや命名
新しい発想やプロダクト、変数名などの命名のアイディア出し - 設計関連（ただし、あまり実用的な結果が得られていない）
AIに設計案を聞くケースもあるが、あくまで参考程度に留まる - 情報収集と要約
技術のデファクトスタンダードやライブラリの使い方、Issueの内容要約など
課題
- コーディングアシスタントとしての活用がまだ十分にできておらず、「指示しても意図通りのコードにならない」ことが悩みとなっているようです。結局自分で実装した方が早いという場合もあると言っていました。
終わりに
私も含めてまだ使い始めて日が浅くツールを最大限に使えているとは言えないかもしれないですが、パブリックなSlackチャンネルで職能の垣根を超えて知見が蓄積されています。
また、チームでも生成AIへの関心が高いので、今はまだですがそのうちRuleの共有などをして個人的な使用からチームとしての使用に発展していくという流れもあります。
現在、様々な生成AIツールが出ては廃れてを繰り返していますが、積極的なチームメンバーが多いのでどんどんナレッジが溜まっていきとても充実した開発環境を構築しています。
Discussion