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

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

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

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

821d32cef3cffc72017042a0baffeddb?s=128

Takuya Shikichi

March 30, 2018
Tweet

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. SFEVYUIVOLWTSFEVYTBHB DTTNPEVMFTWTTUZMFEDPNQPOFOUT UZQFTDSJQUWTqPX ٕज़తෛ࠴ͷվળͰಘΒΕͨ஌ݟ ۀքͰ౰ͨΓલʹ࠾༻͞Εͯͦ͏ͳٕज़͕෼͔Βͳ͍ ʮෛ࠴ʹͳͬͯ͠·͏ͷͰ͸ʁʯͱ͍͏ڪාͱͷઓ͍ ྫɿ

  21. ྫɿ'SPOUFOE%FWFMPQFS)BOECPPL શମײ͕·ͱ·͍ͬͯΔهࣄΛಡΉ ٕज़બఆͰ༗༻ͩͬͨ͜ͱ IUUQTGSPOUFOENBTUFSTHJUCPPLTJPGSPOUFOEEFWFMPQFSIBOECPPL ೥Ҏ্લͷ৘ใ͸ӏವΈʹ͠ͳ͍ ஌ݟͷ͋Δ஌ਓʹฉ͘

  22. 3FBDUʹ஌ݟͷ͋Δํ ͥͻɺҙݟަ׵͠·͠ΐ͏ʔʂ !TIJLJDIFF