フロント未経験者のReactプロダクト改善

React/Reduxの新規サービスにおいて、
1.UIの改善
2.コードの改善
3.得られた知見
について話します。

twitterはこちら。 https://twitter.com/shikichee

Transcript

1.         
   8 F
   " S F
   + B W B 4 D S J Q U F S T 
   !   U I
   ϑϩϯτະܦݧऀͷ
   3FBDUϓϩμΫτվળ 6CJF
   *OD
   ෑ஍
   ୖ໵
   !TIJLJDIFF
2. ࣗݾ঺հ ෑ஍ɹୖ໵ !TIJLJDIFF 6CJFגࣜձࣾ
   ΤϯδχΞ +BWBͰαʔόʔαΠυ։ൃ΍ɺ
   4XJGUͰΞϓϦ։ൃΛܦݧ͠ɺ
   ڈ೥ͷ݄ʹస৬
3. ։ൃ͍ͯ͠ΔαʔϏε ਺े݅ͷපӃͰӡ༻த ϑϩϯτΛ3FBDU3FEVYͰ։ൃ පӃͷ଴ͪ࣌ؒʹɺ໰਍Λ"*Ͱߦ͏
4. ڞಉ୅දͷΤϯδχΞҰਓ͕
   .71Λϲ݄൒Ͱ։ൃ
   αʔόʔαΠυؚΉ
5. ͍Ζ͍Ζͱ՝୊͕ग़͖ͯͨ .71ϦϦʔεޙʹೖࣾ 
   Ұ෦ͷױऀ༷͕ϓϩμΫτΛ࢖͑ͳ͍ ΤϯδχΞ͸ਓ
   ࣾ಺ʹϑϩϯτͷ஌ݟ͕গͳ͍·· 
   ཷ·͍ͬͯΔٕज़తෛ࠴ ϓϩμΫτվળΛߦ͏͜ͱʹ
6. 6*ͷվળ
7. ϦϦʔεޙɺ6*पΓͰ༷ʑͳ໰୊͕ ߴྸऀͷํʑ ୅  TBGBSJͷϔομʔ෦෼Λؒҧ͑ͯλοϓ
    ίϐʔˍϖʔετͷϙοϓΞοϓ͕ग़ͯ͠·͏ 8FCͳΒͰ͸ͷऑ఺͕ग़ͯ͠·ͬͨ FUD
8. TBGBSJͷϔομʔ෦෼Λؒҧ͑ͯλοϓ ϑϧεΫϦʔϯϞʔυϗʔϜը໘ʹ௥Ճ͢Δӡ༻ʹ <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> ݱ৅
   ରԠ
   λοϓͰ͖ͯ͠·͏Օॴ͕ଟ͍ ϝλλάΛߦ௥Ճ
9. ίϐʔˍϖʔετͷϙοϓΞοϓ͕ग़ͯ͠·͏ ग़ͳ͍Α͏ʹDTTͰରॲ body { -webkit-touch-callout: none; /* ϦϯΫ௕ԡ͠ϙοϓΞοϓ */ -webkit-user-select: none; /* ςΩετ௕ԡ͠ϙοϓΞοϓ */ } ݱ৅
   ରԠ
   
10. ΞϓϦͬΆ͘͢ΔͨΊͷখ͞ͳվળΛॏͶɺ
    ߴྸऀͰ΋࢖͑ΔΑ͏ʹ
11. ٕज़తෛ࠴ͷվળ
12. ίʔυपΓͰ΋༷ʑͳ໰୊͕ wՄಡੑͷ௿͍ίʔυ
    wͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ
    wςετͷগͳ͞
    wංେԽͨ͠ίϯϙʔωϯτ গͣͭ͠ɺۀքඪ४ͬΆ͍ٕज़બఆ
13. ෆໟͳίʔυϨϏϡʔ͕ͳ͘ͳͬͨ
    ίʔυ੔ܗʹ࣌ؒΛ͔͚Δ͜ͱ͕ͳ͘ͳͬͨ Մಡੑͷ௿͍ίʔυ໰୊ &4-JOUͱQSFUUJFSͷಋೖ
14. ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ BQQDTT .disease-print-button { display: inline-block; text-align: center; font-size: 12px; padding: 4px; background-color: #ffffff; border: 2px solid #fa8778; } #FGPSF
    શͯɺ΂ͨॻ͖ɻ
    Ϋϥε໊΋িಥΛආ໋໊͚ͯ
15. ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ σβΠϯΨΠυϥΠϯʹԊͬͯɺ
    ৭ɾϑΥϯταΠζͷఆ਺ఆٛ "GUFS
    
16. ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ DTTNPEVMFTΛ࠾༻͠ɺ
    ίϯϙʔωϯτ͝ͱʹ෼ׂ Ϋϥε໊ͷিಥ͕ͳ͘ͳͬͨ
    ॻ͖ํ͕΄΅ੜͷDTTʹ͍ۙͷͰɺ
    σβΠφʔͰ΋ॻ͍ͯ͘Εͦ͏ "GUFS
    
17. ͦͷଞͷ՝୊ wංେԽͨ͠ίϯϙʔωϯτͷ෼ׂ
    wqPXͷಋೖ
    wςετͷ֦ॆ
    w18"ରԠ ઈࢍɺରԠத
18. ࠷ޙʹɺ3FBDUͷ
    ϓϩμΫτվળͰ
    ಘΒΕͨ஌ݟ
19. 6*ͷվળͰಘΒΕͨ஌ݟ 8FCͰωΠςΟϒΞϓϦͬΆ͍ಈ͖Λ ͤ͞Δͷ͸݁ߏେม εΫϩʔϧͷಈ͖ɺλοϓ࣌ɺμϒϧλοϓ࣌ͷڍಈɺى ಈը໘ɺ͍Ζ͍Ζͱ໰୊͕ى͜Γશ෦ରԠ͢Δͷ͸େม 8&#Ͱ࡞ͬͯɺ18"ରԠ
    PS
    ΞϓϦʹҠߦ
20. SFEVYUIVOL
    WT
    SFEVYTBHB DTTNPEVMFT
    WT
    TUZMFEDPNQPOFOUT UZQFTDSJQU
    WT
    qPX ٕज़తෛ࠴ͷվળͰಘΒΕͨ஌ݟ ۀքͰ౰ͨΓલʹ࠾༻͞Εͯͦ͏ͳٕज़͕෼͔Βͳ͍ ʮෛ࠴ʹͳͬͯ͠·͏ͷͰ͸ʁʯͱ͍͏ڪාͱͷઓ͍ ྫɿ
21. ྫɿ'SPOUFOE
    %FWFMPQFS
    )BOECPPL
     શମײ͕·ͱ·͍ͬͯΔهࣄΛಡΉ ٕज़બఆͰ༗༻ͩͬͨ͜ͱ IUUQTGSPOUFOENBTUFSTHJUCPPLTJPGSPOUFOEEFWFMPQFSIBOECPPL 
    ೥Ҏ্લͷ৘ใ͸ӏವΈʹ͠ͳ͍ 
    ஌ݟͷ͋Δ஌ਓʹฉ͘
22. 3FBDUʹ஌ݟͷ͋Δํ
    ͥͻɺҙݟަ׵͠·͠ΐ͏ʔʂ !TIJLJDIFF