3ヶ月後の工数を劇的に減らす、将来のための効率的なマークアップ設計

2017/7/1(土)開催の SaCSS Special12 SaCSS SUMMER FESTIVAL 第1弾 HTML＆CSS にて発表したスライドです。
変更に強いマークアップ・設計の仕方を解説しています。

1. ٠剢䖓ך䊨侧׾ⷚ涸ח幾׵ׅծ
   㼛勻ך׋׭ך⸬桦涸זو٦ؙ،حف鏣鎘 
   
   4B$44
   4QFDJBM
   4B$44
   46..&3
   '&45*7"-
   痥䔉
   )5.-$44
2. ⼱歊
   䞙䘊 ➤ ձࣾɿ24-7/ύϯη ग़޲த٩( 'ω' )و ➤ ςΫχΧϧσΟϨΫλʔ/γχΞΤ ϯδχΞ ➤ ओʹ਺ඦPҊ݅୲౰(ͳ͔ͥੲ͔Β) ➤ ϒϩάɿThinking Salad ➤ ͪΐ͏͠ΐɿ͕͔͍ͤͨ ➤ ͨΜ͠ΐɿ͓͔Ͷͷܭࢉ͕Ͱ͖ͳ͍ ➤ आۚɿ150ສ٩( 'ω' )و
3. 䒷׏馉׃ת׃גծ䘯黝דׅկ
4. #SBDLFUTָ㥨ֹ麓ֺג劤׾⳿׃ת׃׋կ ,JOEMFأز، ד窫额 涪㡰⚥ 玗鴥ⰼ 㸜ְ ֶ䖤ז ٍؗٝل٦ٝ 㹋倵⚥
5. 13&$44׮⡲׶ת׃׋կ 00$44ծ4."$44ծ#&.׾ك٦أח׃׋ ⚥鋉垷⟃♳ぢֽ$44،٦ؗذؙثٍ IUUQQSFDTTJPKB
6. */%&9 ➤ ϚϧνΫϥεઃܭ ➤ Ϋϥε໋໊ ➤ Ϟδϡʔϧઃܭ ➤ ςϯϓϨʔτΤϯδϯ ➤ ͦͷଞޮ཰ԽͷͨΊͷTips
7. ϚϧνΫϥεઃܭ
8. وٕثؙٓأ鏣鎘הכ ➤ OOCSSʹΑΓීٴͨ֓͠೦ ➤ ໨తͱ͢ΔελΠϧΛ࣮ݱɾ֦ு͢ Δʹ͋ͨΓɺHTMLʹෳ਺ͷΫϥε Λ෇༩͢Δ
9. Login Submit ءؙؚٕٝٓأך⢽
10. Login Submit ءؙؚٕٝٓأך⢽
11. Login Submit ءؙؚٕٝٓأך⢽ ಉ͡ίʔυ
12. Login Submit Contact Cancel
15. Login Login Login Login
18. Login Submit Contact Cancel Login Login Login Login –
19. א׵ְկ
    غٔؒ٦ءָّٝ㟓ִ׸ל㟓ִ׷קוא׵ְկ
20. Login Submit وٕثؙٓأך⢽
21. Login Submit وٕثؙٓأך⢽ ඞཁ࠷௿ݶ
22. ׋׌׃ծֿך剅ֹ倯חכꨇ挿ָկ
    
23. ،؎؝ٝ׾➰♷ׅ׷ؙٓأ
    hogehoge
24. ֿ׿זהֹוֲׅ׷
    饔חז׷ךכו׏׍ٖؔٝآחז׷ךכו׏׍
    Login
25. Login Submit وٕثؙٓأך⢽
26. Login Submit وٕثؙٓأך⢽
27. ׮ֲ♧娄կ
28. Login Submit وٕثؙٓأך⢽
29. Login Submit وٕثؙٓأך⢽ ༗ࣄͷͨΊͷ σϑΥϧτఆٛ ৄࡉ౓Λ ߴΊΔ
30. 
    غٔؒ٦ءّٝח㼎䘔ׅ׷կ
    Login Submit
