5/21に、「JavaScript＆TypeScript＋Knockout勉強会（AWDD#7）」に行ってきたので、２回に分けて勉強会の内容を紹介します。
JavaScript＆TypeScript＋Knockout勉強会（AWDD#7） - connpass
今回は２回目です。２つ目のセッションは、村上俊介さんの「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
リンク
第１回のリンクです。
「JavaScript＆TypeScript＋Knockout勉強会（AWDD#7）」に行ってきた（その１「JavaScriptで作る動的ウェブサイト入門」by 金箱遼さん） - プログラマーな日々
