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.4k
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
59
暗号屋の稼業
79yuuki
0
430
NFTビジネス活用の可能性
79yuuki
1
410
サルでもわかるブロックチェーン講座
79yuuki
0
360
仮想通貨これからどうなる?
79yuuki
1
310
ビットコインに対する所有権は認められるのか
79yuuki
0
5.3k
Blockchain x Startup
79yuuki
0
5.3k
Ripple で学ぶ DEX の世界
79yuuki
0
6k
日本と海外の放送禁止文化の違い
79yuuki
0
650
Other Decks in Technology
See All in Technology
オブザーバビリティの Primary Signals
onk
PRO
0
540
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
NLP2024 参加報告LT ~RAGの生成評価と懇親戦略~ / nlp2024_attendee_presentation_LT_masuda
taro_masuda
1
190
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
5
2.4k
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
Signals Unleashed: The Full Guide
rainerhahnekamp
0
350
シン・Kafka / shin-kafka
oracle4engineer
PRO
6
2.7k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
120
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
450
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Teambox: Starting and Learning
jrom
128
8.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
KATA
mclloyd
14
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
RailsConf 2023
tenderlove
1
530
How to Ace a Technical Interview
jacobian
272
22k
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