フロントエンドの基礎知識

WWW.SITE2MAX.PRO PowerPoint & KeyNote Templates ϑϩϯτΤϯυͷجૅ஌ࣝ @tan_go238

Go Tanaka PHP, Java, Scala, JavaScript VagrantΑΓDocker͕޷͖ twitter: @tan_go238 ʲӡӦελοϑʳ
ؔ੢JavaΤϯδχΞͷձ, Scalaؔ੢ Summit Freelance Engineer

࣭໰

Yes No "OHVMBS΍3FBDUΛ࢓ࣄͰόϦόϦॻ͍͍ͯΔ ʢ&4΍5ZQF4DSJQUͰόϦόϦॻ͍ͯΔʣ

Yes No (VMQ΍8FCQBDLΛ࢖ͬͯΔ OQNTDSJQUTͰ΋PL

Yes No ͍͍ͩͨK2VFSZ௚ॻ͖ͰNJOJGZͤͣͦͷ··ϦϦʔε

Yes No ຊ൪ͷ+4ͷࢀরઌ͕εςʔδϯάʹͳ͍ͬͯΔ͜ͱ͕ൃ֮

ຊ୊

+4ք۾ͷྲྀΕ͕ૣ͍ͷ͸ੈͷதͷྲྀΕ͕ૣ͍͍ͤʁ

࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ http://bit.ly/2kBCSpV ೥ʹ+BWB4DSJQUΛֶͿͱ͜Μͳײ͡

࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ σʔλͷऔಘʹK2VFSZΛ࢖ͬͯσʔλΛϖʔδ্ʹද͍ࣔͨͨ͠Μ͚ͩͲɻ K2VFSZͳΜͯ΋͏୭΋࢖͍ͬͯͳ͍ɻ3FBDUΛࢼͨ͠΄͏͕͍͍ɻ ͋͋ɺͳΔ΄Ͳɻ3FBDUͬͯԿʁ Ϗϡʔͷมߋͷ੍ޚ͕؆୯ʹͳΔ௒ΫʔϧͳϥΠϒϥϦͩɻ αʔό͔Βऔಘͨ͠σʔλΛදࣔ͢ΔͨΊʹ3FBDUΛ࢖͏͜ͱ͸Ͱ͖Δʁ ͋͋ɺͰ΋·ͣ͸3FBDUͱ3FBDU%0.ͷϥΠϒϥϦ͕ඞཁͩɻ 3FBDU͸͖ͬ͞ग़͖͚ͯͨͲɺ3FBDU%0.ͬͯʁ %0.Λૢ࡞͢ΔͨΊͷ΋ͷͩɻ+49Ͱهड़͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔɻ +49ʁ+49ͬͯʁ
+49͸+BWB4DSJQUͷߏจ֦ுͰ)5.-Λ΋ͬͱྑͨ͘͠΋ͷͱߟ͑Ε͹͍͍ɻ

࠷ۙͷ+4ք۾͸ͲΜͳײ͡ʁ ͡Ό͋)5.-Ͱ͍͍͡ΌΜʁ ೥ʹ)5.-Λ௚઀ॻ͍ͯΔ΍ͭͳΜ͍ͯͳ͍ɻ ͱʹ͔͘͜ͷͭͷϥΠϒϥϦΛಋೖ͢Ε͹3FBDU͕࢖͑Δɺͱ ͪΐͬͱҧ͏ͳɻ#BCFMΛ௥Ճ͢Δඞཁ͕͋Δɻ ·ͨผͷϥΠϒϥϦʁ#BCFMͬͯԿʁ #BCFM͸τϥϯεύΠϥͩɻಛఆͷόʔδϣϯͷ+4ʹίϯύΠϧͰ͖Δɻ ܅͕·ͩ&4Λ࢖ͬͯΔͷͳΒ3FBDUΛ࢖͏ͷʹ#BCFMΛ࢖͏ඞཁ͕͋Δͬͯ͜ͱͩɻ ΄͔ͷΫʔϧΩοζୡ͸&4 Λ࢖ͬͯΔɻ
&4ʁ&4 !