31. Login Submit
32. ءؙؚٕٝٓأ鏣鎘ה嫰鯰׃׋ًٔحز ➤ ޙ͔ΒόϦΤʔγϣϯΛ૿΍͢ࡍɺهड़ྔ͕ݮΔ ➤ 3ϲ݄ޙͷ༧૝֎ͷ௥Ճཁ݅ʹରԠ͠΍͍͢ͷ͸ͬͪ͜ ➤ ͨͩ͠όϥϯεྑ͘ϕʔεΫϥεΛઃܭ͢Δʹ͸׳Εͱηϯε͕ඞཁ ➤ ϞσΟϑΝΠΞຖʹػೳΛ෼཭͢Δ͜ͱ͕Ͱ͖Δ ➤ ֦ுੑ͕͔ͳΓߴ͘ɺޙ͔Β௥Ճ࢓༷͕དྷͯ΋ׂͱରԠͰ͖Δ ➤ JS΍CMS౳ͰΫϥεΛ੍ޚ͢Δ৔߹ɺॲཧ͕গ͠ݮΔ (طଘΫϥεͷ࡟আͷඞཁ͕ͳ͍)
33. ءؙؚٕٝٓأ鏣鎘ה嫰鯰׃׋رًٔحز ➤ HTMLͷΫϥε͕৑௕ʹͳΓ͕ͪ ➤ ͋·ΓʹػೳΛ෼཭͠ա͗Δͱɺޙ͔ΒϓϩδΣΫτʹೖͬͨਓʹ͸෼͔ΓͮΒ͍ ➤ ϞσΟϑΝΠΞ͕૿͑ͨΓෳࡶʹͳͬͨ৔߹͸ɺͳΜΒ͔ͷυΩϡϝϯτΛ ➤ Sass಺ίϝϯτ ➤ ελΠϧΨΠυ
34. Ϋϥε໋໊
35. 㣐ֹֻⴓֽגא֮׷ ηϚϯςΟοΫͳ໊લ ʢͦͷதؒͳ໊લʣ ൚༻తͳ໊લ
36. Login
37. ㄏせ؟ٝفٕ
    
    إوٝذ؍حؙ ➤ news-blockɾproduct-block ➤ صُ٦أװ㉀ㅷח׃ַ⢪ִזְ
    ➤ company-block ➤ ؕٝػص٦ך؝ٝذؗأزד׃ַ⢪ִזְ
    ➤ ηϚϯςΟοΫʹͯ͠Θ͟ͱ෼཭͢ΔɺείʔϓΛ۠੾ Δͷ΋͋Γ ➤ ͦͷࡍ͸mixin౳Λ্ख͘༻͍ͯɺ಺෦తʹͳΔ΂͘ڞ ௨ԽΛ͓ͯ͘͠
38. ㄏせ؟ٝفٕ
    
    
    ⚥꟦ ➤ post-block ➤ չهأزպאת׶ـַؚٗ׵⳿⸂ׁ׸♧鋮ׁ׸׷״ֲ ז׮ךז׵⡦ד׮0,
39. ㄏせ؟ٝفٕ
    
    害欽 ➤ block/item ➤ ءٝفٕ麓ֺגⴓַ׶ב׵ְկ؝ٝؿؙٔز׮饯ֹװְׅ
    ➤ item-block ➤ ו׿זٖ؎،ؐزך׮ךד׮չJUFNCMPDLպח䧭׶䖤׷ך דծ؝ٝؿؙٔزָ饯ֹװְׅ
    ➤ postit-blockɾpareto-block ➤ וֿד׮害欽涸ח⢪ִ׷
    ➤ ׋׌׃㣐ֹֻז׶麓ֺ׷ٔأؙ׮֮׷
    ➤ ׍ז׫חㄏせך歋勻כ➰皠٥ػٖ٦زך岀⵱  ַ׵
40. Login ㄏせ؟ٝفٕ
    
    إوٝذ؍حؙ ➤ company-btn ➤ ⯓קוהずֻׄծؕٝػص٦ך؝ٝذؗأزד׃ַ⢪ ִזְ
    ➤ btn-login ➤ ذؗأزָ-PHJOדזְהְֽזְ
    ➤ -PHJOׄׯזֻծד׮ٖؔٝآח׃׋ַ׏׋׵וֲ ׅ׷ך
41. Login ㄏせ؟ٝفٕ
    
    
    ⚥꟦ ➤ btn-themeColor ➤ إوٝذ؍حؙ׌ָծ《׶㔐׃ָ׃װְׅ
    ➤ չٖؔٝآד֮׷ֿהպדכזֻծ
    
    
    
    
    
    
    
    
    
    
    չذ٦وؕٓ٦ד֮׷ֿהպָꅾ銲
    ➤ ذ٦وؕٓ٦ָ׋ת׋תٖؔٝآ׌׏׋׌ֽ
    ➤ btn-primary/btn-success ➤ ֿ׸׵׮ずֻׄծչ׋ת׋תٖؔٝآ׌׏׋պ׌ֽ
    ➤ ׋׌׃ծչٖؔٝآ׌ַ׵պהְֲ椚歋דQSJNBSZװ TVDDFTTך䠐㄂׾䭯׋זְنةٝח⢪׏גכְֽזְ
42. Login ㄏせ؟ٝفٕ
    
    害欽 ➤ btn-orange ➤ ֿךせ⵸ח劍䖉ׅ׷ֿהכ
    ➤ չنةٝד֮׷ֿהպ
    ➤ չٖؔٝآד֮׷ֿהպ
    זךדծ⚥ח⡦ָⰅ׏ג׮葺ְկׅ׀ֻ《׶㔐׃ָ׃װ ְׅ
