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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
530
NFTビジネス活用の可能性
Avatar for yuuki79 79yuuki
1
510
サルでもわかるブロックチェーン講座
Avatar for yuuki79 79yuuki
0
470
仮想通貨これからどうなる？
Avatar for yuuki79 79yuuki
1
380
ビットコインに対する所有権は認められるのか
Avatar for yuuki79 79yuuki
0
5.6k
Blockchain x Startup
Avatar for yuuki79 79yuuki
0
5.7k
Ripple で学ぶ DEX の世界
Avatar for yuuki79 79yuuki
0
6.4k
日本と海外の放送禁止文化の違い
Avatar for yuuki79 79yuuki
0
810

Other Decks in Technology

See All in Technology
Kiro入門｜仕様駆動開発で変わるAI時代の開発スタイル
Avatar for 工藤皓夢 cmkudo
0
240
Android skills に学ぶ
Avatar for kokiko kokiko
0
130
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
150
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
Avatar for soudai sone soudai
PRO
0
210
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
0
250
ソフトウェアサプライチェーンの構造的リスクとコンテナ環境の保護
Avatar for Kyohei Mizumoto kyohmizu
5
730
システム思考で問題に対処する
Avatar for yussak yussak
0
360
Bits Agent Builder の⼊⾨と活⽤事例
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
250
Bits AI を制するものは Datadog を制す / The player that controls  Bits AI, controls Datadog
Avatar for 株式会社カミナシ kaminashi
0
140
What's new in Go 1.27?
Avatar for Koya IWAMURA ciarana
0
280
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
9.3k
現場回帰したデータエンジニアが考える AI 時代のキャリア開発 / Career Development in the Age of AI Perspectives from a Hands-on Data Engineer
Avatar for MEDLEY, INC. medley
0
280

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
280
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
410
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Design in an AI World
Avatar for tapps tapps
1
280
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
350
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
260
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
700
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k

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