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

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

Frontrend Vol.9 でお話しした内容です。
動画配信もされています → https://freshlive.tv/tech-conference/109133

26439a66c97c8a558149be373bf545d1?s=128

Kasumi Morita

April 28, 2017
Tweet

Transcript

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

    Markup -
  2. Question ͳΜͷͨΊʹϚʔΫΞοϓ͢Δͷ͔
 ͝ଘ஌Ͱ͔͢ʁ

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

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

  5. Ͳ͏΍ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓஌Βͤ  ͓஌Βͤ  Q Q EJW EJW 

    ͓஌Βͤ  BSUJDMF BSUJDMF I I  MJ MJ Q Q 
  6. ༗ݶձࣾΞοϓϧοϓϧ ϚʔΫΞοϓΤϯδχΞ ৿ా͔͢Έ !,BTVNJ.PSJUB !  ❖ डୗҊ݅ ❖ $.4ͷ։ൃ

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

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

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

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


    8FCⵖ⡲罏ׄׯזֻג׮ֿךֻ׵ְ剅ֽ׷
  11. Question ͳΜͰ)5.-ཁૉΛબఆ͢Δͷ͔ʁ MJ TQBO Q EJW TFDUJPO BSUJDMF ˘FUD

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

  13. ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ ‣ %0.ߏ଄͸ਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ৔߹΋໰୊ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰ΋ཧղ͠΍͍͢Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣

    ϢʔβϏϦςΟʢૢ࡞ੑʣ
  14. ‣ %0.ߏ଄͸ਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ৔߹΋໰୊ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰ΋ཧղ͠΍͍͢Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣ

    ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ
  15. ೥લʹߦ࣮ͬͨݧ

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

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

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

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

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

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

  22. 剑黝鍑׾鋅אֽ⳿ׅ倯岀

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

  24. “ ϚʔΫΞοϓʹਖ਼ղ͸ͳ͍ ۀքͷ͑Β͍ਓͨͪ

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

  26. <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>
  27. <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> ו׍׵׮꟦麩׏גכְזְ
  28. ຤୺ͷσόΠεͷදࣔʹ
 ৼΓճ͞Εͳ͍Α͏ʹج४͕ཉ͍͠ ϚʔΫΞοϓͷج४ͬͯͳΜͩΖ͏ʁ Ұൠతͳج४Λ୳͢ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ

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

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

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

  32. ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ ϧʔϧܥ ‣ 8$΍-4ͳͲͷ࢓༷ ‣ +*4ن֨ ‣ ݕࡧΤϯδϯͷΞϧΰϦζϜ ‣ $.4ͷ࢓༷

    ϧʔϧܥ͸Ұ౓ܾ·ͬͨ΋ͷ͸ͳ͔ͳ͔มΘΒͳ͍ɻ কདྷͷ͜ͱ΋ߟ͑ͯେମ͸ϧʔϧܥΛج४ɻ
  33. ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ πʔϧܥ ‣ εΫϦʔϯϦʔμʔ ‣ ΩʔϘʔυૢ࡞ ‣ 344Ϧʔμʔ πʔϧܥ͸ϢʔβϏϦςΟΛݕূ͢ΔͨΊʹ࢖͏ɻ ϧʔϧܥͰ0,Ͱ΋ϢʔβϏϦςΟΛଛͳ͏ͳΒߟ͑

    ௚͢ඞཁ΋ग़ͯ͘Δɻ
  34. ੈͷதͷ࢓༷ͷ஫ҙ఺ ஫ҙ఺ɿ࢓༷͸ਓ͕ؒ࡞ΔͷͰมΘΔ ‣ ࢓༷มߋʹౖΒͳ͍ίπ ࢓༷͸ੜ͖ͯΔͬͯࢥ͓ͬͯ͘
 ৗʹվળ͠Α͏ͱಈ͍͍ͯΔ͜ͱ͸͍͍͜ͱ

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

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

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

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

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

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

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


    VM
 EJW
 MJ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
  42. ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\
 EJTQMBZUBCMF
 ^ JUFNIFBEFS\
 EJTQMBZUBCMFIFBEFSHSPVQ
 ^ JUFNGPPUFS\
 EJTQMBZUBCMFGPPUFSHSPVQ
 ^

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


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


    NTHSJESPX
 HSJESPX ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
  45. ϚʔΫΞοϓΛ஌Γ͍ͨͳΒ
 ମݧΛͯ͠ڍಈΛ೺Ѳ͠Α͏ )5.-ͷཁૉΛબఆ͢Δཧ༝͸8FC͕࣋ͭػೳΛ
 ࠷େݶʹ׆͔ͨ͢Ίɻ ͪΌΜͱग़ྗઌͷσόΠεͰࢥͬͨ݁Ռ͕
 ಘΒΕ͍ͯΔ͔֬ೝ͠Α͏ɻ

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

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

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

  49. ༏ઌॱҐͷྫ  $.4ઃܭ  ࢓༷  4&0ରࡦ&'0ରࡦ
 8FCΞΫηγϏϦςΟ  8FCΞΫηγϏϦςΟ

     ࢓༷  $.4ઃܭ  &'0ରࡦ4&0ରࡦ $.4ߋ৽ॏࢹͷҊ݅ 8FCΞΫηγϏςΟॏࢹͷҊ݅ ‣ ΋ͪΖΜɺͲΕ΋େࣄ
 ͦΕͰ΋ɺ·ͣ͸ཉுΒͣʹ࠷༏ઌࣄ߲Λ࣮֬ʹ͜ͳͦ͏
  50. ϓϩδΣΫτͷ਺͚ͩ౴͕͑͋Δ ϓϩδΣΫτ͝ͱʹ໨ඪΛܾΊͯɺ໨ඪʹ޲͔ͬͯୡ੒͢Δ ͦΕ͕ɺϚʔΫΞοϓͷ࠷దղ

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

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

  53. Ͳ͏΍ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓஌Βͤ  ͓஌Βͤ  ͓஌Βͤ  Q Q EJW

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

    BSUJDMF I I
  55. Α͘ΈΔϚʔΫΞοϓͦͷ ‣ ΋͠ϦϯΫઌ͕هࣄ͔ͩΒͱ͍͏ͰBSUJDMFཁૉΛબΜͰ͍ͨΒʜ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ BSUJDMF BSUJDMF BSUJDMF

    BSUJDMF ೥݄೔ ೥݄೔ ೥݄೔ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ BSUJDMF BSUJDMF BSUJDMF αΠτλΠτϧ φϏɹφϏɹφϏ̏φϏ ঎඼"ͷৄࡉ͸ͪ͜Β ∠ ∠ BSUJDMF
  56. Α͘ΈΔϚʔΫΞοϓͦͷ ‣ EJWཁૉ΋ؒҧͬͯ͸ͳ͍͚ͲɺͦΕͧΕͷ
 ͓஌Βͤهࣄ͕ͭͷάϧʔϓͩͱ఻͍͑ͨʜ ͓஌Βͤ  EJW EJW Q Q

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

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

  59. תה׭

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

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

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

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

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

  65. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ,BTVNJ.PSJUB LBTVNJNPSJUB IUUQNLBTVNJDPN