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
Tsutomu Kawamura
August 27, 2016
Programming
1
990
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
120
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
910
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
610
Cooking Automation
cognitom
1
550
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
810
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Is Xcode slowly dying out in 2025?
uetyo
1
270
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Discover Metal 4
rei315
2
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
86
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