Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
Search
Kasumi Morita
April 28, 2017
Programming
10
9.8k
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
Frontrend Vol.9 でお話しした内容です。
動画配信もされています →
https://freshlive.tv/tech-conference/109133
Kasumi Morita
April 28, 2017
Tweet
Share
More Decks by Kasumi Morita
See All by Kasumi Morita
スムーズに入力するためのForm Design
mkasumi
7
1.1k
UTSUWAテーマVer.2.0の紹介
mkasumi
1
97
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
180
a-blog cms でよくあるサポート小ネタまとめてみた
mkasumi
1
160
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
140
デザインを考える習慣づくり
mkasumi
1
920
Other Decks in Programming
See All in Programming
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
630
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
技術を根付かせる / How to make technology take root
kubode
1
240
テストをしないQAエンジニアは何をしているか?
nealle
0
130
SpringBoot3.4の構造化ログ #kanjava
irof
2
960
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
CI改善もDatadogとともに
taumu
0
110
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
182
16k
Become a Pro
speakerdeck
PRO
26
5.1k
Bash Introduction
62gerente
610
210k
How STYLIGHT went responsive
nonsquared
98
5.3k
A Philosophy of Restraint
colly
203
16k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Transcript
ϚʔΫΞοϓͷ࠷దղΛݟ͚ͭग़͢ํ๏ ༗ݶձࣾΞοϓϧοϓϧɹా͔͢Έ '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