{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/event-report-of-js-app-in-tanemaki/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"724b1204-8c9c-5c82-8f71-82ebbd261604","excerpt":"こんにちは。 しばらく更新が停滞してしまいました。 今回は、第一回 JS-App 勉強会@タネマキという勉強会に参加させていただいたので、 勉強会内で行われた LT のメモを残します。 1, Knockout.js でさくさくアプリ開発 (@ken_zookie…","html":"<p>こんにちは。<br>\nしばらく更新が停滞してしまいました。<br>\n今回は、<span class=\"removed_link\" title=\"http://atnd.org/event/jsapp\">第一回 JS-App 勉強会@タネマキ</span>という勉強会に参加させていただいたので、<br>\n勉強会内で行われた LT のメモを残します。</p>\n<!--more-->\n<h2 id=\"1-knockoutjs-でさくさくアプリ開発-ken_zookie\" style=\"position:relative;\"><a href=\"#1-knockoutjs-%E3%81%A7%E3%81%95%E3%81%8F%E3%81%95%E3%81%8F%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-ken_zookie\" aria-label=\"1 knockoutjs でさくさくアプリ開発 ken_zookie permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1, Knockout.js でさくさくアプリ開発 (@ken_zookie)</h2>\n<ul>\n<li>ターゲット\n<ul>\n<li>アプリに動きをもたせるエンジニア</li>\n<li>デザインも自分でやるエンジニア</li>\n</ul>\n</li>\n<li>knockout.js</li>\n<li>linq.js</li>\n</ul>\n<p>あたりを watch している</p>\n<h3 id=\"javascript--開発者にやさしくない\" style=\"position:relative;\"><a href=\"#javascript--%E9%96%8B%E7%99%BA%E8%80%85%E3%81%AB%E3%82%84%E3%81%95%E3%81%97%E3%81%8F%E3%81%AA%E3%81%84\" aria-label=\"javascript  開発者にやさしくない permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>JavaScript = 開発者にやさしくない</h3>\n<ol>\n<li>DOM 操作\n<ol>\n<li>なんたら Element?</li>\n<li>ググりまくり</li>\n</ol>\n</li>\n<li>Ajax</li>\n<li>ID 地獄、callback 地獄\n<ol>\n<li>画面の各パーツに ID,id, id…</li>\n<li>画面の作り、見た目だけ変えたいのに、プログラムまで変わってしまう</li>\n</ol>\n</li>\n</ol>\n<h3 id=\"何が問題なのか\" style=\"position:relative;\"><a href=\"#%E4%BD%95%E3%81%8C%E5%95%8F%E9%A1%8C%E3%81%AA%E3%81%AE%E3%81%8B\" aria-label=\"何が問題なのか permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>何が問題なのか</h3>\n<p>開発したては特に問題なくさくさく実装できる。<br>\n<strong>出来立てのスパゲティは美味しい</strong></p>\n<p>ある日<br>\n度重なる仕様変更…<br>\n<strong>ID, コールバック地獄から抜け出したい</strong></p>\n<p>HTML から ID を消して、js 側でオブジェクトを持つ => <strong>MVVM</strong></p>\n<h3 id=\"mvvm\" style=\"position:relative;\"><a href=\"#mvvm\" aria-label=\"mvvm permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>MVVM</h3>\n<ul>\n<li>View\n<ul>\n<li>HTML</li>\n</ul>\n</li>\n<li><strong>ViewModel</strong>\n<ul>\n<li>js</li>\n</ul>\n</li>\n<li><strong>Model</strong>\n<ul>\n<li>js その他</li>\n<li>ビジネスロジックもここに入る</li>\n</ul>\n</li>\n<li>データバインディング</li>\n<li>コマンドバインディング が必要</li>\n</ul>\n<p>=> <strong>Knockout.js</strong></p>\n<h3 id=\"knockoutjs\" style=\"position:relative;\"><a href=\"#knockoutjs\" aria-label=\"knockoutjs permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Knockout.js</h3>\n<ul>\n<li>バインディングエンジン\n<ul>\n<li>宣言することで、HTML と ViewModel を紐付けて、同期させる</li>\n</ul>\n</li>\n<li>ko.applyBinding\n<ul>\n<li>HTML 要素と js のデータをバインディング</li>\n</ul>\n</li>\n<li>ko.observable\n<ul>\n<li>変更通知プロパティ（ゲッタ、セッタ）</li>\n<li>変更を監視して同期させる</li>\n<li>input だと blur 時に動機がかかる = <strong>リアルタイムじゃない</strong>\n<ul>\n<li>1 文字ごとに反映させる、<strong>リアルタイムにすることが可能</strong></li>\n</ul>\n</li>\n</ul>\n</li>\n<li>ko.computed\n<ul>\n<li>依存しているデータを記憶し、それら全ての変更を監視してデータを更新</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"弱点\" style=\"position:relative;\"><a href=\"#%E5%BC%B1%E7%82%B9\" aria-label=\"弱点 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>弱点</h3>\n<ul>\n<li>Knockout.js = あくまで<strong>バインディングエンジン</strong>\n<ul>\n<li><strong>バインディングで解決できないことも有る</strong></li>\n<li>Canvas は無理… タグのバインディングが出来ない手続き型</li>\n<li>SVG ならいけそう！ => ライブラリ製作中</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"mvvm-はデザインに力を入れる今の設計のあり方としてもっとも有力な候補\" style=\"position:relative;\"><a href=\"#mvvm-%E3%81%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E5%8A%9B%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E4%BB%8A%E3%81%AE%E8%A8%AD%E8%A8%88%E3%81%AE%E3%81%82%E3%82%8A%E6%96%B9%E3%81%A8%E3%81%97%E3%81%A6%E3%82%82%E3%81%A3%E3%81%A8%E3%82%82%E6%9C%89%E5%8A%9B%E3%81%AA%E5%80%99%E8%A3%9C\" aria-label=\"mvvm はデザインに力を入れる今の設計のあり方としてもっとも有力な候補 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>MVVM はデザインに力を入れる、今の設計のあり方としてもっとも有力な候補</h3>\n<p>knockout = js-MVVM の叩き台として重要なポジション</p>\n<h2 id=\"2-angularjs-で勝機をつかむ予定-hivesbee\" style=\"position:relative;\"><a href=\"#2-angularjs-%E3%81%A7%E5%8B%9D%E6%A9%9F%E3%82%92%E3%81%A4%E3%81%8B%E3%82%80%E4%BA%88%E5%AE%9A-hivesbee\" aria-label=\"2 angularjs で勝機をつかむ予定 hivesbee permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2, AngularJS で勝機をつかむ(予定) (@Hivesbee)</h2>\n<p>あんぎゅら？</p>\n<ul>\n<li>背景\n<ul>\n<li>業務は web アプリケーションの提案・拡販</li>\n<li>AngularJS を学習中</li>\n<li>提案時の問題を絡めて、AngularJS を紹介する</li>\n<li>提案\n<ul>\n<li>モックが一番訴求力が有る</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>訴求力の有るモック\n<ul>\n<li><strong>動きがある</strong>\n<ul>\n<li>つたわらないなら、紙でいい</li>\n</ul>\n</li>\n<li><strong>短期間で作成できる</strong>\n<ul>\n<li>客の熱が冷めないうちに</li>\n</ul>\n</li>\n<li><strong>変更に柔軟に対応できる</strong></li>\n</ul>\n</li>\n<li>jQuery\n<ul>\n<li>DOM とイベントが強く結合している</li>\n<li>汎用化しにくい => <strong>js フレームワーク</strong></li>\n</ul>\n</li>\n</ul>\n<h3 id=\"js-フレームワーク\" style=\"position:relative;\"><a href=\"#js-%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF\" aria-label=\"js フレームワーク permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>js フレームワーク</h3>\n<ul>\n<li>サーバが受け持つ担務を吸収してくれる\n<ul>\n<li>ルーティング</li>\n<li>画面パーツ結合</li>\n<li>MVC の V と C をサーバから引き剥がす</li>\n</ul>\n</li>\n<li>js 側の「脱 JSP」\n<ul>\n<li>データバインド</li>\n<li>リスト</li>\n<li>フィルタリング・ソート => 今回は<strong>AngularJS</strong>を採用</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"angularjs\" style=\"position:relative;\"><a href=\"#angularjs\" aria-label=\"angularjs permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AngularJS</h3>\n<p>※今回のゴールはモックを作るまで</p>\n<ul>\n<li>低コスト\n<ul>\n<li><strong>Scope</strong>という概念のおかげ</li>\n</ul>\n</li>\n<li>シナリオテストが用意</li>\n<li>Google 提供のフレームワークだから継続性も安心？</li>\n</ul>\n<h3 id=\"scope\" style=\"position:relative;\"><a href=\"#scope\" aria-label=\"scope permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Scope</h3>\n<ul>\n<li>コントローラの制御範囲を表す * = DOM のスコープと一致した範囲\n<ul>\n<li>コントローラの入れ子</li>\n</ul>\n</li>\n<li>DOM とコントローラが 1:1 対応\n_ ファイル単位で分割、要素ごとに分割が可能\n_ <strong>構造に依存しない</strong>ため柔軟</li>\n</ul>\n<h3 id=\"e2etesting\" style=\"position:relative;\"><a href=\"#e2etesting\" aria-label=\"e2etesting permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>e2eTesting</h3>\n<ul>\n<li>シナリオテスト用のフレームワーク</li>\n<li>いくら提案用のモックとはいえバグは出したくない</li>\n</ul>\n<h3 id=\"開発効率を加速させるもの\" style=\"position:relative;\"><a href=\"#%E9%96%8B%E7%99%BA%E5%8A%B9%E7%8E%87%E3%82%92%E5%8A%A0%E9%80%9F%E3%81%95%E3%81%9B%E3%82%8B%E3%82%82%E3%81%AE\" aria-label=\"開発効率を加速させるもの permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>開発効率を加速させるもの</h3>\n<ul>\n<li>ルーティング、ng-View</li>\n<li>$Log（console.log の代替？）</li>\n</ul>\n<h3 id=\"向いてるもの\" style=\"position:relative;\"><a href=\"#%E5%90%91%E3%81%84%E3%81%A6%E3%82%8B%E3%82%82%E3%81%AE\" aria-label=\"向いてるもの permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>向いてるもの</h3>\n<ul>\n<li>簡単なアプリ</li>\n<li>業務系アプリ</li>\n</ul>\n<h3 id=\"向いてないもの\" style=\"position:relative;\"><a href=\"#%E5%90%91%E3%81%84%E3%81%A6%E3%81%AA%E3%81%84%E3%82%82%E3%81%AE\" aria-label=\"向いてないもの permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>向いてないもの</h3>\n<ul>\n<li>UX を考慮したアプリ</li>\n<li>アニメーションとの連携</li>\n</ul>\n<h3 id=\"イケてないところ\" style=\"position:relative;\"><a href=\"#%E3%82%A4%E3%82%B1%E3%81%A6%E3%81%AA%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D\" aria-label=\"イケてないところ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>イケてないところ</h3>\n<ul>\n<li>実は<strong>学習コストはバカ高い</strong>\n<ul>\n<li>導入はたやすく、<strong>ある程度を超えると難易度が跳ね上がる</strong></li>\n</ul>\n</li>\n<li>Backbone.js より重い</li>\n</ul>\n<h3 id=\"まとめ\" style=\"position:relative;\"><a href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-label=\"まとめ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>まとめ</h3>\n<ul>\n<li>簡単なものなら簡単に作成できる * モックアップ向け</li>\n</ul>\n<h2 id=\"3-設計ポイントの比較で知る-backbonejs-utwang\" style=\"position:relative;\"><a href=\"#3-%E8%A8%AD%E8%A8%88%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E6%AF%94%E8%BC%83%E3%81%A7%E7%9F%A5%E3%82%8B-backbonejs-utwang\" aria-label=\"3 設計ポイントの比較で知る backbonejs utwang permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3, 設計ポイントの比較で知る Backbone.js @utwang</h2>\n<ul>\n<li>Backbone * Rails の設計ポイント</li>\n<li>破綻しない Web アプリ開発\n_ 設計することで破綻を防ぐ\n_ 設計ポイントから Backbone の特徴を知る</li>\n</ul>\n<h3 id=\"backbonejs\" style=\"position:relative;\"><a href=\"#backbonejs\" aria-label=\"backbonejs permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Backbone.js</h3>\n<ul>\n<li>RESTful な JSON インタフェースを備えた js ライブラリ</li>\n<li>Router, View, Model, Collection で構成される</li>\n<li>View がコントローラのような役割</li>\n</ul>\n<h3 id=\"必要最小限の設計\" style=\"position:relative;\"><a href=\"#%E5%BF%85%E8%A6%81%E6%9C%80%E5%B0%8F%E9%99%90%E3%81%AE%E8%A8%AD%E8%A8%88\" aria-label=\"必要最小限の設計 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>“必要最小限”の設計</h3>\n<ul>\n<li>チーム開発</li>\n<li>調整が必要になったときの土台</li>\n<li>インクリメンタル設計</li>\n</ul>\n<h3 id=\"何を設計するか\" style=\"position:relative;\"><a href=\"#%E4%BD%95%E3%82%92%E8%A8%AD%E8%A8%88%E3%81%99%E3%82%8B%E3%81%8B\" aria-label=\"何を設計するか permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>何を設計するか？</h3>\n<ul>\n<li>システムの<strong>Input と Output が明確に</strong>なれば振る舞いが検討できる</li>\n</ul>\n<h3 id=\"js-での-input-と-output\" style=\"position:relative;\"><a href=\"#js-%E3%81%A7%E3%81%AE-input-%E3%81%A8-output\" aria-label=\"js での input と output permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>js での input と output</h3>\n<ul>\n<li>HTTP リクエスト</li>\n<li>HTML</li>\n<li>DB への I/O</li>\n</ul>\n<h3 id=\"jsview-設計\" style=\"position:relative;\"><a href=\"#jsview-%E8%A8%AD%E8%A8%88\" aria-label=\"jsview 設計 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>jsView 設計</h3>\n<ul>\n<li>動的/静的な DOM の分別</li>\n<li>Backbone の View と結びつける DOM 要素を定義する</li>\n</ul>\n<h3 id=\"model\" style=\"position:relative;\"><a href=\"#model\" aria-label=\"model permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Model</h3>\n<ul>\n<li>対応する REST API を 1 リソースとして扱う</li>\n<li>Model がやりとりする API エンドポイントを決める</li>\n<li>Model にエンドポイントを設定すると、REST クライアントのように振舞ってくれる</li>\n<li>API から受け取る JSON を元に Model に必要になるプロパティを決める * API から帰される JSON は必ずしも Model で扱いたいフォーマットとは限らない</li>\n</ul>\n<h3 id=\"backbone-での問題点\" style=\"position:relative;\"><a href=\"#backbone-%E3%81%A7%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9\" aria-label=\"backbone での問題点 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Backbone での問題点</h3>\n<ul>\n<li>DOM 要素単位での VIew クラスの割り当て\n_ View のネスト構造が複雑になる\n_ ファイル単位</li>\n</ul>\n<h3 id=\"rails--backbone\" style=\"position:relative;\"><a href=\"#rails--backbone\" aria-label=\"rails  backbone permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Rails × Backbone</h3>\n<ul>\n<li>サーバは JSON を返す API だけになるので、<br>\nRails のようにサーバが重たいものは特に必要ない</li>\n</ul>\n<h2 id=\"4-coffeescript--grunt\" style=\"position:relative;\"><a href=\"#4-coffeescript--grunt\" aria-label=\"4 coffeescript  grunt permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4, CoffeeScript + Grunt</h2>\n<ul>\n<li>中野 稔@nenjiru</li>\n<li>カヤックの HTML ファイ部のひと</li>\n<li>Coffee を良い感じにコンパイルする<strong>grunt-unite-coffee</strong>を作った</li>\n</ul>\n<h2 id=\"5-nodejs--arduino\" style=\"position:relative;\"><a href=\"#5-nodejs--arduino\" aria-label=\"5 nodejs  arduino permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5, Node.js + Arduino</h2>\n<h3 id=\"duino\" style=\"position:relative;\"><a href=\"#duino\" aria-label=\"duino permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>duino</h3>\n<ul>\n<li>Nodejs で Arduino をいじれるようにするライブラリ</li>\n<li>Arduino 用ファイルもあって、それを Arduino に書き込んでおくことで、js から API を叩ける</li>\n</ul>\n<h2 id=\"6-cucumber-による-html5-アプリの受け入れテスト自動化-shida\" style=\"position:relative;\"><a href=\"#6-cucumber-%E3%81%AB%E3%82%88%E3%82%8B-html5-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8F%97%E3%81%91%E5%85%A5%E3%82%8C%E3%83%86%E3%82%B9%E3%83%88%E8%87%AA%E5%8B%95%E5%8C%96-shida\" aria-label=\"6 cucumber による html5 アプリの受け入れテスト自動化 shida permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>6, Cucumber による HTML5 アプリの受け入れテスト自動化 (@shida)</h2>\n<ul>\n<li>ビー・アジャイル代表</li>\n</ul>\n<h3 id=\"cucumber\" style=\"position:relative;\"><a href=\"#cucumber\" aria-label=\"cucumber permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>cucumber</h3>\n<ul>\n<li>いろんな言語で動く</li>\n<li><code>回帰テスト？</code>を自動化</li>\n<li>リグレッションを恐れなくて済む</li>\n<li>コードに手を入れるのが怖くなる</li>\n<li>リファクタしてコードをクリーンに保てる</li>\n<li>積極的に細かいバグ修正や仕様変更に応えられる</li>\n<li>テストコード自体が仕様書となる</li>\n<li>ドキュメントを書く手間を軽減できる</li>\n</ul>\n<blockquote>\n<p>回帰テスト【リグレッションテスト】regression test</p>\n<p>プログラムを変更した際に、その変更によって予想外の影響が現れていないかどうか確認するテスト。</p>\n<p>もっとも一般的に行われるのは、プログラムのバグを修正したことによって、そのバグが取り除かれた代わりに新しいバグが発生していないかどうか、という検証である。</p>\n<p><span class=\"removed_link\" title=\"http://e-words.jp/w/E59B9EE5B8B0E38386E382B9E38388.html\">回帰テストとは 〔リグレッションテスト〕 〔退行テスト〕 – 意味/解説/説明/定義 ： IT 用語辞典</span></p>\n</blockquote>\n<h3 id=\"tdd-って工数増えないの-\" style=\"position:relative;\"><a href=\"#tdd-%E3%81%A3%E3%81%A6%E5%B7%A5%E6%95%B0%E5%A2%97%E3%81%88%E3%81%AA%E3%81%84%E3%81%AE-\" aria-label=\"tdd って工数増えないの  permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>TDD って工数増えないの？ ？</h3>\n<ul>\n<li>過去のテスト用メソッドを流用できる</li>\n<li>コーディング工数は確かに触れるけども、</li>\n<li>総合的に見れば工数が減る\n<ul>\n<li>ドキュメントを書く工数</li>\n<li>テスト工数</li>\n<li>引き継ぎや教育の工数</li>\n<li><code>受け入れテスト？</code>の工数</li>\n</ul>\n</li>\n</ul>\n<blockquote>\n<p>受け入れテスト（うけいれてすと）\nacceptance testing / 検収テスト / 承認テスト</p>\n<p>納入されたシステムやソフトウェアの受け入れを判定するための公式テストのこと。</p>\n<p>システムやソフトウェアの機能・性能などが本来的な目的や使用意図に合致しているのか、妥当性確認を行う。</p>\n<p>一般に受け入れテストは、オファーしたものが所定の条件に適合しているかを確認する作業であり、次工程に進むことに承認を与える過程である。 原則として利用者や購入者が主体となって行うテストを指すが、元請けが下請けからの納品物を検収する作業をいう場合もある。</p>\n<p><a href=\"http://www.itmedia.co.jp/im/articles/1111/07/news124.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">情報システム用語事典：受け入れテスト（うけいれてすと） – ITmedia エンタープライズ</a></p>\n</blockquote>\n<h3 id=\"書き方\" style=\"position:relative;\"><a href=\"#%E6%9B%B8%E3%81%8D%E6%96%B9\" aria-label=\"書き方 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>書き方</h3>\n<ul>\n<li>日本語で書ける\n<ul>\n<li>お客様にとって可読性の高いテストが書ける</li>\n</ul>\n</li>\n<li>１行＝１ステップ</li>\n<li>Selenium との連携もできる = ブラウザを操作することも出来る</li>\n</ul>","timeToRead":12,"frontmatter":{"title":"第一回 JS-App勉強会@タネマキ LTメモ","tags":["angular.js","Backbone.js","CoffeeScript","Grunt","knockout.js","Nodejs"],"date":"April 29, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='162'%20viewBox='0%200%20400%20162'%20preserveAspectRatio='none'%3e%3cpath%20d='M4%209v2l1%203%201%202c1%200%201%201-1%202-1%201-1%201%201%201h3c1%201%201%201%202-1l1-2v2l1%201%201-5%201-4c2-1%201-2-5-2-4-1-5%200-6%201m88%200v10l2-1h1l4%201h5l-1-5c0-5-3-8-4-6s-1%202-3%201c-2-2-2-2-4%200m19%200h-2l-2-1c-2%200-2%200-1%201l1%201c-2%201-3%205-1%205v3c-3%201%200%202%205%201h6l-1-5c0-5-3-9-5-5m31%201c-2%202-2%202-3%201l-4-2c-2%200-2%200-1%201v1h-2c-2%201-1%205%201%206%203%202%205%202%205-1%201-2%204-3%206-2%201%201%201%201-1%203-2%201-2%202-1%202l3-1%202-2c1%200%202-1%202-3%200-3%200-4-2-4l-2-1c0-1-2%200-3%202M31%2014v5h11V8H31v6m40-1l-1%205%201-1h4l1%201%202%201h1l2-1%202-1c1-1%201%200%201%201%200%202%202%203%202%201l1-1c2%201%203%200%203-3-1-3-5-4-6-2h-1l-2-1c-3%200-3%201-3%203s0%202-2-2c-3-5-3-5-5%200m214%2025v9h107V30l-54-1h-53v9m59%2026v1l-1%203-2%204c-1%201-1%201-1-1%201-2-1-4-2-2h-2l-2%201-3%201h-2v-2l2-1c3%201%205%200%203-1-2-2-5-1-7%201s-2%202%200%204c1%201%201%201-1%201s-3%201-3%202l-2%203-3%205-2%204h2l-1%202c-1%202-2%203-1%205l-1%201-1-3h-2c-2%202-4%205-4%208l-1%204v1l2-1c0-2%204-1%204%200%201%205-1%208-5%2015-2%203-2%203%200%202l2-1h7c2-3%204-2%201%200-1%202-1%202%201%202%202-1%202-1%201%201-4%203-1%202%203-2l4-2-10%209-2%203c-2%204-6%206-7%204l1-1%203-1-2-2-1-2%202%201c1%202%202%201%201-1l-1-3c0-2-2-4-3-3l-1%203v4l-1%201-1-1-1-1c-3%201-4-1-2-3h1l2%201%201-4c0-4%200-7%202-8%202-2%201-3-2-3s-6%203-6%205h-1c-1-3%205-8%207-7s3%201%203-2c1-2%200-3-4%200l-6%201c-2%200-2%200%201-1s4-2%206-9a42%2042%200%20016-11c-7-1-7-1-7%206%200%202-5%200-6-2v-4c1-3-1-5-2-2-2%202-2%203-3%201h-2l1%203c4%201-1%206-6%206h-3v2c1%200%202%206%201%207l-1%202c0%202%200%202%203%202%201-1%202%200%202%201l-1%202-2%201%203%201c1-1%203%200%205%201l2%202-4%202-5%204c0%203%202%207%204%207l5%204%205%203%201%203c1%204%203%206%204%205l1%201-2%201c-2%200-4%202-2%203%201%201%206-2%206-4l1-1v3c0%202%200%202%202%201h4c2-1%202-1%202%201-2%205%2010%208%2016%203%209-6%2015-7%2015-3%200%202%200%202%203%202h2l3-1%202-2-1%203c-2%201%200%203%201%201h2l4-5c4-6%207-9%209-9%201%201%201%200%201-2s1-3%202-3l3-1h-3l-2-2h1l1%201%201-1v-1l1%202h1v-2c-1-2-1-2%201-2l2%201c0%205%200%2011%201%208%200-2%201-3%202-3v-1l-2-1c0-3%202-3%204-1h2c0-2-2-3-5-3-2%200-2%200%200-1l3-2%201-2%204-12%205-16c2-3%202-6%202-18V63h-20l2%203%208%2010%204%207-3%206c-6%2013-11%2015-9%205%200-6-3-10-7-10-3%200-4-1-6-6l-2-4-2-1v-2c1-1%201-1-1-2l-4%201h-4c-2-2-3-1-2%201h-3l-1-1c-2-2-2%200%200%202%201%201%202%202%204%201h2c-1%202-8%203-10%202l-1-3v-3c-1-1%200-1%203-1%206%200%205-3-2-4h-2m44%2087l-9%205%2011%201h10v-5l-1-5-11%204'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.474074074074074,"src":"/static/25c1a49f8bda9cbee280fc9b1124c730/7f4a1/featured-image.png","srcSet":"/static/25c1a49f8bda9cbee280fc9b1124c730/1ec58/featured-image.png 334w,\n/static/25c1a49f8bda9cbee280fc9b1124c730/7f4a1/featured-image.png 604w","srcWebp":"/static/25c1a49f8bda9cbee280fc9b1124c730/e33b9/featured-image.webp","srcSetWebp":"/static/25c1a49f8bda9cbee280fc9b1124c730/cd98f/featured-image.webp 334w,\n/static/25c1a49f8bda9cbee280fc9b1124c730/e33b9/featured-image.webp 604w","sizes":"(max-width: 604px) 100vw, 604px"}}}}}},"pageContext":{"slug":"/event-report-of-js-app-in-tanemaki/","previous":{"fields":{"slug":"/automated-build-ios-anndroid-with-titanium/"},"frontmatter":{"title":"titanium-cliとGruntを使って、コマンドラインからiOS・Androidアプリのビルドを自動化する方法(前編)","tags":["Android","iOS","JavaScript","Titanium studio"]}},"next":{"fields":{"slug":"/learn-inherit-pattern-from-coffeescript-and-typescript/"},"frontmatter":{"title":"CoffeescriptとTypescriptから学ぶjsでのクラス・継承パターン","tags":["JavaScript"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}