43. ְֲֲֿךכ穠圓ꨇ׃ְ ➤ ʮಛ௃ʯ͕ೖͬͨΓ͢Δ → feature-block? ➤ ʮΦεεϝʯ͕ೖͬͨΓ͢Δ → recommend-block? ➤ ʮϙΠϯτʯ͕ೖͬͨΓ͢Δ → point-block? ➤ Ͱ͸img-blockͰ͸Ͳ͏͔ʁ ➤ JNHCMPDLז׿ג➭ה䎗׵ד׮غحذ؍ؚٝ׃׉ֲװ ׿ֽ˘˘ אךӴӴ
44. ⼱歊ָ״ֻװ׷ㄏせ ➤ card(-block) ➤ ⚅歲垥彊涸
    ➤ focal-block ➤ 湡׾䒷ַֻ׵կת׋ծչ暴䗙٥ؔأأً٥ه؎ٝزպ 瘝չ湡׾䒷ֹ׋ְպ؝ٝذٝخָ״ֻⰅ׷ַ׵
    ➤ vertThumb-block ➤ WFSUJDBM㘋湫ד֮׶ծַא؟يط؎ָٕ֮׷ַ׵
    ➤ pile-block ➤ 歗⫷٥ة؎زٕ٥ذؗأز˘ה琎׫ꅾיגְַֻ׵ אךӴӴ
45. ㄏせתה׭ ➤ ηϚϯςΟοΫ໊ ➤ ݶΒΕͨίϯςΩετͰͷΈ࢖༻͞Εɺ໊લࣗମʹҙຯ͕ඞཁͳ৔߹ ➤ ଟ͘͸IAɾσβΠϯઃܭ౳ɺ্ྲྀͷϨΠϠʔͱབྷΉ͜ͱ͕ଟ͍ ➤ ൚༻໊ ➤ ༷ʑͳίϯςΩετͰ࢖༻͞ΕΔ৔߹(ଞͷϖʔδͰ΋࢖͏ɺଞͷϒϩοΫ಺Ͱ΋࢖͏) ➤ ໋໊ͷϙΠϯτ͸ɺͦΕಛ༗ͷݟͨ໨Λද͢͜ͱɻ໊͸ମΛද͢ ➤ 3ϲ݄ޙͷ௥Ճཁ݅ʹରԠ͠΍͍͢ͷ͸ͬͪ͜ ➤ ͨͩ͠ɺن໛͕େ͖͚Ε͹େ͖͍΄Ͳɺ͖ͪΜͱͨ͠υΩϡϝϯτ΍ ελΠϧΨΠυ͕ແ͍ͱͭΒ͍Ͱ͢
46. ⡦ד׮׉ֲדָׅծ穠㽷כ周⟝ך暴䚍װ
    ؟؎زך鋉垷ծٌآُ٦ָٕ⢪欽ׁ׸׷朐屣ח䘔ׄג
    鿪䏝إوٝذ؍حؙ٥害欽ךغٓٝأ׾
    罋ִ׷䗳銲ָ֮׶תׅկ
47. Ϟδϡʔϧઃܭ
48. ⯓傈ծ䒦爡דה֮׷㹋꿀׾׃ת׃׋կ
50. ו׸ָչٌآُ٦ٕպד׃׳ֲַ
51. "ׁ׿
52. "ׁ׿
53. #ׁ׿
54. $ׁ׿
55. ➂ח״׏גչٌآُ٦ٕպך磛䏝٥钠陎ָ殯ז׶תׅկ
56. ֿ׸חꟼ׃ג׮ㄏせず圫ծ窫㼎涸ז姻鍑כזֻ
    周⟝׀הך䞔㜠鏣鎘װرؠ؎ٝח䓼ֻ䕦갟ׁ׸תׅկ
57. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ݟग़͠ɾϘλϯɾλάɾϥϕϧ౳͸࠷খ୯ҐͷϞδϡʔϧͱ͠ɺશମͰ࢖͍ճ͢ ➤ ෳ਺ͷཁૉ͔ΒͳΔϞδϡʔϧ͸ɺࢠཁૉʹ਌ͷϞδϡʔϧ໊Λܧঝͤ͞Δ ➤ Ϟδϡʔϧࣗମ͕ΧϥϜΛܗ੒͢Δ͜ͱ͸ආ͚Δ
58. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ݟग़͠ɾϘλϯɾλάɾϥϕϧ౳͸࠷খ୯ҐͷϞδϡʔϧͱ͠ɺશମͰ࢖͍ճ͢ ➤ ෳ਺ͷཁૉ͔ΒͳΔϞδϡʔϧ͸ɺࢠཁૉʹ਌ͷϞδϡʔϧ໊Λܧঝͤ͞Δ ➤ Ϟδϡʔϧࣗମ͕ΧϥϜΛܗ੒͢Δ͜ͱ͸ආ͚Δ
61. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ݟग़͠ɾϘλϯɾλάɾϥϕϧ౳͸࠷খ୯ҐͷϞδϡʔϧͱ͠ɺશମͰ࢖͍ճ͢ ➤ ͜ΕΒͷ͋͠Β͍͕ϖʔδʹΑͬͯมΘΔ͜ͱ͸͋·Γͳ͍ ➤ ͜ΕΒ͸αΠτ಺ϏδϡΞϧʹ͓͍ͯʮҰ؏ੑΛอͭʯͱ͍͏໾ׂ΋͋ΔͨΊ ➤ ͭ·Γमਖ਼ͨ͠ࡍɺमਖ਼͕શϖʔδʹ൓ө͞Εͳ͚Ε͹ͳΒͳ͍ ➤ ※ϨΠΞ΢τ΍෯ͷมԽ͸ίϯςΩετʹΑͬͯى͜ΓಘΔ ➤ ʮ͋͠Β͍ʯ=border, shadow, color, font౳
62. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ݟग़͠ɾϘλϯɾλάɾϥϕϧ౳͸࠷খ୯ҐͷϞδϡʔϧͱ͠ɺશମͰ࢖͍ճ͢ ➤ ෳ਺ͷཁૉ͔ΒͳΔϞδϡʔϧ͸ɺࢠཁૉʹ਌ͷϞδϡʔϧ໊Λܧঝͤ͞Δ ➤ Ϟδϡʔϧࣗମ͕ΧϥϜΛܗ੒͢Δ͜ͱ͸ආ͚Δ
64. 㶨銲稆ח鋵ך
    ٌآُ٦ٕせ׾竰䪫ׇׁ׷
65. 㶨銲稆ח鋵ך
    ٌآُ٦ٕせ׾竰䪫ׇׁ׷
66. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ෳ਺ͷཁૉ͔ΒͳΔϞδϡʔϧ͸ɺࢠཁૉʹ਌ͷϞδϡʔϧ໊Λܧঝͤ͞Δ ➤ Ϟδϡʔϧͷʮ੹೚ൣғʯΛ໌֬ʹ͢Δ ➤ ݴ͍׵͑Δͱɺ਌ͷ໊લΛܧঝͨ͠ࢠཁૉ͸ ʮͦͷϞδϡʔϧ֎ʹ͍࣋ͬͯ͘͜ͱΛ૝ఆ͍ͯ͠ͳ͍ʯ ͱ͍͏͜ͱΛද໌͍ͯ͠Δ ➤ ఆٛࡁΈͷϞδϡʔϧΛࢠཁૉͱͯ࣋ͪ͠ɺ͔ͭελΠϧ΍ϨΠΞ΢τΛ มߋ͢Δඞཁ͕͋Δ৔߹͸ࢠ(ଙ)ηϨΫλΛ࢖༻͢Δɻ
67. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ ݟग़͠ɾϘλϯɾϥϕϧʢΧςΰϦλάʣ౳͸࠷খ୯ҐͷϞδϡʔϧͱͯ͠ఆٛ͢Δ ➤ ෳ਺ͷཁૉ͔ΒͳΔϞδϡʔϧ͸ɺࢠཁૉʹ਌ͷϞδϡʔϧ໊Λܧঝͤ͞Δ ➤ Ϟδϡʔϧࣗମ͕ΧϥϜΛܗ੒͢Δ͜ͱ͸ආ͚Δ
68. –
69. Ӵ
70. Ӵ
71. ٌآُ٦ٕ荈⡤ָ
    ؕٓي׾䕎䧭ׅ׷ֿהכ鼘ֽ׷
72. ٌآُ٦ٕ荈⡤ָ
    ؕٓي׾䕎䧭ׅ׷ֿהכ鼘ֽ׷
73. 植朐⼱歊ָكأزفؙٓذ؍أה罋ִגְ׷鏣鎘 ➤ Ϟδϡʔϧࣗମ͕ΧϥϜΛܗ੒͢Δ͜ͱ͸ආ͚Δ ➤ ΧϥϜΛܗ੒͢Δ৔߹͸ɺͦͷͨΊͷϥούʔϞδϡʔϧΛ৽ͨʹ࡞Δ ➤ CSSϑϨʔϜϫʔΫͷάϦουγεςϜ͕͋Ε͹ɺͦͪΒΛར༻͢Δ͜ͱ΋Մೳɻ ͱͯ΋૬ੑ͕͍͍ ➤ Ϟδϡʔϧ಺ͷΧϥϜܗ੒͸Մೳɻ(↓ͷ͜ͱ)
74. ٠剢䖓
    ؙչװ׏ם׶ؕٓيח׃ג׮׵׏גְְדַׅ??պ
75. ٌآُ٦ٕ荈⡤ָ
    ؕٓي׾䕎䧭ׅ׷ֿהכ鼘ֽ׷
76. ٌآُ٦ٕ荈⡤ָ
    ؕٓي׾䕎䧭ׅ׷ֿהכ鼘ֽ׷
