はじめに

皆さんDevin使ってますか？

Devinは、開発タスクを支援するAIエージェントとして注目を集めています。単なるコード生成ツールではなく、開発プロセス全体をサポートする「AIソフトウェアエンジニア」として機能することを目指しています。

私は最近、社内開発リポジトリにDevinを導入し、実際のプロジェクトでの活用を始めています。GENEROSITYでは初めてのDevin導入だったため、試行錯誤や調査をしながら利用している状況です。
その過程で、Devinを効率的に活用するためのコツがいくつか見えてきましたので、本記事ではそれらの知見を共有したいと思います。

特に、「品質の高いアウトプットを得ること」と「コスト（ACU：AI Compute Unit）の節約」の二点が気になると思うのでここを主軸に話していきたいと思います。Devinの利用を検討されているエンジニアの方々にとって、実践的な指針となれば幸いです。

1. Devinのアウトプット品質に対する適切な期待値設定

Devinが出力するコードは、人間が修正することを前提に活用しましょう。

Devinの公式ドキュメントでも明確に述べられているように、現状のDevinはジュニアエンジニアレベルの能力しか持っていません。

Treat Devin like a junior engineer. Assign Devin tasks a junior engineer or intern could figure out if provided with sufficient, clear instructions.

（Devinをジュニアエンジニアとして扱いましょう。ジュニアエンジニアやインターンでも、十分かつ明確な指示があれば理解できるようなタスクをDevinに割り当てましょう。）

この点を理解することで、Devinに対する期待値を適切に設定できます。完璧なコードや解決策を求めるのではなく、基本的な実装や問題解決の土台となるコードを生成してもらい、それを人間が洗練させていくというアプローチが効果的です。

例えば、フロントエンド開発においては、既存の類似ページやデザイン画像、データ定義やUI表示順などの情報をDevinに提供し、それらを参考にした基本的なUIテンプレートを生成してもらうことが現実的なゴールとなります。

このようなゴール設定を人間側が明確に認識した上で、Devinに適切な指示を出すことが重要です。

実際に利用したプロンプト例

以下は、私が実際に使用したプロンプトの一例です（初期段階のものであり、必ずしもベストプラクティスではありません）：

○○のリニューアルプロジェクトでページの追加をやって欲しいです。 ○○という名前のページを作ってください。中身はcmsから取得した○○の記事一覧です。一ページには10個の記事が表示されます。ページネーションは○○/index.vueで利用している仕組みを参考にしてください。今回のページの型はtypes/○○.tsにあります。

このプロンプトに対して、Devinは既存の仕組みを応用した基本的な実装を提供してくれました。デザイン面では完璧ではなかったものの、機能的には十分な土台となるコードを生成できました。

適切な期待値を設定することで、Devinの出力に対する不満を減らし、効率的な協働開発が可能になります。

2. Devinの苦手な領域を理解する

Devinを効果的に活用するためには、その能力の限界を理解することが重要です。公式ドキュメントでは、Devinの制限事項として以下のような点が挙げられています。

大規模な課題への対応

Devinは一般的に、スコープが明確で小規模なタスクにおいてより優れたパフォーマンスを発揮します。複雑な編集や大規模な開発作業の場合は、プロジェクトを複数の独立したタスクに分割し、それぞれを独立したセッションで実行して連携させることが推奨されています。

複数のセッションを並行して実行する必要がある場合は、Devin APIを活用してセッションを作成し、構造化された結果をプログラムで取得することも可能です。

信頼性の問題

Devinは時に指示から外れた動作をすることがあります。場合によってはDevinを正しい方向に導き直せることもありますが、人間が開発環境で作業を引き継いだ方が効率的なケースもあります。

信頼性を高めるためには、最初のプロンプトで明確な完了基準を示し、Devinと協力して計画を立てることが効果的です。

UI関連の美観

