🎃
Devinを初見で試してみる〜登録からアプリ開発までDevinのはじめかた〜

2025/06/08に公開
 はじめに2025年4月に月額$20〜利用可能なCore PlanがGAされ話題のDevinですが、実際に試すのはなんとなく億劫で今まで全く触れていませんでした。
https://devin.ai/
この記事では、初見でこれからDevinを利用し始めようとしている私の日記的に記録していくことで、同じように始めるのが億劫になっている方の助けになればと祈っております。
それでは始めてみます。

 何をしてみるかDevinを触ってみる、と言っても何か目的がないと迷子になってしまいそうです。
ということでDevinに以下のようなWebアプリを開発してもらうこととし、その過程を記録したいと思います。

 作るアプリの要件ITエンジニア向けのWebアプリケーション
会員登録、ログインはなし
エンジニアが自身が持つスキルを簡単に表現できるアプリケーション
画面上の"+"ボタンをクリックするとスキル名を入力するフォームが表示され入力してEnterすると画面にカードのような形で表示が追加される（例えば"AWS", "Linux", "Python"など）
"+"を繰り返しクリックすることで好きな数のスキルのカードを追加することができる
カードには"-"ボタンが表示されておりクリックするとカードを削除できる
カードには5段階の、スキルレベルを表す5つの小さい矩形が横並びで表示されており、デフォルトは3である
スキルレベルの矩形セットの左側には"◁"、右側には"▷"のボタンが表示されておりクリックするたびにレベルが上げ下げできる
レベルは1から順に、"知っているレベル", "触ったことはある", "調べながら使える", "複数案件こなしたことがある", "人に教育できる" というレベルであり、レベルの矩形をマウスオーバーするとtooltipでレベルの説明が表示される
画面には並び替え用のボタンがあり、スキルレベル降順・昇順、スキル名降順、昇順で並び替えができる
コンテナで動くようにし、docker-comopse.yamlと起動手順を記載したREADME.mdを作ること
とりあえずローカルのブラウザで動けばOK
DBはとりあえず使わず、ブラウザのローカルストレージに保存しておくこと
ざっと思いつく限りの要件をあげてみました。

これをDevinにお願いして作ってもらいたいと思います。
デザインについては何も指示していません。

 まずアカウント登録https://devin.ai/
にアクセスし、"Get Started"をクリックします。
Sign Upをクリックします。

私は Continue with Google を選択し自分のGoogleアカウントでのログインを選択しました。
以下のような確認画面が表示されます。

最後の一文は
チームにGithubまたはGitLabアカウントがあることをご確認ください。私は実世界のリポジトリで作業するのが得意です。
です。確認し、"Confirm"します。
チーム名、会社名の入力を求められます。

個人なのでとりあえずpersonalとでもしておきます。
次にチームの規模を聞かれます。個人なので Just me で。
プランの選択です。Coreにします。
ACUという、Devinの処理量の単位をいくつ購入するか？が聞かれます。デフォルトは$20分で、2025年6月8日の時点では9ACUとなるようです。（10ACUだったはずなのに...）

そのまま数値は変更せずにPurchase ACUsをクリック。
支払いの画面になりました。
LinkというStripeの決済サービスが利用できます。

ちなみにLinkを使わずに支払うを選択した場合はクレジットカードなどが利用可能になりますので利用したい方法で。
支払い処理が終わるとまた下の画面に戻りACUの自動リロードをするか問われます。

青天井に請求されると怖いので、デフォルトのままoffにしておきます。

終わりのようです。Start using Devinをクリック。


 利用開始以下のようにGitHubとの連携を求められます。

Connect your work GitHubをクリック。
以下のようにGitHubとの連携設定画面になります。

所属会社のリポジトリを勝手に登録してしまわないよう、念の為個人のGitHubアカウントを新規で作成して、そちらに接続させます。

接続先ユーザが意図したGitHubユーザ名であることを確認し、Authorize Devin.ai Integrationをクリックします。

Devin.ai Integrationのインストールが求められます。

Installをクリックします。
また元の画面に戻ります。

