Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for yuuki79 yuuki79
July 27, 2016
Technology
7.7k
7

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

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

Avatar for yuuki79

yuuki79

July 27, 2016

More Decks by yuuki79

See All by yuuki79
暗号屋の稼業 @ AWS Blockchain Webinar
Avatar for yuuki79 79yuuki
0
130
暗号屋の稼業
Avatar for yuuki79 79yuuki
0
540
NFTビジネス活用の可能性
Avatar for yuuki79 79yuuki
1
520
サルでもわかるブロックチェーン講座
Avatar for yuuki79 79yuuki
0
480
仮想通貨これからどうなる？
Avatar for yuuki79 79yuuki
1
390
ビットコインに対する所有権は認められるのか
Avatar for yuuki79 79yuuki
0
5.7k
Blockchain x Startup
Avatar for yuuki79 79yuuki
0
5.8k
Ripple で学ぶ DEX の世界
Avatar for yuuki79 79yuuki
0
6.5k
日本と海外の放送禁止文化の違い
Avatar for yuuki79 79yuuki
0
810

Other Decks in Technology

See All in Technology
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
150
AI × アーキテクト 第1・2章｜生成AIの課題とアーキテクトの素養
Avatar for Daisuke Motoki daidaidai
1
230
AI コーディングと人間の認知スループット / CTO Night & Day 2026 Morning Session / AI Coding and Human Cognitive Throughput
Avatar for Tamirlan 893 Torgayev prog893
5
1.5k
LLM Content Moderationを支える評価・改善ループの実践
Avatar for suikabar suikabar
2
320
How to teach your AI Agent with Agent skills
Avatar for LINE Developers Thailand linedevth
0
120
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
220
AI駆動開発におけるハーネスエンジニアリングの勘所
Avatar for つくぼし tsukuboshi
1
600
From Developer Experience to Agentic Experience: The Next Evolution of APIs
Avatar for Benjamin Granados benjagm
0
110
dbt Semantic Layerで進めるenechainのデータ民主化
Avatar for Aki Zhou akizhou
1
240
freeeにおけるSoftware Factory
Avatar for freee freee
PRO
0
370
LLM-as-a-Judgeは本当に信頼できるのか――評価器を評価する話
Avatar for Takaaki Yayoi taka_aki
3
1.1k
日本AIベンチャーレポート2026
Avatar for KentaroFujii kentarofujii
0
150

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
370
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
730
HDC tutorial
Avatar for Michiel Stock michielstock
2
970
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3.1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
640
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k

Transcript

  1. 3JPUKTͰ"UPNJDEFTJHO͠ͳ͕Β ɹɹɹɹɹɹɹɹɹ࡞ͬͨ࿩ αΠόʔΤʔδΣϯτࢵ஛༎ٍ

  2. ࣗݾ঺հ αΠόʔΤʔδΣϯτ৽ଔೖࣾ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺεϚϗҭ ੒ήʔϜɺιγϟήϓϩσϡʔαʔɺιγϟήΤϯδ χΞ ݩ+"7" 1.ڬΜͰ/PEFKTɺࠓαʔόʔͱϑϩϯ τΤϯυ ݸਓͰσβΠϯͷ࢓ࣄɺ#B1"ҰظੜɺTDIPPͰ /PEFKTͷઌੜɺஶॻʹʮ8FC੍࡞ऀͷͨΊͷ

    (JU)VCͷڭՊॻʯɻ झຯΞχϝɺΞχιϯ%+

  3. ࠓ೔ͷ࿩ 1PXFSFECZ

  4. 8FC J04 "OESPJE൛͕͋Γ·͢ 8FC ࢹௌͷΈ ഑৴։ൃ༧ఆ εϚϗ ഑৴ɾࢹௌ

  5. ίʔφʔػೳ %&.0 ग़དྷͳ͍ͷͰΞΫηεͯ͠ΈͯͶʂ https://amestage.com

  6. "UPNJD%FTJHO Ͳ͏΍ͬͯ࡞͍ͬͯΔ͔

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None

  17. *OTUBHSBNͩͱ͜Μͳײ͡

  18. ϝϦοτ w ෼ྨ͢Δ͜ͱͰɺίϯϙʔωϯτ࠶ར༻ͷྑ͍໨҆ ʹͳΔɻ w σβΠϯมߋʹڧ͘ɺ࠶ར༻ੑ͕ߴ·Δɻ

  19. ࠶ར༻ʁ w 8FCDPNQPOFOUTͷ໨ࢦ͍ͯ͠Δͱ͜Ζ 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 ͜Ε͔ΒϑϩϯτΤϯυ։ൃ͢ΔͳΒ8FCDPNQPOFOUT ͷߟ͑ʹऩଋ͍ͯ͘͠΂͖ɻ w 8FCDPNQPOFOUT͕ඪ४ίϯϙʔωϯτΛଗ͑ͯ͘Δͷ ͸·ͩઌɻ1PMZNFS͸ະདྷ͗͢Δ͠ɺ3FBDU͸օ 8FC੍࡞ ʹؔΘΔશͯͷਓ ͕࢖͏ʹ͸ͱ͖ͬͭʹ͍͘ɻ

    w ίϯϙʔωϯτΛ࡞ΔͳΒ3JPUKT͕Ұ൪γϯϓϧɻίϯϙʔ ωϯτΛ࡞Δࢦඪͱͯ͠"UPNJD%FTJHO͸૬ੑ͕ྑ͍ɻ

  27. ίϯϙʔωϯτͷ࡞Γํ͕ຊ౰ʹ௚ײతɻ ͔͠΋࢖͍·Θ͠΍͍͢ɻ ͜Ε͘Β͍ͷαʔϏεͰ΋ಈ͘ɺૣ͍ɺ؆୯ɻ

  28. BNFTUBHFDPN