Looking back on JavaScript

by https://speakerdeck.com/linyows

Slide 1

Slide 1 text

ͳΜͱͳ͘+4ॻ͍ͯΔਓ΁ 5PNPIJTB0EB(.01FQBCP *OD 5FDI.FFUJOH)PTUJOH +BWB4DSJQUͷ;Γ͔͑Γձ

Slide 2

Slide 2 text

ϓϦϯγύϧΤϯδχΞ 5PNPIJTB0EB!MJOZPXT ٕज़෦ٕज़ج൫νʔϜ

Slide 3

Slide 3 text

͓΅͍͑ͯ·͔͢ʁ

Slide 4

Slide 4 text

'BOJDઑͬͯ·ͨ͠ʢ౰࣌ wϦΞϧλΠϜը૾ม׵ʢࠓͱͳͬͯ͸ී௨ w''NQFHϥούʔͰNQɺBBD౳૬ޓม׵KPC wTͷϦιʔεΰϛߴ଎࡟আKPC ౳ʑɺ/PEFKTΛ༻͍ͯΠϕϯτϧʔϓϊϯϒϩοΩ ϯάΛ׆༻͍ͯͨ͠

Slide 5

Slide 5 text

͜Μͳํ͕ର৅Ͱ͢ wK2VFSZΛͱΓ͋͑ͣ࢖ͬͯ·͢Α wQSPUPUZQFͬͯԿɺK2VFSZͷલʹྲྀߦͬͨ΍ͭʁ w&$."4DSJQUʁॳΊͯฉ͖·ͨ͠

Slide 6

Slide 6 text

XFCΞϓϦέʔγϣϯ։ൃͯ͠Δ ͕ɺKT͕ϝΠϯ͡Όͳ͍

Slide 7

Slide 7 text

ͳΜͱͳ͘+4ॻ͍ͯ·͢ʂ

Slide 8

Slide 8 text

+BWB4DSJQUͷ͜Ε·ͰམͪͿΕ w೥୅ॳ಄ϒϥ΢βͱͱ΋ʹ஀ੜ w&$."ઃཱʢ+TDSJQUͱ+BWB4DSJQUޓ׵΁ͷಈ͖ʣ wͱ͜Ζ͕ҙݟ͕·ͱ·Βͳ͍ wͦͷؒʹ"DUJPO4DSJQUͷ'MBTI͕޿·Δ w/BUJWF+4ͳΜͯཁΒΜͷ͡Όͱ͍͏งғؾʜաڈͷ΋ͷ΁

Slide 9

Slide 9 text

