データアプリ構築手順

Step 1

前章とのつながりを確認する

ここで使う考え方は前章と同じです。Page で初期表示を作り、Action でユーザー操作を受け取り、 必要な領域だけを再描画します。違いは、対象が「メッセージ一覧」から「テーブルとチャート」に変わる点です。

Step 2

今回のゴール

この章では「CSV読込 → 前処理 → テーブル/チャート連動 → Actionで再描画」を1本の流れで実装します。

日英で同じコードを追えるよう、サンプルの基準パスは docs/site-astro/public/examples/go/tutorial/data-app/main.go に統一しています。

Step 3

最小構成の実装例

まずは次の最小コードで流れを掴みます。各ブロックに 1)〜4) の番号を付けています。

// 1) CSVを読み込む
file, _ := os.Open("./data/sales.csv")
ui, _ := mf.DataFrameFromCSV(file, mf.TableProps{Columns: []mf.TableColumn{{Label: "Region"}, {Label: "Sales"}}})

// 2) 前処理して表示用viewを作る
view := mf.DataFrameViewProps{
    Filters: []mf.DataFrameFilter{{Column: "Sales", Op: mf.DataFrameFilterGTE, Value: 1000.0}},
    Sort:    []mf.DataFrameSort{{Column: "Sales", Desc: true}},
}

// 3) テーブルとチャートを同じviewで連動
mf.DataFrame(df, mf.TableProps{View: view})
mf.DataFrameChart(df, mf.DataFrameChartProps{View: view, LabelColumn: "Region", Series: []mf.DataFrameChartSeries{{Column: "Sales"}}})

// 4) Actionでフィルタ値を受け取り再描画
app.Action("filters/apply", func(ctx *mb.Context) mf.Node {
    // query/formから値を取得してviewを再計算
    return renderDashboard(ctx)
})

Step 4

実装を読む順番

1. 1) CSV を読み込み、DataFrame の元データを作る
2. 2) フィルタ/ソート条件を DataFrameViewProps にまとめる
3. 3) 同じ view をテーブルとチャートの両方に渡して表示を同期する
4. 4) Action でフォーム値やクエリ値を受け、view を再計算して再描画する

この順番を守ると、要件が増えても「入力→状態→再描画」の責務を崩さずに拡張できます。

Step 5

次に進む

次は DashWindで管理画面アプリを作る で、データ表示の流れを管理画面レイアウトに発展させます。 KPI、一覧テーブル、行アクションを組み合わせる構成です。