マークアップの最適解を見つけ出す方法 in Frontrend Vol.9

by Kasumi Morita

Slide 1

Slide 1 text

ϚʔΫΞοϓͷ࠷దղΛݟ͚ͭग़͢ํ๏ ༗ݶձࣾΞοϓϧοϓϧɹ৿ా͔͢Έ 'SPOUSFOE7PM - How to Find Best Practice of Markup -

Slide 2

Slide 2 text

Question ͳΜͷͨΊʹϚʔΫΞοϓ͢Δͷ͔  ͝ଘ஌Ͱ͔͢ʁ

Slide 3

Slide 3 text

“ ͜͜͸MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ޲͚ॻ੶ʹͯ

Slide 4

Slide 4 text

“ ͜͜͸MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ޲͚ॻ੶ʹͯ ז׿ד

Slide 5

Slide 5 text

Ͳ͏΍ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓஌Βͤ ͓஌Βͤ Q Q EJW EJW ͓஌Βͤ BSUJDMF BSUJDMF I I MJ MJ Q Q

Slide 6

Slide 6 text

༗ݶձࣾΞοϓϧοϓϧ ϚʔΫΞοϓΤϯδχΞ ৿ా͔͢Έ !,BTVNJ.PSJUB ! ❖ डୗҊ݅ ❖ $.4ͷ։ൃ

Slide 7

Slide 7 text

‣ 8FC੍࡞ऀ͕)5.-ཁૉΛબఆ͢Δཧ༝ ‣ ࠷దղΛݟ͚ͭग़͢ํ๏ ‣ ͳͥMJཁૉͰϚʔΫΞοϓ͢Δͷ͔ʁ ‣ ·ͱΊ Agenda

Slide 8

Slide 8 text

8FCⵖ⡲罏ָ  )5.-銲稆׾鼅㹀ׅ׷椚歋

Slide 9

Slide 9 text

EJWهࣄͷλΠτϧEJW EJWࠓ೔͸໊ݹ԰͔Β΍͖ͬͯ·ͨ͠ɻ໊ݹ԰͸#ڃ άϧϝ͕͍ͬͺ͍Ͱ஡৭͍͠ΐͬͺ͍৯΂෺Ͱ͍ͬͺ͍ Ͱ͕͢ɺͱͯ΋ॅΈ΍͍֗͢Ͱ͢ʂCSCSCS  ؍ޫ஍͸໊ݹ԰৓ɺݘࢁ৓ɺৗ׈͞ΜΆಓ͕͓͢͢Ί Ͱ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ ͸໊ݹ԰৓ͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ ͸݄೔ɺ೔͸໊ݹ԰΁ʂʂEJW EJW΋ͬͱΈΔEJW

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Question ͳΜͰ)5.-ཁૉΛબఆ͢Δͷ͔ʁ MJ TQBO Q EJW TFDUJPO BSUJDMF ˘FUD

Slide 12

Slide 12 text

8FCαΠτ͕࣋ͭػೳΛ࠷େݶʹ׆͔ͨ͢Ί Answer

Slide 13

Slide 13 text

ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ ‣ %0.ߏ଄͸ਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ৔߹΋໰୊ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰ΋ཧղ͠΍͍͢Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣ

Slide 14

Slide 14 text

‣ %0.ߏ଄͸ਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ৔߹΋໰୊ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰ΋ཧղ͠΍͍͢Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣ ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ

Slide 15

Slide 15 text

೥લʹߦ࣮ͬͨݧ

Slide 16

Slide 16 text

Question ҧ͏αʔϏεͳͷʹ͋Δఔ౓ಉ͡֎ݟɻ  ͳΜͰʁ

Slide 17

Slide 17 text

ҧ͏αʔϏεͰ΋࢖͍ͬͯΔϚʔΫΞοϓ͸͍ͬ͠ΐ͔ͩΒɻ Answer TUSPOHॏཁ TUSPOHॏཁ TUSPOHॏཁ TUSPOHॏཁ

Slide 18