77. ׉ך➭孡׾אֽ׷ֿה ➤ Ϟδϡʔϧͷཻ౓Λ͖ͪΜͱҙࣝ͢Δ͜ͱ ➤ લड़ͷ௨Γɺࢲͷݱঢ়ͷ࠷దղ͸ʮΧϥϜΛܗ੒͠ͳ͍ʯͰ͢ ➤ ϑϨʔϜϫʔΫ͚ͩͰͳ͘ɺϒϩοΫϨΠΞ΢τܕͷCMSͱ΋૬ੑ͕Α͍ ➤ ͨͩ͠ॎํ޲ʹ௕͔ͬͨΓɺϖʔδʹΑͬͯཁૉ͕૿ݮ͢ΔϞδϡʔϧ͸ࠓ΋ ೰·͍͠ ➤ ໊લͱ੹೚ൣғΛ͖ͪΜͱ໌֬ʹ͢Δ͜ͱ ໊લͷ੹೚ൣғ֎ͷػೳΛ͍࣋ͬͯΔϞδϡʔϧΛΑ͘ݟ͔͚·͢
80. ׉׿ז害欽涸הַծإوٝذ؍حؙהַծ
    せ⵸ך顑⟣הַծⰋגחְֶגְ׍ְ׍罋ִ׷הַ
    ׭׏׍ׯ㣐㢌ז׿דָׅ˘
81. ע׏׍ׯֽ䢪׸׃ַזְדׅ˘
    䖓כㄏせד״ֻ⢪ֲ⽃铂׾ⰕꟚ׃גְ׷倯׮
    ְ׵׏׃ׯ׷ךדծ׉׸׾⿫罋חׅ׷ך׮䩛דׅկ
    չ$44
    ㄏせպדֶؚؚ׶ֻ׌ְׁկ
82. ׉׸הչ窫㼎ֿךل٦آ׃ַ⢪׻זְպהְֲ׮ךכծ 㼔欽ך䱸걧鳤׾➰ֽג黝䔲חㄏせ׃ג׮0,דׅկ
    ♧㔐׃ַ⢪׻זְ׮ךח䝢תזְדֻ׌ְׁկ
    13&$44דכِص٦ؙؚٕ٦فה׃ג欽䠐׃גְתׅ
83. ςϯϓϨʔτΤϯδϯ
84. ذٝفٖ٦زؒٝآٝחאְג ➤ ͦ΋ͦ΋ςϯϓϨʔτΤϯδϯͱ͸ ➤ EJSɺ·ͨ͸Nunjucksਪ঑ ➤ HTMLίʔυΛڞ௨Խ͢Δ ➤ CMSͷߏ଄ʹ߹ΘͤΔ
85. ׉׮׉׮ذٝفٖ٦زؒٝآٝהכ ➤ ذٝفٖ٦زהر٦ة׾さ䧭׃ծ䧭卓سًُؗٝز׾⳿ ⸂ׅ׷اؿزؐؑ،ת׋כاؿزؐؑ،؝ٝه٦طٝ زկ
    ➤ )5.-ך⚺זذٝفٖ٦زؒٝآٝ
    ➤ &+4
    ➤ /VOKVDLT
    ➤ )BOEMFCBST
    ➤ 1VH +BEF
    ➤ ➭ח׮׋ֻׁ׿֮׶תָׅծًٝذׁ׸גְזְ׮ך ׮㢳ְדׅ ⿫罋IUUQTKBXJLJQFEJBPSHXJLJذٝفٖ٦زؒٝآٝ
86. &+4ծת׋כ/VOKVDLT䱿㤺 ➤ EJS ➤ 
    ךرٔىةⰻח+BWB4DSJQU׾鎸鶢ׅ׷
    ➤ ⢪欽ِ٦ؠ٦٥䞔㜠ָ㢳ְ
