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
480
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
170
ちいさくはじめるBacklog
makowis
2
250
Firebase Hostingにシングルページアプリケーションをデプロイしてみよう #gbdaitokai
makowis
1
790
ノベルティのパッケージング
makowis
1
370
スパロボ遍歴
makowis
1
96
昔懐かしいインターネットの風物詩を最近の技術で作る話
makowis
1
4k
5分でわかるホワイトボードチャレンジ
makowis
1
780
ぼくらのかんがえたさいきょうのリモート雑談環境 #oso2018
makowis
0
1.8k
朝会をやめた話
makowis
0
5.7k
Other Decks in Programming
See All in Programming
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
150
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
270
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.2k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
150
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
430
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
2
190
iOS開発スターターキットの作り方
akidon0000
0
230
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.4k
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
346
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bash Introduction
62gerente
613
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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ϑϨʔϜϫʔΫͷྖҬͱ՞͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