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
LLoT Night - Riot.js
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Tsutomu Kawamura
August 27, 2016
Programming
1
1k
LLoT Night - Riot.js
LLoT Night「フロントエンドだめ自慢」
愛を持ってダメだし(?)する何か
http://ll.jus.or.jp/2016/program#session_frontend
Tsutomu Kawamura
August 27, 2016
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
150
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
150
Felt - a simple web server with the power of the future
cognitom
0
340
Riot: all about v2 to v3
cognitom
7
3.9k
Create A Small Studio in A Cafe
cognitom
2
940
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
660
Cooking Automation
cognitom
1
570
Other Decks in Programming
See All in Programming
AIプロダクト時代のQAエンジニアに求められること
imtnd
1
480
その「common」ディレクトリ、腐っていませんか?
kinocoboy2
1
110
CSC307 Lecture 09
javiergs
PRO
1
850
AIコーディングの理想と現実 2026 | AI Coding: Expectations vs. Reality 2026
tomohisa
0
530
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
7
1.1k
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
kuro_kurorrr
2
1k
kintone + ローカルLLM = ?
akit37
0
120
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
310
Geminiの機能を調べ尽くしてみた
naruyoshimi
0
160
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
junkiishida
1
250
Event Storming
hschwentner
3
1.3k
Claude Code、ちょっとした工夫で開発体験が変わる
tigertora7571
0
170
Featured
See All Featured
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
400
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
370
Information Architects: The Missing Link in Design Systems
soysaucechin
0
800
Speed Design
sergeychernyshev
33
1.6k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Crafting Experiences
bethany
1
65
Practical Orchestrator
shlominoach
191
11k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Automating Front-end Workflow
addyosmani
1371
200k
How to make the Groovebox
asonas
2
2k
Transcript
Տଜ ͔ΘΉΒͭͱΉ ϦϒϥΠζ߹ಉձࣾԼΦʔϓϯιʔε$BGF --P5/JHIUϑϩϯτΤϯυͩΊࣗຫ
None
$PEFS%PKP ϦϒϥΠζ
cognitom
HJUIVCDPNDPHOJUPN
3JPUͱ
γϯϓϧͰɺͱʹ͔͍ܰ͘ 6*ϥΠϒϥϦ
খ͍͜͞ͱɺળ
W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ
ਓ एׯΆͬͪΌΓ
(JU)VCͷελʔ ˒ ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ
ίϯϙʔωϯτΛ࡞Ε·͢ <div> <img src=“clear.svg” /> <ul> <li>ۭΑ͏: Ε</li> <li>ؾԹ: 10</li>
<li>࣪: 30%</li> </ul> </div> <weather type=“clear” temperature=“10” humidity=“30%” /> Ε 10 30%
3JPUKTͲΜͳਓʹ ࢧ࣋͞Ε͍ͯΔ͔
ʮઆ໌ॻಡ·ͳ͍ਓʯ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠
None
μϝࣗຫ⁞
ʮίϛολʔɺΰϏ࠭യʹফ͑Δʯ
XPOEFSJOHBSPVOETPNFXIFSFJO"TJBOEFTFSU ূݴʮΞδΞͷ࠭യΛ͞·Α͍ͬͯΔʯ
ίΞίϛολʔͷډॴ
݄W ϑΟϯϥϯυ
य़ εΠε͔Β ΞδΞͷ࠭യ
Ն ϝΩγί͔Β ձ৬తͳ ςΩαε͔Β ౦ژ͔Β
Ͳ͔͔͜Β ࣌ʑ߱ྟ
·ɺΦʔϓϯιʔεͰ͔͢Β
None
μϝࣗຫ
ίϯύΠϥ͕ਖ਼نදݱ
ͭ·Γʜ
WBS)5.-@5"(4 <";B[><aXaY" aY''> aT <?a> <?> c<?>
ca<?> <?a > caT a H
ಈ͘Μ͔ͩΒ͍͍͡Όͳ͍͔
ͱ͍͏։͖Γ "45Λநग़͢Δඞཁ͕ͳ͍ɺͱ͍͏ࣄ <my-tag> <p>{ message }</p> <script> this.message =
"Hello!" </script> </my-tag> riot.tag2(‘my-tag’, '<p>{ message }</p>’, ‘', '', function(opts) { this.message = "Hello!" } )
None
μϝࣗຫ
ʮύʔα͕ͳ͍ͬʯ ͋Δ͍ɺJOOFS)5.-࠷ڧઆʜ
None
None
None
͋
Ϛϯτ͢Δ·Ͱ w SJPUUBH ؔͰొࡁΈͷɺλάͷ࣮Λऔಘ w λάΛΠϯελϯεԽ w λάͷ࣮ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ
w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ w ༩͑ΒΕͨσʔλͰɺλάͷ༰Λߋ৽ w ςϯϓϨʔτม FYQSFTTJPO Λߋ৽ w ϚϯτྃΠϕϯτ
<my-tag> <p>{ message }</p> <script> this.message = "Hello!" </script> </my-tag>
riot.tag2(‘my-tag’, '<p>{ message }</p>’, ‘', '', function(opts) { this.message = "Hello!" } ) riot.mount(‘#main’, ‘my-tag’) #main DOM flag flag <p> { message } </p> <p> Hello! </p> ⁞ <p> Hello! </p>
JOOOFS)5.-αΠΩϣσεϤω
None
·ͱΊ
ϒϥβΏͱΓੈ w ϞμϯϒϥβҎޙͷϥΠϒϥϦ w ϒϥβΛ͋Δఔ৴པʮϘʔϧ༑ୡʯ w ϒϥβʹػೳΛ͍ͨ͠ɺ͡Όͳͯ͘ ʮϒϥβͷػೳͰָ͍ͨ͠ʯ
None
3JPUͷΛ͢ΔͳΒͪ͜Β GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