目次
MVCとは？
MVC(MVCモデル)とは、ユーザーインターフェースを持つアプリケーションを構築する際に用いられる、コーディングのデザインパターンのことです。MVCに従ってコーディングをすることで、管理しやすく見通しの良いアプリケーションを構築することができます。特に、構造が複雑なグラフィカルユーザーインターフェースにおいて非常に有用とされ、現在においてもそのデザインパターンは広く認知されています。
MVCを構築する3つの要素
MVCとは、model view controllerの英単語の頭文字を取ったものです。MVCでは、アプリケーションにおける機能やデータの保存、その他のロジックなどを、model・view・controllerの3つに分けて考えます。3つの要素の役割を理解し、しっかりと役割分担をさせることが重要です。ここでは、家計簿を記録するアプリケーションを例に、model・view・controllerそれぞれの役割について説明します。
model
modelは主に、アプリケーションで取り扱うデータの格納、データの処理や計算、その他のロジックなど、データの保存と計算を担当します。今回の例では、家計簿に記録する金額の一時的な保存や、税金の計算、1日の支出計算などが該当します。また、新たな支出を記録した際にその日の合計金額が増える場合には、合計金額の変更を見た目に反映させるため、後述するviewに通知するという役割も担います。
view
viewはその名のとおり、UIへの出力を担当します。ウェブアプリケーションではHTMLやCSSなどを指し、一般的なGUIではウィジェットの階層構造を指します。modelに保存されている情報は、viewに渡されることで初めてユーザーが確認できます。今回の例では、支出をただ数値で表示するだけでなく、グラフや図などを利用してより視覚的に表示したり、配置や配色などを工夫することで、ユーザーエクスペリエンスの高いアプリケーションを構築することに繋がります。
controller
controllerは、UIからの入力に対する処理を担当します。ユーザーによるテキストボックスへの入力や、ボタン押下などのイベントに対するハンドラとなり、該当するモデルのメソッドを呼び出すのが主な役割です。modelのデータを直接書き換えたり、viewの描画を変更したりはしません。今回の例では、テキストボックスに新たな支出を登録した際に、model内にある合計金額を再計算するメソッドを呼び出す、が該当します。
JavaのGUIフレームワーク
JavaにおいてGUI(グラフィカルユーザーインターフェース)を構築する際には、MVCのデザインパターンがとても役に立ちます。一般的に、JavaでGUIを構築する際には、SwingやjavaFXなどのフレームワークを用いることがほとんどです。フレームワークが提供するAPIを利用することで、とても効率的に開発ができます。
JavaでMVCモデルを実装してみよう
ここではJavaでSwingを利用し、支出を登録して合計金額を計算するGUIアプリケーションを、MVCモデルに従って構築する例をご紹介します。イメージを理解することが目的なので、記載するソースコードが確実に動作することは保証しておりません。今回は説明を簡単にするため、支出を登録する機能、登録した支出の一覧を表示する機能、合計支出を計算して表示する機能の3つを実装します。
MVCそれぞれの役割
上記の3つの機能が、それぞれMVCモデルのどれに該当するかを考えましょう。まずmodelは、支出の保存、合計支出の計算を担当します。次にviewは、支出一覧と合計支出の表示を行います。最後にcontrollerは、新しく入力した支出のハンドラとして機能します。MVCモデルの考え方は理解できたでしょうか。それでは、実際のコーディングに入りましょう。
modelの実装
public class Model { private int totalSpending = 0; private ArrayList spendings = new ArrayList(); public void addSpending(int spending) { this.spendings.add(spending); this.totalSpending += spending; } public int getTotalSpending() { return this.totalSpending; } public ArrayList getSpendings() { return this.spendings; }}
最初にモデルです。メンバとして、支出の合計を保存するtotalSpendingと、支出一覧を保存するspendingsを持ちます。また、これらのメンバにアクセスするためのゲッターを定義しています。支出を新たに追加する処理を担うのがaddSpendingメソッドです。支出を保存し、合計金額を更新します。modelが担う処理は、これですべてです。
viewの実装
import javax.swing.*;import java.awt.*;public class View extends JPanel { Model model = new Model(); public View() { setBackground(Color.white); setPreferredSize(new Dimension(800, 800)); } public void paintComponent(Graphics g) { super.paintComponent(g); int y = 0; model.getSpendings().forEach(spending -> { g.drawString(spending.toString(), 0, y * 10); y++; }); g.drawString(model.getTotalSpending(), 0, y * 10); }}
viewのメンバで、先程のmodelをインスタンス化します。コンストラクタでは、背景色とウィンドウを定義しています。paintComponentメソッドは、画面上にお絵かきをしたり文字を表示するための2Dコンテキストである、Graphicsクラスを引数として受け取ることができます。この関数内でmodelのゲッターにアクセスし、modelに保存されている値をviewで表示します。
controllerの実装
import javax.swing.*;import java.awt.*;import java.awt.event.*; // 追加public class View extends JPanel implements ActionListener { // 追加 (略) // 追加 public void actionPerformed(ActionEvent e){ model.addSpending(テキストボックスに入力された値); }}
今回の例ではcontrollerの処理が少ないため、viewクラスの中に記述します。上記のソースコードはあくまでイメージです。テキストボックスを用意し、ボタン押下などでactionPerformedメソッドがハンドラとして動くことを想定しています。actionPerformedメソッドでは、テキストボックスに入力された数値を、modelのaddSpendingメソッドに渡します。そうすることでmodelに支出が記録され、合計支出も更新されるという流れです。JavaにおけるMVCの簡単な例でしたが、イメージできたでしょうか。
MVCモデルを理解して綺麗なコーディングをしよう
MVCモデルについて理解できたでしょうか。なんとなくでも理解することで、圧倒的にコーディングが綺麗になり、良いアプリケーションを構築する土台となります。MVCモデルを意識して、最高のアプリケーションを構築しましょう。