87. &+4ծת׋כ/VOKVDLT䱿㤺 ➤ Nunjucks ➤ +JOKBك٦أ
    ➤ \
    
    ^ךرٔىةⰻח杝荈圓俑׾鎸鶢ׅ׷
    ➤ 5XJH׮+JOKBהַז׶鵚ְ圓俑ך׋׭ծ%SVQBMװ $SBGU
    $.4ծ&$
    $6#&ח׉ךתתٗآحؙ׾䭯׏גְ ֽ׷կהג׮湱䚍ְְָկ
    ➤ .VTUBDIF鎸岀荈⡤圫ղז鎉铂ד⢪欽ׁ׸׷ךדծ 鶳׏׋׵ֿ׸ח׃גֶֻה䖓ղ䎊ׇחז׸׷ַ׮
    ➤ .P[JMMB醡
88. )5.-؝٦س׾Ⱏ鸐⻉ׅ׷ ➤ Sassͷmixinͱಉ༷ɺHTMLͷίʔυΛڞ௨؅ཧ͢Δ ➤ ޙ͔Βͷ௚͠ʹ͔ͳΓڧ͘ͳΔ ➤ ͋·ΓҰൠతͰ͸͋Γ·ͤΜ͕ɺϚʔΫΞοϓݴޠͷHTMLʹର͠ɺ ςϯϓϨʔτΤϯδϯ/CMS͸ϓϩάϥϜͰ͢ ➤ Ͱ͋Ε͹ɺDRYͷݪଇʹ͋Δఔ౓ै͏΂͖ͱߟ͍͑ͯ·͢ ➤ SassΑΓ͸ΑͬΆͲDRY͠΍͍͢Ͱ͢ ➤ ϙΠϯτ͸ߏ଄Λڞ௨Խ͠ɺίϯςϯπ͸มߋͰ͖ΔΑ͏ʹ͢Δ͜ͱ
89. )5.-ד׮؝٦س׾Ⱏ鸐⻉ׅ׷
90. )5.-ד׮؝٦س׾Ⱏ鸐⻉ׅ׷ " # $
91. )5.-ד׮؝٦س׾Ⱏ鸐⻉ׅ׷ ΍NBDSP㹀纏 Ύㄎן⳿׃ Ώ⳿⸂穠卓
92. )5.-ד׮؝٦س׾Ⱏ鸐⻉ׅ׷ ΍NBDSP㹀纏 Ύㄎן⳿׃ Ώ⳿⸂穠卓 何㊣׃גְֹתׅ
93. GPSٕ٦ف٥ꂁ⴨⻉ 何㊣⵸
94. GPSٕ٦ف٥ꂁ⴨⻉ 何㊣䖓
95. GPSٕ٦ف٥ꂁ⴨⻉ 何㊣䖓 for ϧʔϓԽ ഑ྻԽ
96. ꂁ⴨ך㢩鿇⻉ 何㊣䖓
97. ꂁ⴨ך㢩鿇⻉ 何㊣䖓 ഑ྻͷ ֎෦Խ
98. 䒷侧חאְג
99. 䒷侧חאְג ϖʔδʹΑͬ ͯ͸ΫϥεΛ ௥Ճ͍ͨ͠
100. 䒷侧חאְג 何㊣⵸
101. 䒷侧חאְג 何㊣⵸
102. 䒷侧חאְג 何㊣⵸ × ×
103. 䒷侧חאְג " # $
104. 䒷侧חאְג ➤ ҆қʹҾ਺Λ૿΍͍ͯ͘͠ͷ͸޷·͘͠ͳ͍ ➤ ςϯϓϨʔτΤϯδϯʹΑͬͯ͸ɺ౉͢Ҿ਺ͱड͚ΔҾ਺͕Ұக͍ͯ͠ͳ͍ͱίϯ ύΠϧͰ͖ͳ͍ ➤ ͦ͏͢ΔͱmacroͷҾ਺Λ૿΍͢౓ʹɺશϖʔδͷmacroݺͼग़͠Λमਖ਼͠ͳ͚ Ε͹ͳΒͳ͍ ➤ ͍͍ͪͪॱ൪Λ֮͑Δͷ͕໘౗ ➤ ͍͍ͪͪҾ਺એݴΛॻ͖׵͑Δͷ΋໘౗ ↓ ➤ Ҿ਺͸ΦϒδΣΫτ(࿈૝഑ྻ)ʹͯ͠౉͢
105. 䒷侧חאְג 何㊣⵸
106. 䒷侧חאְג 何㊣䖓
107. 䒷侧חאְג 何㊣䖓
108. 䒷侧חאְג 何㊣䖓 ౤͛Δ Ҿ਺1ͭ ड͚Δ Ҿ਺1ͭ
109. ׉ֿתדׅ׷ך㣐㢌կ
     ׉ֿתדׅ׷䗳銲֮׷ךַ
110. הծ䙼׻׸׷ַ׮׃׸תׇ׿ָծ
     ֿ׸כل٦آ侧ָ㟓ִ׸ל㟓ִ׷קו
     㪬⸂׾㟓׃גְֹתׅկ
111. ⢽ִלPMٔأزח㢌刿׃׋ְ " # $
112. ⢽ִלPMٔأزח㢌刿׃׋ְ " # $ ͜͜Λ ม͑Δ͚ͩ
113. ⢽ִלPMٔأزח㢌刿׃׋ְ " # $ ͜͜Λ ม͑Δ͚ͩ
114. ؝ٝذٝخה圓鸡׾ⴓꨄדֹגְ׸לծ
     ➬圫㢌刿ָ֮׏ג׮剑⡚ꣲך⸤⸂ד⥜姻דֹתׅկ
     ִ֮ג䠬鋙涸ז鎉ְ倯׾ׅ׸לծ䩛符׾䳢׸גְזְ؝٦سָ
     ׉ֿ׵ׄױֲח侔׵ל׏גְ׷ךכ⼱歊ה׃גכꬊ䌢ח衅׍滠ַזְ
115. ת׋ծ䘔欽ה׃גֿ׸׾$.4ד׮ⱄ植ׅ׷ה
     ɾΫϥΠΞϯτʹHTMLΛ͍ͬͯ͡ཉ͘͠ͳ͍ ɾΫϥΠΞϯτ͕HTMLΛා͕Δ הְ׏׋؛٦أח׮崞欽דֹתׅկ
