WordCamp Tokyo 2016 の （´°ム°`）の発表スライド
View Slide
σβΠφʔ͕ޮΑ͘ςʔϚ࡞ΛਐΊΔʹʁσβΠϯ͔Β8PSE1SFTTͷςʔϚ࡞ͷϫʔΫϑϩʔΛݟ͢HIROMU HASEGAWA
Question
ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ
8PSE1SFTTͷ࣌ʁ
͜ͷηογϣϯීஈͷϫʔΫϑϩʔΛݟͳ͓࣌ؒ͢ʹ
About me
ϜA৽ׁग़ւಓࡳຈࢢࡏॅϑϦʔϥϯεˠ๏ਓԽɿදऔకϑϩϯτΤϯυΤϯδχΞ݉ςΫχΧϧσΟϨΫλʔ࠷ۙͷझຯɿϋϜՈࡊԂਫΓʢԂͰͳ͍ʣ
ࠓ·ͩίʔσΟϯάத৺ͷۀ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ
! !%FTJHOFS 1SPHSBNNFSϜAͷ͓ࣄϫΠϠʔσβΠϯ͔Β༷ѲΞʔΩςΫνϟͷཧͱεέδϡʔϧௐํͷίϛϡχέʔγϣϯͷڮ͠
""\DTT^"\+4^$4ZTUFN5FNQMBUFT#
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJࡢͷ8PSE$BNQ5PLZPͷ࠙ձͰ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJίʔσΟϯάઌʹΔͷͬͯɺແବ͡Όͳ͍Ͱ͔͢ʁ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJʂʂʂ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJແବͱ͍͏ൃ͕ͳ͔ͬͨʂ
MJOLIUUQTIIBNOFUXPSEQSFTTDPEJOHqPX
""\DTT^"\+4^#% !%FTJHOFS 1SPHSBNNFS$ #4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH
ϫʔΫϑϩʔͷύλʔϯΛߟ͑ͯΈΔ
ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞ᶄ8PSE1SFTTͷઃఆᶄجຊઃఆᶄGVODUJPOTQIQʹίʔυՃᶄϓϥάΠϯಋೖɾઃఆɹᶅςʔϚ࡞ᶆσʔλߘᶅςʔϚ࡞
σβΠϯΑΓޙͷίʔσΟϯάΛͲ͏ਐΊ͍ͯΔ͔
&ςʔϚʹ&੩తʹҰίʔσΟϯά
ᶃςʔϚʹ
○ެࣜςʔϚελʔλʔςʔϚͳͲςϯϓϨʔτΛΒΧελϚΠζͯ͠○͔̍ΒߏஙʢϑϧεΫϥονʣ
(͋Β͔͡Ί͑Δ༷ʑͳػೳʢػೳͱͯ͠͏༧ఆͰ͋Εޮతʣ(σβΠϯ͕ϑϧΦʔμʔͰͳ͚Ε ͙͢ʹར༻ՄೳͳέʔεϝϦοτ
)ߏѲͷॳظίετʢΈػೳͷѲʣ)ϑϧΦʔμʔσβΠϯͷ߹ϕʔεͱͯ͠ར༻͢Δ߹ͷίετσϝϦοτ
○8PSE1SFTTͷλάػೳΛ֮͑ΔΑΓɹςʔϚػೳͷൣғͷ͚ͩͳΒίετɹͦͷΛ͑Δ߹ɾɾɾʁ
○ϫʔΫϑϩʔͱͯ֬͠Ͱ͖ΔͳΒແବΛ࠷খݶʹ͑ΒΕΔ
ݸਓతҰ൪ͷٙ
?ݻఆϖʔδɾߘͷ ΤσΟλ෦ͷϑϩʔʁ
ᶃ8FC্ͷΤσΟλ෦ͰϚʔΫΞοϓᶄอଘᶅ)5.-मਖ਼ɾௐᶆอଘɾɾɾʁ
?ཧը໘Λ௨ͯ͠ʁͦΕͱผʁ
ᶄ੩తʹҰίʔσΟϯά
)࡞ΔਓͷεΩϧɾࣝɾྀʹӨڹɹߟྀΕɺखΓ͕ଟ͘ൃੜͯ͠͠·͏ ɹςʔϚԽ͢Δࡍʹ͏·͘࠶ݱͰ͖Δ͔ʁ))5.-ɾ$44ΛҰ͔Β࡞Βͳ͍ͱ ॻ͘ͷͱมΘΒͳ͍σϝϦοτ
○ϓϥάΠϯར༻ͳͲͷͷʹΑͬͯग़ྗʹ੍ݶ͕͋Δ߹ɹίʔσΟϯάͦͷ··͑ͳ͍Մೳੑ
○ϓϥάΠϯར༻ͳͲͷͷʹΑͬͯग़ྗʹ੍ݶ͕͋Δ߹ɹίʔσΟϯάͦͷ··͑ͳ͍ՄೳੑۀͰϓϩάϥϜدΓͷਓ͜ͷखͷखΓ͕ݏ͍ͳʢ͋͘·Ͱݸਓతͳҙݟʣ
(ϑϧΦʔμʔσβΠϯʹॊೈʹରԠ()5.-ͱ$44ʹूதͰ͖Δ(ςʔϚԽ͢ΔલͰґཔऀʹ ϒϥβ্Ͱ֬ೝͯ͠Β͑Δ(ۀԽ͍͢͠ϝϦοτ
○ίʔσΟϯά໘͚ͩʹϑΥʔΧε͢Δͱ8PSE1SFTTͷߏங͕ࣝແͯ͘ɹ࡞ۀཁһͱͯ͠ࢀըՄೳɹʢϙΠϯτΛ͑Δඞཁ͋Γʣ
ͲͪΒͷϑϩʔળ͠ѱ͠
ϙΠϯτʁ
ϙΠϯτखΓΛ࠷খݶʹ
खΓΛݮΒ͢ϙΠϯτ
(࡞͢Δ)5.-ΛςϯϓϨʔτɾ7JFXʹ͍͢͠Α͏ʹ(γεςϜ୲ͱ࿈ܞΛߟྀͯ͠༻ҙ(όάϛεͷग़དྷΔݶΓͳ͍ ࣭ͷΑ͍ίʔυʹ
ςϯϓϨʔτɾ7JFXʹ͍͢͠Α͏ʹʁ
(ϧʔϓ͕͍͢͠(ڞ௨෦ΛΘ͔Γ͘͢($44PSγεςϜPSӡ༻
~ ʢ´°Ϝ°`ʣ ࡳຈʹ͍ΔΑ 2هࣄը૾ͷԣʹճΓࠐΉจࣈ̍هࣄͷऴΘΓ͕Θ͔ΓͮΒ͍
)ೖͬͯ͘ΔσʔλɾελΠϧʹΑͬͯσβΠϯ่ΕͷݪҼ
~ ʢ´°Ϝ°`ʣ ϞδϡʔϧຖΛҙࣝग़དྷͯΔʁ ~ ը૾ͷԣʹճΓࠐΉจࣈ$.4ͷ߹ΤσΟλʹΑͬͯ՝ʹ
$44PSγεςϜPSӡ༻ʁ
ݟग़͠ͷ০ݟग़͠ͷ০จࣈ͕ଟ͘ͳͬͨ߹ʁݟग़͠ͷ০จࣈ͕ଟ͘ͳͬͨ߹ʁݟग़͠ͷ০จࣈ͕ଟ͘ʜ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJϦϐʔτཁૉͷ)5.-ߏ
($44ͷઃܭ(*%ηϨΫλ͕ΘΕͯͳ͍͔Ͳ͏͔(ग़ྗ͞ΕΔ)5.-ྀ͕͞Ε͍ͯΔ͔(Τϥʔɺใ͕ͳ͍࣌ͷελΠϧ͕༻ҙ͞Ε͍ͯΔ͔Ͳ͏͔
#news .main .heading-lv2 {border: solid #333;border-width: 0 0 1px 10px:padding 10px 5px;font-size: 20px;font-weight: bold;}#home .main h2.entry-title {border: solid #333;border-width: 0 0 1px 10px;padding: 10px 5px;font-size: 20px;font-weight: bold;}+ ++++ +
.heading-lv2 {border: solid #333;border-width: 0 0 1px 10px:padding 10px 5px;font-size: 20px;font-weight: bold;}.entry-title {border: solid #333;border-width: 0 0 1px 10px;padding: 10px 5px;font-size: 20px;font-weight: bold;}
ࣗͷࣄͷґཔൣғ͔Β ϫʔΫϑϩʔΛߟ͑Δ
,੩తϑΝΠϧೲPSνΣοΫ,$.4ͷछྨΘͣʢ8PSE1SFTTҎ֎ʣ
○͍Ζ͍Ζͳܗ͕ࣜ͋ͬͯγεςϜʹೖΕΔલͷϫʔΫϑϩʔΛҰఆʹ○Ҋ݅ʹΑΔߏͷϒϨͷٵऩґཔઌຖʹҧ͏ίʔσΟϯάϨΪϡϨʔγϣϯ
○ӨڹൣғͷϦεΫݮ-ີ݁߹ηϨΫλͰద༻͞Εͳ͘ͳͬͨ-ผՕॴʹಉ͡DMBTT໊͕ʂཁૉ͕ʂ
ۀ͔Βߟ͑ΔޮԽ
.ಘҙͳ෦ʹूத.$.4ͷछྨΘͣʢ8PSE1SFTTҎ֎ʣ
ར༻πʔϧͱϙΠϯτ
project/+-- .editorconfig+-- .gitignore+-- gulpfile.js+-- metalsmith.json+-- package.json+-- html+-- _resource+-- _layouts¦ +-- default.html¦ +-- footer.html¦ +-- header.html+-- index.html+-- common+-- style.scss
MJOLIUUQHVMQKTDPN
MJOLIUUQTXXXCSPXTFSTZODJP
MJOLIUUQXXXNFUBMTNJUIJP
MJOLIUUQTHJUIVCDPNQBVMBSNTUSPOHTXJH
TXJHMBZPVU{{ title }}{% include 'header.html' %}{{ contents | safe }}{% include 'footer.html' %}
---template: default.htmltitle: "λΠτϧ"---ίϯςϯπTXJHJOEFYIUNM
λΠτϧ ~ ίϯςϯπ ~ σϓϩΠޙ
>ίϯςϯπ5IFNFʹ
OQNJOTUBMMOQNTUBSU
͜ͷઌ3&45"1*͕ඞཁʹͳͬͯ
.੩తʹ༻ҙ͓ͯ͘͠HVMQͷϑϩʔɹͦͷ··+4ςϯϓϨʔτͰར༻Մೳ
import React from 'react';class Header extends React.Component {render() {return (ʙ);};}export default Header;ྫ͑3FBDU
੩తΛ༻ҙ͢Δʹͯ͠
ᶃ8PSE1SFTTͷઃఆᶃجຊઃఆᶃGVODUJPOTQIQʹίʔυՃᶃϓϥάΠϯಋೖɾઃఆɹᶄ੩తϖʔδʹίʔσΟϯάᶅίʔσΟϯάσʔλʹ81λά
ຊͷ·ͱΊ
/ίʔσΟϯάઌͰΠΩφϦςʔϚͰɹͲͪΒࣝεΩϧͰޮత͔มΘΔ#ࣗʹ͋ͬͨϑϩʔͲΕ͔Λߟ͑Δ/λεΫϥϯφʔͳͲɺޮԽπʔϧ׆༻Λ#੩తίʔσΟϯάͷϑϩʔͰɹઌʹ8PSE1SFTTͷભҠͳͲ༻ҙ0ϓϩδΣΫτɾϝϯόʔߏʹΑͬͯ՝͔ΘΔͨΊɹϫʔΫϑϩʔݟ͠Λߦ͏͜ͱ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
h2ham
speakerdeck
cromwellryan
jennybc
jcasabona
jacobian
lauravandoore
denniskardys
reverentgeek
productmarketing
geeforr
aki_iinuma
shlominoach