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

React/TypeScriptアプリの 作成で得た知見を共有ししつつ、 有識者にマサカリでズタズタにされたい

Nokogiri
November 01, 2018

React/TypeScriptアプリの 作成で得た知見を共有ししつつ、 有識者にマサカリでズタズタにされたい

プライベートでReact/TypeScriptアプリを作成したのでハマったことや何に悩んでどう解決していったか

関連リンク

expenses-automation
https://expenses-automation-app.firebaseapp.com

https://github.com/nkgrnkgr
https://twitter.com/nkgrnkgr
https://nkgrnkgr.github.io

Nokogiri

November 01, 2018
Tweet

More Decks by Nokogiri

Other Decks in Technology

Transcript

  1. Java / JavaScript / AWS / Vim / Ϛωδϝϯτ ͸͡Ί·ͯ͠!

    Taiki Nishi @nkgrnkgr nkgrnkgr WebΞϓϦέʔγϣϯΤϯδχΞ ๏ਓ޲͚άϧʔϓ΢ΣΞαʔϏεͷ։ൃ Nokogiri(@nkgrnkgr)
  2. ϞδϡʔϧͷσΟϨΫτϦߏ੒ • ίϯϙʔωϯτͱϏδωεϩδοΫ͸෼཭͍ͨ͠ • StateΛDBͱݟཱͯͯαʔόʔαΠυͷMVCͬΆ͍ߏ੒ʹ(SpringBoot෩) • components … ίϯϙʔωϯτ •

    logic … ۀ຿ϩδοΫ • api…APαʔόʔ௨৴ • domain…StateͰ؅ཧ͢ΔσʔλͷܕΛද͢Interface܈ • service…Stateͷ௥Ճɾߋ৽ɾ࡟আ༻ͷσʔλ࡞੒ • type… StateҎ֎ͷTypeScriptͷܕఆٛ • util…ڞ௨ܥ ೔෇ͷॲཧͱ͔
  3. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ • ࣾ಺޲͚ͳͷͰσβΠϯʹڽΔඞཁ͸ͳ͍ • 0͔Βࣗ෼Ͱॻ͘ͷ͸͕͢͞ʹͭΒ͍ • બ୒͠ͱͯ͠͸ҎԼ̎ͭΛݕ౼ 1. MaterialUI ͳͲͷ

    ReactComponentϥΠϒϥϦ 2. BootStrap ͳͲͷ CSSϑϨʔϜϫʔΫ ReactComponent … ݸਓతʹ͸CSSϑϨʔϜϫʔΫΑΓ͸ֶश ίετ͕ߴ͍ɻܕఆ͕ٛͳ͍ϥΠϒϥϦ͸࢖͑ͳ͍ CSSϑϨʔϜϫʔΫ … αΠυόʔͷ։ดͱ͔JS͕ඞཁͳΠϯλ ϥΫγϣϯ͸ͳ͍ͷͰࣗ࡞͢Δඞཁ͋Γ ࠓճ͸CSSϑϨʔϜϫʔΫͰʂ
  4. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ https://bulma.io/ • Flexbox ϕʔεͷCSSϑϨʔϜϫʔΫ • JSͳ͠Ͱಈ͖ɺ࢖͍ํ͕؆୯Ͱֶशίετ͕௿͍ • ͦΕͳΓͷݟͨ໨Λ࠷୹Ͱ࡞Δͱ͍͏໨తʹ߹க •

    ΞΠίϯ͸FontAwesomeʢਪ঑ʣ ՄೳͳݶΓBulma ͷඪ४ΫϥεΛ࢖͍ɺ marginͱ͔paddingͱ͔Ξχϝʔγϣϯ͚ͩࣗ࡞͢ΔΑ͏ʹͨ͠