イントロダクション
こんにちは！YOKKO(よっこ)です。
Copilot Workspaceのテクニカルプレビューが使えるようになったため、ほとんどの実装をCopilot君に任せてFlutterでToDoアプリを開発してみました！
プロジェクトの準備
1.githubで空のリポジトリを作成
テキトーにリポジトリを作ります。
2.Flutterプロジェクトを作成してgithubにPush
サクッとプロジェクト作成してえいやと先ほどのリポジトリにプッシュ
flutter create to_do_app
cd to_do_app
git init
git add .
git commit -m "first commit"
git remote add origin [リポジトリのURL]
git branch -M main
git push -u origin main
Copilot Workspaceを使ってみる
1.指示の作成
右上の「Code」クリックし、「Copilot」のタブを選択。
ここに実行したい内容をつらつらと記載。
あんまり長いと一部の記載を無視されるかも
今回は下記のような指示内容を記載。
Flutterを用いてToDOアプリを作成します。
# 使用技術について
- プログラミング言語: Dart
- フレームワーク: Flutter
- データストレージ: SharedPreferences
# 機能一覧
- タスクの追加
ユーザーがタスクのタイトルと説明を入力し、リストに追加できるようにします。
- タスクの表示
追加されたタスクはリスト形式で表示されます。
各タスクには、タイトル、説明、作成日、完了ボタンが表示されます。
- タスクの完了
ユーザーが完了ボタンをクリックすると、そのタスクは完了としてマークされ、リストの下に移動します。
- タスクの削除
ユーザーがタスクを削除できるボタンを用意します。
- タスクのフィルタリング
完了したタスクと未完了のタスクをフィルタリングできる機能を追加します。
- データの永続化
アプリを再起動してもタスクが保持されるように、ローカルストレージ（SharedPreferencesなど）を使用します。
# 成果物
Androidアプリ
2.Brainstorm
「Start Task」で実行すると、現状の実装内容と実現するための方法が提案される。
そりゃ作ったばっかのプロジェクトだから何も実装されてないよ。
3.Plan
次に「Generate Plan」を実行すると、作成する具体的なファイルとその内容について箇条書きで出てくる。
この時、考慮するべき点に不足があれば、画面下の「Revise」から入力したり、各ファイルごとに実装内容を直接記載することも可能。（日本語でOK）
ちゃんと最初に言ったのに考慮できてないじゃん！ってことが多々あるので考慮不足はここで補ってあげよう。
4.実装
準備が完了したらいよいよ実装へ。「Implement selected files」をクリック！
すると右側に次々とコードが書かれていくではありませんか！
どんどん生成されていく様は、みているだけで痛快！！
なお、生成されたコードは直接編集することも可能！
では、作成されたコードを右上の「Create Pull Request」からPR作成してみましょうかね。
と思いましたが、作業用のブランチすら作ってないので、ブランチ作成してプッシュを実施。
なんとここでも「Generate description」で説明書は自動で生成してくれちゃう！
できたできた
動作確認
さてさて、出来上がったコードをエミュレータで動かしてみよう。
flutter run
あれ、右下に追加ボタンがあるけどうまく反応しないなあ。
というわけで改良を加えてみる。
本来はソースコードが自動生成された段階でしっかりコードも確認して、実装にも手を加えていくのが良いのでしょうが、その辺は今回すっ飛ばしました。
うまくいかない部分をIssueに記載して、Issueをcopilot君に見てもらう。
右下の「Open in Workspace」をクリックです。
先ほどと同じように順々に実行。
さて、実装が終わったので再度確認してみると、うまく動きましたね！！🎉
提案した機能もバッチリ動いてそう！
と、いうわけでCopilot Workspaceを使ってアプリを開発してみたのですが、開発スピードが格段に上がる予感がしますね。
Issue作成しておいてとりあえず実装進めさせてみるのでもいいかも。
どこまで精度が上がるのか、これからの進歩に期待！
参考