GitHubリポジトリの選択になっていますがリポジトリを作っていないため何も表示されていません。

GitHub側で適当に今回のアプリ用のリポジトリを作成してきます。

skill-set-builderとしておきました。（Privateリポジトリ）
Devinの画面をリロードすると以下のように選択された状態になりました。

確認してAdd Selected Reposをクリックします。

次に以下の画面になります。

Slackへの接続が必要なようです。
Slackでも個人用のワークスペースを新規で作成しておきます。

Connect Slack Organizations をクリックします。

以下の画面になります。

内容を確認し、問題なければ許可するをクリックします。

Slackから確認コードがメール送信されるので入力すれば完了です。

元の画面に戻されます。

Link Userをクリックします。
すると、自動的にSlackでログイン中のユーザが反映されました。
次にCreate Slack Connect Channelをクリックします。

これはDevinのサポートチームとやりとりできるチャンネル？っぽいです。登録しなくても利用可能と思いますので飛ばしてもよいと思います。

すると以下の画面になるので、Slackの自身のユーザのメールアドレスを入力し、Get Inviteをクリックします。

Slack側の画面にリダイレクトされます。

利用するワークスペースのラジオボタンをクリックして次へをクリックします。

Slackチャンネルをパブリックにするかプライベートにするか選択し次へをクリックします。

ここでDevinとのチャンネルの名前を指定できるようです。

なんでもいいのでデフォルトのままにしておきます。

最後に内容を確認し問題なければチャンネルに参加するをクリックします。

するとサポート用のチャンネルが作成されそこへ招待されます。

元の画面に戻り、画面をリロードすると以下のようになります。

Invite Teammateのラジオボタンをクリックします。

すると他のメンバーを招待する画面になります。

単独利用なので、skip for nowをクリックします。

Jiraなどのプロジェクト管理ツールとも接続できるようです。

とりあえず不要なのでSkipをクリックします。


 開発を依頼やっと指示ができるようになったようです。
事前に作成していた、Webアプリケーションの要件を元に以下のように指示を入力してみます。

あと、ACUを無駄に消費しないように、自動テストは明示的に不要、としておきましょう。
以下の要件でITエンジニア向けのWebアプリケーションを開発してください。

 - ITエンジニア向けのWebアプリケーション
 - 会員登録、ログインはなし
 - エンジニアが自身が持つスキルを簡単に表現できるアプリケーション
 - 画面上の"+"ボタンをクリックするとスキル名を入力するフォームが表示され入力してEnterすると画面にカードのような形で表示が追加される（例えば"AWS", "Linux", "Python"など）
 - "+"を繰り返しクリックすることで好きな数のスキルのカードを追加することができる
 - カードには"-"ボタンが表示されておりクリックするとカードを削除できる
 - カードには5段階の、スキルレベルを表す5つの小さい矩形が横並びで表示されており、デフォルトは3である
 - スキルレベルの矩形セットの左側には"◁"、右側には"▷"のボタンが表示されておりクリックするたびにレベルが上げ下げできる
 - レベルは1から順に、"知っているレベル", "触ったことはある", "調べながら使える", "複数案件こなしたことがある", "人に教育できる" というレベルであり、レベルの矩形をマウスオーバーするとtooltipでレベルの説明が表示される
 - 画面には並び替え用のボタンがあり、スキルレベル降順・昇順、スキル名降順、昇順で並び替えができる
 - コンテナで動くようにし、docker-comopse.yamlと起動手順を記載したREADME.mdを作ること
 - とりあえずローカルのブラウザで動けばOK
 - DBはとりあえず使わず、ブラウザのローカルストレージに保存しておくこと
 - 自動テストの実装は不要
入力して、Cmd+EnterでSubmitします。
すると、以下のように警告が表示されました。

!Consider tagging a repository using @repo-name to help Devin understand your codebase context. Submit again to proceed anyway.
翻訳すると以下のとおりです。
!リポジトリを@repo-nameのようにタグ付けして、Devinがコードベースのコンテキストを理解できるようにすることを検討してください。とりあえず進めるには再度送信してください。
ということらしいので、先頭に@skill-set-builderと入力して再度Submitします。
すると、以下のDevinのブラウザのIDE画面に遷移します。

