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
Riot.js v3 Migration道
Search
yuuki79
February 02, 2017
Technology
0
3.6k
Riot.js v3 Migration道
AMESTAGEのRiot.jsをv2からv3に上げるまでの軌跡を描いた感動のストーリー
yuuki79
February 02, 2017
Tweet
Share
More Decks by yuuki79
See All by yuuki79
暗号屋の稼業 @ AWS Blockchain Webinar
79yuuki
0
100
暗号屋の稼業
79yuuki
0
500
NFTビジネス活用の可能性
79yuuki
1
470
サルでもわかるブロックチェーン講座
79yuuki
0
430
仮想通貨これからどうなる?
79yuuki
1
340
ビットコインに対する所有権は認められるのか
79yuuki
0
5.5k
Blockchain x Startup
79yuuki
0
5.6k
Ripple で学ぶ DEX の世界
79yuuki
0
6.3k
日本と海外の放送禁止文化の違い
79yuuki
0
760
Other Decks in Technology
See All in Technology
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
310
RailsのPostgreSQL 18対応
yahonda
0
1.3k
バイブコーディングと継続的デプロイメント
nwiizo
2
360
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
580
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.5k
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.4k
Pure Goで体験するWasmの未来
askua
1
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
いまさら聞けない ABテスト入門
skmr2348
1
170
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
750
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Visualization
eitanlees
148
16k
Music & Morning Musume
bryan
46
6.8k
A better future with KSS
kneath
239
17k
Designing for humans not robots
tammielis
254
25k
Being A Developer After 40
akosma
90
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Rails Girls Zürich Keynote
gr2m
95
14k
The Pragmatic Product Professional
lauravandoore
36
6.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
αΠόʔΤʔδΣϯτɹࢵ༎ٍ
3JPUKTษڧձ։࠵ʹ͚ͨωλ࡞Γͱ ύϑΥʔϚϯεվળΛΓ͍ͨͱ͍͏ڧ͍ؾ࣋ͪɻ
3JPUKTWରԠ͠·ͨ͠
501ϖʔδͷද͕ࣔβοΫϦʹॖ NTNT NT NTNT NT "GUFS #FGPSF
΄΅શίϯϙʔωϯτʹखΛೖΕΔɻ ςετؚΊͯ̍िؒɺຖऴిؼΓ͘Β͍ͷϖʔεɻ
ͱΓ͋͑ͣWʹ͋͛ͯΈͨ w Λ༨༟Ͱ͑ΔΤϥʔϩά w ύοτݟ͘Β͍Λͯ͠શ่͕ͯյͯ͠Δ w সͬͨN ?Ч? w
WͰͬͯͨΒ࠷ۙW͕ग़ͯসͬͨ N ?Ч?
ςϯϓϨʔτΤϥʔ͕ग़ΔΑ͏ʹͳͬͯͨ w ςϯϓϨʔτͰॳظԽ͞Εͯͳ͍ͱ͔ͰେྔʹΤϥʔ w <p>{ item.value }</p>ͰNPVOU࣌ʹJUFN͕ VOEFpOEͩͱμ ϝɻthis.item =
{}ͱ͔ͬͯରԠ w ॳظԽେࣄͳͷͰΤϥʔ͕ग़ΔΑ͏ʹͳͬͯخ͍͠վ ળ 3JPUͰɺλάͷςϯϓϨʔτͷΤϥʔΛΩϟον͢ΔͨΊʹࣗͰؔΛηοτ͢Δ ඞཁ͕͋Γ·ͨ͠ɻ3JPUͰɺλάͷશͯͷςϯϓϨʔτΤϥʔDPOTPMFFSSPS͔Βग़ྗ ͞Ε·͢ɻ DPOTPMF"1*͕ར༻Մೳͳ߹
w WͰͷJGݟͨͦͪ͜ΌΜͱಈ͍͍ͯΔ͕ɺݟ͑ͳ͍ͱ ͜ΖͰλάͷϚϯτ͕͍ͬͯͨͷ͕Βͳ͘ͳͬͨɻ w FBDI\PQFO <USVF><>^Έ͍ͨʹFBDIͰۭϧʔϓΛ͢Δ ͱϚϯτ͞Εͳ͍ͷͰύϑΥʔϚϯεతʹͦ͏ॻ͍ͯͨ w JGʹશ෦ॻ͖͠FBDIΛ͏ͱQBSFOUΛݟͳ͍ͱͦΕ ҎԼͷλάͰ͕ࢀরग़དྷͳ͍ͷͰλά͕ԚΕͯͨͷΛΩ
ϨΠʹʂ JGจ͕JGจʹͳͬͨ
w ແବͳ࣮࣌ߦ͞Ε͍ͯͨ༁ͩ͠ɺύϑΥʔϚϯεվળʹྑ ͦ͞͏ͳͷͰܴ w GPSNͰPOTVCNJU\TVCNJU&WFOU^Έ͍ͨͳ͜ͱΛͯ͠Δॴ ͰϖʔδϦϩʔυ͞ΕͪΌͬͨΓɻ w શॲཧʹద༻ͤͣɺΫϦοΫΠϕϯτͰͷ͋Δͱ͜Ζ Ͱ this.submitEvent
= (e) => { ɹ e.preventDefault(); } ͯ͠ରԠɻ ࣗಈQSFWFOU%FGBVMUͷഇࢭ
w దʹมߋ͍͕ͯͨ͠ҧ͏ڍಈΛ͍ͯ͠Δύλʔϯ͕͋ͬͨɻ w 0CKFDU͡Όͳ͍͚Ͳ"SSBZͰೋॏʹϧʔϓͤͯ͞Δ࣌ͷڍಈ͕ͪΌΜͱ͢ΔΑ͏ʹͳͬͯͨ ΦϒδΣΫτϧʔϓͷจ๏มߋ ΦϒδΣΫτͷϧʔϓͷจ๏͕มΘΓ·͢ɻҎલLFZ WBMVFJOPCKFDUͰ͕ͨ͠ɺ WBMVF LFZJOPCKFDUʹมߋ͞Ε·͢ɻ <div
each=“value, key in Array”> <li each=“key2 in Array2”> <p>{ key2 }</p> // ←͜͜ʹkey͕དྷ͍ͯͨɻv2ͪΐͬͱม ( hoge, fuga ) </li> </div> Array2 = [ { hoge: { objKey: objValue } }, { fuga: { objKey: objValue } } ] // ͜Ε͕ͦΕͧΕ hoge, fuga ͷ object ͕ key2 ʹདྷΔΑ͏ʹͳͬͯ͠·ͬͨͷͰɺ͜͏ͬͯमਖ਼ͨ͠ <div each=“value, key in Array”> <li each=“value2, key2 in Array2”> // ←value2, key2 ͷΑ͏ʹ̎ͭҾΛ༻ҙͨ͠ <p>{ key2 }</p> </li> </div>
w UIJTPO bVQEBUF` ͍ͯͨ͠தͰUIJTVQEBUF ͕ॻ ͍ͯ͋ΔλάͰൃੜɻ w VQEBUF͕དྷͨͱ͖ʹUIJTVQEBUF উखʹى͜ ΔͷͰফͯ͠ରԠɻ
ແݶϧʔϓͯ͠ΔͬΆ͍Τϥʔ͕ग़ͯདྷΔ
w ࠓ·Ͱ <button-tag each={buttons} onclick={ clickEvent }> ͬͯॻ͍ͯಈ͍͚ͯͨͲparent.clickEventͬͯ ॻ͔ͳ͍ͱಈ͔ͳ͔ͬͨΓɻ w
Ͳ͔͜ͰZJFMEͬͯΔλάʹZJFMEUBH\IPHF^ ZJFMEUBHͰ͚ͬͯͨͲɺ\QBSFOUIPHF^ͬͯॻ͔ ͳ͍ͱμϝͳײ͡ʹΏΒ͕͗ͳ͘ͳͬͨɻ FBDIͱZJFMEͰͷQBSFOU͕ద͡Όͳ͘ͳͬͨ
w ओʹGPSNͷॲཧ͕յΕΔɻ w <form id=“formId”>ʹରͯ͠ let formId = this.formId ͬͯऔΕͯͨ
w <form ref=“formId”>ʹରͯ͠ let formId = this.refs.formId ͰऔΔΑ͏ʹमਖ਼ OBNFͱJEʹΑΔ%0.ࢀরͷഇࢭ
w UIJTPO bNPVOU` ͰUIJTVQEBUF ͕ແͯ͘ಈ͍ͯ ͨՕॴ͕͋ͬͨ w ࢠͷVQEBUF͕ʹΘΒͳ͘ͳͬͨӨڹ͔ɻແ ବͩͬͨͷͰྑ͍มߋͩͱࢥ͏ɻ w
దʹUIJTVQEBUF ΛͬͯλάΛߋ৽ɻ UIJTPO bNPVOU` ͷڍಈʹؾΛ͏
w WJSUVBMJG\EBUB^IPHFIPHFWJSUVBMΈ͍ͨͳ ͍ํΛͯ͠ΔॴͰදࣔ͞ΕͯΔͷʹΤϥʔ͕ग़ͯͨ Γ w WJSUVBM͕ԿJGධՁ͞ΕΔ༷ͳՕॴͰڬΜͰ͋ͬ ͨաڈͷλά͕ͬͯ͠·͍ͬͯͨΓɻɻ w ਂ͍ͤͣʹIPHFJG\EBUB^ͬͯॻ͍ͨΒແ ͘ͳ͚ͬͨͲɻɻWJSUVBMͳΜ͔ո͍͠ͷͰಈ࡞Ͱࠔͬ
ͨΒΘͳ͍ํ͕ྑ͍͔ɻɻ WJSUVBM͕ո͍͠ɾɾɾ
w W w FBDIͰZJFMEͬͯΔͱFBDIͰճͯ͠ΔJUFN͕དྷͳ͘ͳͬ ͨɻ w QBSFOUʹ͍Δ͔ͱࢥ͚ͬͨͲډͳ͍ɻ୳ͨ͠Β@QBSFOUʹ ೖ͍ͬͯͨͷͰ@QBSFOUJUFNͬͯͬͨΒདྷͨ w FBDI\WBMVF
JJOWBMVFT^ͬͯॻ͍ͨΒZJFMEʹ @QBSFOUWBMVF @QBSFOUJͬͯॻ͔ͳ͍ͱདྷͳ͍ɻ w ԼهJTTVFͱಉ͡ݱΆ͍ w IUUQTHJUIVCDPNSJPUSJPUJTTVFT ZJFME FBDIͰٽ͘
w W w @QBSFOU͕ഇࢭɻ@@QBSFOUʹมߋɻ @@͍͍ͬͯͬͯͷ͔ʜʁ w WͰZJFMEͰQBSFOU͕ͪΌΜͱݟΒΕΔ༷ʹͳͬͨͱࢥͬͯͨΒFBDIͰճͯ͠Δ࣌ͷZJFMEʹ QBSFOUࢦఆͯ͠ॻ͘ͱಧ͔ͳ͍ɻɻ w ࣗλάͷFBDIʹؔͯ͠ZJFMEʹQBSFOUແ͠Ͱσʔλ͕͍ͬͯΔΆ͍
ZJFME FBDIͰٽ͘ <font> <span> <yield/> </span><br> </font> <font each="{testItems}" class="{label}"> "{parent.label}", </font> <font each="{testItems}" class="{label}"> "{label}", </font> ZJFMEͬͨλάͱσʔλ σʔλ͕Βͳ͍ σʔλ͕ͬͪΌ͏ this.testItems = [ { label: 'Nyan' }, { label: 'Meow' }, { label: 'Meaou' } ];
w *&Ͱ@@QBSFOUJUFNҎԼͷσʔλ͕དྷͳ͍͕࣌͋Δɻɻ w QMVOLFSͰ୯७ʹॻ͚ͩͩ͘ͱ࠶ݱ͠ͳ͍ɻɻ w IUUQQMOLSDPFEJU+02ET*+54&S&O QQSFWJFX w ٽ͘ٽ͘ZJFMEར༻Λஅ೦ɻPQUTܦ༝ͰZJFMEʹͨ͠ ͍Λύε
ZJFME FBDIͰٽ͘
w ͍ʂʂ w ϥΠϑαΠΫϧ͕࠷దԽ͞ΕͨΓɺ৭ΜͳύϑΥʔϚϯεվળ͕ೖͬͨͷͰૉΒ͍͠ w FWFOUॲཧ͕ΊͬͪΌ͍ w PCTFSWBCMFͳॲཧΛ࿈ଧ͢ΔͱΨοπϦ͘ͳͬͯͨͷ͕ղফ ".&45"(&ͷΪϑτૹ৴
w JG͕ͪΌΜͱJGʹͳͬͨͷͰ͑Δײ͕૿ͨ͠ w VQEBUF NPVOUΠϕϯτͷڍಈ͕҆ఆ w ࢠλά͔ΒͷӨڹΛड͚ͳ͔ͬͨΓɺNPVOUલʹVQEBUF͕དྷͳ͘ͳͬͨΓɺΑΓײతʹ ͑ΔɻύϑΥʔϚϯεʹྑͦ͞͏ w JGͰ։͍ͨΓดͨ͡Γͨ͠λάʹͪΌΜͱຖճNPVOU͕དྷΔΑ͏ʹͳͬͯ৺ʹӫཆɺ͜Ε ͧNPVOUͬͯײ͡ͷϥΠϑαΠΫϧվળʹ৺ΛଧͨΕͨ Wʹͯ͠خ͔ͬͨ͜͠ͱ
3JPUKTษڧձൃදޙͷه w 3JPUKTWͰZJFMEFBDIͰQBSFOUΛݟͳ͖Ό ͱ͔ɺͦ͏͍͏είʔϓͷ͕ΨοπϦղܾ͢Δ Β͍͠ɻ w ݁ɿΑɾɾɾʂʂ
5IBOLZPV