【WPF】リファクタリングで学ぶMVVM、Prism。その② ～ Model,ViewModelを作成 ～ 

# はじめに
下記の記事の続きとなります。
[【WPF】リファクタリングで学ぶMVVM、Prism。その① ～ ＭＶＶＭ観点で処理を切り分ける ～](https://qiita.com/furugen/items/7d64b56f0d1b31db06a1)

この記事では、責務分けした処理を実際に、MVVMの各層に処理を移管していきます。

### この記事で行うリファクタリングの対象
- コントロールへのデータを表示**(ViewModel)**
    - グリッド(XamDataGrid)への社員情報データを反映
- 外部からのデータ読込**(Model)**
    - JSONファイルの読込
    - JSONファイルの読み込んだ内容をクラス化

## Modelを作成
まずはViewModelから…といきたいところですが、データを取得するための処理がないとコンパイルエラーになってしまうので、下記の責務を移管したModelを作成します。社員情報を扱うため、EmployeeServiceModelというクラス名にしています。

- 外部からのデータ読込**(Model)**
    - JSONファイルの読込
    - JSONファイルの読み込んだ内容をクラス化


```csharp:EmployeeServiceModel.cs
    public class EmployeeServiceModel
    {
        private string JSON_FILE_PATH = "./Assets/sampledata.json";

        public List<SampleData> Employees { get; set; }

        /// <summary>
        /// コンストクタ、初期データを読み込みます。
        /// </summary>
        public EmployeeServiceModel()
        {
            Employees = LoadJsonFile();
        }

        /// <summary>
        /// Jsonファイルを読み込み、社員情報(SampleData)へデシリアライズします。
        /// </summary>
        /// <returns></returns>
        private List<SampleData> LoadJsonFile()
        {
            // Jsonファイルを読み込み、デシリアライズ化し、SampleDataに設定します。
            string fileContent = System.IO.File.ReadAllText(JSON_FILE_PATH);
            return JsonConvert.DeserializeObject<List<SampleData>>(fileContent);
        }
    }
```

## ViewModelを作成
Modelから社員情報を読み込めるようになりました。次は下記の責務をViewModelへ移管しましょう。

- コントロールへのデータを表示**(ViewModel)**
    - グリッド(XamDataGrid)への社員情報データを反映

```csharp:MainWindowViewModel.cs
    public class MainWindowViewModel
    {
        private EmployeeServiceModel employeeServiceModel;

        public List<SampleData> EmployeeData { get; set; }

        public MainWindowViewModel()
        {
            // 社員情報サービスのModelを生成
            employeeServiceModel = new EmployeeServiceModel();
            //社員情報プロパティへデータを設定
            EmployeeData = employeeServiceModel.Employees;
        }

    }
```

先ほど作成したModel(EmployeeServiceModel)より、社員情報を取得し、EmployeeDataプロパティへ設定します。
このEmployeeDataプロパティはViewからバインディングを行う事により、グリッド(XamDataGrid)にて表示できるようになります。


## View⇔ViewModelのバインディング
コードビハインドでXamDataGrid.DataSouceに直接データを設定していた処理を排除し、バインディングにより、
MainWindowViewModel.EmployeeDataデータを連携するようにします。


```xml:MainWindow.xaml
            <!--<igWPF:XamDataGrid x:Name="xamDataGrid" RecordActivated="XamDataGrid_RecordActivated" Height="300">-->
            <igWPF:XamDataGrid x:Name="xamDataGrid" RecordActivated="XamDataGrid_RecordActivated" Height="300" DataSource="{Binding EmployeeData}">
```

## MainWindow.xaml.cs からリファクタリングされた処理
下記のコメントアウトの箇所がViewModelおよびModelへの処理が移管されました！

```csharp:MainWindowViewModel.cs
    public partial class MainWindow : Window
    {
        //private string JSON_FILE_PATH = "./Assets/sampledata.json";

        public MainWindow()
        {
            InitializeComponent();

            // Jsonをシリアライズ化してサンプルデータを設定
            // this.xamDataGrid.DataSource = LoadJsonFile();
        }

        // private List<SampleData> LoadJsonFile()
        // {
            // Jsonファイルを読み込み、デシリアライズ化し、SampleDataに設定します。
            // string fileContent = System.IO.File.ReadAllText(JSON_FILE_PATH);
            // return JsonConvert.DeserializeObject<List<SampleData>>(fileContent);
        // }

```

# まとめ
今回のリファクタ終了時点でのGithubはこちらです。
https://github.com/furugen/WPF-Try-Refactoring/tree/edition2

次の記事も引き続き、MainWindow.xaml.csをリファクタリングしていきます！

#次の記事

[【WPF】リファクタリングで学ぶMVVM、Prism。その③ ～ 行追加ボタンのClick処理をリファクタリング ～](https://qiita.com/furugen/items/f176bbfe198fdc857052)