ϑϩϯτΤϯυͷ͜ͱΛԿͱͳ͘Θ͔ͬͯ΋Β͏ େମͷಓے΍୯ޠ͕෼͔͍ͬͯΔͱͦͷ͋ͱͷֶश͕ཧղ͠΍͘͢ͳΓ·͢ ͳͷͰࡉ͔͍ͱ͜Ζ͸࿩͞ͳ͍Ͱͬ͘͟Γઆ໌͠·͢ ෼͔Βͳ͍୯ޠΛϝϞͨ͠Γͭͭ͠ඞཁʹͳͬͨΒؼ͔ͬͯΒௐ΂͍ͯͩ͘͞ ͜ͷൃදͷ໨త

ͳͥมԽ͕ૣ͍ͷ͔ ྺ࢙ΛݟΔͱԿͱͳ͘Θ͔ͬͯ͘Δ 1. *&࣌୅ʢ೥ʙ೥ʣ 2. )5.-ຄڵظ ೥ࠒʙʣ 3. +4൙ཞظ ೥ࠒʙʣ

*&࣌୅ʢ೥ʙ೥ʣ ɾϒϥ΢βಠࣗ࢓༷ ɾ$44ϋοΫ ɾK2VFSZ͕ొ৔͢Δ·Ͱʢొ৔ޙ΋ʣ*&͸ผѻ͍ ɾΨϥέʔରԠʢ%P$P.PBV4PGUCBOLʣ ɾ1$αΠτΛ࡞ΓΨϥέʔαΠτ΋ͦΕʹ߹Θ੍ͤͯ࡞

)5.-ຄڵظ ೥ࠒʙʣ ɾ8)"58(ͱ8$ ɹɾ8$ͷ9)5.-ͷํ޲ੑ΁ͷٙ໰ ɹɾ8FC"QQMJDBUJPOTˠ)5.- ɹɾϒϥ΢β্ͰΞϓϦΛ࡞Δ౔୆͕Ͱ͖ͨ ɹɹɾ$BOWBT 8FC4UPSBHF WJEFP ɹɹɾϨεϙϯγϒσβΠϯʢ$44ʣ
8$ʜ)5.-ͷ࢓༷ܾΊͯΔஂମ 8)"58(ʜ8FC)ZQFSUFYU"QQMJDBUJPO5FDIOPMPHZ8PSLJOH(SPVQ ɹɹɹɹɹɹ"QQMF .P[JMMB 0QFSBʹΑͬͯઃཱ͞Εͨ 8JLJQFEJB

+4൙ཞظ ೥ࠒʙʣ ɾJ1IPOFͷొ৔ ɾ'MBTI͕ͳ͘ͳͬͨ &4׬શʹ಴࠳ ɾϞόΠϧϑΝʔετ ɾΞϓϦ։ൃ͸J04"OESPJE ɾλϒϨοτΞϓϦΛ8FCϒϥ΢βͰಈ͔͢ ɾ+4Ͱ41"ͷधཁ͕ٸ଎తʹ૿͑ͨ
41"ʜγϯάϧϖʔδΞϓϦέʔγϣϯ &4ʜ&$."4DSJQUɻ&$."4DSJQU͸+BWB4DSJQUͷඪ४Ͱ͋Γ &DNB*OUFSOBUJPOBMͷ΋ͱͰඪ४Խखଓ͖ͳͲ͕ߦΘΕ͍ͯΔ &4ˠ&4ʢ಴࠳ʣˠ&4ˠ&4&4ͷ࢓༷ܾఆʹ೥͔͔Δ

+4൙ཞظ ೥ࠒʙʣ ɾ/PEFKTͷొ৔ ೥ ɾ࠷ॳ͸଎౓໘͕஫໨͞Ε͍ͯͨ ɹɾϊϯϒϩοΩϯά*0 ɹɾΠϕϯτϧʔϓ ɾϒϥ΢βͳ͠Ͱ+4Λ࣮ߦͰ͖ΔΑ͏ʹͳΔ ɾ͔͜͜Β+4։ൃ؀ڥ͕ٸ଎ʹ੔උ͞Ε࢝ΊΔ

ͦΕ·Ͱͷ+4 ೥&$."ୈ൛ʢ&4ʣ·Ͱ͸ඪ४Խ͕͏·͍͍͕ͬͯͨ͘ &4Λਪਐ͢Δ"EPCFɺ.P[JMMBͱ.4ɺ:BIPPͰҙݟ͕෼͔ΕΔɻ ࠷ऴతʹ͸'MBTIΛ࡞Δ'MFYͱ͍͏ݴޠΛ&4Ͱ࡞ͬͯͨ"EPCF͕ J1IPOFͰҰؾʹࢢ৔Λͱͬͨ"QQMFͷεςΟʔϒɾδϣϒζʹΑΓ 'MBTI͕͓๢͘ͳΓʹͳͬͨͷΛ͏͚ɺ&4΋์غ͞Εͨײ͡ʹݟ͑Δ &4Λ֦ுͨ͠΋ͷ͕&4Ͱ͞Βʹ&4ͰͰ͖ͳ͔ͬͨ&4ͱ ͱͷରཱΛจࣈ௨Γ)BSNPOFZʢௐ࿨ʣͤ͞Α͏ͱͨ͠ͷ͕&4ɻ ˞&4ͷϓϩδΣΫτίʔυ͸)BSNPOFZ

ҲΕग़Δ+4ͷ࢓༷ &$."4DSJQU͸࢓༷Λࡦఆ͍͕ͯͨ͠ɺ๲Ε্͕ͬͯ͠·͍ඪ४Խ͞ ΕΔ·Ͱʹ೥͔͔ͬͯ͠·ͬͨɻͦͷͨΊϦϦʔεΑΓͣͬͱૣ͘४ උ͕Ͱ͖ͨػೳͰ΋ɺ݁ہϦϦʔεΛ଴ͨͳ͍ͱ͍͚ͳ͘ͳͬͯ͠·ͬ ͍ͯͨɻͳͷͰɺ&$."4DSJQU &4 Ͱ͸΋ͬͱසൟʹϦϦʔ εͰ͖ΔΑ͏ʹຖ೥ϦϦʔε͢Δ͜ͱʹͳͬͨɻ

&4Ҏ߱ͷࡦఆϓϩηε &$."4DSJQU͔Β͸ػೳ͝ͱʹ࢓༷ͷϓϩϙʔβϧ ఏҊ Λग़͠ ࡦఆ͍ͯ͘͜͠ͱʹͳͬͨɻͦΕͧΕͷϓϩϙʔβϧʹ͸4UBHFͱݺ͹ ΕΔஈ֊ͷϥϕϧ͕ৼΒΕ͍ͯΔɻ4UBHFͱͳͬͨϓϩϙʔβϧ͸࣍ ظ&$."4DSJQUʹऔΓࠐ·Εɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ͱͳΔɻ 4USBXNBOʜΞΠσΞ 1SPQPTBMʜఏҊɻ໨త΍ղܾํ๏Λࣔ͢
%SBGUʜυϥϑτɻ&$."4DSJQUඪ४ͱಉ͡ߏจ΍ηϚϯςΟΫεͰهड़ $BOEJEBUFʜ࢓༷͸׬੒ͨ͠ঢ়ଶɻ࣮૷΍֎෦ͷϑΟʔυόοΫΛٻΊΔঢ়ଶ 'JOJTIFEʜ&$."4DSJQU΁औΓࠐ·ΕΔ४උ͕׬ྃͨ͜͠ͱΛࣔ͢ঢ়ଶ

&4Ͱ௥Ճ͞Εͨ࢓༷ʢൈਮʣ Ξϩʔؔ਺ޠኮతͳUIJT Ϋϥε ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ δΣωϨʔλGPSʜPGϧʔϓ .BQ4FU ςϯϓϨʔτจࣈྻ σϑΥϧτҾ਺Մม௕Ҿ਺ ΑΓهड़͠΍͍͢௨৴ॲཧʢඇಉظʣ

Ξϩʔؔ਺ Ξϩʔؔ਺ࣜ͸ɺGVODUJPOࣜͱൺ΂ͯΑΓ୹͍ߏจΛ࣋ͪɺUIJT ͷ஋Λޠኮతʹଋറ͠·͢ɻ ͨͩ͠ɺࣗ਎ͷUIJT΍BSHVNFOUT TVQFS OFXUBSHFU͸ଋറ͠·ͤΜ ɻΞϩʔؔ਺͸ɺৗʹಗ໊ؔ ਺Ͱ͢ɻ

Ξϩʔؔ਺ var a = [ "Hydrogen", "Helium", "Lithium", "BerylÂlium" ];
// ES5 var a2 = a.map(function(s){ return s.length }); // ES2015 var a3 = a.map( s => s.length );

Ϋϥε class Animal { constructor(name) { this.name = name; }
speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } var dog = new Dog(‘Wanko'); dog.speak(); // Wanko barks. +BWB4DSJQUʹ͢Ͱʹ͋ΔϓϩτλΠϓϕʔεܧঝͷ౶ҥߏจɻΫϥεߏ จ͸ɺ৽͍͠ΦϒδΣΫτࢦ޲ܧঝϞσϧΛ+BWB4DSJQUʹಋೖ͍ͯ͠ ΔΘ͚Ͱ͸ͳ͍ͷͰ஫ҙ͕ඞཁɻʢ˞Ϋϥε͸ʮಛผͳؔ਺ʯѻ͍ʣ

ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ function test() { const x = 31; if (true)
{ const x = 71; console.log(x); // 71 } console.log(x); // 31 x = 32; // Error } ఆ਺ͷ஋͸ɺ࠶୅ೖʹΑΔมߋ͸Ͱ͖ͣɺ࠶એݴ΋Ͱ͖ͳ͍ɻ MFUʢޙड़ʣͱಉ͘͡ϒϩοΫείʔϓɻ ఆ਺

ఆ਺ʢDPOTUʣͱہॴม਺ʢMFUʣ function test() { let x = 31; if (true)
{ let x = 71; console.log(x); // 71 } console.log(x); // 31 x = 32; console.log(x); // 32 } MFUจ͸ϒϩοΫείʔϓͷہॴม਺ΛએݴͰ͖Δɻ ೚ҙͰ஋Λ୅ೖͯ͠ॳظԽͰ͖Δɻ ہॴม਺

δΣωϨʔλGPSʜPGϧʔϓ GPSJOϧʔϓ͸ɺΦϒδΣΫτͷ͢΂ͯͷFOVNFSBCMFͳϓϩύςΟ Λ൓෮͢ΔɻGPSPGߏจ͸ɺίϨΫγϣϯʹಛ༗ͳ΋ͷͰ <4ZNCPMJUFSBUPS>ϓϩύςΟΛ࣋ͭ೚ҙͷίϨΫγϣϯͷཁૉશମΛ ൓෮͢ΔɻʢGVODUJPO એݴ͸ɺδΣωϨʔλʔؔ਺Λఆٛ͢Δʣ function* fibonacci() { let
[prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); if (n >= 1000) { break; } }

.BQ4FU var map = new Map([ ['one', '111'] ]); map.set('two',
'aaa'); map.set('two', 'bbb'); console.log(map.get('one')); // 111 console.log(map.get('two')); // bbb console.log(map.size); // 2 console.log(map.has('one')); // true var set = new Set([1, 'one', function (){}]); set.add(2); set.add(1); // Կ΋͓͜Βͳ͍ console.log(set.has('one')); // true console.log(set.size); // 4 set.delete(1); console.log(set.size); // 3

ςϯϓϨʔτจࣈྻ var name = 'John'; var country = 'Japan'; console.log(`Hello!
My name is ${name}. I live in ${country}.`); // Hello! My name is John. I live in Japan. var today = new Date(); console.log(`Today is ${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()}`); // Today is 2017/2/18

σϑΥϧτҾ਺Մม௕Ҿ਺ function multiply(a, b = 1) { return a*b; }
multiply(5); // 5 function f(x, ...y) { // y is an Array return x * y.length; } f(3, "hello", true) == 6

+4ͷඇಉظॲཧ͸ඇಉظॲཧޙʹ·ͨඇಉظॲཧΛߦͬͨΓ͢Δͱɺωετ͕ ਂ͘ͳΔॻ͖ํΛ͠ͳ͚Ε͹͍͚·ͤΜͰͨ͠ɻ 1SPNJTF &4 ͷొ৔ʹΑΓ͜ͷίʔϧόοΫ஍ࠈ͔Βղ์͞Ε·ͨ͠ɻ &4Ͱ͸BTZODBXBJU͕ಋೖ͞Εɺ͔͋ͨ΋ಉظॲཧΛߦ͍ͬͯΔ͔ͷ Α͏ʹ؆ܿʹهड़Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ ΑΓهड़͠΍͍͢௨৴ॲཧ &4

openFile('foo.txt', (event, xhr) => { openFile('bar.txt', (event, xhr) => {
openFile('baz.txt', (event, xhr) => { console.log('done!'); }); }); }); ίʔϧόοΫ஍ࠈ ΑΓهड़͠΍͍͢௨৴ॲཧ &4

Promise var request = require('superagent') function fetch(path) { return new
Promise( (resolve, reject) => { request.get("https://api.github.com" + path) .end((err, res) => { if (err) { reject(err); } else { resolve(JSON.parse(res.text)); } }); }); } fetch("/users/tango238") .then((obj) => { console.log(obj); return fetch("/users/tango238/repos"); }) .then((obj) => console.log(obj)) .catch(function(err) { console.error(err); }); Promise Λฦ͢ ΑΓهड़͠΍͍͢௨৴ॲཧ &4

&4Ͱ௥Ճ͞Εͨ࢓༷ ରԠঢ়گ http://kangax.github.io/compat-table/es6/ #BCFM͕ରԠͯ͠Ε͹·͍͍͊Μ͡Όͳ͍͔ͳΈ͍ͨͳҹ৅

Α͘࢖͏πʔϧ ύοέʔδϚωʔδϟ λεΫϥϯφʔ ϞδϡʔϧγεςϜ

ύοέʔδϚωʔδϟ ϓϩδΣΫτʹඞཁͳϥΠϒϥϦͷ໊લ΍όʔδϣϯ͕هࡌ͞ΕͨϑΝΠϧ͔Βɺ ґଘϥΠϒϥϦΛࣗಈతʹΠϯετʔϧͰ͖Δπʔϧɻ OQN΍ZBSOͰ͸QBDLBHFKTPOʹهड़͢Δɻ QBDLBHFKTPO͸.BWFOͷQPNYNMΈ͍ͨͳ΋ͷɻʢCPXFS͸CPXFSKTPOʣ

OQN /PEFKTͰ࢖͏ύοέʔδϚωʔδϟɻඪ४ͩͱࢥ͑͹͍͍ɻ #PXFS +BWB4DSJQU $44 )5.-ͳͲΛґଘؔ܎ΛؚΊͯ؅ཧͯ͘͠ΕΔɺϑϩϯτΤϯυ༻ ύοέʔδϚωʔδϟɻOQNͱ#SPXTFSJGZ ޙड़ ͕͋Ε͹ඞཁͳ͍ͷͰඍົͳཱͪ Ґஔɻ
࠷ۙݟ͔͚ͳ͍ɻ5XJUUFS੡ɻ ZBSO QBDLBHFKTPO͕ͦͷ··࢖͑ΔɻZBSOMPDL͕ੜ੒͞ΕΔɻ͜Ε͸OQNͷ TISJOLXSBQʹ૬౰͢ΔػೳͰύοέʔδͷόʔδϣϯ͕ݻఆͰ͖Δɻ ϞδϡʔϧͷΠϯετʔϧ͕଎͍ɻ'BDFCPPL੡ɻ w ύοέʔδϚωʔδϟ

NJOJGZ ѹॖ ΍ෳ਺ͷ+4ϑΝΠϧͷ݁߹ɺ୯ମςετͷ࣮ߦɺ+4-JOUͷνΣοΫɺ $P⒎FF4DSJQU΍5ZQF4DSJQUͷίϯύΠϧʢ+4΁ม׵ʣɺ4BTT΍-&44ͷίϯ ύΠϧʢ$44΁ม׵ʣͳͲ༷ʑͳλεΫΛ؆୯ʹ࣮ߦ͢ΔͨΊͷπʔϧɻ .BLF "OU .BWFO (SBEMFͷΑ͏ͳ΋ͷɻ λεΫϥϯφʔ

(SVOU ࠷ॳʹྲྀߦͬͨλεΫϥϯφʔɻ +40/ܗࣜͰύϥϝʔλʔΛࢦఆ͍ͯ͘͠ͷ͕࢖͍ʹ͍͘ɻ (VMQ ͦͷ࣍ʹྲྀߦͬͨλεΫϥϯφʔɻγϯϓϧʹهड़Ͱ͖Δɻ ฒྻ࣮ߦ͞ΕΔͨΊ଎͍ɻ OQNTDSJQUT QBDLBHFKTPOͷlTDSJQUTzʹεΫϦϓτΛॻ͍͓ͯ͘ͱOQNSVOͰ࣮ߦͰ͖Δɻ XFCQBDL ϞδϡʔϧόϯυϥʔͳͷͰҰൠతʹݴΘΕΔλεΫϥϯφʔͱ͸ҧ͏ɻ
ෳ਺ͷϞδϡʔϧΛ·ͱΊΔͱ͍͏λεΫΛઐ໳ʹ͍ͯ͠Δɻ λεΫϥϯφʔ

CommonJS / Browserify / AMD / RequireJS / webpack $PNNPO+4
$PNNPO+4ͱ͍͏ϓϩδΣΫτɻ+4Ͱ։ൃ͢ΔͨΊͷඪ४తͳ"1*ͷ࢓༷ΛఆΊ Δɻ .PEVMFͱ1SPNJTFʹ͍ͭͯ͸ɺ&4Ͱඪ४ن͕֨ఆΊΒΕ͍ͯΔɻ #SPXTFSJGZ $PNNPO+4ͷϞδϡʔϧ࢓༷ʹԊͬͯॻ͍ͨ+BWB4DSJQUΛϒϥ΢β্Ͱಈ͔ͤΔ Α͏ʹͨ͠ϞδϡʔϧγεςϜɻ Ϟδϡʔϧ

CommonJS / Browserify / AMD / RequireJS / webpack ".%
"TZODISPOPVT.PEVMF%FpOJUJPOͷུɻϞδϡʔϧΛඇಉظͰϩʔυ͢Δ࢓૊Έ ΍ఆٛͱ͍ͬͨ"1*ͷ࢓༷Λࢦ͢ɻ 3FRVJSF+4 ".%Λϒϥ΢β্Ͱಈ͔ͤΔΑ͏ʹͨ͠ϞδϡʔϧγεςϜɻ XFCQBDL ޙൃͷϞδϡʔϧόϯυϥʔɻ$PNNPO+4ɺ".%ɺ&4ͷܗ͕ࣜ࢖͑Δɻ Ϟδϡʔϧ

σϞ Gulp + Browserify + Babel + async/await (ES2017) https://github.com/tango238/js-sample

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

フロントエンドの基礎知識

フロントエンドの基礎知識

More Decks by Go Tanaka

Other Decks in Technology

Featured

Transcript