前回は簡単にMilkcocoaでチャットアプリケーションを作りました。今回はそれを拡張する形で，
SPAによるフロントエンド設計の重要性
MilkcocoaなどによりBaaSのWebアプリケーションを作る際は，
SPA
そこで設計が非常に大切になります。SPAはすなわち，
MVCとは？
MVCについて説明する前に，
MVCとはGUIアプリケーションを，
図1 MVCモデルの一例
チャットアプリケーションをMVC設計にする
チャットアプリケーションの拡張
チャットアプリケーションを拡張して行きます。以下の機能を追加します。
- メッセージ削除機能
まずこれについて前回と同様にレイアウトを構成してnobackendで実装しておき，
レイアウトを構築する
まず簡単にレイアウトを構築しましょう。
layout.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="chat-board">
<div id="chat-content-from">
<input id="chat-room-text">
<button>メッセージ入力</button>
</div>
<div>
<p>こんにちは!</p>
<button>削除</button>
</div>
<div>
<p>どうもはじめまして!</p>
<button>削除</button>
</div>
<div>
<p>やぁやぁ</p>
<button>削除</button>
</div>
<div>
<p>どもども</p>
<button>削除</button>
</div>
</div>
</body>
</html>本来であればBEMやSMACSと言ったCSS等の設計も必要なのですが，
layout.
図2 layout.
