KENTEMでフロントエンドを担当している S・K です。 前回の記事では、Teamsのリアクション情報を集めるためのデータ収集を行いました。
今回はその続きとなる「アプリ実装編」です。収集したデータを使って、実際にアプリを形にしていきます。
はじめに
はじめに 前回収集したデータを用いて、「社内で誰が一番リアクションが早いのか？」を決めるランキングアプリを作っていきたいと思います。
ただし、普通に実装するのではなく、2025年11月からVS CodeのCopilotで利用可能になった「Planモード」を使い、コードは一切書かずにAIへの指示だけでアプリを完成させることに挑戦します。
Planモードとは？
Planモードとは、簡単に言えば「AIがいきなりコードを書き始めずに、まずは人間と一緒に設計を作り上げていく機能」です。
これまでのCopilot（Agentモード）では、指示をすると即座にコードを書き始めていたため、こちらの意図と少しズレたものが出来上がってしまい、手戻りが発生することがよくありました。
その点Planモードは、AIがまず「ここのデザインはどうしますか？」「エラー処理は必要ですか？」と仕様の曖昧な部分を人間に質問してくれます。それに答えていき、最終的に仕様が固まった段階で初めてコードを作成してくれます。
以前から気になっていた機能なので、今回はPlanモードでどこまでできるのかの検証も兼ねてアプリ開発を進めていきます。
今回作成するアプリの概要
今回作成するアプリの具体的な要件は以下の通りです。
1. データの自動読み込みと絞り込み
チャネルごとにフォルダ分けされているJSONデータを、アプリが自動でスキャンして読み込みます。また、読み込んだデータから自動で「部署」を抽出し、特定の部署を選択してランキングを絞り込める機能を実装します。
2. ランキングの定義方法
各個人の全投稿データの中から、リアクションが早かった「上位5回」だけを抽出して平均をとり、それをスコアとします。その際、有効なリアクションが5回未満の人はランキングから除外します。
3. アニメーションによるランキング表示
ランキングは、下位から順番にアニメーション付きで表示させます。特別な演出として、1位〜3位の人は最初は隠しておき、画面をクリックすると表示されるようにします。
これらの要件を、「コードを書かずに、言葉による指示だけ」でどこまで再現できるか検証していきます。
実際にやってみた
Copilot Chatに「Plan」というタブが追加されているので、これを選択します。
そして、以下のような指示を出します。 あえてJSONのデータ構造や、ランキングの詳細なロジックなどは書かずに指示を投げてみます。
すると、AIから回答が返ってきました。 要するに「その指示だと仕様が定まらないから確認させてほしい、こういう理解で合ってる？」という旨の確認です。これに対して回答を返し、仕様を確定させていきます。
質問に回答していきます。
すると、さらに細かい仕様について追加の質問をしてくれます。
これらを何回か繰り返すと、いよいよ実装が始まり、アプリを一から作成してくれます。
作業が終わると、このようにプロジェクト構造や使い方も提示してくれます。すごいですね。
この時点で、既にアプリとして動く状態になっていました。実際にランキングも表示されます。
ただ、細部は完璧ではありませんでした。 「ランキングはアニメーションで順番に表示してほしいのに、いきなりポンと出てしまう」「2列グリッドで表示してほしいのに、なぜか横1列になっている」など、一発では思い通りのものは作れませんでした。
そのため、ここからは「Agentモード」に切り替えて対話し、修正を加えていきます。
他にも細かく指示を出していき、最終的には思い描いていた通りのアプリを完成させることができました。
こちらはサンプルデータでの表示ですが、前回収集したデータを連携させたところ、実際の社内ランキングについても正常に算出・表示されることを確認しました。
まとめ
今回、Planモードを用いてアプリを一から作成しました。
その過程で実感したのは、作りたいものを言語化することは案外難しいということです。 「仕様さえ言葉にできれば、AIが瞬時に作ってくれる」時代だからこそ、その指示出しの元となる設計の重要性が身に染みました。
正直、設計に関してはまだまだ分からないことだらけです。今後、積極的に設計に関する知識をインプットし、言語化能力も磨いていく必要があると強く感じました。
今回作ったランキングアプリは、12月のKENTEM TECH CONF 2025 Winterという社内イベントで実際に使ってみる予定です。 皆さんもぜひ、このPlanモードを使いこなして新たなアプリ開発に挑戦してみてください。
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp
