Bone Flow #001 - Bone Core Guide

1. まず最初に：Bone Flowとは何か

Bone Flowは、UIを「画面部品の集まり」としてだけ扱うのではなく、意味 → 接続 → 表現 → 検証という流れとして扱うための基盤です。

2. なぜこの分離が必要なのか

一般的なUI実装では、データ・イベント・DOM・CSS・接続・エラー処理が1つのComponentへ入り込みやすく、見た目を直しただけでデータ処理が壊れる、接続異常の原因が見えない、別画面へ再利用しにくい、といった問題が起きます。

この分離により、同じ意味をTextにもIconにも別の画面にも流せるようにし、見た目の変更と意味の変更を切り離します。

3. #001 Bone Coreは何をするComponentか

#001はBone Flowの中で最初に読み込まれる中核Runtimeです。後続UIの見た目を描くComponentではなく、Bone Flowが扱う「意味の単位」とそのライフサイクルを定義します。

4. Boneの最小構造

{
  "id": "customer-name",
  "type": "text",
  "value": "山田 太郎"
}

Bone自身は色・フォント・線・アニメーション・DOMを持ちません。それらは表現層の責務です。

5. #001から#002 Jointへどうつながるか

#001がBoneを作っただけでは、まだ他Componentへ情報は流れません。#002 JointがSource/TargetのEndpointとPortを接続し、互換性・状態・配送を扱います。

const bone = BoneCore.create({
  id: "title",
  type: "text",
  value: "こんにちは"
});

// このBoneをJointが次のComponentへ配送し、
// Text等のUIが value を見た目として表現する。

6. 単体QAと「000 Development Order 累積回帰テスト」の違い

Bone Flowでは、Component自身を確認するテストと、統合されたboneflow.js / boneflow.cssを確認する累積回帰テストを分けています。

7. BoneCore Public API

基本例

const bone = BoneCore.create({ id:"message", type:"text", value:"Hello" });
const cloned = BoneCore.clone(bone);
const updated = BoneCore.update(bone, { value:"Hello Bone Flow" });
const json = BoneCore.serialize(updated);
const restored = BoneCore.deserialize(json);

8. 非破壊性とライフサイクル

#001では、元入力や元Boneを予期せず書き換えないことが重要です。clone/update/replace/serialize/deserializeを跨いでも「どのBoneが現在の値なのか」を追えるようにします。

• clone後にclone側を変更しても元Boneへ波及しない。
• updateは元Boneを壊さず新しいBoneを返す。
• destroy後は、破棄済みBoneを対象にした禁止操作をエラーとして扱う。
• serialize/deserialize後も意味構造が往復できる。

9. Core Error / Validation

Coreは不正データを黙って補正して進めるのではなく、原因を分類できるエラーコードを持ちます。

Test画面では、正常系をSmoke Test、異常入力や拒否条件をValidationとして分けて実行します。両方PASSするまでは完了操作を有効にしません。

10. boneflow.js / boneflow.css は何か

最終利用者がBone Flowを利用するときの共通配布物が boneflow.js と boneflow.css です。

原則： 最終bundleを直接手編集しません。編集元は src/、bundleはbuildで再生成します。

11. 新しいBone Flowのソース構成

後続Componentは、正本確認・Smoke/Validation・ブラウザ確認を行ったものだけを src に追加し、bundleへ積み上げます。

12. CSSテーマ：Light / Dark / Neon

Bone Flowのテーマは Light / Dark / Neon の3系統です。Light/Darkは一般的な表示テーマ、Neonは従来のBone Flow UIで使ってきた濃紺・シアンを中心とする固有イメージです。

• Light：白〜淡色背景の一般的なUI。
• Dark：黒〜グレー系の一般的な暗色UI。
• Neon：#002 Joint画面のような濃紺背景、暗いパネル、青/シアンの枠・選択、必要箇所に緑/赤/紫を使うBone Flow基準。

Neonは「全部を発光させる」デザインではありません。暗いベースの中で、接続・状態・選択・重要箇所をネオン色で識別します。

13. Smoke Test / Validation / Completion

Bone FlowではRuntimeが読み込めただけで完成とはしません。#001 Test画面では、正常系Smoke、異常系Validation、レポート、Runtime Console、Completionを独立して確認します。

1. Smoke Testを実行。
2. Validationを実行。
3. 総テスト数 / PASS / FAIL / 経過時間 / Versionを確認。
4. 必要ならJSON / MDレポートを保存。
5. 両方PASSした場合だけローカル完了操作を許可。
6. ユーザーlocalhost確認前は正式Completed / Specification Frozenとしない。

14. #001を理解したあとに見る順番

#001で「意味」を理解したら、次は#002 Jointで「接続」を理解します。その後、Text / Icon / Image / Shapeなどの表現Componentを見ると、Bone Flow全体の責務分離がつながります。

15. #001の位置づけ

#001 Bone Coreは「最初の小さな部品」ではなく、Bone Flowという仕組み全体の意味モデルを定義する基礎です。後続Componentを追加しても、Coreの責務をUI側へ移したり、UI都合でBone構造を勝手に変えたりしません。

Bone Flowを理解する = まず#001で「意味を小さく保つ」考え方を理解することです。