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

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

yuuki79
July 27, 2016
Technology
7
7.4k

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

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

yuuki79

July 27, 2016
Tweet

More Decks by yuuki79

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

Other Decks in Technology

See All in Technology
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Jr. Championsになって、強く連携しながらAWSをもっと使いたい！~AWSに対する期待と行動~
amixedcolor
0
190
【若手エンジニア応援LT会】AWSで繋がり、共に成長！ ～コミュニティ活動と新人教育への挑戦～
kazushi_ohata
0
180
物価高なラスベガスでの過ごし方
zakky
0
390
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
Shift-from-React-to-Vue
calm1205
3
1.3k
AWS CDKでデータリストアの運用、どのように設計する？～Aurora・EFSの実践事例を紹介～/aws-cdk-data-restore-aurora-efs
mhrtech
4
660
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
For a Future-Friendly Web
brad_frost
175
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
4 Signs Your Business is Dying
shpigford
180
21k
A better future with KSS
kneath
238
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
How GitHub (no longer) Works
holman
311
140k
A Philosophy of Restraint
colly
203
16k
KATA
mclloyd
29
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

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