Warp 言語仕様書

WarpはAndroid・Web両対応のUI記述言語です。シンプルな構文で、状態管理・イベント・動的UI・条件分岐などを直感的に記述できます。将来的にiOSやBaramOSにも対応予定。

---

基本構造・文法

• コンポーネントは name(prop1:val1 prop2:val2 ...) 形式で記述。
• レイアウトは vStack, hStack, card, scrollView などでネスト可能。
• 変数は --name（状態変数）、~~name（永続変数）で管理。値の代入は --name = 値。
• イベントは oneClick, longPress など。アクションはカンマ区切りで複数記述可。
• 条件分岐は if: 条件( ... )、スクリプトは @script名( ... )。
• 動的要素追加は add(id:'node')、削除は del(id)、全消去は clr(id)。
• 画面遷移は setScreen(id)。
• 文字列連結は text: "こんにちは、"+~~name+"さん" のように + で。

---

コンポーネント詳細

Header

• 画面上部に固定表示されるヘッダー（タイトルバー）。
• text でタイトルや説明を表示。
• button で右側にボタンやアクションを配置。複数可。
• ボタンには oneClick などのイベントを設定し、状態リセットや画面遷移などを実行。
• アイコンやトグル等、任意のコンポーネントも追加可能。
• 用途：アプリタイトル、主要アクション、ナビゲーション。

card

• コンテンツをグループ化するコンテナ。Material 3風の背景と影。
• text で見出しや説明を表示。
• 子要素として任意のコンポーネントをネスト可能。
• 用途：セクション分け、情報整理。

button / tonalButton

• アクション実行用ボタン。buttonは強調、tonalButtonは控えめな色。
• text でラベル、color で色指定。
• oneClick, longPress でイベント処理。
• width:max で横幅いっぱいに拡張。
• 用途：送信、リセット、画面遷移など。

text

• テキスト表示。動的内容や変数参照可。
• color, fontWeight, fontSize, align でスタイル調整。
• 用途：説明、ラベル、動的メッセージ。

textField

• 入力欄。placeholder でヒント、text で状態変数と連動。
• 入力値は --name や ~~name に保存。
• 用途：名前入力、検索、フォーム。

toggle / switch

• ON/OFFスイッチ。isOn で状態変数と連動。
• 用途：設定切り替え、オプション選択。

slider

• スライダー。value, min, max で範囲指定。
• 用途：数値調整、ボリューム、透明度など。

divider

• 区切り線。UIのセクション分け。

hStack / vStack

• 横並び（hStack）、縦並び（vStack）レイアウト。
• gap で要素間の余白調整。
• 用途：ボタン群、フォーム、リスト。

scrollView

• スクロール可能領域。大量要素や長い画面に。

if

• 条件分岐。if: 条件( ... ) で条件成立時のみ子要素を表示。
• 用途：オプション表示、動的UI切り替え。

screen

• 画面定義。id で識別し、setScreen(id) で遷移。
• 複数画面アプリの構築が可能。

---

状態管理・変数

• --name : 状態変数。画面内で値を保持。
• ~~name : 永続変数。アプリ全体で値を保持。再起動後も保存。
• 代入は --name = 値。式や文字列連結も可。
• 変数はUIやアクション、条件分岐で参照・更新。

---

イベント・アクション仕様

• oneClick: ... : クリック時の処理。状態変更、画面遷移、計算、動的追加・削除など複数アクション可。
• longPress: ... : 長押し時の処理。oneClickと同様。
• アクションはカンマ区切りで複数記述。
• 主なアクション：
  • add(id:'node') : 指定コンテナに新要素追加。
  • del(id) : 指定要素削除。
  • clr(id) : コンテナ内全要素削除。
  • show(id) / hide(id) : 表示・非表示切替。
  • calc(式) : 四則演算や数式評価。
  • reset(now) : 状態初期化。
  • setScreen(id) : 画面遷移。
  • 変数代入：--name = 値。
• 条件分岐やスクリプトは if: 条件(アクション列) や @script名( ... ) で記述。

---

条件分岐・スクリプト

• if: 条件 ( ... ) : 条件成立時のみ実行。
• elseIf: 条件 ( ... ) : 直前のifが不成立時のみ。
• @script名( ... ) : 複数処理や条件分岐をまとめて定義。
• 条件式は変数・数式・文字列・contains等を利用可能。

---

文法ルール

• コンポーネントは name(prop1:val1 prop2:val2 ...) で記述。
• ネストは vStack(...) や card(...) 内に記述。
• 変数参照は --name または ~~name。
• 文字列連結は text: "こんにちは、"+~~name+"さん" のように + で。
• イベントは oneClick: ... でアクションを記述。
• 条件分岐は if: --flag=true(...) など。
• 動的追加は add(id:'node')、削除は del(id)。
• スクリプトは @script名(...) で複雑な処理をまとめる。

---

対応状況

• Web: 最速対応。HTML/CSS/JSで動作。
• Android: ほぼ全機能対応。Jetpack Composeで描画。
• BaramOS ネイティブUI: 基礎部分のみ対応。
• iOS: 開発予定。

---

拡張・今後の予定

• コンポーネント追加・カスタムイベント対応
• iOS/BaramOS完全対応
• 外部連携・データバインディング
• より高度な条件分岐・ループ構文

---

ライセンス

MIT