Devinは機能的なフロントエンドを構築する能力を持っていますが、視覚的な美しさや細かいデザイン要素については人間の協力が必要です。公式ドキュメントでは「Devinは視力があまり良くない」と表現されています。

Devinの特性まとめ

これらの制限を踏まえると、Devinは以下のような特性を持っていると言えます：

大きな仕事を曖昧な指示で渡されると苦手
誤解に基づいて作業を進めてしまうことがある
デザイン面の考慮が不十分（フロントエンド開発における視覚的な洗練さに欠ける）

これらは、ジュニアエンジニアの苦手なタスクと類似していると個人的には考えています。

逆に言えば、以下のような対応をすることで、Devinからより良い結果を引き出すことができます：

タスクを小さく分割する
作業のゴールを明確に定義する
フロントエンド開発では完璧な仕上がりを期待せず、基本機能の実装に焦点を当てる

これらの特性を理解し、適切な期待値を設定することで、Devinとの効果的な協働が可能になります。

3. Devinへの効果的な指示の出し方

Devinを効率的に活用するためには、適切な指示の出し方が非常に重要です。ジュニアエンジニアに指示を出す場面を想像してみましょう。シニアエンジニアであれば「これをやっておいて」という簡潔な指示でも十分かもしれませんが、ジュニアエンジニアには前提知識や暗黙の了解が通じないことが多いものです。Devinも同様に、明確で詳細な指示が必要となります。

効果的な指示の条件

公式ドキュメントでは、Devinへの効果的な指示について以下のようなガイドラインが提供されています。

これらのガイドラインを要約すると、効果的な指示には以下の要素が含まれるべきです：

1. 前提知識（コンテキスト）の明確な提供

参考にすべきコードの場所や特定のファイル
参照すべき外部ドキュメントやウェブサイト
プロジェクトの背景や目的

2. 明確なゴール設定

何を達成したいのか
完成形がどのような状態であるべきか
期待される機能や動作

3. 成功条件の明示

テストが通ることを成功の基準とするなど、Devinが自己評価できる客観的な条件
これには事前にテストケースを準備しておくことが重要

4. タスクの適切な分割

シンプルで明確なサブタスクへの分解
一度に取り組むべき範囲の限定

指示改善の簡便な方法

毎回完璧な指示を考えることは容易ではありません。Devinには指示を改善するための機能が組み込まれています。画面右下にある「プロンプト改善」ボタンを積極的に活用することで、より効果的な指示へと洗練させることができます。

この機能を活用することで、指示の質を向上させ、Devinからより良い結果を得ることができます。

4. リポジトリのセットアップ

Devinを効率的に活用するためには、適切な指示の出し方に加えて、開発環境の整備も重要な要素となります。その一つが、リポジトリの適切なセットアップです。

リポジトリセットアップの重要性

Devinは基本的に、与えられたリポジトリに対して作業を行います。リポジトリが適切に設定されていないと、Devinは毎回環境のセットアップから始める必要があり、これは時間とコスト（ACU）の無駄につながります。

適切なリポジトリセットアップには以下のような利点があります：

環境構築の省略: Devinが毎回環境構築を行う必要がなくなり、本質的なタスクに集中できます
正確なパス指定: リントやテストの実行時に正確なパスを指定できるようになります
一貫性の確保: 複数のセッションでも同じ環境で作業できるため、結果の一貫性が向上します
ACUの節約: 環境構築にかかる計算リソースを削減できるため、コスト効率が向上します

5. Knowledgeの効果的な設定

Devinの機能を最大限に活用するためのもう一つの重要な要素が、Knowledge（ナレッジ）の適切な設定です。Knowledgeとは、Devinが開発時に参照するコンテキスト情報のことで、これを適切に設定することで、Devinの理解度と効率が大幅に向上します。

Knowledgeの重要性

Knowledgeを設定することで、以下のような利点が得られます：

