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.6k
マークアップの最適解を見つけ出す方法 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
94
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
170
a-blog cms でよくあるサポート小ネタまとめてみた
mkasumi
1
160
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
140
デザインを考える習慣づくり
mkasumi
1
920
Other Decks in Programming
See All in Programming
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Amazon Qを使ってIaCを触ろう!
maruto
0
400
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.4k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
as(型アサーション)を書く前にできること
marokanatani
9
2.6k
イベント駆動で成長して委員会
happymana
1
320
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
880
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
190
Better Code Design in PHP
afilina
PRO
0
120
Featured
See All Featured
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Thoughts on Productivity
jonyablonski
67
4.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Writing Fast Ruby
sferik
627
61k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Teambox: Starting and Learning
jrom
133
8.8k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Agile that works and the tools we love
rasmusluckow
327
21k
Raft: Consensus for Rubyists
vanstee
136
6.6k
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