117. ΫϥΠΞϯτ͕ ໨ʹ͢Δͷ͸ γϯϓϧͳܗࣜ
118. )5.-؝٦س׾Ⱏ鸐⻉ׅ׷ֿהךꨇ׃ׁ ➤ ͱ͸͍ͬͯ΋ɺϕʔείʔςΟϯάͱCMSͷνʔϜ/ձ͕ࣾผͩͱݱ࣮తʹ͸ݫ͍͠ ➤ ߏ଄Λͦͷ··CMSʹࡌͤΒΕͳ͍ͱҖྗ͸൒ݮ͢Δ(Ͳ͜Ζ͔ٯʹअຐ) ➤ ҰԠɺϝδϟʔͳCMSͰ͸΄ͱΜͲՄೳͰ͕͢…… ➤ ౰વॲཧ͕૸ΔͷͰɺಈతੜ੒CMS͸macro͕͋·Γʹଟ͍ͱύϑΥʔϚϯεʹ ΋Өڹ͢Δ͔΋ ➤ ͦͷลΓ͸ιʔείʔυͷ؅ཧੑΛॏࢹ͢Δ͔ɺͦͷଞͷ΋ͷΛͱΔ͔ɺόϥϯ εΛݟͳ͕Β ➤ தʙେن໛Ҋ݅ͰͷҖྗ͸ઈେ
119. ذٝفٖ٦زؒٝآٝחאְג ➤ ͦ΋ͦ΋ςϯϓϨʔτΤϯδϯͱ͸ ➤ EJSɺ·ͨ͸Nunjucksਪ঑ ➤ HTMLίʔυΛڞ௨Խ͢Δ ➤ CMSͷߏ଄ʹ߹ΘͤΔ
120. $.4ח鯹ׇ׷ꥷך圓鸡׾䓼ֻ䠐陎ׅ׷ ➤ ͔ͤͬ͘ϩʔΧϧ։ൃʹγεςϜΛೖΕ͍ͯΔͷͰ ➤ ֿך媮ꥡַ׵$.4׾䠐陎׃ג圓眠ׅ׷הծذٝفٖ٦ ز⻉ׅ׷ꥷך䊨侧ַָז׶幾׶תׅ
     ➤ 暴ח/VOKVDLT–5XJHך㜥さכծٗ٦ٕؕꟚ涪ך㢌侧 せ瘝׮$.4ך✮秈㢌侧せחさ׻ׇ׷ה嚂
     ➤ جຊతʹ͸ҎԼΛ߹ΘͤΔܗ ➤ قحت٦٥ؿحة٦瘝ך؎ؙٕٝ٦س
     ➤ 㢌侧إحزװNBDSPإحز瘝ך؎ٝه٦ز /VOKVDLTה✼䳔䚍ך֮׷➂麦
121. 5JQT
     ؎ؙٕٝ٦سػأך剅ֹ倯חאְג
122. 5JQT
     ؎ؙٕٝ٦سػأך剅ֹ倯חאְג × ◦
123. 5JQT
     ؎ؙٕٝ٦سػأך剅ֹ倯חאְג × ◦
124. 5JQT
     ؎ؙٕٝ٦سػأך剅ֹ倯חאְג ➤ σΟϨΫτϦߏ଄ʹΑͬͯʮมԽ͢Δ෦෼ʯΛม਺Խ͢Δ͜ͱʹΑΓɺ includeจ͸σΟϨΫτϦʹؔΘΒͣଞͷϖʔδͰ΋ίϐϖͯ͠࢖͍·Θͤ·͢
125. 5JQT
     ؎ؙٕٝ٦سػأך剅ֹ倯חאְג ➤ σΟϨΫτϦߏ଄ʹΑͬͯʮมԽ͢Δ෦෼ʯΛม਺Խ͢Δ͜ͱʹΑΓɺ includeจ͸σΟϨΫτϦʹؔΘΒͣଞͷϖʔδͰ΋ίϐϖͯ͠࢖͍·Θͤ·͢ We’re same
126. 5JQT
     1VHך⢪ְוֿ׹ ➤ EJS/Nunjucks͸CMSςϯϓϨʔτԽ͠΍͍͢ ➤ ରͯ͠PugͷΠϯσϯτه๏͸ଟ͘ͷCMSςϯϓϨʔτͱޓ ׵ੑ͕ແ͍ͨΊɺϕʔείʔσΟϯάʹ͸޲͍͍ͯ·ͤΜ ➤ ת׋IUNM׾FKTOKL⻉ׅ׷ֿהכ知⽃דָׅծQVHחׅ׷ ךכ㣐㢌דׅ
     ➤ ♧䘔؝ٝغ٦ة٦כ֮׶תָׅ˘
     ➤ IUUQIUNMKBEFPSH
     ➤ 䒦爡דכ״ֻծًٕوؖד1VH׾⢪׏׋׶׃תׅ
     ➤ 周⟝ה׃גأ؛٦ׇٕ׆ل٦آ侧׮ꣲ׵׸׷׋׭ծ؎ٝ رٝز鎸岀ך䓲挿ָ䕦갟׃ב׵ְ
