AIをソフトウェア開発へ取り込む際のテストにLLMsを活用する可能性に想いを馳せる
#QA #要件定義 #仕様定義 #形式手法 #AI #設計
from:
https://twitter.com/koushisa/status/1714147240099590620
2023/04/25 フロントエンドのテスト設計とアーキテクチャ
React は人類が直接コーディングする最後の UI ライブラリになる
ちまちま生産を上げても仕方ないのでAIによって破壊的な生産性向上を目指す
n度ぶり（2023/10/17)
AIとの協働やv0.dev, Webstudio, Statelyの動きを観測しつつフロントエンドでどう活かすかという文脈でFinite State Machine(FSM), Property-based testing, 形式手法, Figma to XXXに思いを馳せている
静的解析のような機構はGenerative AIと相性が良いと考えているkoushisa.icon
これまでの手運用では学習ハードルと設計<->実装の乖離や柔軟性の欠如により難があった
ChatGPTが視聴覚を手にしたので、LangChainのように複数技術をLLMsで通訳することによってボトルネックを解消できるかもしれない
自然言語をコンポーサブルにする
関連
生成AIツールをメンバーが使いこなすと経営者、管理職がボトルネックになる
AIやCopilot向けのコンテキストマネジメント
ツールを活用してスタイル自体を変える
PlaywrightなどのE2Eテスト技術にAIを組み込む概念実証の調査メモ
https://qiita.com/mylifewithviolin/items/e32e2b8711a1cac765e1
前提
いわゆる要件定義は終わっていること
作りたいものとスコープがProduct Requirements Documentのような形で手元にある
UIデザインも存在すると仮定する
外部仕様の定義ができていること
タスク（バックログアイテム）の準備が終わっている
スプリント内の作業を細分化して見積もりができる状態
あとは問題を理解して作るだけの段階
ここから内部仕様定義と設計と実装をシームレスに進める方法を考えたい
形式手法
1. 一定のフォーマットで構造化した自然言語で書かれた外部仕様に対し形式手法を記述する
流石に中間をぶっ飛ばしすぎ？koushisa.icon
まあ段階的詳細化法でやる必要はありそう
Property-based testingとかでも十分かも
関連: ノーガード戦法（ぉぃ）<<< Example-Based Testing (#EBT) < Property-Based Testing (#PBT) < 証明
2. 形式手法から、各種ソフトウェア開発に必要な仕様を抽出する
API設計
a11y tree, Headless UI
Finite State Machine(FSM)
3. 抽出した仕様を元に実装とQAのテストコードの叩き台を出力する
ValidationもAIが担う
形式手法を元に実装を出力できると仕様定義をしっかりやるインセンティブが生まれる
要件定義を自然言語またはUMLのような図で書く
仕様定義は形式手法またはFinite State Machine(FSM)などのフォーマットに変換する
ラフスケッチの状態遷移図を元にステートマシンを出力する
↑ができるなら、以下もできるのかもしれない
1. UIの画像を元にa11y treeと状態遷移表を出力する
2. Finite State Machine(FSM)
イメージ: リモートデータとUIの状態遷移パターン
状態遷移表の各レコードのa11y tree x Finite State Machine(FSM)を満たすよう、ChatGPTのようなUIでインタラクティブに実装を進める
ChatGPTのマークアップ補助ツール作るなら
追記(2024/11/01 )
draw-a-uiやv0.devはこのあたりのPoCとして確度が高い
FigmaからUIを作る
FigPilot
Screenshot to Code
LLMsをコミュニケーション媒体にする
フォーマットを通じたコミュニケーション
要件<->仕様や各フォーマットを相互変換するエンコード/デコードのプログラムということ
モデリング
モデリングのコツは、「視点」を創造すること
モデリングとOOUIとFigmaとCSSとコンポーネント設計
要求分析段階からマインドマップや情報設計を意識しておくとよさそう
収束させる
koushisa.iconがやりたいのは、フロントエンドでAIと協働するを実現するために必要な仕様定義フォーマットとツールを連携させる手段と基礎的な概念を見出すこと
その仮説として期待しているのが
標題に挙げた技術群
Flowiseのようなワークフローツール
もうちょっと練ればデザインと仕様と設計と実装をシームレスに行ったり来たりできるんじゃないかな
新しい体験のデザインプロセス
現状はそれを実現するために必要な標準仕様と書くためのツールが不足してる
koushisa.iconが知らないだけかも
手を組んでくれたら嬉しいリスト
Stately
v0.dev
Zag
chat.dev
メモ
形式手法はなぜ流行っていないのか
ここだと、CI/CDや型システムで十分でしょ的な話があるkoushisa.icon
型でドメインを構築できてるかが一番大事
プログラミングにおいてインタフェースや型は長期記憶になりうる
ノーガード戦法（ぉぃ）<<< Example-Based Testing (#EBT) < Property-Based Testing (#PBT) < 証明
ユースケースによってはGitHub Copilotだけでもすでに十分
軌道修正も容易
GitHub Copilotで生産性を上げるには