MilkcocoaでBaaSを体験！～バックエンドの仕組みと使い方～

第3回　MilkcocoaでGUIを作ろう！

BaaS, Milkcocoa, チャット, アプリケーション, HTML, JavaScript, GUI, MVC, SPA

この記事を読むのに必要な時間：およそ 7 分

前回は簡単にMilkcocoaでチャットアプリケーションを作りました。今回はそれを拡張する形で，実装していきたいと考えています。また同時にMVCの設計を紹介しながら構築していきます。

SPAによるフロントエンド設計の重要性

MilkcocoaなどによりBaaSのWebアプリケーションを作る際は，フロントエンドやクライアントサイドが肥大化します。基本的にBaaSは汎用的な機能を提供し，ビジネスロジック等はクライアントサイドで実装する形になる場合が多く，またそれにより，サーバでレンダリングしていたものをクライアントサイドのJSでDOMを動的に構築したり，他にもクライアントサイドのキャッシュなども重要になり，コード量が多くなります。

SPA（シングルページアプリケーション）を構築する際，その設計をしておかないと地獄が待っているわけです。jQueryなどを使いよくCSSやJS設計もせずに構築すると，コードが肥大するにつれてプロジェクトがぐちゃぐちゃな状態になり，保守が難しくなる，という状況になります。実際にSPA化により，保守が非常に大変になったプロジェクトをよく聞きます。特に設計スキルは無くとも，マークアップとちょっとしたjQueryが書けるというようなデザイナーが，SPAに挑戦しようとするときによく起ります。

そこで設計が非常に大切になります。SPAはすなわち，WebブラウザのGUIになります。GUIというのは，昔からMVCやMVVMなどのデザインパターンがあります。そのためSPAを設計をするときには，MVCなどの設計を覚えておくと良いというわけです。今回はそのMVCの設計について紹介しながら作って行きます。

MVCとは？

MVCについて説明する前に，MVCと言うものにはいくつか種類があるということを言及しておきます。GUIから来たMVCと，WebのMVCがあります。今回はどちらかと言えばGUIのMVCのことになります。またGUIのMVCも様々なパターンがあり，今回筆者が話すのはその内の一つのことについてです。

MVCとはGUIアプリケーションを，モデル，ビュー，コントローラに切りわけて設計するデザインパターンです。モデルは簡単にはアプリケーションのデータとその振る舞い，ビューが見た目，コントローラはユーザからの操作について，分けて設計していきます。

図1　MVCモデルの一例

図1　MVCモデルの一例

チャットアプリケーションをMVC設計にする

チャットアプリケーションの拡張

チャットアプリケーションを拡張して行きます。以下の機能を追加します。

  • メッセージ削除機能

まずこれについて前回と同様にレイアウトを構成してnobackendで実装しておき，それをMilkcocoaの通信に置き換えます。

レイアウトを構築する

まず簡単にレイアウトを構築しましょう。

layout.html

<!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.htmlの表示は以下のようになるはずです。

図2　layout.htmlを表示したところ

図2　layout.htmlを表示したところ

BaaS, Milkcocoa, チャット, アプリケーション, HTML, JavaScript, GUI, MVC, SPA

著者プロフィール

花田恒一（はなだのぶかず）

株式会社Technical Rockstars CTO

グラフィカル言語Flowerや，BaaSサービスであるMilkcocoaを開発。Lisper。言語オタクであり，様々な言語開発経験がある。特に好きな言語はLisp（Shen）である。最近ではUXDに関心があり，福岡のUXコミュニティに積極的に参加している。

Twitter：@nobkz