---
title: 'PowerShell + WPF で作る「JSONデータを読み込んでビューに表示」'
url: 'https://automationse.net/powershell-wpf-load-json-into-datagrid'
markdown: 'https://automationse.net/powershell-wpf-load-json-into-datagrid.md'
date: '2025-10-05'
description: '下記記事で作成したGUIアプリの機能を拡張してみようと思います。 https://automationse.net/wpf-dashboard-json-powershell/ この記事では、既存の WPF×PowerShell 製 GUI に タスク JSON を読み込み、DataGrid に表示＆絞り込み（期間／キーワード） できる機能を追加する手順をまとめます。実装モジュールは mod…'
taxonomy:
  category:
    - IT関連
  tag:
    - PowerShell
    - アプリ
---

# PowerShell + WPF で作る「JSONデータを読み込んでビューに表示」

## [PowerShell + WPF で作る「JSONデータを読み込んでビューに表示」](https://automationse.net/powershell-wpf-load-json-into-datagrid)

  公開日 2025.10.05 更新日 2025.10.05  [PowerShell](https://automationse.net/tag:PowerShell#body-wrapper) [アプリ](https://automationse.net/tag:%E3%82%A2%E3%83%97%E3%83%AA#body-wrapper)  

 下記記事で作成したGUIアプリの機能を拡張してみようと思います。

https://automationse.net/wpf-dashboard-json-powershell/ 

この記事では、既存の WPF×PowerShell 製 GUI に **タスク JSON を読み込み、DataGrid に表示＆絞り込み（期間／キーワード）** できる機能を追加する手順をまとめます。
実装モジュールは `modules/TaskData.psm1`、呼び出しは `Main.ps1`、UI は XAML の DataGrid＋フィルタバーで構成します。

## ゴール（できること）

- JSON（`TASK_DATA`）を読み込み、**ObservableCollection** として DataGrid にバインド
- **inquery\_date / due\_date** を基に **期間フィルタ**（From/To）
- **タスク名の部分一致**による **キーワードフィルタ**
- 本日件数と、**昨日との差分**をカウントカードで表示
- ハイパーリンク列（タスク名をクリックで URL を開く）

## 前提

- PowerShell 5.x（STA 実行）
- WPF（`PresentationCore/PresentationFramework/WindowsBase`）
- 既存のアプリ側で以下ユーティリティがある想定
    `Load-Xaml`, `Bind-DataContext`, `Register-HyperlinkHandler`, `New-UiTimer` など

## modules/TaskData.psm1

### 役割とポイント

- **Parse-Date**: いくつかの書式を許容して `DateTime` に変換
- **Read-TaskJson**: JSON を読み込み `ConvertFrom-Json`
- **Convert-Tasks**: 表示用の **ObservableCollection** を生成（表示文字列も用意）
- **Ensure-TasksCollectionView**: DataGrid の ItemsSource を **必ず ICollectionView 化**
- **Apply/Clear-TaskFilter**: 期間・キーワードの絞り込みと解除
- **Initialize-TaskView**: 初期読み込みとカウントカード更新
- **Update-TaskView**: 再読み込み＆件数反映

> - `ICollectionView` を**必ず**介してフィルタ（`CollectionViewSource.GetDefaultView`）

## Main.ps1

'TaskData.psm1'を追加する。

TaskData.psm1でExport-ModuleMemberで設定した関数を追加する。

## Tab.TaskTrend.xaml

taskviewのUIを作成する。ここでは、新しいタブを作成して描画するようにしている。

Initialize-TaskView

## よくあるハマりどころ

- **STA 必須**：WPF/UI 操作は STA で。エントリースクリプトで STA 自動再起動を入れておくと安心。
- **ICollectionView 化が大事**：DataGrid の ItemsSource が配列などのままだと `Filter` が効かない。**必ず `Ensure-TasksCollectionView` を通す**。
- **日付比較は `DateTime` で**：文字列比較（`-gt`/`-lt`）は NG。**`$dt.Date -eq $now.Date`** のように厳密に。
- **関数名の不一致**：`Update-TaskView` 内は **`Ensure-TasksCollectionView`** を呼ぶ（本記事のコードは修正済み）。
- **ハイパーリンクが開かない**：`Hyperlink.RequestNavigate` をハンドラで拾い `Process.Start` などを呼ぶ。

---

## 拡張アイデア

- **ステータス列で色分け**（`status` に応じて RowStyle を切り替え）
- **ソート保持**（`ICollectionView` の `SortDescriptions` を保存／復元）
- **CSV/Excel エクスポート**（ビューの内容のみ出力）
- **差分強調**（本日追加の行にアクセント背景）
- **ローカルファイル監視**で JSON 変更を自動反映（`FileSystemWatcher`）

 [ Previous Post](https://automationse.net/wpf-dashboard-json-powershell) [Next Post ](https://automationse.net/readjson-simple-gui-powershellowershell)

---

## Navigation

- Parent: [WordPress Import](https://automationse.net/wordpress-import.md)
- Previous: [超シンプルに、JSONファイルを読み込んでビューに表示するPowershellアプリをxamlを活用して作ってみる](https://automationse.net/readjson-simple-gui-powershellowershell.md)
- Next: [WPF ダッシュボードを JSON を読み込んで表示するGUIアプリ（PowerShell + XAML）](https://automationse.net/wpf-dashboard-json-powershell.md)