プログラマーな日々

プログラマーをやっています。好きなツール:TaskChute Cloud・WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきた(その2「TypeScriptでKnockoutを使ってみた」by 村上俊介さん)

f:id:JHashimoto:20140409044240j:plain

5/21に、「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきたので、2回に分けて勉強会の内容を紹介します。

JavaScript&TypeScript+Knockout勉強会(AWDD#7) - connpass

 

今回は2回目です。2つ目のセッションは、村上俊介さんの「TypeScriptでKnockoutを使ってみた」でした。

セッション内容

宣伝タイム

モニプラ
ギフト
  • Facebookの友達にメッセージを送る
  • 運がよければプレゼントが当たる
  • TypeScirptとKnockoutで作っている
ギフトの要求仕様
  • Facebookの友達一覧を表示する
  • 友達にメッセ-ジを入力
  • 入力したメッセージをともだちに送る
  • 一画面で完結するように
使ったツール
  • Jasmine
  • Grunt
    • concat、minifyに

TypeScript

  • MSのAltJS
  • JavaScriptのスーパーセット
特徴
  • コンパイルしてJSを生成する
  • 生成されるJSが綺麗で可読性が高い
  • 静的片付け
  • classベースで書ける
  • ES6の仕様を多く取り入れている
  • SourceMap対応
classベース
  • classはEcmaScript6で導入予定
  • 型推論があり静的型言語
  • 動的型言語が苦手な人に
  • バグに気付きやすい
  • SourceMap対応なのでTypeScriptのままブラウザでデバッグできる
SourdeMap
  • TypeScriptやSassのようにJSやCSSを生成する言語と変換前のコードとの対応表
  • Chromeの場合、Chrome Developer ToolでSouceMapを有効にする必要がある
  • TypeScriptのソースにブレークポイントを設定し、デバッガで止めることも可能
TypeScriptの採用理由
  • コンパイラがある
    • 実行前にエラーを示してくれると嬉しかった
    • ちょっとコンパイルが遅い
  • 綺麗なJavaScriptが生成される
    • 何らかの理由でTypeScriptが使えなくなってもメンテしやすい
    • JavaScriptの記述方法に慣れていなくてもとっつきやすい
    • JavaScriptを覚えなくていいわけじゃない
導入メリット
  • JavaScriptよりも書きやすく開発効率が高い
  • コンパイルエラーで検出
  • TypeScriptから生成されるJavaScriptを見て良い書き方がわかった
導入デメリット
  • TypeScript自体の変更の影響が大きい
    • 0.9系の時のアップデート時の破壊的変更
      • boolがbooleanになった
      • ジェネリクスが導入された
    • 1.0がリリースされたので、今後はこの問題は発生しない
  • 開発環境の違いで困る
    • コンパイル環境の違いでエラーになったり、そもそも開発環境がない人がいる
参考リンク

Welcome to TypeScript
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

 

TypeScript クイックガイド - phyzkit.net
Starts from JavaScript, Ends with JavaScript.

 

Knockout

主なMVVMフレームワーク
  • Angurar.js
  • Backbone.js
  • Knockout.js
Backbone
  • 大規模向けなイメージ
  • データバインドがしづらい
  • 個人的に書き方が苦手
Angular
  • Knockoutの方が処理が軽い(と思っていた)
  • ファイルサイズが大きい
  • 多機能で今回の要件にはオーバースペック
Knockout
  • フロントエンドJavaScriptフレームワーク
  • MVVM
  • Angular、Backboneと比較されるが人気は低い印象
MVVM
  • Model
    • JavaScriptのデータ構造
  • View
    • HTML
  • ViewModel
    • ViewとModelを相互にバインド
Knockoutの特徴
  • 他のライブラリへの依存がなく軽量
  • Angular
    • サイズが大きい
    • jQueryの軽量版を自前で実装している
  • Backbone
    • Underscore.jsに依存
  • ルーティングやValidateはない
  • 日本語に翻訳されたドキュメント
採用理由
  • 双方向バインドが便利
  • 不要な機能が少ない
  • ファイルサイズが小さい
  • jQueryが必要だったので、軽量な方がよかった
Knockoutの導入メリット
  • 双方向バインド快適
  • 記述が簡単で理解してもらいやすい
デメリット
  • 多少は学習コストがかかる
  • HTMLにdata-bind属性が溢れる
    • でもjQueryのid、classよりはまし
Knockoutjs context debugger
  • ChromeのExtenshion
  • knockoutにBindされている値を確認できる
  • とても便利!

TypeScriptとKnockoutの併用

併用すると
  • 監視対象には、KonockoutObservable<T>型、KockoutComputed<T>型を使う
  • <T>には監視する値の型が入る
Grunt
  • TypeScriptのファイルをclassごとに分けたい
    • JavaScriptのファイルが複数できてしまう
      • API、ViewModel、Utilなど
  • リクエスト回数を抑えるためファイルを連結する
  • レスポンスサイズを抑えるためminifyする
  • でもTypeScriptのビルドオプション「tsc -h」でOK
  • ビルドはIDEにまかせっぱなしだった
  • grunt-typescriptを使えば、ビルドオプションを共有できる

まとめ

  • AltJSを使うとJavaScriptが苦手な人でも書きやすい
  • TypeScriptは綺麗なJavaScriptを生成してくれる
    • JavaScriptの理解を助ける
  • フレームワーク
    • JavaScriptは自由な言語なのでルールを設けないと破綻
  • Angular,Backbone,Vue.jsなどがある

セッション資料

TypeScriptでKnockoutを書いてみた - SSSSLIDE

リンク

第1回のリンクです。

「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきた(その1「JavaScriptで作る動的ウェブサイト入門」by 金箱遼さん) - プログラマーな日々