Slide 18 text

)5.-ͷΈͰ৘ใ͕׬݁Ͱ͖Ε͹ʜ ‣ Ҿ༻͢Δ͜ͱ͕Ͱ͖Δ ‣ ίϐϖ͕Ͱ͖Δ ‣ ϖʔδ಺ݕࡧ͕Ͱ͖Δ ͋Εʁͱͬͯ΋ී௨ͷػೳ͡Όͳ͍ʁ

Slide 19

Slide 19 text

OFYU\ DPOUFOUˑ࣍΁˒ ^ $44 TQBOBSJBMBCFMˑ࣍΁˒TQBO )5.-

Slide 20

Slide 20 text

OFYU\ DPOUFOUˑ࣍΁˒ ^ $44 TQBOBSJBMBCFMˑ࣍΁˒TQBO )5.- 걾׶ֺׅ׷ךծتً ͘͘͝͝ී௨ͩͱࢥ͍ͬͯΔػೳ͸  ͪΌΜͱ)5.-Ͱॻ͔Ε͍ͯΔ͔Βػೳ͍ͯ͠Δ

Slide 21

Slide 21 text

ϚʔΫΞοϓݴޠ͍ͬͯ͏ͷ͸ਓͱػցͷڞ௨ݴޠͷ͜ͱ ͭ·ΓϚʔΫΞοϓ͢Δࢲͨͪ͸ਓͱػցΛͭͳ͙຋༁ऀͷ໾ׂΛ͍ͯ͠Δ ϚγϯϦʔμϒϧ ώϡʔϚϯϦʔμϒϧ ϚʔΫΞοϓ͸ԿΛఏڙͰ͖Δͷ͔ʁ

Slide 22

Slide 22 text

剑黝鍑׾鋅אֽ⳿ׅ倯岀

Slide 23

Slide 23 text

ϚʔΫΞοϓ΁ͷͩ͜ΘΓ͕ग़ͯ͘Δͱ  ൈ͚ग़ͤͳ͍প΁ʜ

Slide 24

Slide 24 text

“ ϚʔΫΞοϓʹਖ਼ղ͸ͳ͍ ۀքͷ͑Β͍ਓͨͪ

Slide 25

Slide 25 text

౴͕͑ͨ͘͞Μ͋Δ͚ͩ ҆৺͍ͯͩ͘͠͞ʂ

Slide 26

Slide 26 text

Home
ϒϩά
ϒϩάهࣄ

Home
ϒϩά
ϒϩάهࣄ

Slide 27

Slide 27 text

Home
ϒϩά
ϒϩάهࣄ

Home
ϒϩά
ϒϩάهࣄ

ו׍׵׮꟦麩׏גכְזְ

Slide 28

Slide 28 text

຤୺ͷσόΠεͷදࣔʹ  ৼΓճ͞Εͳ͍Α͏ʹج४͕ཉ͍͠ ϚʔΫΞοϓͷج४ͬͯͳΜͩΖ͏ʁ Ұൠతͳج४Λ୳͢ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ

Slide 29

Slide 29 text

ج४Λ୳͢ ͨͱ͑͹ϒϥ΢β͸࢓༷Λ΋ͱʹ࡞ΒΕ͍ͯΔ

Slide 30

Slide 30 text

ϚʔΫΞοϓ͢Δ্Ͱඞཁͳ஌ࣝ ➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ  $.4鏣鎘 &'0 ًٝذشٝأ䚍 ΋͔ͨ͠͠ΒਓʹΑͬͯ͸΋ͬͱ͍ͬͺ͍͋Δ͔΋͠Ε·ͤΜ

Slide 31

Slide 31 text

ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ ϧʔϧܥ πʔϧܥ

Slide 32

Slide 32 text

ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ ϧʔϧܥ ‣ 8$΍-4ͳͲͷ࢓༷ ‣ +*4ن֨ ‣ ݕࡧΤϯδϯͷΞϧΰϦζϜ ‣ $.4ͷ࢓༷ ϧʔϧܥ͸Ұ౓ܾ·ͬͨ΋ͷ͸ͳ͔ͳ͔มΘΒͳ͍ɻ কདྷͷ͜ͱ΋ߟ͑ͯେମ͸ϧʔϧܥΛج४ɻ

