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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

August 27, 2016
Tweet

Transcript

  1. Տଜ঑ ͔ΘΉΒͭͱΉ  ϦϒϥΠζ߹ಉձࣾԼ๺୔Φʔϓϯιʔε$BGF --P5/JHIUϑϩϯτΤϯυͩΊࣗຫ

  2. None
  3. $PEFS%PKP ϦϒϥΠζ

  4. cognitom

  5. HJUIVCDPNDPHOJUPN

  6. 3JPUͱ͸

  7. γϯϓϧͰɺͱʹ͔͍ܰ͘ 6*ϥΠϒϥϦ

  8. খ͍͜͞ͱ͸ɺળ

  9. W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ

    ਓ एׯΆͬͪΌΓ
  10. (JU)VCͷελʔ ˒  ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ਺ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ

  11. ίϯϙʔωϯτΛ࡞Ε·͢ <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%
  12. 3JPUKT͸ͲΜͳਓʹ ࢧ࣋͞Ε͍ͯΔ͔

  13. ʮઆ໌ॻಡ·ͳ͍ਓʯ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

  14. None
  15. μϝࣗຫ⁞

  16. ʮίϛολʔɺΰϏ࠭യʹফ͑Δʯ

  17. XPOEFSJOHBSPVOETPNFXIFSFJO"TJBOEFTFSU ূݴʮΞδΞͷ࠭യΛ͞·Α͍ͬͯΔʯ

  18. ίΞίϛολʔͷډ৔ॴ

  19. ೥݄W ϑΟϯϥϯυ

  20. ೥य़ εΠε͔Β ΞδΞͷ࠭യ΁

  21. ೥Ն ϝΩγί͔Β ձ௕৬తͳ ςΩαε͔Β ౦ژ͔Β

  22. ೥ Ͳ͔͔͜Β ࣌ʑ߱ྟ

  23. ·ɺΦʔϓϯιʔεͰ͔͢Β

  24. None
  25. μϝࣗຫ 

  26. ίϯύΠϥ͕ਖ਼نදݱ

  27. ͭ·Γʜ

  28. WBS)5.-@5"(4   <";B[><aXaY" aY''> aT <?a>  <?> c<?>

    ca<?> <?a > caT a H
  29. ಈ͘Μ͔ͩΒ͍͍͡Όͳ͍͔

  30. ͱ͍͏։͖௚Γ  "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!" } )
  31. None
  32. μϝࣗຫ⁠

  33. ʮύʔα͕ͳ͍ͬʯ ͋Δ͍͸ɺJOOFS)5.-࠷ڧઆʜ

  34. None
  35. None
  36. None
  37. ͋

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

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

  41. None
  42. ·ͱΊ

  43. ϒϥ΢βΏͱΓੈ୅ w Ϟμϯϒϥ΢βҎޙͷϥΠϒϥϦ w ϒϥ΢βΛ͋Δఔ౓৴པʮϘʔϧ͸༑ୡʯ w ϒϥ΢βʹػೳΛ଍͍ͨ͠ɺ͡Όͳͯ͘
 ʮϒϥ΢βͷػೳͰָ͍ͨ͠ʯ

  44. None
  45. 3JPUͷ࿩Λ͢ΔͳΒͪ͜Β GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU

  46. ਫɾ౔༵͸ Լ๺୔Ͱ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