Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LLoT Night - Riot.js

LLoT Night - Riot.js

LLoT Night「フロントエンドだめ自慢」
愛を持ってダメだし(?)する何か
http://ll.jus.or.jp/2016/program#session_frontend

Tsutomu Kawamura

August 27, 2016
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

  1. ίϯϙʔωϯτΛ࡞Ε·͢ <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%
  2. ͱ͍͏։͖௚Γ  "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!" } )
  3. ͋

  4. Ϛ΢ϯτ͢Δ·Ͱ w SJPUUBH ؔ਺Ͱొ࿥ࡁΈͷɺλάͷ࣮૷Λऔಘ w λάΛΠϯελϯεԽ w λάͷ࣮૷ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ

    w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ w ༩͑ΒΕͨσʔλͰɺλάͷ಺༰Λߋ৽ w ςϯϓϨʔτม਺ FYQSFTTJPO Λߋ৽ w Ϛ΢ϯτ׬ྃΠϕϯτ
  5. <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>