Slide 33

Slide 33 text

ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ πʔϧܥ ‣ εΫϦʔϯϦʔμʔ ‣ ΩʔϘʔυૢ࡞ ‣ 344Ϧʔμʔ πʔϧܥ͸ϢʔβϏϦςΟΛݕূ͢ΔͨΊʹ࢖͏ɻ ϧʔϧܥͰ0,Ͱ΋ϢʔβϏϦςΟΛଛͳ͏ͳΒߟ͑ ௚͢ඞཁ΋ग़ͯ͘Δɻ

Slide 34

Slide 34 text

ੈͷதͷ࢓༷ͷ஫ҙ఺ ஫ҙ఺ɿ࢓༷͸ਓ͕ؒ࡞ΔͷͰมΘΔ ‣ ࢓༷มߋʹౖΒͳ͍ίπ ࢓༷͸ੜ͖ͯΔͬͯࢥ͓ͬͯ͘  ৗʹվળ͠Α͏ͱಈ͍͍ͯΔ͜ͱ͸͍͍͜ͱ

Slide 35

Slide 35 text

ϚʔΫΞοϓͨ݁͠Ռ͕Ͳ͏ͳΔ͔Λ஌͓ͬͯ͘ Ͳ͏΍ͬͨΒମݧͰ͖ΔͩΖ͏ʁ ࣮ࡍʹମݧͯ͠஌ࣝΛ͚ͭΔ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ

Slide 36

Slide 36 text

࣮ࡍʹମݧ͢Δํ๏ ‣ εΫϦʔϯϦʔμʔ ‣ 344ϦʔμʔͳͲͷϦʔμʔදࣔ ‣ ΩʔϘʔυૢ࡞ ‣ ݕࡧΤϯδϯ ‣ ʜFUD

Slide 37

Slide 37 text

࣮ࡍʹମݧͯ͠Έͯमਖ਼ͨ͠ϚʔΫΞοϓྫ ‣ ͳʹ͔Λด͡ΔϘλϯ ‣ ಠࣗσβΠϯͷνΣοΫϘοΫε ‣ ҙຯΛ࣋ͭγϯϘϧϑΥϯτ ‣ σβΠϯʹҾ͖ͣΒΕͳ͍  %0.ߏ଄Λอͭ

Slide 38

Slide 38 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ̍ TQBODMBTTˑKTDMPTF˒ด͡ΔTQBO ͳʹ͔Λด͡ΔϘλϯ CVUUPOUZQFˑCVUUPO˒DMBTTˑKTDMPTF˒ด͡ΔCVUUPO ꟗׄ׷

Slide 39

Slide 39 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ MBCFM  JOQVUUZQFˑDIFDLCPY˒WBMVFˑBQQMF˒ΓΜ͝  MBCFM ಠࣗσβΠϯͷνΣοΫϘοΫε EJW  JOQVUUZQFˑDIFDLCPY˒WBMVFˑBQQMF˒JEˑBQQMF˒  MBCFMGPSˑBQQMF˒ΓΜ͝MBCFM  EJW ΓΜ͝

Slide 40

Slide 40 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ TQBODMBTTˑJDPOCFHJOOFS˒BSJBMBCFMˑॳ৺ऀՄೳ˒TQBO ҙຯΛ࣋ͭγϯϘϧϑΥϯτ TQBODMBTTˑJDPOCFHJOOFS˒BSJBIJEEFOˑUSVF˒TQBO  TQBODMBTTˑTSPOMZ˒ʢॳ৺ऀՄೳʣTQBO 1. ਖ਼ࣾһ(த్) 2. ਖ਼ࣾһ(৽ଔ)

Slide 41

Slide 41 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭʢ)5.-ʣ MJDMBTTˑJUFN˒  EJWDMBTTˑJUFNGPPUFS˒  QهࣄͷλΠτϧ͕ೖΓ·͢Q  EJW  EJWDMBTTˑJUFNIFBEFS˒  VM  MJϥϕϧ"MJ  MJϥϕϧ#MJ  VM  EJW  MJ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#

