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の紹介(オープンセミナー2017@広島)
Search
Makoto Henmi
March 02, 2017
Programming
0
460
knockout.jsの紹介(オープンセミナー2017@広島)
オープンセミナー2017@広島で発表した資料です。
knockout.jsの簡単な紹介です。
Makoto Henmi
March 02, 2017
Tweet
Share
More Decks by Makoto Henmi
See All by Makoto Henmi
ちいさくはじめるBacklog【令和最新版】
makowis
0
110
ちいさくはじめるBacklog
makowis
2
190
Firebase Hostingにシングルページアプリケーションをデプロイしてみよう #gbdaitokai
makowis
1
710
ノベルティのパッケージング
makowis
1
320
スパロボ遍歴
makowis
1
92
昔懐かしいインターネットの風物詩を最近の技術で作る話
makowis
1
3.9k
5分でわかるホワイトボードチャレンジ
makowis
1
470
ぼくらのかんがえたさいきょうのリモート雑談環境 #oso2018
makowis
0
1.8k
朝会をやめた話
makowis
0
5.6k
Other Decks in Programming
See All in Programming
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
120
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
540
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
5
2k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
430
Tuning GraphQL on Rails
pyama86
2
1.2k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
410
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
160
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
300
Amazon Qを使ってIaCを触ろう!
maruto
0
370
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
75
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
What's in a price? How to price your products and services
michaelherold
243
12k
YesSQL, Process and Tooling at Scale
rocio
168
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
KATA
mclloyd
29
14k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Music & Morning Musume
bryan
46
6.2k
Transcript
knockout.jsͷհ 2017/2/25 Φʔϓϯηϛφʔ2017@ౡ ҳݟ (@mako_wis)
ࣗݾհ w ҳݟ ΜΈ·͜ͱ w 5XJUUFS!NBLP@XJT w גࣜձࣾΫϨΦϑʔΨ w
ϑϩϯταʔόʔαΠυΤϯδχ ΞɾจষνΣοΫ
ࠓԬࢁ͔Βདྷ·ͨ͠
ԬࢁͷίϛϡχςΟ • ԬࢁRubyίϛϡχςΟ • ԬࢁJavaϢʔβʔձ • OITEC(Okayama IT Engineers Community)
• okayama-js • தࠃํσʔλϕʔεษڧձ • ΦʔϓϯηϛφʔԬࢁ • Atlassian User Group தࠃ • ߹ಉษڧձ
knockout.jsͷհ 2017/2/25 Φʔϓϯηϛφʔ2017@ౡ ҳݟ (@mako_wis)
࠷ۙͬͯΔJSपΓͷٕज़ • TypeScript • ੩తܕ͖ݴޠͬΆ͔͚͘Δ • knockout.js • ࠓͷ
JavaScriptͰ ໘͍͘͞ͳͱࢥ͏͜ͱ
ೖྗʹԠͯ͡දࣔΛม͑Δ
ͦͷଞ͕͋ΔϑΥʔϜ
࡞Δͷ໘͍͘͞Ͱ͢ΑͶʁ
knockout.jsͩͱ
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM ϥδΦϘλϯͷબ͕ಉظ
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM ͦͷଞೖྗཝͷ༗ޮແޮ੍ޚ
knockout.js ڵຯ͍͖ͯ·ͨ͠ΑͶʁ
knockout.jsͱ
ओͳಛ ˞ຊޠυΩϡϝϯτ͔ΒҾ༻ w ΤϨΨϯτͳґଘτϥοΩϯά w σʔλϞσϧ͕มߋ͞ΕΔʹɺ6*ͷؔ࿈͚ΒΕͨ෦Λߋ৽͠·͢ɻ w એݴܕόΠϯσΟϯά w σʔλϞσϧͱ6*Λؔ࿈͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత
6*ɺόΠϯσΟϯάɾίϯςΩετΛ֊Խͤ͞Δ͜ͱͰ؆୯ʹ࡞Ͱ ͖·͢ɻ w ֦ு͕༰қ w ৽ͨͳόΠϯσΟϯάͷΈΛ࣮͢Δ͜ͱɺ࠷খݶͷίʔυྔͰ ࣮ݱͰ͖·͢ɻ
ͦͷଞͷϝϦοτ ˞ຊޠυΩϡϝϯτ͔ΒҾ༻ w ७ਮͳ+BWB4DSJQUϥΠϒϥϦͰ͋Δ w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ Μɻ w طଘͷ8FCΞϓϦέʔγϣϯʹೖͰ͖Δ
w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ w ϝΠϯετϦʔϜͷϒϥβΛαϙʔτ w *&Ҏ߱ 'JSFGPYҎ߱ $ISPNF 4BGBSJ
ࠓճͷσϞ https://makowis.github.io/ okayamajs2016/
͏ͱָͰ͖Δॴ
ೖྗΛಉظ͍ͨ͠
ೖྗΛಉظ͢Δ <input type="text" data-bind="value: message” /> <br /> <span data-bind="text:
message”></span> function TestappViewModel() { var self = this; self.message = ko.observable("Hello World!!”); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ೖྗ͕ಉظ
ΫϦοΫʹରͯ͠Կ͔͍ͨ͠
ΫϦοΫͰΧϯτΞοϓ <span data-bind="text: numberOfClicks”></span> ճΫϦοΫ͠·ͨ͠ <button data-bind="click: incrementClickCounter” > ΫϦοΫ͍ͯͩ͘͠͞
</button> function TestappViewModel() { var self = this; self.numberOfClicks = ko.observable(0); self.incrementClickCounter = function() { var previousCount = self.numberOfClicks(); self.numberOfClicks(previousCount + 1); }; }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ΧϯτΛಉظ
ΫϦοΫͰΧϯτΞοϓ <span data-bind="text: numberOfClicks”></span> ճΫϦοΫ͠·ͨ͠ <button data-bind="click: incrementClickCounter” > ΫϦοΫ͍ͯͩ͘͠͞
</button> function TestappViewModel() { var self = this; self.numberOfClicks = ko.observable(0); self.incrementClickCounter = function() { var previousCount = self.numberOfClicks(); self.numberOfClicks(previousCount + 1); }; }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ΫϦοΫ࣌ͷΠϕϯτ ΧϯτΞοϓॲཧ
ྻʹೖͬͯΔσʔλΛදࣔ
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM දࣔ༻ͷྻσʔλ
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ྻσʔλ<li>λάҎԼΛ ܁Γฦ͠ ܁Γฦ͠෦
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ྻͷதͱϚοϐϯά
ৄ͍͠ใ ຊޠυΩϡϝϯτͰ http://kojs.sukobuto.com/
࣮ࡍͬͯΈͯͲ͏ͳͷʁ
ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ w $44ͷ͚ସ͑ɺදࣔΓସָ͕͑ w +BWBTDSJQU༻ͷΫϥεΛ͚ͳ͍͍ͯ͘ w 8FCϑϨʔϜϫʔΫͷྖҬͱ՞͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