makepad-2.0-migration

Makepad 1.x から 2.0 への移行スキル

バージョン： makepad-widgets（dev ブランチ） | 最終更新日： 2026-03-03

概要

Makepad 2.0 では、コンパイル時の静的 DSL からランタイムスクリプトへと、アーキテクチャが根本的に変更されています。移行には、構文の変更、derive マクロの更新、ライフサイクルメソッドの改名、状態管理の新しいパターンが含まれます。

ドキュメント

詳細なドキュメントについては、ローカルファイルを参照してください。

• ./references/migration-guide.md - 例を含む完全な移行リファレンス

---

構文のクイック対応表

Makepad 1.x	Makepad 2.0	備考
live_design! { ... }	script_mod! { ... }	コアマクロの変更
<Widget> { ... }	Widget{ ... }	山括弧は不要
Key = Value	Key: value	等号ではなくコロン
(THEME_COLOR)	theme.color_*	テーマの名前空間
live_body: { ... }	body +: { ... }	マージ演算子
#[derive(Live)]	#[derive(Script)]	derive マクロ
#[derive(LiveHook)]	#[derive(ScriptHook)]	ライフサイクルフック
#[derive(Widget)]	#[derive(Widget)]	変更なし
before_apply()	on_before_apply()	メソッド名の変更
after_apply()	on_after_apply()	メソッド名の変更
apply_over!()	script_apply_eval!()	ランタイムでの更新
DefaultNone	Default	列挙型のデフォルト
LiveRegister	WidgetRegister	ウィジェットの登録
live_register()	register_widget(vm)	登録メソッド
LiveId	LiveId	変更なし

---

段階的な移行手順

ステップ 1：マクロを置き換える

// OLD
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    App = {{App}} {
        ui: <Root> { ... }
    }
}

// NEW
script_mod! {
    use mod.prelude.widgets.*

    startup() do #(App::script_component(vm)){
        ui: Root{
            // ... UI definition
        }
    }
}

ステップ 2：derive を更新する

// OLD
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget { ... }

// NEW
#[derive(Script, ScriptHook, Widget)]
pub struct MyWidget { ... }

ステップ 3：App::run を更新する

// OLD
impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        makepad_widgets::live_design(cx);
    }
}

// NEW
impl App {
    fn run(vm: &mut ScriptVm) -> Self {
        crate::makepad_widgets::script_mod(vm);
        App::from_script_mod(vm, self::script_mod)
    }
}

ステップ 4：ライフサイクルメソッドの名前を変更する

// OLD
impl LiveHook for MyWidget {
    fn before_apply(&mut self, cx: &mut Cx, ...) { ... }
    fn after_apply(&mut self, cx: &mut Cx, ...) { ... }
}

// NEW
impl ScriptHook for MyWidget {
    fn on_before_apply(&mut self, cx: &mut Cx, ...) { ... }
    fn on_after_apply(&mut self, cx: &mut Cx, ...) { ... }
}

ステップ 5：DSL 構文を更新する

// OLD - angle brackets, equals signs
<View> {
    width: Fill, height: Fill
    show_bg: true
    draw_bg: { color: (THEME_BG) }

    title = <Label> {
        text: "Hello"
        draw_text: { color: #fff }
    }
}

// NEW - curly braces, colons, theme namespace
View{
    width: Fill height: Fill
    show_bg: true
    draw_bg.color: theme.color_bg_app

    title := Label{
        text: "Hello"
        draw_text.color: #fff
    }
}

ステップ 6：apply_over を script_eval に置き換える

// OLD
self.label(id!(title)).apply_over(cx, live! {
    text: "New text"
});

// NEW
script_eval!(cx, {
    ui.title.set_text("New text")
});
// OR
script_apply_eval!(cx, self.ui, {
    title.text: "New text"
});

---

破壊的変更の要点

1. プロパティ間にカンマを入れない（空白区切り）
2. Splash ではセミコロンを一切使わない
3. ウィジェット型に山括弧を使わない
4. テーマ定数には (THEME_*) 構文ではなく、theme.* プレフィックスを使います
5. 名前付き子要素には = ではなく、:= 演算子を使います
6. 親プロパティを拡張するには、: ではなく +: のマージ演算子を使います
7. コンテナーでは height: Fit が必須です（デフォルトは自動ではなく 0px です）
8. 登録は live_register ではなく、App::run で行います
9. フィールド属性 #[source] はスクリプトオブジェクトにリンクします（一部のウィジェットで必須）
10. 古い old/ ディレクトリには、参照用に 1.x のコードがアーカイブされています

---

よくある移行時のミス

ミス	症状	修正方法
まだ live_design! を使っている	コンパイルエラー	script_mod! に置き換える
<Widget> 構文を使っている	構文解析エラー	Widget{} を使う
Key = Value を使っている	プロパティが適用されない	Key: value を使う
(THEME_COLOR) を使っている	不明なトークン	theme.color_* を使う
height: Fit がない	コンテナーが表示されない（0px）	height: Fit を追加する
Live derive を使っている	コンパイルエラー	Script を使う
before_apply を使っている	メソッドが見つからない	on_before_apply を使う
プロパティ間にカンマを使っている	構文解析エラー	カンマを削除する

---

移行のベストプラクティス

1. まずサンプルを確認する - 2.0 のパターンについて、examples/counter と examples/todo を調べます
2. ウィジェットを 1 つずつ移行する - すべてを一度に変換しようとしないでください
3. old/ ディレクトリを確認する - 古いウィジェットと新しいウィジェットの実装を比較します
4. height: Fit をテストする - UI が表示されない原因の多くは、高さの指定漏れです
5. テーマ変数を使う - ハードコードされたテーマカラーをすべて theme.* に置き換えます
6. new_batch: true を追加する - show_bg とテキストの子要素を持つすべての View に必要です