プロジェクト固有の情報の共有: リポジトリにおける共通ルールやコーディング規約などを明示的に伝えることができます
繰り返しの説明の省略: 毎回同じ情報を指示に含める必要がなくなり、指示をより簡潔にできます
一貫性の確保: 複数のセッションでも同じ前提知識に基づいて作業できるため、結果の一貫性が向上します
ACUの節約: 基本情報の理解に費やす計算リソースを削減できるため、コスト効率が向上します

効果的なKnowledge設定の内容

効果的なKnowledge設定には、以下のような情報を含めることが推奨されます：

プロジェクトの概要: システムの目的、主要コンポーネント、全体アーキテクチャなど
コーディング規約: 命名規則、フォーマットルール、コメントポリシーなど
開発プロセス: ブランチ戦略、コミットメッセージのフォーマット、レビュープロセスなど
技術スタック: 使用しているフレームワーク、ライブラリ、ツールとそのバージョン
よくある問題と解決策: プロジェクト特有の課題とその対処法

Knowledgeの定期的な更新

プロジェクトは常に進化するため、Knowledgeも定期的に更新することが重要です。特に以下のタイミングでの更新が推奨されます：

新しい技術やライブラリの導入時
アーキテクチャの変更時
コーディング規約の更新時
新しいチームメンバーが加わった際の質問や混乱が多かった点

Knowledgeを最新かつ関連性の高い状態に保つことで、Devinの効率と出力品質を継続的に向上させることができます。

6. 実践：コツを適用した効率的なDevin活用例

ここまで説明してきたコツを実際に適用することで、Devinがどれだけ効率的かつ正確に動作するかを確認してみましょう。以下では、実際のプロジェクトで行った2つのタスクを例に、Devinの効果的な活用方法を紹介します。

前提条件と課題

これまでのDevin活用では、出力の品質には一定の満足を得ていたものの、各タスクで約4ACU（約1,160円相当）のコストがかかっていました。このコスト削減が喫緊の課題となっていました。

ACU（AI Compute Unit）とは、Devinの利用に関する計算リソースの単位で、タスクの複雑さや実行時間に応じて消費されます。効率的な指示とタスク設計により、このACU消費を抑えつつ、品質の高い出力を得ることが理想的です。

以下の2つのタスクを通じて、効率化の効果を検証します：

カルーセルスライダーからマウスでドラッグする機能を削除するタスク
特定ページにおいて初期表示時にボタンが表示されない問題の解決

課題1：カルーセルスライダーからマウスでドラッグする機能を削除

タスク設計のポイント

タスクの適切な分割：
機能削除という明確で小規模なタスクであり、適切に範囲を限定できています。
明確なゴールと成功条件の設定：
- ゴール：マウスでドラッグする機能の削除と、関連する不要な処理の切り分け
- 成功条件：テストによる検証（現状動作確認→コード修正→既存テスト失敗確認→新規テスト作成と成功）
コンテキストの明確化：
対象コード（Carousel.vue）を明示的に指定

実際のプロンプト

リポジトリに対して、
トップページのカルーセルスライダーエリアのドラッグ機能の削除と付随する不要な処理、変数の削除を行ってほしい。
対象となるコードはCarousel.vueである。

このタスクが成功しているかどうかは関数に対するテストで確認してほしい。
つまり事前に現状動くテストの作成と成功→コード修正→既存テストが失敗することの確認と、新規テスト修正と成功のフローで対応してほしい。

Devinの応答

適切な指示により、Devinはこのタスクを「信頼度：高」と評価し、以下のような分析を行いました：

重要なコード部分:
_ ドラッグ機能の実装 - ポインターイベントとドラッグ状態管理 Carousel.vue:71-75
_ ドラッグ関連の定数と変数 Carousel.vue:21-23
_ ドラッグイベントハンドラ Carousel.vue:252-295
_ ドラッグ中の位置更新関数 Carousel.vue:231-242
_ マウスカーソル追従機能 Carousel.vue:221-229
_ ドラッグ用のマウスサークル要素 Carousel.vue:472-478
計画:
現状の動作を確認するテストを作成
ドラッグ機能と関連コードを削除
既存テストで失敗を確認
新しいテストを作成して成功を確認
信頼度: 高
これからコーディングモードに移行し、まずテストを作成してから、ドラッグ機能の削除を実施します。

結果

実行結果は非常に良好でした。人間が少し修正すれば良い程度の小さなバグは残っていたものの、全体としては満足できる品質の成果物が得られました。

最も注目すべき点は、これまで4ACUかかっていたタスクが、わずか1.4ACUで完了したことです。タスクの複雑さに差はあれど、これは約65%のコスト削減に相当しますし、タスクに対する実装の正確性向上にも寄与します。

課題2：初期表示時にボタンが表示されない問題の解決

タスク設計のポイント

タスクの適切な分割：
問題解決を「調査フェーズ」と「修正フェーズ」に明確に分割しました。
明確なゴールの設定：
- 調査フェーズのゴール：問題の原因分析と表示されない理由の特定
- 修正フェーズのゴール：画面表示問題の解決
コンテキストの明確化：
対象コード（○○.vue）を明示的に指定

実際のプロンプト

調査フェーズ：

リポジトリに対して、
○○.vueのNuxtLinkが画面上に表示されない原因を調査し、画面上に表示されない理由を明確にして。
最も原因だと思われる部分を教えて。

修正フェーズ：

調査結果をもとに問題の解決案を実装して。

Devinの応答と結果

調査フェーズでは、Devinは「信頼度：中」と評価しながらも、問題の根本原因を特定しました：

○○.vueのNuxtLinkが表示されない主な原因:
NuxtLinkのCSSで`opacity: 0`が設定されている ○○.vue:376
_ アニメーション関連の問題で、リンクの不透明度が初期化されたまま
_ animate()関数が正しく実行されていないか、リンク要素のアニメーションが設定されていない可能性
GSAPアニメーションが`opacity`を1に変更していない
animateGallery()は実装されているが、リンク要素のアニメーションが漏れている ○○.vue:161-166
画像読み込み後のアニメーション処理にリンク要素が含まれていない ○○.vue:168-176
信頼度: 中
問題の根本原因は、NuxtLinkに`opacity: 0`が設定されていることです。アニメーション処理でこの値を1に変更する処理が正しく実行されていないようです。`animate()`関数内でリンク要素のアニメーション処理を追加するか確認してください。

修正フェーズでは、調査結果に基づいて解決策を実装しました。最終的な解決策は実装箇所に若干の誤りがあったものの、問題の特定と解決アプローチ自体は理にかなってはいました。

最も驚くべき点は、このタスク全体がわずか0.5ACUで完了したことです。これは一つ目のタスクよりもさらに少ないコストであり、失敗してもコストを気にせずに別アプローチに移りやすくなりました。

実践から得られた知見

これらの実践例から、以下の重要な知見が得られました：

適切なタスク分割の効果：
明確に範囲を限定し、小さなタスクに分割することで、Devinの理解度が向上し、ACU消費が大幅に削減されました。
明確なゴール設定の重要性：
何を達成したいのか、どのように成功を判断するかを明示することで、Devinの作業効率が向上しました。
コンテキストの明確化の効果：
対象コードを具体的に指定することで、Devinが無駄な探索を行う必要がなくなり、ACU消費が抑えられました。
段階的アプローチの有効性：
特に課題2では、調査と修正を分離することで、各フェーズでの集中的な取り組みが可能になり、全体の効率が向上しました。

これらの知見を活かすことで、Devinの利用コストを大幅に削減しつつ、品質の高い成果物を得ることが可能になります。

7. まとめ：Devinを効率的に活用するための戦略

Devinを効率的に活用するためのコツについて解説してきましたが、ここで、これまでの内容を整理し、Devinとの効果的な協働のための戦略をまとめます。

主要なポイントの振り返り

