はじめに
みなさんこんにちは。インプルの岩崎です。
今週もDevinに関する記事です。ここ最近、Devinの記事ばかりですね笑。Devinの記事は、おかげさまでグイグイ伸びています。Devinの概要から知りたい！という方は、下記の記事からご覧ください。
今回やること
これまでは、Devinの得意機能や苦手機能、指示の出し方など、細かな機能ごとに記事で紹介してきましたが、プロジェクト的な開発をさせてきた記事は、あまりしてきませんでした。
そこで今回は、いくつかのタスクを通してひとつのツールを開発することをさせてみたいと思います。
今回は、「ひとことネタアプリSushi Say」を作っていきます。
その名の通り、全て今回のためだけの適当仕様です笑。テキストボックスに入力された文字が、送信を押すと表示される、という簡単なエコーAPIのシステムになります。
画面のデザインもこちらで準備するので、Devinにはフロントもバックもやってもらうことになります。
作って（らせて）みる
それでは早速順を追って作っていきましょう。
まずはフロントを作ってから、その後APIに関わる部分を作成し、最終的にそれらを結合して完成とします。
issue1 – TOP画面
まず最初に、TOP画面を実装してもらいます。
デザインカンプは、はい・・・。適当に作りました笑。流行りのグラデーションを入れながら、シンプルながら細かいところは難しくしてみました。これを下記のissueで指示を出します。
## Issue：『sushi say』 送信中画面を実装する
---
### 技術要件
- フロントエンドは**React + Vite**で実装
- スタイリングは**CSS Modules**で実装
- 状態管理は `useState`を使用（グローバル管理不要）
- 添付画像の画面サイズに合わせてレイアウトを調整
- ブラウザ使用を想定
---
### 前提
- この画面はTOP画面になります。
- 今回つくる画面の他に2画面（送信中 / 送信後）があります。
- 今回のissueでは、TOP画面のUI部分のみを実装対象とします。
- 次のissueで送信中画面・送信後画面を随時実装していきます。
- ボタンクリックや入力値の処理などは今後のフェーズで行います。
---
### 実装要件
- 添付画像のUI実装をしてください。
- サブタイトル「ひとことネタアプリ」を表示
- 画面上部に「sushi say」というタイトルを配置する
- プレースホルダー「まぐろ」のあるテキスト入力欄を1つ配置
- 「送信する」ボタンを配置
- 画面下部にコピーライト表記を配置
- 各要素は添付画像のデザインカンプに従う（色・余白など）
---
### 完了基準
- 添付画像で定義されたTOP画面UIと同じ見た目がブラウザで再現されていること
- テキスト入力欄とボタンが視覚的に配置され、クリック可能になっていること（機能はまだ不要）
- コードレビューを通過していること（Devin自身のセルフチェックでOK）
- localhostで確認可能な状態で GitHub にpushされていること（main or devブランチ）
---こうして出来上がったのが、こちらです。
概ね問題なさそうですが、フォントの太さやグラデーションの色合いなど、細かいところも修正をお願いしていきましょう。どれだけ修正できるでしょうか？
最終的に、ほぼ理想の状態まで仕上げてくれることができました。
画像からの認識では、微妙な色の変化には苦手なようですね。前回、Devinにデザインをやらせたときには、明らかに色が変わっていたので、色のミスがありませんでした。でも今回は微妙な変化だったので、このようになったのだと思われます。その際の記事もよろしければご覧ください！
issue2 – 送信中の画面
続いて、送信中の画面を実装してもらいます。
これがあることで、ちゃんと送れたんだなって分かって、UXが向上しますよね！（雑な画面ですが笑）
## Issue：『sushi say』 送信中画面を実装する
---
#### 技術要件
- フロントエンドは**React + Vite**で実装
- スタイリングは**CSS Modules**で実装（リポジトリー内にあるTOP画面の使用にならってください）
- 状態管理には `useState` か `useEffect` を使用（簡単な制御でOK）
- 添付画像の画面サイズに合わせてレイアウトを調整
- ブラウザ使用を想定
---
#### 前提
- この画面は「送信中」画面になります。
- 今回つくる画面の他に2画面（TOP画面 / 送信後）があります。
- 今回ののIssueでは、画面の見た目と「2秒後に次の画面へ遷移する処理」のみを実装対象とします。
- すでにTOP画面が実装済み。次のissueで送信後画面を実装していきます。
- この画面は、TOP画面で「送信する」ボタンが押された直後に表示される画面です。
---
#### 実装要件
- 添付画像のUI実装をしてください。
- 画面中央にテキスト「送信中・・・」を表示
- 画面下部にコピーライト表記を配置
- 各要素は添付画像のデザインカンプに従う（色・余白など）
- 「送信中...」画面がマウントされてから**2秒後**に、自動で送信完了画面へ遷移するよう`setTimeout` を使って制御する（仮のルーティングか画面切り替えでOK）
- この時点ではAPI通信などの実装は不要
---
#### 完了基準
- ローカルでこの画面が単体で表示され、「送信中...」の文言が中央に表示されること
- コピーライトが画面下部に表示されていること
- 表示後、2秒で遷移関数（例：`onComplete()`）が呼ばれること（遷移先は仮でOK）
- localhostで確認可能な状態で GitHub に push されていること（main または dev ブランチ）
---こちらもほぼ問題なく作ってきましたが、グラデーションが少し苦手なようです。パッと見赤ですからね、わからなくもない・・・。
ですが、カラーコードを指定して修正させたら、正しい表示になりました。完璧です！
issue3 – 送信後の画面
続いて、送信後の画面を実装してもらいます。
画面の実装はこれがラストですね。この画面では、最初に入力された文字がちゃんと反映されるか（この画面でいう、「まぐろ」の部分）や、TOPボタンで戻れるかどうかが肝になってきます！
## Issue：『sushi say』 送信完了画面を実装する
---
#### 技術要件
- フロントエンドは**React + Vite**で実装
- スタイリングは**CSS Modules**で実装（リポジトリー内にあるTOP画面の使用にならってください）
- 状態管理に `useState` や `props` を活用し、送信した内容を表示する
- TOPボタンには `onClick` などで画面遷移関数を割り当てる
- 添付画像の画面サイズに合わせてレイアウトを調整
- ブラウザ使用を想定
---
#### 前提
- この画面は「送信後」の画面になります。
- 今回つくる画面の他に2画面（TOP画面 / 送信中）があります。
- この画面は「送信中」の後に表示される画面です。
- すでにTOP画・送信中が実装済み。
- 次のタスクでAPI連携を実装していきます。
---
#### 実装要件
- 添付画像のUI実装をしてください。
- 画面中央にテキスト「送信されました」を表示
- 画面中央にテキスト「**TOP画面に入力し送信された内容のテキスト**（例：まぐろ）」を表示する
- 画面下部にコピーライト表記を配置
- 各要素は添付画像のデザインカンプに従う（色・余白など）
- 「TOP」ボタンを配置し、クリック時にTOP画面へ戻る処理を実行
---
#### 完了基準
- ローカルでこの画面が表示され、添付ファイルの画像が再現できていること
- 「TOPへ戻る」ボタンが機能していること（仮でもOK）
- localhostで確認可能な状態で GitHub に push されていること（main または dev ブランチ）
---３回目の画面実装だからか、グラデーションを覚えてきたようです。Devinの学習と成長が感じられますね。でも、「送信されました！」の字はちょっと大きくないか！？（ちゃんと修正してもらいました笑）
issue4 – APIの実装
さて、フロント側は完成したので、バック側を作っていきましょう。
以下のようにissueを作り、指示を出します。今回はAPIの作成のみで、フロント側との統合は特に記載はしていないのですが、この後事件が起こります・・・。
## Issue：API作成
---
### 技術要件
- Node.js（v18以降）を利用する
- HTTPの POST リクエストを受け付けるAPIを作成
- データは簡易的なログ出力（保存処理は不要）
---
### 前提
- クライアント（Reactなど）側のUIは「テキスト入力 → 送信」まで完成している
- 現時点ではバックエンドとの接続は行われておらず、APIが未実装
---
### 実装要件
- `POST /submit` エンドポイントを作成
- リクエストボディに送信されるJSON: `{ text: "まぐろ" }`
- この `text` を受け取り、サーバーコンソールに出力
- Devinが適切な構成でAPIコードを新規作成すること
- ローカルで動作確認できる簡易的なサーバーとする（永続化は不要）
- CORS設定など、フロントエンドからの接続を許可する設定を含める
---
### 完了基準
- ローカルで起動可能なAPIサーバーが存在する
- `/submit` エンドポイントに `POST` リクエストを送ると、送信された `text` がサーバー側で確認できる
- フロントエンドからこのAPIにアクセスして通信できる状態になっている
- Devinが生成したコードがGitHubにPushされている
---真面目なDevinくん。なんと、フロントエンドとの連携までやってしまったようです。
動作確認のために必要だと判断すると、善意でフロントまで手を出してしまうことがよくあります。結局この後のissueでは、フロントエンドとの連携までやるので良いものの、ちょっと先走る時がありますね笑
issue4 – APIの実装（TDD編）
さて、気を利かせてAPIの連携まで作ってしまったDevinくんですが、意地でも統合まではさせたくない、バックエンドだけでいいんだ！という人には、前回の記事で紹介したテスト駆動開発（TDD）での指示がおすすめです。
これであれば、バックエンドだけを作れ！という指示になりますので、フロントまではやってくれないはずです。以下のissueを読み込ませて、作業を進めてもらいます。
## 技術要件
- バックエンドは [Node.js / Python / 他] を使用
- 使用フレームワーク: [Express / FastAPI など、必要に応じて明記]
- テストフレームワーク: [Jest / Pytest など、明示してもOK]
## 前提
- APIは `/say` というエンドポイントをPOSTで受け付ける
- 入力されるデータは日本語の単語または短文（例: "まぐろ"）
- 入力内容をそのままレスポンスとして返す簡易なエコーAPI
## 実装要件
- `POST /say` というルートを作成
- リクエストボディはJSON形式で、キーは `"text"`
- レスポンスは同じ形式のJSONで、受け取った `"text"` を返す
- 空文字・未指定など不正な入力にはエラーレスポンスを返す（ステータスコード400）
## テスト要件
以下の条件を満たすテストを、最初に定義してください。
1. 【通常の入力】
- ユーザーが「まぐろ」と入力して送信すると、同じ「まぐろ」という内容が返ってくる。
2. 【何も入力しない場合】
- ユーザーが入力欄を空のまま送信すると、「入力が必要です」といったエラーが返ってくる。
3. 【textという項目がない場合】
- 送られてくる内容に「text」という情報が含まれていなかったら、エラーを返すようにする。
## 完了基準
- 上記すべてのテストをパスしている
- テストコードと実装コードがPushされている
- Devinが作成したファイル・処理内容について要約がコメントされているしかし、このような指示でも、フロントと統合するか聞いてきました！（どこまで気が利く？やつなんだ！）
このDevinくんは、knowledge機能でissueを渡された際に、いきなり作業を始めずに、まずは作業内容を確認してプランを立てるようにしています。なので、このknowledgeがなければ、先ほどと同じように作業をしていた、ということですね。
完成！
さて、大きく分けて５回の作業（結局Devinの善意で4回になりましたが・・・）が終わりました。
無事にフロント + バックの実装ができたようです。さすがDevinですね。
作ってくれたコードはGitHubに入っていますので、ぜひご覧ください。
まとめ
さて、今回は簡単なフロントエンドとバックエンドをDevinで一括してやらせてみました！
参考までに、各タスクの消費ACUとそのトータルを載せておきます。もちろん、修正の度合いや作業終了からの反応スピードによって、前後はあると思いますので、本当に参考値としてどうぞ！
| タスク名 | フロント / バック | 消費ACU |
| TOP画面作成 | フロント | 3.52 |
| 送信中画面作成 | フロント | 2.36 |
| 送信後画面作成 | フロント | 1.66 |
| エコーAPI作成 + フロントと統合（通常） | バック | 1.98 |
| エコーAPI作成 + フロントと統合（TDD） | バック | 1.14 |
ここまでご覧いただき、ありがとうございました！