Slide 42

Slide 42 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\  EJTQMBZUBCMF  ^ JUFNIFBEFS\  EJTQMBZUBCMFIFBEFSHSPVQ  ^ JUFNGPPUFS\  EJTQMBZUBCMFGPPUFSHSPVQ  ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭ $44ͦͷ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#

Slide 43

Slide 43 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\  EJTQMBZGMFY  GMFYEJSFDUJPODPMVNO  ^ JUFNIFBEFS\  PSEFS  ^ JUFNGPPUFS\  PSEFS  ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#

Slide 44

Slide 44 text

ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\  EJTQMBZNTHSJE  EJTQMBZHSJE ^ JUFNIFBEFS\  NTHSJESPX  HSJESPX ^ JUFNGPPUFS\  NTHSJESPX  HSJESPX ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#

Slide 45

Slide 45 text

ϚʔΫΞοϓΛ஌Γ͍ͨͳΒ  ମݧΛͯ͠ڍಈΛ೺Ѳ͠Α͏ )5.-ͷཁૉΛબఆ͢Δཧ༝͸8FC͕࣋ͭػೳΛ  ࠷େݶʹ׆͔ͨ͢Ίɻ ͪΌΜͱग़ྗઌͷσόΠεͰࢥͬͨ݁Ռ͕  ಘΒΕ͍ͯΔ͔֬ೝ͠Α͏ɻ

Slide 46

Slide 46 text

ͨ·ʹυΩϡϝϯτͨͪ͸݌՞͢Δ ݌՞ͨ͠ͱ͖͸ΫϥΠΞϯτ͕ͲΜͳػೳΛ  Ұ൪ٻΊ͍ͯΔ͔Ұ౓ߟ͑ͯΈΑ͏ ϓϩδΣΫτ͝ͱʹ༏ઌॱҐΛܾΊΔ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ

Slide 47

Slide 47 text

ߟྀ͢Δ΂͖࢓༷ͨͪ ➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ  $.4鏣鎘 &'0 ًٝذشٝأ䚍

Slide 48

Slide 48 text

➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ  $.4鏣鎘 &'0 ًٝذشٝأ䚍 ׋תח鄃׷הָֹ֮׷ ߟྀ͢Δ΂͖࢓༷ͨͪ 秛劍הְֲせך植㹋

Slide 49

Slide 49 text

༏ઌॱҐͷྫ $.4ઃܭ ࢓༷ 4&0ରࡦ&'0ରࡦ  8FCΞΫηγϏϦςΟ 8FCΞΫηγϏϦςΟ ࢓༷ $.4ઃܭ &'0ରࡦ4&0ରࡦ $.4ߋ৽ॏࢹͷҊ݅ 8FCΞΫηγϏςΟॏࢹͷҊ݅ ‣ ΋ͪΖΜɺͲΕ΋େࣄ  ͦΕͰ΋ɺ·ͣ͸ཉுΒͣʹ࠷༏ઌࣄ߲Λ࣮֬ʹ͜ͳͦ͏

Slide 50

Slide 50 text

ϓϩδΣΫτͷ਺͚ͩ౴͕͑͋Δ ϓϩδΣΫτ͝ͱʹ໨ඪΛܾΊͯɺ໨ඪʹ޲͔ͬͯୡ੒͢Δ ͦΕ͕ɺϚʔΫΞοϓͷ࠷దղ

Slide 51

Slide 51 text

ז׈MJ銲稆ד  و٦ؙ،حفׅ׷ךַ

Slide 52

Slide 52 text

“ ͜͜͸MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ޲͚ॻ੶ʹͯ

Slide 53

Slide 53 text

Ͳ͏΍ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓஌Βͤ ͓஌Βͤ ͓஌Βͤ Q Q EJW EJW BSUJDMF BSUJDMF I I MJ MJ Q Q

Slide 54

Slide 54 text

