Go to Qiita Advent Calendar Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@pooshikin

TypeScript Sampleをやってみるその１０

Posted at

はじめに

ToDoアプリのサンプルの備忘録です。
MVC(Model, View, Controller)モデルのアプリになります。
Web上のajaxライブラリを参照する本格的なつくりになっています。
技術的にはTypeScriptのクラスを使用してバックボーンモデルとビューを作成します。
DOM操作に関してはJQueryを使用しています。
ローカルで実行するためにPythonの簡易サーバを使用します。
ハイレベルな世界への突入感は否めませんが、必ずどこかに攻略するポイントがあることを信じて、「やってみましょう！」

前提

サンプル todomvc

Backbone.jsを使用したToDoサンプル。

ディレクトリ構成

./
├─css/
└─js/

ファイル構成

パス ファイル名 説明
. index.html ToDo画面html
. README.md このサンプルの説明と使用方法
. server.py Python簡易サーバスクリプト(新規追加)
. tsconfig.json TypeScriptのコンパイルコンフィグファイル
css destroy.png ×ボタン画像ファイル
css todos.css スタイルシート
js todos.js todos.tsのコンパイルにて作成されたJavaScriptファイル
js todos.js.map todos.tsのコンパイルにて作成されたmapファイル
js todos.ts ToDoサンプルTypeScriptファイル

新規追加

server.py

import http.server
import socketserver

PORT = 8000
Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print("serving at port", PORT)
    httpd.serve_forever()

クラス図

TS_047.jpg

実行

cd ./todomvc
tsc --sourcemap js\todos.ts
python server.py

結果

TS_048.jpg
ブラウザでURL http:/127.0.0.1:8000/ を指定します。
TS_049.jpg
What needs to be done?のテキストボックスにcar washを入力Enter
ca washがリストに追加されます。
TS_050.jpg
Mark all as completeのチェックボックスを選択します。
Clear 1 completed itemと出力したコマンドボタンが表示されます。
TS_051.jpg
コマンドボタンを押下すると追加したcar washが削除されます。
TS_052.jpg

ToDo（するべきこと）リストを作成して、完了したアイテムを削除し、ToDoアイテムの残を管理する単純なアプリです。

ポイント

この複雑な動作をどのように実現しているのか？
index.htmlを参照してみましょう。
scriptで指定している外部参照のJavaScriptが５つあります。

index.html抜粋
<head>
    <title>Backbone.js</title>
    <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
    <script src="js/todos.js"></script>
  </head>
ライブラリ ファイル名 機能
json2 json2.js jsonライブラリ
jquery jquery.min.js jQueryライブラリ(軽量）
underscore underscore-min.js 配列処理ライブラリ(軽量)
backbone backbone-min.js MVCフレームワーク(軽量)
backbone.localStorage backbone.localStorage-min.js MVCクライアントフレームワーク(軽量)
※軽量-コメント、改行コード、インデントなどロジック外のコード全てを削除してファイルサイズを小さくしたもの。

ToDoアプリの骨格はMVCを実現しているbackboneにあります。backbone.jsのサイトから抜粋。

入門

・・・
Backboneでは、データをモデルとして表現し、作成、検証、破棄してサーバーに保存することができます。 UIアクションによってモデルの属性が変更されると、モデルは「変更」イベントをトリガします。モデルの状態を表示するすべてのビューに変更が通知されるので、それに応じて応答し、新しい情報で自分自身を再描画することができます。完成したBackboneアプリケーションでは、特定のIDを持つ要素を見つけて、手動でHTMLを更新するためにDOMを調べるグルーコードを書く必要はありません。モデルが変更されたとき、ビューは単に更新されます。
Backboneは、ビジネスロジックをユーザーインターフェイスから切り離します。ロジックがUIに依存しないため、インターフェイスが使いやすくなります。
・・・

Models and Views

intro-model-view.png

Model

◦データとビジネスロジックを調整します。
◦サーバからロードして保存します。
◦データが変更されたときにイベントを終了します。

View

◦変更を待ち受け、UIを表示します。
◦ユーザー入力とインタラクティブ機能を扱います。
◦取り込まれた入力をモデルに送信します。

Collections

intro-collections.png

◦Modelのサーバーへのロードと保存を実行します。
◦Modelのリストに対して集計や計算します。
◦Modelで発生したすべてのイベントを管理します。

と説明を見てもピンときませんよね。
TypeDocで todos.tsのドキュメントを作成してみます。
TypeDocのインストール下記参照（ローカルにインストールの場合は-gを省略）

npm install -g typedoc --save

todos.ts のドキュメント出力。
コマンド : typedoc --out 出力ディレクトリ 対象ソース.ts

cd ./todomvc/js
typedoc --out ./doc/ todos.ts

typedocは出力ディレクトリ./doc/を作成してくれます。
./doc/に出力されたindex.htmlブラウザーで表示。
TS_053.jpg

todos.tsのメンバーを整理すると下記表になります。
ピンクのAppViewはtodos.tsの最後でインスタンスを作成しています。
このAppViewがtodos.tsのメイン処理です。あとはすべて従属するメンバーになります。

|module|interface|class|Varibles|
|:--|:--|:--|:--|:--|
|Backbone||Model||
|||Collection||
|||View||
||JQuery||
||||$|
||||_|
||||Store|
||||todos|
|||Todo||
|||ToDoList||
|||ToDoView||
|||AppView||
とりあえず登場人物は一覧化しました。
この登場人物の関係はtodos.tsのAppViewクラスにヒントがあります。

todos.tn抜粋
   // Delegated events for creating new items, and clearing completed ones.
    events = {
        "keypress #new-todo": "createOnEnter",
        "keyup #new-todo": "showTooltip",
        "click .todo-clear a": "clearCompleted",
        "click .mark-all-done": "toggleAllComplete"
    };

eventsにindex.htmlのidに対応するAppViewクラスのメッソドがjson形式で定義されています。
index.htmlのイベントドリブンでAppViewのメッソドが処理されます。

event id AppView.method
keypress new-todo createOnEnter
keyup new-todo showTooltip
click todo-clear clearCompleted
click mark-all-done toggleAllComplete
これから、todos.tsのイベントドリブンなシーケンス図を作成します。

TS_054.jpg
todos.tsとBackboneの混沌とした関係がやっと見える化できました。

ノート

TypeScriptソースハッキング

  • ドキュメントツールTypeDocで登場人物を抽出
  • 主人公の特定
  • 登場人物をイベントドリブンに見える化（シーケンス図）

まとめ

Backbone.jsのサンプルです。Backbone.jsサイトのサンプルでも今回取り上げたサンプルが紹介されています。
Hello world!からこのサンプルのレベルでは天と地の差感が否めません。
こんなアプリを作りたい、でもどうやって実装しているのか？
今回のノートにヒントがあります。

以上、おそまつ

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?