Makepad リファレンス

デバッグ、コード品質、高度なレイアウトパターンのリファレンス資料。

クイックナビゲーション

トピック	説明
トラブルシューティング	一般的なエラーと修正
コード品質	Makepad対応のリファクタリング
アダプティブレイアウト	デスクトップ/モバイルレスポンシブデザイン

一般的な問題クイックリファレンス

エラー	クイックフィックス
`no matching field: font`	`text_style: <THEME_FONT_*>{}` を使用
カラーパースエラー（`e` で終わる）	最後の桁を変更（例：`#14141e` → `#14141f`）
`set_text` 引数不足	第一引数として `cx` を追加
UIが更新されない	変更後に `redraw(cx)` を呼び出す
ウィジェットが見つからない	IDのスペルをチェック、パスには `ids!()` を使用

一般的なビルドエラー

エラー："no matching field: font"

// ❌ 間違い
<Label> { font: "Bold" }

// ✅ 正しい
<Label> { text_style: <THEME_FONT_BOLD>{} }

エラー：カラーパース失敗

// ❌ 間違い - 'e' で終わる
draw_bg: { color: #14141e }

// ✅ 正しい - 最後の桁を変更
draw_bg: { color: #14141f }

エラー：ウィジェットが再描画されない

// ❌ 間違い - 変更が見えない
self.label.set_text(&mut cx, "新しいテキスト");

// ✅ 正しい - 再描画をトリガー
self.label.set_text(&mut cx, "新しいテキスト");
self.redraw(cx);

コード品質ガイドライン

ウィジェット拡張パターン

// 良い：再利用可能な操作のための拡張トレイトを作成
pub trait LabelExt {
    fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4);
}

impl LabelExt for Label {
    fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4) {
        self.label(id!(text)).set_text(cx, text);
        self.draw_text.color = color;
        self.redraw(cx);
    }
}

繰り返しパターンを避ける

// ❌ 悪い：繰り返しコード
match action {
    Action1 => { self.widget1.redraw(cx); }
    Action2 => { self.widget2.redraw(cx); }
    Action3 => { self.widget3.redraw(cx); }
}

// ✅ 良い：共通ロジックを抽出
fn redraw_widget(&mut self, cx: &mut Cx, widget_id: WidgetId) {
    self.widget(widget_id).redraw(cx);
}

アダプティブレイアウトパターン

レスポンシブサイジング

live_design! {
    <View> {
        // デスクトップ：固定幅、モバイル：フィル
        width: { desktop: 800, mobile: Fill }
        height: Fit

        flow: { desktop: Right, mobile: Down }
    }
}

ブレークポイントベースのレイアウト

impl Widget for MyView {
    fn draw(&mut self, cx: &mut Cx2d) {
        let width = cx.turtle().rect().size.x;

        if width > 800.0 {
            // デスクトップレイアウト
        } else {
            // モバイルレイアウト
        }
    }
}

プラットフォーム固有のスタイリング

live_design! {
    <Button> {
        // プラットフォーム固有のプロパティ
        padding: {
            desktop: {left: 20, right: 20, top: 10, bottom: 10}
            mobile: {left: 15, right: 15, top: 8, bottom: 8}
        }

        draw_text: {
            text_style: {
                font_size: { desktop: 14.0, mobile: 16.0 }
            }
        }
    }
}

デバッグヒント

ライン情報を有効にする

# より良いエラーメッセージのためにライン情報付きで実行
MAKEPAD=lines cargo +nightly run

ロギング

// デバッグ用のログを追加
log!("値: {:?}", my_value);
log!("状態: {} / {}", self.counter, self.is_loading);
log!("イベント: {:?}", event);

ウィジェットインスペクター

// ウィジェットツリーを出力
fn debug_widget_tree(&self, cx: &Cx, depth: usize) {
    let indent = "  ".repeat(depth);
    log!("{}ウィジェット: {:?}", indent, self.widget_uid());

    for child in self.children() {
        child.debug_widget_tree(cx, depth + 1);
    }
}

パフォーマンスヒント

大きなリストには PortalList を使用 - 仮想スクロールがパフォーマンスを向上
不要な再描画を避ける - 状態が変更されたときのみ redraw(cx) を呼び出す
重い計算をキャッシュ - 結果をウィジェット状態に保存
GPUシェーダーを使用 - ビジュアルエフェクトをGPUにオフロード

リソース

Makepad リポジトリ
Robrix - 実用リファレンス
Moly - 実用リファレンス

Makepad リファレンス

Makepad リファレンス

クイックナビゲーション

一般的な問題クイックリファレンス

一般的なビルドエラー

エラー："no matching field: font"

エラー：カラーパース失敗

エラー：ウィジェットが再描画されない

コード品質ガイドライン

ウィジェット拡張パターン

繰り返しパターンを避ける

アダプティブレイアウトパターン

レスポンシブサイジング

ブレークポイントベースのレイアウト

プラットフォーム固有のスタイリング

デバッグヒント

ライン情報を有効にする

ロギング

ウィジェットインスペクター

パフォーマンスヒント

リソース

コメント

関連ツール

Makepad コンポーネントギャラリー

Makepad コア概念

Makepad デプロイメント

関連インサイト

Obsidian を OpenClaw に接続したら、意思決定まで手伝い始めた

AI アシスタントをチャットボックスに押し込むな：Clawdbot は戦場を間違えた

ローコードプラットフォームの黄昏：なぜClaude Agent SDKがDifyを歴史にするのか