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

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

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

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

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

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

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

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

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

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

EJWهࣄͷλΠτϧEJW EJWࠓ೔͸໊ݹ԰͔Β΍͖ͬͯ·ͨ͠ɻ໊ݹ԰͸#ڃ άϧϝ͕͍ͬͺ͍Ͱ஡৭͍͠ΐͬͺ͍৯΂෺Ͱ͍ͬͺ͍ Ͱ͕͢ɺͱͯ΋ॅΈ΍͍֗͢Ͱ͢ʂCSCSCS  ؍ޫ஍͸໊ݹ԰৓ɺݘࢁ৓ɺৗ׈͞ΜΆಓ͕͓͢͢Ί Ͱ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ ͸໊ݹ԰৓ͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ ͸݄೔ɺ೔͸໊ݹ԰΁ʂʂEJW EJW΋ͬͱΈΔEJW ע׏׍ׯֽ׋ֿה׾鎉ֲה 
8FCⵖ⡲罏ׄׯזֻג׮ֿךֻ׵ְ剅ֽ׷

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

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

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

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

೥લʹߦ࣮ͬͨݧ

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

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

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

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

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

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

剑黝鍑׾鋅אֽ⳿ׅ倯岀

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

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

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

<ul> <li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href=“/blog/xxx.html">ϒϩάهࣄ</a></li> </ul> <nav> <ol>
<li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href="/blog/xxx.html">ϒϩάهࣄ</a></li> </ol> </nav>

<ul> <li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href=“/blog/xxx.html">ϒϩάهࣄ</a></li> </ul> <nav> <ol>
<li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href="/blog/xxx.html">ϒϩάهࣄ</a></li> </ol> </nav> ו׍׵׮꟦麩׏גכְזְ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תה׭

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

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

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

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

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

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

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

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

More Decks by Kasumi Morita

Other Decks in Programming

Featured

Transcript