長江 明信
React, Next.js, AWS, Flutter など
8mitsuboy
JSTQB Certified Testerscratch the profileImage
やるべきことが多いしわからない。順序もわからない。
→ ゴールまでの過程がブラックボックスだから動けない。
「この状態のときこうなってほしい」だけ書く。
開発者はDOMの操作(住所変更)をしたいわけじゃない。
// 手続き的:状態が変わるたびにDOMを自分で操作
if (isLoading) {
button.disabled = true;
button.textContent = "送信中...";
} else {
button.disabled = false;
button.textContent = "送信";
}
// 宣言的:この状態のときこうあってほしいを書くだけ
<button disabled={isLoading}>
{isLoading ? "送信中..." : "送信"}
</button>
Whatだけ宣言 → HowはFrameworkが解決。
俺も「引っ越したい」って宣言するだけで、ブラックボックスが開いてくれないかな〜
…さすがに物理的な作業までやってくれる魔法はない。
でもブラックボックスを開ける(HOWの洗い出し)だけなら、AIにできる!
| 既存Todo | Declara | |
|---|---|---|
| 入力 | タスクを自分で書く | 宣言するだけ |
| 初動 | Howを要求される | Whatだけでいい |
| 頭の使いどころ | 分解・整理 | やりたいことに向き合う |
宣言してから達成するまでの気持ちの変化に沿ってUIを作った。
| フェーズ | 感情 | UI方針 |
|---|---|---|
| 停滞 | 何すれば… | 出発点として受け止める |
| 宣言 | ポンと入力 | 入力UIを極小化 |
| 開封 | これだけでいい | タスクを見やすく提示 |
| 実行 | 進んでる | 進捗可視化 + 完了演出 |
| 達成 | やりきった | 小さく祝う |
ウキウキで使ってもらってみたら..
利用者) ちょうどいい理想状態の抽象度考えるのがむずくね? 汎用的に使えないしメモ帳でいいや
「〜したい」= 理想の状態 が成り立つのは、抽象度が絶妙な場合だけだったと言うことに気づいた..
| 抽象度 | 例 | 問題 |
|---|---|---|
| 高すぎ | 幸せになりたい | 分解できない |
| ちょうどいい | 引っ越したい | ここだけ刺さる |
| 低すぎ | 食器を洗いたい | 分解不要 |
特定の抽象度しか受け付けられないアプリ = 窮屈なアプリ = 使われないアプリ
例)Declara: 「入力の抽象度は一つ」という前提 → 特定の抽象度しか刺さらなかった
抽象度の高い理想の状態の宣言にも対応できるように、宣言を再帰できるようにする
- 転出届を出す
- 転入届を出す …