MRが楽しい

MRやVRについて学習したことを書き残す

Spec Kitを使ってアプリを作成する

本日はSpec Kitの技術調査枠です。
Spec Kitを使ってアプリを作成する手順を記事にします。

Spec Kitのインストール手順

Spec Kitのインストール手順と新規プロジェクトの作り方は以下の記事を参照ください。
bluebirdofoz.hatenablog.com

VisualStudioCodeでプロジェクトを開く

今回はAIアシスタントにGitHubCopilotを利用するため、VSCodeでプロジェクトを開きます。
Spec Kitで作成した新規プロジェクトのフォルダをVSCodeで開きます。

プロジェクトを開くとCHATビューに幾つかのspeckitのコマンドが読み込まれます。

Spec Kitを使ってアプリを作成する

Spec Kitを使ってアプリを作成するには以下の手順を実施します。

  1. プロジェクトの基本原則を作成する
  2. アプリの仕様を作成する
  3. 技術的な実装計画を作成する
  4. タスクに分解する
  5. 実装を実行する

プロジェクトの基本原則を作成する

初めにプロジェクトの基本原則を作成します。
/speckit.constitutionコマンドを使用して、その後のすべての開発の指針となるプロジェクトの管理原則と開発ガイドラインを作成します。

/speckit.constitution (プロジェクトの管理原則と開発ガイドライン)

今回は以下のようなプロジェクトの管理原則と開発ガイドラインを指定してみました。

このアプリは子供向けのそろばん学習アプリです。
操作がしやすいようにアプリは動作環境に合わせてUIを適切なレイアウトで表示できるようにする。
AIエージェントは思考を英語で考えて、ユーザーへの回答を日本語で回答する。
機能を開発する際にはそのユニットテストを作成してテストがパスすることを完了の条件とする。
コードには日本語でコードコメント、XMLコメント(クラス、フィールド、メソッド)を記載する。

VSCodeのチャットビューで以下の通りコマンドを実行します。

これでconsitution.mdファイルが生成され、プロジェクトの管理原則と開発ガイドラインが決まりました。

アプリの仕様を作成する

次にアプリの仕様を作成します。
/speckit.specifyコマンドを使用してアプリの内容を記述します。
ここでは技術スタックではなく、何をなぜ行うかという仕様に焦点を当てます。

/speckit.specify (アプリの仕様)

今回は以下のようなアプリの仕様を指定してみました。

このアプリは子供向けのそろばん学習アプリです。
アプリページを開くと、最初にタイトル画面が開きます。
タイトル画面にはそろばん計算を始める「スタート」ボタンと、難易度の設定変更を行う「カスタマイズ」ボタンがあります。
ページ下部には現在の難易度の設定が表示されます。
難易度の設定では問題の数や計算式の桁数、計算式の種類などを変更できます。

タイトル画面から「スタート」を押すと、そろばん計算画面が開きます。
表示された計算式にしたがって、そろばんのたまをクリックして、計算式の結果とそろばんの結果が合えばゲームクリアになります。
結果画面ではスタートからゲームクリアまでかかった時間と回答した問題の数が表示されます。

タイトル画面から「カスタマイズ」を押すと、設定変更画面が開きます。
設定変更画面では問題の数や計算式の桁数、計算式の種類などを選択して変更できます。
変更した後「タイトルに戻る」でタイトル画面に戻ると変更した設定内容が表示されます。
この状態で「スタート」を押すと、そろばん計算に設定が反映されます。

画面レイアウトは添付の画像を参考にしてください。
01_タイトル画面.jpg：タイトル画面
02_そろばん画面01.jpg：そろばん計算画面（開始時）
03_そろばん画面02.jpg：そろばん計算画面（１つめの数字入力成功時）
04_そろばん画面03.jpg：そろばん計算画面（すべての数字入力成功時）
05_そろばん画面04.jpg：そろばん計算画面（結果画面）
06_設定画面.jpg：設定変更画面

VSCodeのチャットビューで以下の通りコマンドを実行します。

specifyはブランチに1対1で紐づきます。
実行と同時にここで指定された仕様を実現するためのブランチが作成されます。

これでspec.mdファイルが生成され、アプリの仕様が決まりました。
もし仕様で不明な点があればAIアシスタントから質問があるので回答します。

技術的な実装計画を作成する

次に技術的な実装計画を作成します。
/speckit.planコマンドを使用して、技術スタックとアーキテクチャの選択肢を指定します。

/speckit.plan (技術スタックとアーキテクチャの選択肢)

今回は以下のような技術スタックとアーキテクチャの選択肢を指定してみました。

言語にJavaScript(Node.js)、フレームワークにElectronを利用したデスクトップアプリケーションとして実装する。
Reactライブラリを利用して宣言的UI、コンポーネントベース設計で開発する。

VSCodeのチャットビューで以下の通りコマンドを実行します。

これでplan.mdファイルが生成され、技術スタックとアーキテクチャの選択肢が決まりました。

タスクに分解する

次にタスク分解を行います。
/speckit.tasksを使用して、実装計画から実行可能なタスクリストを作成します。
必要な情報はここまでで入力したので引数の入力は必要ありません。

/speckit.tasks

これでtasks.mdファイルが生成され、実装タスクが決まりました。

実装を実行する

最後に実装を実行します。
/speckit.implementを使用してすべてのタスクを実行し、計画に従って機能を実装します。

/speckit.implement

これでアプリの実装が行われます。