適切な期待値の設定：
Devinはジュニアエンジニアレベルの能力を持つAIであり、完璧なコードを期待するのではなく、人間が修正することを前提とした基盤となるコードの生成を目指すべきです。
Devinの特性理解：
大規模な課題、曖昧な指示、デザイン面の洗練さなどがDevinの苦手領域であることを理解し、それに応じたタスク設計を行うことが重要です。
効果的な指示の出し方：
前提知識の提供、明確なゴール設定、成功条件の明示、タスクの適切な分割など、ジュニアエンジニアに対するのと同様の丁寧な指示が効果的です。
リポジトリの最適化：
適切なプロジェクト構造、依存関係の管理、開発環境の設定などを整備することで、Devinの効率が向上します。
Knowledgeの効果的な設定：
プロジェクト固有の情報や共通ルールをKnowledgeとして設定し、定期的に更新することで、Devinの理解度と効率が向上します。
実践的なタスク設計：
実例で示したように、タスクの適切な分割、明確なゴール設定、コンテキストの明確化、段階的アプローチなどにより、ACU消費を大幅に削減しつつ品質の高い成果物を得ることが可能です。

Devin活用の最適化戦略

これらのポイントを踏まえ、Devinを最大限に活用するための戦略を以下にまとめます：

タスクの分解と明確化：
大きなタスクを小さく分解し、各サブタスクの目的と成功条件を明確にします。これにより、Devinの理解度が向上し、ACU消費も抑えられます。
段階的アプローチの採用：
複雑な問題は、調査→分析→実装→検証といった段階に分け、各段階で明確な指示を出します。
コンテキストの効率的な提供：
リポジトリの整備とKnowledgeの設定により、繰り返しの説明を省略し、指示を簡潔にします。
フィードバックループの確立：
Devinの出力を定期的に確認し、必要に応じて指示を修正・改善します。プロンプト改善機能も積極的に活用しましょう。
人間とAIの役割分担の最適化：
Devinが得意な基本実装はDevinに任せ、デザインの洗練や複雑なロジックの最適化は人間が担当するなど、適切な役割分担を行います。

最終的な効果

これらの戦略を実践することで、以下のような効果が得られました：

ACU消費の大幅削減：タスク自体は小さくなったため複数回実行する必要がでたものの、1実行につき、4ACUから0.5〜1.4ACUへ改善
品質の維持・向上：適切な指示により、修正や手戻りを最低限に抑え、高品質な成果物を得られるようになりました
開発効率の向上：タスクの明確化により、Devinと人間の協業をしやすくなりました。

Devinは強力なツールですが、その能力を最大限に引き出すためには、適切な使い方を理解し実践することが重要です。コツを抑えてよりよく使っていきましょう。

ではでは。

はじめに

1. Devinのアウトプット品質に対する適切な期待値設定

実際に利用したプロンプト例

2. Devinの苦手な領域を理解する

大規模な課題への対応

信頼性の問題

UI関連の美観

Devinの特性まとめ

3. Devinへの効果的な指示の出し方

効果的な指示の条件

1. 前提知識（コンテキスト）の明確な提供

2. 明確なゴール設定

3. 成功条件の明示

4. タスクの適切な分割

指示改善の簡便な方法

4. リポジトリのセットアップ

リポジトリセットアップの重要性

5. Knowledgeの効果的な設定

Knowledgeの重要性

効果的なKnowledge設定の内容

Knowledgeの定期的な更新

6. 実践：コツを適用した効率的なDevin活用例

前提条件と課題

課題1：カルーセルスライダーからマウスでドラッグする機能を削除

タスク設計のポイント

実際のプロンプト

Devinの応答

結果

課題2：初期表示時にボタンが表示されない問題の解決

タスク設計のポイント

実際のプロンプト

Devinの応答と結果

実践から得られた知見

7. まとめ：Devinを効率的に活用するための戦略

主要なポイントの振り返り

Devin活用の最適化戦略

最終的な効果

記事を書くにあたって参考にした公式サイト以外の文献