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

by Takuya Shikichi

Slide 1

Slide 1 text

8 F " S F + B W B 4 D S J Q U F S T ! U I ϑϩϯτະܦݧऀͷ 3FBDUϓϩμΫτվળ 6CJF *ODෑ஍ୖ໵ !TIJLJDIFF

Slide 2

Slide 2 text

ࣗݾ঺հ ෑ஍ɹୖ໵ !TIJLJDIFF 6CJFגࣜձࣾΤϯδχΞ +BWBͰαʔόʔαΠυ։ൃ΍ɺ 4XJGUͰΞϓϦ։ൃΛܦݧ͠ɺ ڈ೥ͷ݄ʹస৬

Slide 3

Slide 3 text

։ൃ͍ͯ͠ΔαʔϏε ਺े݅ͷපӃͰӡ༻த ϑϩϯτΛ3FBDU3FEVYͰ։ൃ පӃͷ଴ͪ࣌ؒʹɺ໰਍Λ"*Ͱߦ͏

Slide 4

Slide 4 text

ڞಉ୅දͷΤϯδχΞҰਓ͕ .71Λϲ݄൒Ͱ։ൃ αʔόʔαΠυؚΉ

Slide 5

Slide 5 text

͍Ζ͍Ζͱ՝୊͕ग़͖ͯͨ .71ϦϦʔεޙʹೖࣾ Ұ෦ͷױऀ༷͕ϓϩμΫτΛ࢖͑ͳ͍ ΤϯδχΞ͸ਓ ࣾ಺ʹϑϩϯτͷ஌ݟ͕গͳ͍·· ཷ·͍ͬͯΔٕज़తෛ࠴ ϓϩμΫτվળΛߦ͏͜ͱʹ

Slide 6

Slide 6 text

6*ͷվળ

Slide 7

Slide 7 text

ϦϦʔεޙɺ6*पΓͰ༷ʑͳ໰୊͕ ߴྸऀͷํʑ ୅ TBGBSJͷϔομʔ෦෼Λؒҧ͑ͯλοϓ ίϐʔˍϖʔετͷϙοϓΞοϓ͕ग़ͯ͠·͏ 8FCͳΒͰ͸ͷऑ఺͕ग़ͯ͠·ͬͨ FUD

Slide 8

Slide 8 text

TBGBSJͷϔομʔ෦෼Λؒҧ͑ͯλοϓ ϑϧεΫϦʔϯϞʔυϗʔϜը໘ʹ௥Ճ͢Δӡ༻ʹ ݱ৅ ରԠ λοϓͰ͖ͯ͠·͏Օॴ͕ଟ͍ ϝλλάΛߦ௥Ճ

Slide 9

Slide 9 text

ίϐʔˍϖʔετͷϙοϓΞοϓ͕ग़ͯ͠·͏ ग़ͳ͍Α͏ʹDTTͰରॲ body { -webkit-touch-callout: none; /* ϦϯΫ௕ԡ͠ϙοϓΞοϓ */ -webkit-user-select: none; /* ςΩετ௕ԡ͠ϙοϓΞοϓ */ } ݱ৅ ରԠ

Slide 10

Slide 10 text

ΞϓϦͬΆ͘͢ΔͨΊͷখ͞ͳվળΛॏͶɺ ߴྸऀͰ΋࢖͑ΔΑ͏ʹ

Slide 11

Slide 11 text

ٕज़తෛ࠴ͷվળ

Slide 12

Slide 12 text

ίʔυपΓͰ΋༷ʑͳ໰୊͕ wՄಡੑͷ௿͍ίʔυ wͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ wςετͷগͳ͞ wංେԽͨ͠ίϯϙʔωϯτ গͣͭ͠ɺۀքඪ४ͬΆ͍ٕज़બఆ

Slide 13

Slide 13 text

ෆໟͳίʔυϨϏϡʔ͕ͳ͘ͳͬͨ ίʔυ੔ܗʹ࣌ؒΛ͔͚Δ͜ͱ͕ͳ͘ͳͬͨ Մಡੑͷ௿͍ίʔυ໰୊ &4-JOUͱQSFUUJFSͷಋೖ

Slide 14

Slide 14 text

ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ BQQDTT .disease-print-button { display: inline-block; text-align: center; font-size: 12px; padding: 4px; background-color: #ffffff; border: 2px solid #fa8778; } #FGPSFશͯɺ΂ͨॻ͖ɻ Ϋϥε໊΋িಥΛආ໋໊͚ͯ

Slide 15

Slide 15 text

ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ σβΠϯΨΠυϥΠϯʹԊͬͯɺ ৭ɾϑΥϯταΠζͷఆ਺ఆٛ "GUFS

Slide 16

Slide 16 text

ͭͷڊେͳ΂ͨॻ͖$44ϑΝΠϧ໰୊ DTTNPEVMFTΛ࠾༻͠ɺ ίϯϙʔωϯτ͝ͱʹ෼ׂ Ϋϥε໊ͷিಥ͕ͳ͘ͳͬͨ ॻ͖ํ͕΄΅ੜͷDTTʹ͍ۙͷͰɺ σβΠφʔͰ΋ॻ͍ͯ͘Εͦ͏ "GUFS

Slide 17

Slide 17 text

ͦͷଞͷ՝୊ wංେԽͨ͠ίϯϙʔωϯτͷ෼ׂ wqPXͷಋೖ wςετͷ֦ॆ w18"ରԠ ઈࢍɺରԠத

Slide 18

Slide 18 text

࠷ޙʹɺ3FBDUͷ ϓϩμΫτվળͰ ಘΒΕͨ஌ݟ

Slide 19

Slide 19 text

6*ͷվળͰಘΒΕͨ஌ݟ 8FCͰωΠςΟϒΞϓϦͬΆ͍ಈ͖Λ ͤ͞Δͷ͸݁ߏେม εΫϩʔϧͷಈ͖ɺλοϓ࣌ɺμϒϧλοϓ࣌ͷڍಈɺى ಈը໘ɺ͍Ζ͍Ζͱ໰୊͕ى͜Γશ෦ରԠ͢Δͷ͸େม 8Ͱ࡞ͬͯɺ18"ରԠPSΞϓϦʹҠߦ

Slide 20

Slide 20 text

SFEVYUIVOLWTSFEVYTBHB DTTNPEVMFTWTTUZMFEDPNQPOFOUT UZQFTDSJQUWTqPX ٕज़తෛ࠴ͷվળͰಘΒΕͨ஌ݟ ۀքͰ౰ͨΓલʹ࠾༻͞Εͯͦ͏ͳٕज़͕෼͔Βͳ͍ ʮෛ࠴ʹͳͬͯ͠·͏ͷͰ͸ʁʯͱ͍͏ڪාͱͷઓ͍ ྫɿ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

3FBDUʹ஌ݟͷ͋Δํ ͥͻɺҙݟަ׵͠·͠ΐ͏ʔʂ !TIJLJDIFF