Frontrend in Fukuoka http://frontendfrogs.org/frontrend/ で使用したスライドです。本編45分。
1FSGPSNBODF5VOJOH5*14O'SPOUSFOEJO'VLVPLB"ZVNV4BUP!BIPNV!GSPOUSFOE@GGB
View Slide
ࠤ౻า͞ͱ͏ ͋ΏΉ
ϋϯυϧωʔϜBIPNV!
IUUQBIPNVڵຯͬͯͩͬͨ͘͞Βθώ
ຊ
1BHF4QFFEPS:4MPXීஈɺݟͯΔํʁ
͋Δ੍࡞ͱ͓٬͞Μͱ͔͍͍ͬ͜αΠτ
"#͔͍͍ͬ͜αΠτͭ͘ΕͨΘʔ!͓٬͞ΜେຬͩΘʔ੍࡞ऀ
$#ࠓɺग़ઌͳΜͰ͚͢ͲαΠτ։͚ͳ͘ͳ͍Ͱ͔͢ʁ͓٬͔Βి
"#͋Εʔ΅͘ͷ1$Ͱ։͚·͢Αʁ!͍͊ɺ͔͍͍ͬ͜ͳ੍͊࡞ऀ
$#ͦ͏Ͱ͔͢!ͱ͜ΖͰίϯόʔδϣϯ্͕Βͳ͍ΜͰ͚͢ͲͳΜͱ͔ͳΓ·ͤΜʁ͓٬͔Βి
"#͑ʔɺࠔͬͨͳ͊!͡Ό͋ͬͱը૾ͱ͔͔ͬͯͬ͜Α͘͠·͠ΐ͏੍࡞ऀ
$#Θ͔Γ·ͨ͠!ɾɾɾ͓٬͔Βి
ϞόΠϧͰॏͯ͘։͚ͳ͍։͍ͯεΫϩʔϧ͕ॏ͍ɾΧΫΧΫϢʔβʔʹ͞Εͯ͠·͏ίϯόʔδϣϯʹࢸΒͳ͍
ʊਓਓਓਓਓਓਓਓਓʊʼɹಥવͷܖऴྃɹʻʉ:?:?:?:?:?:?:?:ʉ
ͦ͏ͳΒͳ͍ͨΊʹ͓͖͍ͬͯͨ5*14Λհ͠·͢
ύϑΥʔϚϯεͷಈػߟ͑ํͱಋೖ5JQTOωοτϫʔΫίετϨϯμϦϯάεΫϦϓτॲཧΠϯλϥΫγϣϯ·ͱΊ
*OUSPEVDUJPOߟ͑ํͱಋೖ
'SPOUFOE1FSGPSNBODFϑϩϯτΤϯυͱύϑΥʔϚϯεͷؔ
IUUQXXXTUFWFTPVEFSTDPNCMPHUIFQFSGPSNBODFHPMEFOSVMF
4UFWF4PVEFSTʠPGUIFFOEVTFSSFTQPOTFUJNFJTTQFOUPOUIFGSPOUFOEʡ
▻▻▻▻▻&'#BDLFOE%# 8FC"QQ()'SPOUFOE#SPXTFS*)5.-
&'#BDLFOE%# 8FC"QQ()'SPOUFOE#SPXTFS*)5.-MJOLISFGGPPDTTʜTDSJQUTSDCBSKTʜJNHTSDRVYKQHʜ
&'#BDLFOE%# 8FC"QQ()'SPOUFOE#SPXTFS*)5.-◅◅◅◅◅(&5GPPDTT(&5CBSKT(&5RVYKQH◅◅◅◅◅◅◅◅◅◅
&'#BDLFOE%# 8FC"QQ()'SPOUFOE#SPXTFS*)5.-▻▻▻▻▻▻▻▻▻▻▻▻▻▻▻*$44*+4,+1(
&'#BDLFOE%# 8FC"QQ()'SPOUFOE#SPXTFS*)5.-▻▻▻▻▻▻▻▻▻▻▻▻▻▻▻*$44*+4,+1(ϑϩϯτΤϯυͷ
Ћ͏ͻͱͭŋŋŋ
*OUFSBDUJPO69ϢʔβʔͱΠϯλʔϑΣʔεͷର
εΫϩʔϧ͕͍ΧΫΧΫ͢ΔαΠτ␡
ϘλϯΛԡͯ͠Ԡ͕ͳ͍αΠτ␡
ݟӫ͑͢Δ͚ͲΠϥΠϥ͢ΔαΠτ␡
༻ײɾ৺Αٛ͞ͷύϑΥʔϚϯε✓
ϑϩϯτͷͰվળͰ͖Δ͜ͱ͢Δ✓
5*14ΛूΊͨཧ༝
IUUQTEFWFMPQFSTHPPHMFDPNTQFFEEPDTJOTJHIUTSVMFT
IUUQEFWFMPQFSZBIPPDPNQFSGPSNBODFSVMFTIUNM
͙͢ʹ͑ͯཁΛ͓͍͑͢͞
5*14ˠཧ༝ΛΔ
࣌ͱ߹ʹΑͬͯஅͰ͖ΔΑ͏ʹ͢Δ
/FUXPSLJOHOωοτϫʔΫίετ
3FEVDF3FRVFTUT4J[FϦΫΤετͷͱϑΝΠϧαΠζΛݮΒ͢
"CPWFUIFGPMEϑΝʔετϏϡʔΛ͘ݟͤΔ
✓❓⚠ը૾Ϧιʔεඞͣ࠷దԽͯ͠αΠζΛ͑Δը࣭Λอͪͳ͕ΒσʔλαΠζͷѹॖޮΛߴΊͨΓɺ༨ͳใΛআͨ͠Γ͢Δ!!ίετɾߴϦλʔϯͳରࡦͳͷͰ͜Ε͕Εͯͳ͍ͱɺ͔ͳΓϞολΠͳ͍
✓❓⚠ςΩετϦιʔεʹ࠷খԽΛద༻͢Δ͍ΘΏΔ.JOJGZॲཧɹεϖʔεվߦͳͲΛऔΓআ͍ͯɺϑΝΠϧαΠζΛখ͘͢͞Δ!!ߋ৽͢ΔͨͼʹखಈͰΒͳ͍ඞͣπʔϧΛͬͯࣗಈԽ͢Δ
IUUQBMQIBQJYFMTDPNQSFQSPT
IUUQJODJEFOUDPNDPEFLJU
IUUQHSVOUKTDPN
✓❓⚠$444QSJUFTͱ%BUB63*Λ༗ޮʹ͏ը૾Λຕʹ·ͱΊͨΓɺ$44ͷதʹจࣈྻͰຒΊࠐΉ͜ͱͰɺϦΫΤετΛઅͰ͖Δ!!҆,#ҎͰ͓͞·ΔΑ͏ʹͯ͠ͻͱͭͷϑΝΠϧΛେ͖͗͘͢͠ͳ͍Α͏ҙ
%BUB63* $444QSJUFT,,,,,,,,,,,,,, ,,,,,,,, ,, ,*$44,,,,, ,div {width: 100px;height: 50px;border-radius: 3px;…...
⬅όΠφϦσʔλΛจࣈྻͱͯ͠ຒΊࠐΉ*$44background-image: url(“data:image/jpeg;base64,/9j4AAQSkZJRgABAQAAAQABAAD2wBDAAMCAggICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoICAgICQoKCAgMDAoIDAgICQj2wBDAQMEBAYFBgoGBgoNDAwNDQ0NDQwMDQ0MDA0MDQ0MDAwMDQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAzwAARCADIAMgDAREAAhEBAxEB8QAHQAAAgEFAQEAAAAAAAAAAAAAAQIAAwQFBgcICfEAEUQAAIBAgMEBwMJBgUDBQAAAAECAAMRBBIhBQYxQQcIE1FhcZEiMoEjQlJicqGxwfAUM4KissIVNFPR8WOSoyRDc4Ph8QAGwEAAgIDAQAAAAAAAAAAAAAAAAECAwQFBgf/xAAvEQACAgEEAg…
͠.#͋Δͱʜ.#ಡΈࠐ·ΕΔ·ͰελΠϧ͕ద༻͞Εͳ͍%BUB63*ͷը૾දࣔ͞Εͳ͍ʘ ?P?ʗ*$44,,,,, ,div {width: 100px;height: 50px;border-radius: 3px;…...
✓❓⚠ͯ͢ͷը૾Λ3FUJOB͚ʹYͰ༻ҙ͠ͳͯ͘Α͍େ͖͘ݟͤͳ͍͍ͯ͘αϜωΠϧը૾ͦͦYͰेͳ͜ͱ͕ଟ͍!!ςΩετը૾ΩʔϏδϡΞϧ͕͢͞ʹY͡Όͳ͍ͱਏ͍
✓❓⚠&YQJSFTͳͲͷϔομʔͱH[JQѹॖΛඞͣద༻͢Δ&YQJSFTϔομʔͰΩϟογϡΛ׆༻ͯ͠H[JQͷઃఆͰసૹྔΛ͓͑͞Δ!!ඇৗʹॳาత͕ͩɺݟಀͯ͠͠·͏ͱμϝʔδ͕େ͖͍ͷͰඞͣνΣοΫ͍ͨ͠
IUUQEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT
XXXHPPHMFDPNBOBMZUJDT
IUUQXXXXFCQBHFUFTUPSH
3FOEFSJOHOϨϯμϦϯά
"WPJE$PNQMFYJUJFTෳࡶʹ͠ͳ͍
✓❓⚠ϨΠΞτɾ࠶ஔ͕Εͯൃੜ͠ͳ͍Α͏ʹ͢ΔϨεϙϯγϒͳը૾ղ૾͝ͱʹIFJHIU͚ͩͰܾΊΕΨίͬͯͳΒͳ͍!!ྫ͑JNHͷXJEUI IFJHIU͕ͳ͍ͱը૾ಡΈࠐΈ࣌ʹΨΫͬͱͳͬͯ͠·͏
✓❓⚠ߴίετͳ$44৻ॏʹऔΓѻ͏CPYTIBEPXCPSEFSSBEJVTͳͲͷ͍ΘΏΔ$44ඳըίετ͕͘ͳ͍!!Έ߹ΘͤΔͱɺඳըύε͕ෳࡶʹͳΔͷͰಛʹඳըύϑΥʔϚϯε͕ྼԽ͍͢͠
#͜ΕΛͷج४ͱ͢Δ
#
✓❓⚠(16ΞΫηϥϨʔγϣϯ͕ద༻͞ΕΔ$44Λར༻͢ΔUSBOTMBUFEͳͲ(16ΞΫηϥϨʔγϣϯ͕ద༻͞ΕΔ$44Λ͏ͱΒ͔ʹಈ͘!!͓·͡ͳ͍ͱ͍ͯ͗͢͠ΔͱΩπ͍ͬ͠ฦ͕͋͠Δ
IUUQTEFWFMPQFSTHPPHMFDPNFWFOUTJPTFTTJPOT
$PNQPTJUJOH-BZFS PO(16/PSNBM-BZFS FWFSZ$16
(165FYUVSF#ߋ৽͕͋ΕඳըσʔλΛ(16ʹ࠶సૹ#ඳըσʔλΛΩʔϓ͠ͱ͍ͯ(16্Ͱ߹
◅◅◅#͍ൣғΛ࠶ඳը͠ͳ͍͔ΒεϜʔζ#ϨΠϠʔؙ͝ͱΛૢ࡞ͤ͞Δ͚ͩͰαΫαΫҠಈ
4DSJQUJOHOεΫϦϓτॲཧ
5IJOL$PNQVUJOHϒϥβͷؾ࣋ͪʹͳͬͯॻ͘
✓❓⚠K2VFSZͷηϨΫλΛ͖ͪΜͱΩϟογϡ͢ΔK2VFSZʹηϨΫλΛͯ͠ཁૉΛબ͢Δͱ͖୳ࡧ݁ՌΛฦ͢ͷͰɺͦΕΛΩϟογϡ͢Δ!!Ωϟογϡ͠ͳ͍ͱɺຖճηϨΫλΛΒͤͯཁૉΛ୳ࡧ͍ͯ͠Δ͜ͱʹͳͬͯ͠·͏
!$(‘#list’).append(‘Item1’);$(‘#list’).append(‘Item2’);$(‘#list’).append(‘Item3’);$(‘#list’).append(‘Item4’);$(‘#list’).append(‘Item5’);!
var $list = $(‘#list’);$list.append(‘Item1’);$list.append(‘Item2’);$list.append(‘Item3’);$list.append(‘Item4’);$list.append(‘Item5’);!
var $list = $(‘#list’);// ͪΐͬͱۃͰ͕͢…$list.append(‘Item1’ +’Item2’ +‘Item3’ +‘Item4’ +‘Item5’);!
✓❓⚠Πϕϯτ%FMFHBUFΛͬͯ·ͱΊΔࢁ͋Δɾಈతʹ૿͑ΔՄೳੑ͕͋ΔཁૉͷΠϕϯτɺ%FMFHBUF ҕৡΛ͏!ඦηϧ͋ΔΤΫηϧ෩ͳϑϩϯτ࣮Λ૾ʜ
// ͨ͘͞Μͷ TD ɺݸผʹΠϕϯτΛషΔ$(‘table td’).on(‘click’, function() {// do something});!// ͻͱͭͷ table ʹΠϕϯτΛషΔ$(‘table’).on(‘click’, ‘td’, function() {// do something});
// ͨ͘͞Μͷ TD ɺݸผʹΠϕϯτΛషΔ$(‘table td’).on(‘click’, function() {// do something});!!ηϧ1ηϧ2ηϧ3#2
// ͻͱͭͷ TABLE ʹΠϕϯτΛషΔ$(‘table’).on(‘click’, ‘td’, function() {// do something});!!ηϧ1ηϧ2ηϧ3# !2
✓❓⚠TDSPMM SFTJ[FͷΠϕϯτΛؒҾ͍ͯॲཧ͢ΔUISPUUMFɹ࿈ଓݺͼग़͠ΛOϛϦඵͷपظʹؒҾ͍࣮ͯߦ!EFCPVODFɹOϛϦඵҎͷ࿈ଓݺͼग़͠Λແࢹͯ͠ɹݺͼग़͕͓͠͞·ͬͨΒ࣮ߦ
/* Underscore.JS */!// scroll ʹ߹ΘͤͯҐஔΛߋ৽͢ΔԿ͔var throttled = _.throttle(updatePos, 100);$(window).scroll(throttled);!// resize ʹԠͯ͠ϨΠΞτ͢͠Կ͔var lazyLayout = _.debounce(calcLayout,300);$(window).resize(lazyLayout);
UISPUUMFNTEFCPVODFNTNT͝ͱʹൃՐ͢ΔΠϕϯτ
✓❓⚠ҙຯͷബ͍ϕϯνϚʔΫʹΘ͞Εͳ͍ɾؾʹ͠ͳ͍ࠣࡉ͗͢ΔύϑΥʔϚϯεΑΓه๏ͷ౷ҰੑɾՄಡੑ͕༏ઌ͞ΕΔ͖!!͍ɾ͍ͷϕϯνϚʔΩϯάඇৗʹେࣄ͚ͲɺͦͷॲཧΛίʔϧ͢ΔසΛߟ͑Δ
✓❓⚠ϝϞϦϦʔΫͷճආ+4Τϯδϯͷ࠷దԽߟྀ<&>.*/#SPXTFS$PNQVUJOH4USVDUVSF!ৄ͘͠ɺ͜ͷ࣍ͷ࣍ͷηογϣϯͰʂ!Ͱͪΐͬͱ͚ͩʜ
IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTQFSGPSNBODFNZTUFSZ
function updateSprites(dt) {for (var sprite in sprites) {sprite.position.x += 0.5 * dt;// 20 more lines of arithmetic computation.}}
function updateSprites(dt) {for (var sprite in sprites) {updateSprite(sprite, dt);}}!function updateSprite(sprite, dt) {sprite.position.x += 0.5 * dt;// 20 more lines of arithmetic computation.}ϧʔϓͷॲཧΛผؔʹ͢Δ͜ͱͰ࠷దԽ͕ద༻͞ΕΔΑ͏ʹͳͬͨ Β͍͠
*OUFSBDUJPOOΠϯλϥΫγϣϯ
JO.PCJMFओʹϞόΠϧܥͷ
✓❓⚠Ԇϩʔυ࣌ͷղ૾ϓϨʔεϗϧμʔσϑΥϧτͰαΠζٯࢉ,#ͷղ૾εΫϩʔϧԆͰຊདྷͷߴղ૾ʹ͔͑͞͠!!ωοτϫʔΫతʹϦΫΤετͪΖΜ૿͑Δ͚ͲɺମײΛ্͛ΒΕΔͱ͜Ͱ͏͖
✓❓⚠ϩʔσΟϯάදࣔNTͬͯग़ͦ͢ΕҎԼͰ͋ΕɺϩʔσΟϯάද͕ࣔ໌໓ͯ͠͠·͏͚ͩͰٯʹݟӫ͕͑ྑ͘ͳ͍͜͏͍͏εϐφʔܥͷͭ
var timer;!$(document).on(‘ajaxSend’, function(){timer = setTimeout(function() {$(‘#loading’).show();}, 300);});!$(document).on(‘ajaxComplete’, function(){clearTimeout(timer);$(‘#loading').hide();});
✓❓⚠λοϓ࣌ͷঢ়ଶදݱΛపఈతʹ͚ͭΔϒϥβඪ४ͷUBQIJHIMJHIUDPMPSͰΑ͍͠UPVDITUBSU_FOEͰDMBTTΛணͯ͠Α͍!!UBQIJHIMJHIUDPMPSΛSHCB ʹઃఆͨ͠··ແԠͳ6*ʹ͢Δͷ࠷ѱ
// λον։࢝࣌ʹɺis-activeΫϥεΛ༩͢Δ$(document).on('touchstart','a',function() {$(this).addClass('is-active');});!// λονऴྃ࣌ʹɺis-activeΫϥεΛղআ͢Δ$(document).on('touchend', 'a', function() {$(this).removeClass('is-active');});!// ݫີʹɺUIͷछྨʹΑͬͯɺΫϥεணͷͱ͖ʹ// σΟϨΠΛ͔͚ͯνϡʔχϯά͠ͳ͍ͱࣗવʹͳΒͳ͍
✓❓⚠ը໘શମͷτϥϯδγϣϯίεύѱ͍ͷͰආ͚ΔΕͰ͖Δ͕ɺ͍ൣғΛαϙʔτ͢Δʹݕূίετɾෆ۩߹ରԠίετ͕ߴ͍!!K2VFSZ.PCJMFͰ͢ΒͰຯʹͳΓͷσϞߋʹফۃతͳײ͡ʹͳ͍ͬͯΔ
✓❓⚠ϞόΠϧʹ͓͚ΔDMJDLͷNTσΟϨΠΛΔϞόΠϧϒϥβμϒϧλοϓͷఆͷͨΊλοϓ͔ͯ͠ΒDMJDLͷൃੜ͕NTԆ͢Δ!ϥΠϒϥϦΛͬͯվળ͢Δ͜ͱͰ͖Δ୯ͳΔUPVDITUBSU UPVDIFOEͰաහ͗͢Δ
IUUQVQEBUFTIUNMSPDLTDPNNTUBQEFMBZHPOFBXBZ
IUUQXXXTJUFQPJOUDPNXBZTQSFWFOUNTDMJDLEFMBZNPCJMFEFWJDFT
IUUQTEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT
λοϓαΠζ͕খ͍͞ͱ͍͏ܯࠂ
$PODMVTJPO·ͱΊ
ΤϯδχΞϦϯά͇ΠϯλϥΫγϣϯ
ΤϯδχΞϦϯάͷͯ͢ΛΔ͜ͱ͍͠
ΠϯλϥΫγϣϯͷͯ͢Λݕূ͢Δ͜ͱ͍͠
྆ऀͷྑ͍όϥϯεΛ୳ΔϑϩϯτΤϯυ
5IBOLTIUUQBIPNV!BIPNVHJUIVCDPNBIPNV!⌂
1IPUPTCZʜΫϨϤϯIUUQXXXGMJDLSDPNQIPUPTMBGGZL*OUSPEVDUJPOIUUQXXXGMJDLSDPNQIPUPTKJOUFSXBT/FUXPSLJOHIUUQXXXGMJDLSDPNQIPUPTLFXM3FOEFSJOHIUUQXXXGMJDLSDPNQIPUPTKEIBODPDL4DSJQUJOHIUUQXXXGMJDLSDPNQIPUPTOZVIVIVV*OUBSBDUJPOIUUQXXXGMJDLSDPNQIPUPTTUPLFENFEJBQIPUPHSBQIZ$PODMVTJPOIUUQXXXGMJDLSDPNQIPUPTTBBE
ahomu
chimame
rmatsuoka
fadis
cer
fbei_ot
h0r15h0
akkyie
techouse
smt7174
zakky21
ohakutsu
findyinc
moore
lauravandoore
maltzj
jeffersonlam
afnizarnur
zakiyama
thoeni
erikaheidi
aki_iinuma
cherdarchuk
addyosmani
skipperchong