Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
入り口としてのKnockout.js
Search
TAK WAT
October 21, 2017
Programming
0
390
入り口としてのKnockout.js
TAK WAT
October 21, 2017
Tweet
Share
More Decks by TAK WAT
See All by TAK WAT
2021年にIE対応を断るのは間違っているだろうか
takwat
1
250
EFOのお話
takwat
1
290
Vueへの道
takwat
0
28
Knowledge BBQ VOL.3
takwat
1
370
Do You Like JobQueue?
takwat
0
69
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
850
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
ニーリーにおけるプロダクトエンジニア
nealle
0
860
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A designer walks into a library…
pauljervisheath
207
24k
A Tale of Four Properties
chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Navigating Team Friction
lara
187
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Invisible Side of Design
smashingmag
301
51k
How to Ace a Technical Interview
jacobian
278
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
入り口としてのKnockout.js
自己紹介 • ソフトウェアエンジニア • 勉強会ではフロントエンドよりの話をしますがもともとバックエンド側の人です
実際に仕事や個人プロジェクトで使っているもの • Vue.js / React.js / Knockout.js • 日付関係の処理 moment.js
/ 日付範囲はmoment.rangeで • その他かゆいところに手が届く lodash • WebStorage 関連 Store.js ◦ WebStorageに絡む細かい差異の吸収 (Safariのプライベートモードで localStorage使えない問題も 代替手段で解決してくれるようで ) • IndexedDB は lovefield ◦ WebSQLさんは犠牲になったのだ
フロント側のJavaScript ライブラリやフレームワーク
• Angular • React • Backbone • Vue • Riot
• 生JSやjQueryで頑張る いろいろありますが今回はKnockout.jsです
むかしむかし(2011年 震災直後) 当時は社内SEをしていて 社内システム構築をするプロジェクト jQuery + jQuery UI + jQuery
何とかをいっぱい使って、当時としてはかなりリッチなフロン トエンド(グラフィカルなスケジューラつき) PHP(CodeIgniter 2)を使ってバックエンドを構築 じきにこいつはJSONのクエリをSQLに変換して結果をJSONで書き出すだけのBOT化した 無事リリースしてユーザ部門も使い方に慣れて新機能の要望も出てきたあたりで
あの・・・ いい加減jQueryでDOMいじるの辛いです・・・
jQueryだと辛いこと(1) どんだけ頑張ってもフロントからのデータ処理とそのデータをHTML上に反映させるため のDOM操作を書く部分が冗長 var data = {text: ‘Hello’, world: true};
var span = $(‘<span/>’).text(data.text); if(data.world){ span.addClass(‘hello-world’); } span.appendChild()・・・
jQueryだと辛いこと(2) (1)のせいで、UI部分はデザイン専門の方に奇麗にデザイン→ コーディングしてもらっても、結局プログラマのほうで自力やスクリ プト内でidやclassふるしかない →そのうち要素のidがかぶる、クラス名が長くなる事象が頻発する →かくしてデザイン専門の方がいじれない HTMLのようなおぞましい何かと名状し難い JavaScriptで 書かれたと思われる何かが出来上がり →デザイン用HTMLとプログラム用HTMLの差分が酷く二重管理というアンチパターン
それでも まだjQuery関係だけで頑張れる範囲ではあったので細々とメンテ してました ただ、さすがにそろそろアカン・・・ということでこの辺の煩わしさか ら解放されるべく色々と調べてみたのが2012年末頃
第一期 テンプレートエンジンの活用 jQuery.tmpl とか jsRender / jsViewあたり テキスト埋め込みの問題は楽にはなったものの、フォームとの連携 document.on(‘change’, ‘input[name=”foo”]’, function(){
… }); まだ手書きでイマイチ楽になった気がしなかった
Knockout.js • このテのライブラリとしてはかなり古参 • DOMとJavaScript内部のオブジェクトを紐づけること以外は干渉してこない • リアルなDOMとJS内のオブジェクトとの2way binding ◦ Observable(監視対象)なオブジェクトの値が変更されると直接リアルDOMにも
反映しようとする ▪ 最近のフレームワークはここをVirtualDOM経由にして差分のみ描画とか • このリアルDOM直接というのが実はすごく大事で、同じくリアルDOM 直接派のjQuery系と握手できる
そんなKnockout.jsの2017年現在での立ち位置 Microsoftの中の人が開発していてVisual Studio 2012 で多少日の目をみましたがとか くマイナーでリリース年から見ても「古く機能も少ない」イメージを持たれているのは確か • SPA(Single Page Application)やRouter
• Virtual DOM • Flux • SSR(Server Side Rendering) 今をときめくフレームワークやライブラリには当たり前のように存在しているだろうこの辺の 要素があまりないわけで・・・
だが、それがいい
当時欲しかったものの要件 • 手っ取り早くはじめられるもの • 当時はSPAにするつもりはあまりなかったので、ルーティングは要らない ◦ URLごとにリロードする普通のWebサイト • 既存のHTMLへの「ちょい足し」からはじめられる
Demo Hello World
Pros(1) • 敷居が低く学習コストも低い ◦ 基本的に超シンプル ◦ チュートリアルが充実してる • 大上段からコンポーネントやディレクティブといったものを作るのではなく既 存のHTMLにちょい足しするというアプローチから
◦ Componentsの概念もあるけど他ほど必須ではない
Pros(2) • HTML上もdata-bindなどのdata-*属性なのでvalid ◦ そこまで気にするご時勢でもない気もしますが一応 • 書式指定(カスタムバインディング)を作るのも簡単な流儀に沿ったオブジェ クトを生やすだけ ◦ 流儀=createとupdate時のコールバックをプロパティとして持つ(どっち
もoptional) • jQueryプラグインを使いたいときは普通に使える ◦ ちなみにknockout.jsはjQueryには依存しないPureJS実装です
Cons(1) • RouterがないのでこれだけでSPAは無理 • 最低限のお約束以外は特にこれといった制約がないので大規模プロジェク トだと収拾がつかなくなる恐れがある ◦ 泥縄式にこみいったことをやろうとするとdata-bind属性の中に延々と JSON文字列や挙句の果ては関数をリテラルで書いてることもあるので うまく
ViewModel のメソッド化することが肝要
Cons(2) • たかだかテキストを表示させるだけに<span>タグを用意してあげなきゃいけない ケースがあったりするなどDOMの制約をうける(HTMLのコメント形式な書き方や Knockout.Punchesという {{value}} な感じのテンプレート構文が使えるSyntax Sugerがプラグインであるのでだいぶマシになる) • ko.observable()
/ ko.observableArray()という謎の物体 ◦ observableな値の代入は関数呼び出しなので直感的にわかりにくい ◦ knockout-es5というプラグインでもう少し楽に書けるようになる
実際に手を動かしてみましょう https://github.com/takwat/knowledgeBBQ-Session-8
何を訴えたいか • XMLHttpRequestで出し入れするデータの保存先 • データの画面(DOM)上の反映 Knockout.jsに限らず後者を自動的にやってくれる便利なツールは世の中にあふれてい ますので、そこを手書きはやめたほうがいいです Knockout.jsで感じがつかめると、Riot.jsやVue.jsも違和感なく入っていきやすくなります jQueryが辛くなってきたときの選択肢は持っておくべき
ありがとうございました