127. ͦͷଞޮ཰ԽͷͨΊͷ5JQT
128. Ⰵ⸂佄䴂ך⢪欽 ➤ Emmet͸΋͸΍౰વ ➤ Ϋϥε໊ɾม਺໊͸खͰଧͨͳ͍ ➤ Ͳ͏ͤλΠϙ͢Δ ➤ ΤσΟλͷεχϖοτͷ࢖༻ ➤ Clibor/Clipyͷ࢖༻ ➤ PhraseExpress/Dashͷ࢖༻
129. וֲװ׏ג⹈䓼׃׋
130. ؔأأًך劤 ؝٦ر؍ؚٝװծ
     ׉׸חתא׻׷ؿٗ٦ך⹈䓼ח
     IUUQBN[OUPUT$Z$4 $44鏣鎘ז׵؝ٖ
     IUUQBN[OUPTQ62[O 剑鵚ך✲䞔׾⥞澛ׅ׷ז׵؝ٖ
     IUUQBN[OUPV1)KK ؚؚ׷ך׮ְְֽוծ劤כ䞔㜠ָתהת׏ג׷ַ׵傍ְ״气׸זְ״
131. $PEF(SJE ➤ גࣜձࣾϐΫηϧάϦου͞ΜൃߦͷϝσΟΞ ➤ ؕحثٔ㛇燉׾㔿׭׵׸׷鎸✲ַ׵ծ剑倜䪮遭תד
     ➤ Ⰻ鿇铣׬ךָ㣐㢌זקוח⯍㹋׃גְתׅ
     ➤ ⰼ剢
     ➤ ה׶ִ֮׆ֿ׸׾铣׿דֶֽל꟦麩ְזְ
132. ؕآُ،ٕײִחծ殢傍ֻ剑倜䞔㜠׾ٍؗحثדֹ׷
     衼せ➂׾醱侧ؿؓٗ٦׃גְ׷הծ鑧겗ךزؾحؙ׮荈׆ה䲕׭תׅ
     את׶⼱歊ָ5XJUUFSל׏ַ׶װ׏גְ׷ךכծ➬✲ך׋׭׌׏׋ך׌կ
133. ֮הכ㹋騧֮׷ך׫ ➤ ಛʹઃܭ΍໋໊ͳΜ͔͸ɺ࣮ࡍʹ໰୊ʹ௚໘ͯ͠ॳΊͯॏཁੑΛཧղ͠·͢ ➤ ͋ͱ͸࣮ફ͋ΔͷΈͰ͢ ➤ ͪͳΈʹ൒ా͸ҎԼͷΑ͏ʹ࣮ͯ͠ફΛੵΈ·ͨ͠ ֿ׸װ׏הְגխ䖓כ״׹׃ֻ٦X ?Ī? ⯋♳぀4孑
134. ·ͱΊ
135. 罋ִ׷ֿהָ׋ֻׁ׿֮׏ג㣐㢌דׅկ
136. ؙٓأךⴓꨄ
     せ⵸ָ害欽٥إوٝذ؍حؙ
     ٌآُ٦ָٕ㼭ְׁ٥㣐ְֹ
     䖓䊨玎׾罋ִ׋鏣鎘
137. ְֹז׶Ⰻגװ׹ֲהׅ׷ה㣐㢌דׅ׃ծ
     周⟝ח״׏ג׉ֿתד䗳銲ָזְ㜥さ׮֮׶תׅկ
138. 穠㽷㣐✲זךכչغٓٝأպהծ
     չ׉ךװ׶倯ָ➙ך周⟝חסׁ׻׃ְַպ
     ׾罋ִ׵׸׷ֿהדׅկ
139. ׋׌׃ծ䗳銲ח鶕׵׸גְֹז׶馄毙穠さך
     㣐鋉垷鏣鎘׾׃״ֲה׃ג׮ծּׅחכדֹתׇ׿կ
140. 㢳㼰ؔ٦غ٦ألحؙד׮ծ傈갦ַ׵ثٍٖٝآ׃ג
     㹋ꥷח䩛׾⹛ַׅה葿ղז׮ךָ鋅ִגֹתׅկ
     㼭鋉垷鏣鎘
     ̔
     㣐鋉垷周⟝խֿ̒׸כ搀椚
     㣐鋉垷鏣鎘
     ̔
     㼭鋉垷周⟝խֿ̒׸כ〳腉
141. ׉ך♳דչסׁ׻׃ְַպ׾ⴻ倖ׅ׷׋׭חծ
     ➙傈ך鑧ֶָ䕵ח甧ג׸ל䎊ְדׅկ