TypeScriptでjQueryを使ってJavaScript MVCメモ帳を作る

typescriptjquery TypeScriptでjQueryを使ってJavaScript MVCメモ帳を作る

jQueryを使ってメモ帳アプリを作る

jQueryの定義ファイルは公式サンプルのいくつかに同梱されている。jQueryUIの定義ファイルと合わせて下記にもコミットした。今回はなんちゃってMVCでメモ帳を作る。機能は保存ボタンを押したらlocalStorageにデータを保存して一旦とじてもメモ帳として使える簡易Webアプリとする。

サンプルの構成はドットインストールを参考にさせていただいた。自動保存機能は省略している。

HTML5で作る「シンプルメモ帳」 (全8回) – ドットインストール

TypeScriptをjQueryで使う方法

TypeScriptでjQueryを記述したファイルをコンパイルしようとしても

The name 'jQuery' does not exist in the current scope

となってjQueryなんてありませんと怒られてしまう。jQueryを使ったコードをコンパイルしたい場合はjQueryの定義ファイルを読み込む必要がある。

jQueryの定義ファイル

jQueryの使い方

定義ファイルを作業フォルダに入れたら、jQueryのコードを使うメインの.tsファイルの行頭に下記の1行を加える。///3つでコメントアウトされている感じだが、これが書式のようだ。ちなみに読み込んでもSublime Text 2でコードヒントが出るわけではない。VisualStudioを使っていれば出るのかもしれない。

/// <reference path="jquery.d.ts" />

クラスを定義する

サンプルコードのダウンロード

Model / View / Controllerにクラスを分けて作ってみる。又、イベント駆動にするためにModelの基底クラスとしてEventDispatcherを定義している。構造はあくまでもサンプルとして簡易的に作っている。

MemoPadModel

ModelクラスではlocalStorageのデータ管理のみを行い、更新通知機能を持つ。

class MemoPadModel extends EventDispatcher {
	namespace:string;

	constructor (namespace:string) {
		localStorage.setItem(namespace, localStorage.getItem(namespace) || '');
		this.namespace = namespace;

		super();
	}

	getData() {
		return localStorage.getItem(this.namespace);
	}

	update(value:any) {
		localStorage.setItem(this.namespace, value);
		this.dispatchEvent({type:'updated', value:value});
	}

	destroy() {
		this.dispatchEvent({type:'cleared'});
		localStorage.setItem(this.namespace, '');
	}
}

MemoPadController

Controllerクラスではmodelの更新を請負い、Viewから直接更新しない構造にする。

class MemoPadController {
	model:MemoPadModel;

	constructor(model:MemoPadModel) {
		this.model = model;
	}

	clear() {
		this.model.destroy();
	}

	save(value:string) {
		this.model.update(value);
	}
}

MemoPadView

ViewはModelの更新イベントを受け取り、表示の更新を行う。

class MemoPadView {
  textarea:any;
  saveButton:any;
  clearButton:any;

	constructor (model:MemoPadModel, controller:MemoPadController, ui:any) {
		var self = this;
		this.textarea = $(ui.textarea);
		this.saveButton = $(ui.saveButton);
		this.saveButton.on('click', function() {
			controller.save(self.textarea.val());
		});
		this.clearButton = $(ui.clearButton);
		this.clearButton.on('click', function() {
			controller.clear();
		});

		this.render(model.getData());

		model.addEventListener('updated', function(event) {
			self.render(event.value);
		});

		model.addEventListener('cleared', function(event) {
			self.render('');
		});
	}

	render (value:string) {
		this.textarea.val(value);
	}
}

アプリケーションの起動

ViewのID等を指定して、アプリケーションの初期化を行う。

class App {
	constructor(ui:any) {
		var model:MemoPadModel = new MemoPadModel('MemoPadApp');
		var controller:MemoPadController = new MemoPadController(model);
		var view:MemoPadView = new MemoPadView(model, controller, ui);
	}
}

var ui = {
	textarea:'#memoArea',
	saveButton:'#saveButton',
	clearButton:'#clearButton'
}

$(function() {
	var app = new App(ui);    
});

他のコードや吐き出されたJS等はサンプルコードで確認できる。