Riot.js で Atomic Design しながら AMESTAGE 作った話

Riot.js + Web Components + Atomic Design は優勝！
#Riot.js #AtomicDesign #WebComponents #AMESTAGE

Transcript

1. 3JPUKT
   Ͱ
   "UPNJD
   EFTJHO
   ͠ͳ͕Β
   ɹɹɹɹɹɹɹɹɹ
   ࡞ͬͨ࿩
   αΠόʔΤʔδΣϯτ
   ࢵ஛༎ٍ
2. ࣗݾ঺հ αΠόʔΤʔδΣϯτ৽ଔೖࣾ
   ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺεϚϗҭ ੒ήʔϜɺιγϟήϓϩσϡʔαʔɺιγϟήΤϯδ χΞ
   ݩ+"7"
   1.ڬΜͰ
   /PEFKTɺࠓαʔόʔͱϑϩϯ τΤϯυ
   ݸਓͰσβΠϯͷ࢓ࣄɺ#B1"ҰظੜɺTDIPPͰ /PEFKTͷઌੜɺஶॻʹʮ8FC੍࡞ऀͷͨΊͷ (JU)VCͷڭՊॻʯɻ
   झຯΞχϝɺΞχιϯ%+
3. ࠓ೔ͷ࿩ 1PXFSFE
   CZ
4. 8FC
   J04
   "OESPJE
   ൛͕͋Γ·͢ 8FC
   ࢹௌͷΈ ഑৴։ൃ༧ఆ εϚϗ
   ഑৴ɾࢹௌ
5. ίʔφʔػೳ
   %&.0
   ग़དྷͳ͍ͷͰΞΫηεͯ͠ΈͯͶʂ https://amestage.com
6. "UPNJD
   %FTJHO Ͳ͏΍ͬͯ࡞͍ͬͯΔ͔
17. *OTUBHSBN
    ͩͱ͜Μͳײ͡
18. ϝϦοτ w ෼ྨ͢Δ͜ͱͰɺίϯϙʔωϯτ࠶ར༻ͷྑ͍໨҆ ʹͳΔɻ
    w σβΠϯมߋʹڧ͘ɺ࠶ར༻ੑ͕ߴ·Δɻ
19. ࠶ར༻ʁ w 8FC
    DPNQPOFOUT
    ͷ໨ࢦ͍ͯ͠Δͱ͜Ζ
    w #PPUTUSBQ
    ఔ౓Ͱ͸ελΠϧͷ࠶ར༻ʹཹ·Δɻ
    w ڍಈ·Ͱ࠶ར༻͠ɺػೳ෇͖ͷίϯϙʔωϯτΛ࢖͍ճ͢ɻ
    ʠςϯϓϨʔτ͸ɺ໰୊Ͱ͸ͳ͘ɺٕज़Λ෼͚Δ͚ͩͩɻʡ
20. ࠶ར༻Մೳͳίϯϙʔωϯτͷ࡞੒Λγϯϓϧͳମݧʹɻ
21. 3JPUKT
    Ͱ
    "UPNJD
    %FTJHO
22. 4UZMF
    (VJEF
    Ͱͷʠ࠶ར༻ʡ <style-guide-item> (<yield> ̎ͭ࢖ͬͯഎܠ෇͖Ͱ֬ೝͰ͖Δ) ʜ <toledo-badge-exam> <toledo-badge> <toledo-badge-exam> <toledo-badge> <toledo-badge> <toledo-badge>
23. 4UZMF
    (VJEF
    Ͱͷʠ࠶ར༻ʡ 4UZMF
    (VJEF
    Ͱ࢖ΘΕ͍ͯΔίϯϙʔωϯτ͕
 ຊ൪Ͱ΋ͦͷ··࢖ΘΕ͍ͯΔɻ
24. 4UZMF
    (VJEF
    ͷ࣮૷ྫ components/atoms/toledo-button/toledo-button.tag (࣮૷͞Εͨίϯϙʔωϯτຊମ) components/atoms/toledo-button/example.tag (ίϯϙʔωϯτຊମΛstyleguideͰදࣔ͢Δ) style guide result
25. w 3JPUKT
    
    8FC
    $PNQPOFOUT
    
    "UPNJD
    %FTJHO
    ͸༏উʂ
    w มߋʹڧ͍ɺ͚ͲಠࡋతɻσβΠφʔʹσβΠϯσʔλͷ໊લͱ͔ଗ ͑ͯ΋ΒͬͨΓɺ֬ೝͯ͠΋ΒͬͨΓͱ͍͏ϑϩʔ΋ؚΊͯ׬੒ɻϚʔ ΫΞοϓΨϦΨϦͰ͖ΔਓͳΒΑΓ˕
    w ʮƂŦŢɺ+4ŧŔŪũƄŝſʯΈ͍ͨͳਓʹ਌࿨ੑ͕ߴ͍ɻͱʹ͔͘௚ײతɻγ ϯϓϧɻ
    w śƀśƀ
    'MVY
    ΋
    8FC
    $PNQPOFOUT
    ͱ૬ੑྑ͍ɻSJPUPCTFSWBCMF
    ͕௒ศརɻ3JPU
    
    SFEVY
    ͱ͔΋࣍ͳΜ͔Ͱ࢖͏࣌΍ͬͯΈ͍ͨɻ ΍ͬͯΈͨײ૝
26. 3JPUKT
    ΦεεϝϙΠϯτ w ͜Ε͔ΒϑϩϯτΤϯυ։ൃ͢ΔͳΒ8FC
    DPNQPOFOUT ͷߟ͑ʹऩଋ͍ͯ͘͠΂͖ɻ
    w 8FC
    DPNQPOFOUT
    ͕ඪ४ίϯϙʔωϯτΛଗ͑ͯ͘Δͷ ͸·ͩઌɻ1PMZNFS͸ະདྷ͗͢Δ͠ɺ3FBDU͸օ 8FC੍࡞ ʹؔΘΔશͯͷਓ ͕࢖͏ʹ͸ͱ͖ͬͭʹ͍͘ɻ
    w ίϯϙʔωϯτΛ࡞ΔͳΒ
    3JPUKT
    ͕Ұ൪γϯϓϧɻίϯϙʔ ωϯτΛ࡞Δࢦඪͱͯ͠
    "UPNJD
    %FTJHO
    ͸૬ੑ͕ྑ͍ɻ
27. ίϯϙʔωϯτͷ࡞Γํ͕ຊ౰ʹ௚ײతɻ
    ͔͠΋࢖͍·Θ͠΍͍͢ɻ
    ͜Ε͘Β͍ͷαʔϏεͰ΋ಈ͘ɺૣ͍ɺ؆୯ɻ
28. BNFTUBHFDPN