+BWB4DSJQUͷ͜Ε·Ͱ࠶ͼ w೥(PPHMF.BQͰ"KBY͕ར༻͞Ε+4͕࠶ͼ஫໨Λ͋ͼ࢝ΊΔ w೥$ISPNFͱͱ΋ʹWNܕͰߴ଎ͳ+4Τϯδϯ7͕ެ։͞ΕΔ w೥7Λ࢖ͬͨαʔόαΠυͷSVOUJNF/PEFKT͕஀ੜ͢Δ w೥ࠒ͔Β#BDLCPOFKTච಄ʹ"OHVMBS+4΍3FBDU΍7VFKTͳͲ ͷ૒ํ޲όΠϯσΟϯάϑϨʔϜϫʔΫ͕ొ৔͍ͯ͘͠ w೥&$."4DSJQUUIFEJUJPO͕ެ։͞ΕΔ

Slide 10

Slide 10 text

૒ํ޲σʔλόΠϯσΟϯάͱ͸ w6*ͱσʔλͷ૒ํ޲Ͱ৘ใʢมԽʣΛڞ༗͢Δ w6*ʢJOQVUʣΛมߋͨ͠Βσʔλʹ൓ө͠ɺσʔλ͕ߋ৽͞ΕͨΒ6* ͕มԽ w۩ମతʹ͸WJFXNPEFM૒ํ޲Ͱ΍ΓͱΓ͢Δ

Slide 11

Slide 11 text

&$."4DSJQUUIFEJUJPO w͍ΘΏΔ&4&4 wݴޠ࢓༷Λ࠶ఆٛ wࠓޙԿ೥͸όάमਖ਼ͱখ͞ͳػೳ௥ՃͰຖ೥ϦϦʔε w͜Εʹ߹Θͤɺαʔόͱϒϥ΢βͷ+4͕౷߹ʹ޲ ͔͍ͬͯΔʁ͸ͣ

Slide 12

Slide 12 text

&4ͬͯ࢖͑Δͷ w&4͕΋͏͙͢ʜ w֤αʔϏεͷޓ׵දIUUQLBOHBYHJUIVCJP DPNQBUUBCMFFT wओཁϒϥ΢βɺ࠷৽/PEFKTͰ΄΅ରԠࡁΈͳͷͰେ ମ࢖͑Δͱݴ͑Δ wେମͳͷͰτϥϯεύΠϧ΍Δͷ͕ແ೉

Slide 13

Slide 13 text

5SBOTQJMF τϥϯεύΠϥ w#BCFM w#VCMF τϥϯεύΠϧ͕ඞཁͳݴޠ w5ZQF4DSJQU w$P⒎FF4DSJQU

Slide 14

Slide 14 text

Ͱɺ&4͸Կ͕͏Ε͍͠ͷʁ

Slide 15

Slide 15 text

&4Ͱ͏Ε͍͜͠ͱ wQSPUPUZQFϕʔεͰઃܭ͠ͳͯ͘ྑ͘ͳΔDMBTTͱ FYUFOET w͖Ε͍ͳTZOUBYʢBSSPXGVODUJPO΍QSPNJTFʜ ʣ w4ZNCPM΍Β.BQͳͲศརػೳ ৄ͘͠͸IUUQQPTUEDDFTDIFBUTIFFU

Slide 16

Slide 16 text

ʘͦ΋ͦ΋ Α͘Θ͔Βͳ͍Ͱ͢ ϓϩτλΠϓϕʔε ʢͪͳΈʹ๻͸޷͖Ͱ͢ʣ

Slide 17

Slide 17 text

Ͱ͢ΑͶ ??

Slide 18

Slide 18 text

ܧঝͷྫ function Employee() { this.name = ""; this.dept = "general"; } function Manager() { Employee.call(this); this.reports = []; } Manager.prototype = Object.create(Employee.prototype); function Worker() { Employee.call(this); this.projects = []; } Worker.prototype = Object.create(Employee.prototype); function Engineer() { Partner.call(this); this.dept = "engineering"; } Engineer.prototype = Object.create(Worker.prototype); var opo = new Engineer(); opo.dept; // => "enginneering"

Slide 19

Slide 19 text

֦ுͷྫ function Point(x, y) { this.x = x; this.y = y; } var p = new Point(3, 4); p.x // => 3 p.y // => 4 Point.prototype.r = function() { return Math.sqrt((this.x * this.x) + (this.y * this.y)); }; p.r();

Slide 20

Slide 20 text

Slide 21

Slide 21 text

ײ૝ wܧঝͱ͍͏ΑΓίϐʔʹ͍ۙ wந৅Խ͞Εͨ΋ͷͱ࣮ଶͷؔ܎͕ͳ͍શ࣮ͯଶ wͳͷͰΑΓૄ݁߹ͳΦϒδΣΫτ

Slide 22

Slide 22 text

·ͱΊ w௕͍ྺ࢙Λܦͯ΍ͬͱҰ؏ੑ͕ग़͖ͯͭͭ͋Δ wͨͩ͠ɺա౉ظͳͷͰ༷ʑͳπʔϧ΍पลϥΠϒϥϦ ͕୔ࢁग़ݱͯ͠͸ফ͍͍͑ͯͬͯΔ wࠓ΋ͳ͓৽͍͠ϓϩϙʔαϧ͕HJUIVCʹ্͕͍ͬͯͯ มԽ͍ͯ͠Δதɺϒϥ΢β͔ΒαʔόαΠυ͸ͨ·ͨ ϞόΠϧ΋Χόʔ͢Δݴޠ͸ແࢹͰ͖ͳ͍ͷͰ͋Δ