とりあえずこれは初回の案内ポップアップなので右上のXをクリックして閉じます。

画面表示は以下のようになっており、左側にファイルツリー、中央にDevinとのチャット、右側にエディタやターミナルが表示されています。

Devinが勝手にごうごうとアプリを開発してくれていっている様がリアルタイムに確認できます。

画面のプレビューも行うなど動作確認もしながら進めているようです。

数分すると以下のようにアプリケーションが完成したようです。通知が表示されました。

中央ペインのチャット部分を最下部までスクロールしてみます。開発が完了したようです。

なお、GitHubのリポジトリへのコミットやpushはまだ何もされていませんでした。

 いろいろ触ってみる画面右上のBrowserをクリックしてみます。

すると、アプリのブラウザプレビューが表示され、実際に操作可能になっています！
ちょっと試してみましょう。
スキルを追加してみます。

スキル名を入力してEnterを押すと、カードが追加されます。

カードの<や>ボタンをクリックすると、スキルレベルが上がったり下がったりします。

しっかりできてますね。

デザインもある程度モダンなものになっています。
なお、今回はブラウザでDevinに指示をしたためか、Slack側は何も通知は来ませんし変化はありません。

 ブラウザIDEも見てみる画面右上Browserの横にあるIDEをクリックしてみます。

以下のように、開発したコードを確認、編集もできるIDEが表示されます。


 GitHubへpushリポジトリへpushしてもらうには指示しないといけないのでしょうか？

チャットで指示してみます。
GitHubリポジトリへpushしてください。
権限がないと言われました。指示するときにわざわざ追記した @skill-set-builder のリポジトリ指示はなんだったのか。
リポジトリ作成後、以下の形式でURLをお知らせください：
https://github.com/username/skill-set-builder.git
とのことなので、お知らせします。
10秒ほど待っていると、リポジトリへのpushが完了したとの通知が表示されました。

GitHubを確認してみます。

pushされています。


 ACUの消費量は？settings->Usage & Limits をクリックすると、ACUの消費量が確認できました。

1.12 ACUを消費したようです。

今回は簡単なWebアプリケーションの作成だったため時間も数分以内で完了しました。

消費が多いのか少ないのか、まだよくわかりませんね。

 Slackからの利用せっかくなのでSlackからの利用も試してみます。

Slackとの連携設定をしたため、@Devinで指示ができるはずです。
やったことは以下の通りです。
Slackのワークスペースに適当に#dev-devinというチャンネルを作成
チャンネルにインテグレーションでDevinを追加（これは不要かも？）
チャンネル内で@Devinに指示を送信
すると以下のようにDevinからすぐに返信があり、処理が開始されます。

DevinのWeb画面を見に行くと、新しい処理が追加され、実行中のタスクが表示されています。
そして処理が終わるとSlackにレスがされ、次の指示待ち状態となりました。

今の質問のACU消費は？

1.35 - 1.12 = 0.23 ACUを消費したようです。

 感想など本当にDevinを初見で触り、登録からの手順をすべて記録してみました。
まだ全く機能の全容は掴めていませんが、ここまででも、従来のAgentを凌駕する驚きを感じることはできました。
仮想環境（VMかな？コンテナかな？）を利用した動作確認まで自動で行ってくれる
プレビュー機能も優れているためデザイン調整のやりとりも楽そう
今回試していないが処理中でも割り込みで指示が可能
ただあまりにも自動で進んでいくため、使い方には気をつけないとブラックボックスが量産されることになりそうです。
まさにAIを使いこなせるかどうかの、使う人の能力（PMなのかPdMなのか、エンジニアなのか）によって数倍〜数十倍も生産性、品質の違いが生まれそうです。
本当に少し試しただけなので、これから色々試してみたいと思いますが、ACUをあっというまに食い尽くしそう・・・
これからDevinを試してみたい方の参考になれば幸いです。