Frontrend Vol.9 でお話しした内容です。 動画配信もされています → https://freshlive.tv/tech-conference/109133
ϚʔΫΞοϓͷ࠷దղΛݟ͚ͭग़͢ํ๏༗ݶձࣾΞοϓϧοϓϧɹా͔͢Έ'SPOUSFOE7PM- How to Find Best Practice of Markup -
View Slide
QuestionͳΜͷͨΊʹϚʔΫΞοϓ͢Δͷ͔ ͝ଘͰ͔͢ʁ
“͜͜MJཁૉͰϚʔΫΞοϓ͠·͢ͱ͋Δॳ৺ऀ͚ॻ੶ʹͯ
“͜͜MJཁૉͰϚʔΫΞοϓ͠·͢ͱ͋Δॳ৺ऀ͚ॻ੶ʹͯזד
Ͳ͏ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ͓Β͓ͤΒͤQQEJWEJW͓ΒͤBSUJDMFBSUJDMFIIMJMJQQ
༗ݶձࣾΞοϓϧοϓϧϚʔΫΞοϓΤϯδχΞా͔͢Έ!,BTVNJ.PSJUB!❖ डୗҊ݅ ❖ $.4ͷ։ൃ
‣ 8FC੍࡞ऀ͕)5.-ཁૉΛબఆ͢Δཧ༝‣ ࠷దղΛݟ͚ͭग़͢ํ๏‣ ͳͥMJཁૉͰϚʔΫΞοϓ͢Δͷ͔ʁ‣ ·ͱΊAgenda
8FCⵖ⡲罏ָ )5.-銲稆鼅㹀ׅ椚歋
EJWهࣄͷλΠτϧEJWEJWࠓ໊ݹ͔Β͖ͬͯ·ͨ͠ɻ໊ݹ#ڃάϧϝ͕͍ͬͺ͍Ͱ৭͍͠ΐͬͺ͍৯Ͱ͍ͬͺ͍Ͱ͕͢ɺͱͯॅΈ͍֗͢Ͱ͢ʂCSCSCS ؍ޫ໊ݹɺݘࢁɺৗ͞ΜΆಓ͕͓͢͢ΊͰ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ໊ݹͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ݄ɺ໊ݹʂʂEJWEJWͬͱΈΔEJW
EJWهࣄͷλΠτϧEJWEJWࠓ໊ݹ͔Β͖ͬͯ·ͨ͠ɻ໊ݹ#ڃάϧϝ͕͍ͬͺ͍Ͱ৭͍͠ΐͬͺ͍৯Ͱ͍ͬͺ͍Ͱ͕͢ɺͱͯॅΈ͍֗͢Ͱ͢ʂCSCSCS ؍ޫ໊ݹɺݘࢁɺৗ͞ΜΆಓ͕͓͢͢ΊͰ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ໊ݹͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ݄ɺ໊ݹʂʂEJWEJWͬͱΈΔEJWעׯֽֿה鎉ֲה 8FCⵖ⡲罏ׄׯזֻגֿךְֻ剅ֽ
QuestionͳΜͰ)5.-ཁૉΛબఆ͢Δͷ͔ʁMJTQBO QEJWTFDUJPOBSUJDMF˘FUD
8FCαΠτ͕࣋ͭػೳΛ࠷େݶʹ׆͔ͨ͢ΊAnswer
ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ‣ %0.ߏਖ਼͘͠‣ )5.-୯ಠදࣔ͢Δ߹ͳ͍Α͏ʹ‣ εΫϦʔϯϦʔμʔͰཧղ͍͢͠Α͏ʹ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣ
‣ %0.ߏਖ਼͘͠‣ )5.-୯ಠදࣔ͢Δ߹ͳ͍Α͏ʹ‣ εΫϦʔϯϦʔμʔͰཧղ͍͢͠Α͏ʹ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ
લʹߦ࣮ͬͨݧ
Questionҧ͏αʔϏεͳͷʹ͋Δఔಉ͡֎ݟɻ ͳΜͰʁ
ҧ͏αʔϏεͰ͍ͬͯΔϚʔΫΞοϓ͍ͬ͠ΐ͔ͩΒɻAnswerTUSPOHॏཁTUSPOHॏཁTUSPOHॏཁTUSPOHॏཁ
)5.-ͷΈͰใ͕݁Ͱ͖Εʜ‣ Ҿ༻͢Δ͜ͱ͕Ͱ͖Δ‣ ίϐϖ͕Ͱ͖Δ‣ ϖʔδݕࡧ͕Ͱ͖Δ͋Εʁͱͬͯී௨ͷػೳ͡Όͳ͍ʁ
OFYU\DPOUFOUˑ࣍˒^$44TQBOBSJBMBCFMˑ࣍˒TQBO)5.-
OFYU\DPOUFOUˑ࣍˒^$44TQBOBSJBMBCFMˑ࣍˒TQBO)5.-걾ֺׅךծتً͘͘͝͝ී௨ͩͱࢥ͍ͬͯΔػೳ ͪΌΜͱ)5.-Ͱॻ͔Ε͍ͯΔ͔Βػೳ͍ͯ͠Δ
ϚʔΫΞοϓݴޠ͍ͬͯ͏ͷਓͱػցͷڞ௨ݴޠͷ͜ͱͭ·ΓϚʔΫΞοϓ͢ΔࢲͨͪਓͱػցΛͭͳ͙༁ऀͷׂΛ͍ͯ͠ΔϚγϯϦʔμϒϧ ώϡʔϚϯϦʔμϒϧϚʔΫΞοϓԿΛఏڙͰ͖Δͷ͔ʁ
剑黝鍑鋅אֽ⳿ׅ倯岀
ϚʔΫΞοϓͷͩ͜ΘΓ͕ग़ͯ͘Δͱ ൈ͚ग़ͤͳ͍পʜ
“ϚʔΫΞοϓʹਖ਼ղͳ͍ۀքͷ͑Β͍ਓͨͪ
͕͑ͨ͘͞Μ͋Δ͚ͩ҆৺͍ͯͩ͘͠͞ʂ
HomeϒϩάϒϩάهࣄHomeϒϩάϒϩάهࣄ
HomeϒϩάϒϩάهࣄHomeϒϩάϒϩάهࣄו麩גכְזְ
ͷσόΠεͷදࣔʹ ৼΓճ͞Εͳ͍Α͏ʹج४͕ཉ͍͠ϚʔΫΞοϓͷج४ͬͯͳΜͩΖ͏ʁҰൠతͳج४Λ୳͢࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ
ج४Λ୳ͨ͢ͱ͑ϒϥβ༷Λͱʹ࡞ΒΕ͍ͯΔ
ϚʔΫΞοϓ͢Δ্Ͱඞཁͳࣝ➬圫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˒ʢॳ৺ऀՄೳʣTQBO1. ਖ਼ࣾһ(த్)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銲稆ד و٦ؙ،حفׅךַ
Ͳ͏ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ͓Β͓ͤΒ͓ͤΒͤQQEJWEJWBSUJDMFBSUJDMFIIMJMJQQ
Α͘ΈΔϚʔΫΞοϓͦͷ‣ BSUJDMFཁૉΛ͏ͱɺඞવతʹݟग़͕͠ ͨ͘͞Μʹͳͬͯ͠·͏ʜ‣ ಠཱͯ͠ͳ͍ͷʹBSUJDMFཁૉʁ ͜Εࣗମهࣄ͡Όͳ͍ʜ͓ΒͤBSUJDMFBSUJDMFII
Α͘ΈΔϚʔΫΞοϓͦͷ‣ ͠ϦϯΫઌ͕هࣄ͔ͩΒͱ͍͏ͰBSUJDMFཁૉΛબΜͰ͍ͨΒʜ͓Βͤͷهࣄ͓Βͤͷهࣄ͓Βͤͷهࣄ͓ΒͤͷهࣄBSUJDMFBSUJDMFBSUJDMFBSUJDMF݄݄݄͓Βͤͷهࣄ͓Βͤͷهࣄ͓ΒͤͷهࣄΧςΰϦʔΧςΰϦʔΧςΰϦʔBSUJDMFBSUJDMFBSUJDMFαΠτλΠτϧ φϏɹφϏɹφϏ̏φϏ"ͷৄࡉͪ͜Β∠ ∠BSUJDMF
Α͘ΈΔϚʔΫΞοϓͦͷ‣ EJWཁૉؒҧͬͯͳ͍͚ͲɺͦΕͧΕͷ ͓Βͤهࣄ͕ͭͷάϧʔϓͩͱ͍͑ͨʜ͓ΒͤEJWEJWQQ
Α͘ΈΔϚʔΫΞοϓͦͷ‣ MJཁૉͰϚʔΫΞοϓ͍ͯ͠Ε ࢧԉٕज़ʹΑΔ͚Ͳ ʮϦετ˓߲ʯͬͯ࢝·ΓΛڭ͑ͯ͘ΕΔ‣ ͠)5.-͚ͩʹͳͬͯ ಄ʹʮɾʯ͕େମ͔ͭ͘Βࢹ֮తʹ άϧʔϓͩͬͯཧղͰ͖Δ͓ΒͤMJMJQQ
͔ͩΒMJཁૉͳΜͩʂ‣ ༷ΛΔ͜ͱ‣ ͍Ζ͍Ζͳπʔϧ͔ΒϚʔΫΞοϓΛମݧͯ͠ΈΔ͜ͱ
תה
ϚʔΫΞοϓ͢Δ͜ͱɺ ਓͱػցΛͭͳ͙༁͢Δ࡞ۀͷ͜ͱ‣ ϚʔΫΞοϓਓ͕ػցʹ͑ͯػց͕ਓʹਖ਼͘͠ ͑ΔͨΊʹଘࡏ͢Δ♥
ϚʔΫΞοϓͷ࠷దͳղ ϓϩδΣΫτ͝ͱʹมΘͬͯ͘Δ‣ ࣗͰ͑Λಋ͖ग़ͤΔਓؒʹͳΖ͏
ࠓͷ͓ɺ͔ͬͨ͠Ͱ͔͢ʁ
·ͣͰ͖Δͱ͜Ζ͔ΒϕετϓϥΫςΟεΛݟ͚ͭΔલʹ ϕλʔϓϥΫςΟεΛݟ͚ͭΔͱ͜Ζ͔Β
ࠓҰ൪͔͑ͨͬͨ͜ͱ͑ඞͣ͠Ұݸ͚ͩ͡Όͳ͍ ͑ͨ͘͞Μ͋ΔΜͩ࠷దղࣗͷྗͰΈ͚͍ͭͩͯ͜͠͏ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠,BTVNJ.PSJUBLBTVNJNPSJUBIUUQNLBTVNJDPN
mkasumi
munetoshi
kdubois
satoshi7190
nanya3737
alli83
mot_techtalk
hitokun
cer
yui_knk
twada
ivargrimstad
squer
quramy
eitanlees
paigeccino
brad_frost
sferik
addyosmani
hannesfritz
andyhume
bermonpainter
shpigford
holman
jlugia