Α͘ΈΔϚʔΫΞοϓͦͷ ‣ BSUJDMFཁૉΛ࢖͏ͱɺඞવతʹݟग़͕͠  ͨ͘͞Μʹͳͬͯ͠·͏ʜ ‣ ಠཱͯ͠ͳ͍ͷʹBSUJDMFཁૉʁ  ͜Εࣗମ͸هࣄ͡Όͳ͍ʜ ͓஌Βͤ BSUJDMF BSUJDMF I I

Slide 55

Slide 55 text

Α͘ΈΔϚʔΫΞοϓͦͷ ‣ ΋͠ϦϯΫઌ͕هࣄ͔ͩΒͱ͍͏ͰBSUJDMFཁૉΛબΜͰ͍ͨΒʜ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ BSUJDMF BSUJDMF BSUJDMF BSUJDMF ೥݄೔ ೥݄೔ ೥݄೔ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ BSUJDMF BSUJDMF BSUJDMF αΠτλΠτϧ φϏɹφϏɹφϏ̏φϏ ঎඼"ͷৄࡉ͸ͪ͜Β ∠ ∠ BSUJDMF

Slide 56

Slide 56 text

Α͘ΈΔϚʔΫΞοϓͦͷ ‣ EJWཁૉ΋ؒҧͬͯ͸ͳ͍͚ͲɺͦΕͧΕͷ  ͓஌Βͤهࣄ͕ͭͷάϧʔϓͩͱ఻͍͑ͨʜ ͓஌Βͤ EJW EJW Q Q

Slide 57

Slide 57 text

Α͘ΈΔϚʔΫΞοϓͦͷ ‣ MJཁૉͰϚʔΫΞοϓ͍ͯ͠Ε͹  ࢧԉٕज़ʹ΋ΑΔ͚Ͳ  ʮϦετ˓߲໨ʯͬͯ࢝·ΓΛڭ͑ͯ͘ΕΔ ‣ ΋͠)5.-͚ͩʹͳͬͯ΋  ๯಄ʹʮɾʯ͕େମ͔ͭ͘Βࢹ֮తʹ΋  ά ϧʔϓͩͬͯཧղͰ͖Δ ͓஌Βͤ MJ MJ Q Q

Slide 58

Slide 58 text

͔ͩΒMJཁૉͳΜͩʂ ‣ ࢓༷Λ஌Δ͜ͱ ‣ ͍Ζ͍Ζͳπʔϧ͔ΒϚʔΫΞοϓΛମݧͯ͠ΈΔ͜ͱ

Slide 59

Slide 59 text

תה׭

Slide 60

Slide 60 text

ϚʔΫΞοϓ͢Δ͜ͱ͸ɺ  ਓͱػցΛͭͳ͙຋༁͢Δ࡞ۀͷ͜ͱ ‣ ϚʔΫΞοϓ͸ਓ͕ػցʹ఻͑ͯػց͕ਓʹਖ਼͘͠  ఻͑ΔͨΊʹଘࡏ͢Δ ♥

Slide 61

Slide 61 text

ϚʔΫΞοϓͷ࠷దͳղ౴͸  ϓϩδΣΫτ͝ͱʹมΘͬͯ͘Δ ‣ ࣗ෼Ͱ౴͑Λಋ͖ग़ͤΔਓؒʹͳΖ͏

Slide 62

Slide 62 text

ࠓ೔ͷ͓࿩ɺ೉͔ͬͨ͠Ͱ͔͢ʁ

Slide 63

Slide 63 text

·ͣ͸Ͱ͖Δͱ͜Ζ͔Β ϕετϓϥΫςΟεΛݟ͚ͭΔલʹ  ϕλʔϓϥΫςΟεΛݟ͚ͭΔͱ͜Ζ͔Β

Slide 64

Slide 64 text

ࠓ೔Ұ൪఻͔͑ͨͬͨ͜ͱ ౴͑͸ඞͣ͠΋Ұݸ͚ͩ͡Όͳ͍  ౴͑͸ͨ͘͞Μ͋ΔΜͩ ࠷దղ͸ࣗ෼ͷྗͰΈ͚͍ͭͩͯ͜͠͏ʂ

Slide 65

Slide 65 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ,BTVNJ.PSJUB LBTVNJNPSJUB IUUQNLBTVNJDPN