Tweet
Tweet

Slide 1

Slide 1 text

͜Ε͔Βͷ ϝλϓϩάϥϛϯά JavaScriptͷਖ਼ٛΛޠΖ͏ @erukiti ϝλϓϩάϥϚ(AST෩)

Slide 2

Slide 2 text

@erukiti • కΊ੾ΓۦಈͰٕज़ॻΛࣥච • ۭ૝ɾໝ૝υϦϒϯΤϯδχΞ • ϑϩϯτΤϯυ͋·Γ΍ͬͨ͜ͱͳ͍όοΫΤϯυ ͷܦྺ͹͔Γͳແ৬ (࣌ʑϑϦʔͰ࢓ࣄͯ͠Δ) • ࠷ۙ͸ɺASTΛ׆༻ͨ͠property based testingͷ࡞ ੒΄͔ɺͻͨ͢ΒAST৮ͬͯΔ

Slide 3

Slide 3 text

ʮͰ͖ΔΤϯδχΞ͸ ੜ࢈ੑ͕Ұܻɾೋܻҧ͏ʯ

Slide 4

Slide 4 text

ੈք͸अѱʹຬ͍ͪͯΔ

Slide 5

Slide 5 text

ߦ௒͑ؔ਺ OJDFDBUDI ແࢹ͞ΕΔXBSOJOH ॥؀తෳࡶ౓௒͑ *%&͕ແ͍ͱίʔυͷ೺Ѳ͕Ͱ͖ͳ͍ ফͨ͠Βಈ͔ͳ͘ͳΓ·͢ ໊લۭؒԚછ ಉ͡ϩδοΫ͕ෳ਺Օॴʹ ʮ਺ࣈͬΆ͍จࣈྻͳͷͰ਺ࣈʹม׵͓͖ͯ͠·ͨ͠ʯ Ϣχοτςετ͕શ͘ແ͍ ͓·͡ͳ͍ ίϐϖϓϩάϥϛϯά ҉໧ͷܕม׵ Ͳ͜Λॻ͖׵͑Ε͹͍͍ͷ͔Θ͔Βͳ͍ ҰՕॴॻ͖׵͑ͨΒଞʹӨڹͰ·ͬͨ͘ DPOTPMFMPH IPHF ফ͢ͱԿނ͔ಈ͔ͳ͍ ಉ͡ϩδοΫ͕ෳ਺Օॴʹ

Slide 6

Slide 6 text

ϘʔϧυϚʔΧʔ

Slide 7

Slide 7 text

ਓ͕ؒཧղͰ͖Δఔ౓ʹ͸ γϯϓϧʹ͍ͨ͠

Slide 8

Slide 8 text

ରࡦํ๏ • Ϋϥε΍ϝιουͷ੹຿ΛݮΒ͢ (جຊ͸୯Ұ ੹຿ͷݪଇ) • ૄ݁߹ʹ͢Δ • ෼ׂ౷࣏͢Δ • DRYݪଇΛकΔ

Slide 9

Slide 9 text

DRY - Don’t Repeat Yourself • ʮ͋ͳͨͷखͰ܁Γฦͯ͠͸͍͚ͳ͍ʯ • ͭ·Γʮ͋ͳͨͷखʯ͡Όͳ͔ͬͨΒ܁Γฦ ͯ͠΋͍͍ • ܁Γฦ͕͠ಘҙͰɺͱͯ΋ਖ਼֬ͳϠπʹ΍Βͤ Α͏

Slide 10

Slide 10 text

ͦ͜Ͱϝλϓϩάϥϛϯά

Slide 11

Slide 11 text

ϝλϓϩάϥϛϯά • ιʔείʔυͰιʔείʔυΛੜ੒͢Δ • ੜ੒ݩ͕DRYͰ͑͋͞Ε͹͍͍ • ੩తͳϝλϓϩͱಈతͳϝλϓϩ͕͋Δ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Babel • JSքͰҰ൪࢖ΘΕͯΔɺϝλϓϩάϥϛϯά ʹΑΔϓϩμΫτ • ϓϥάΠϯ΍ͦͷू߹ମͰ͋ΔϓϦηοτΛ ࢖ͬͯιʔείʔυΛม׵͢Δ • ϓϥάΠϯ࡞Δͷ͸ɺπʔϧνΣΠϯͷαϙʔ τ͕͋ΔͷͰ͔ͳΓ؆୯

Slide 14

Slide 14 text

BabelπʔϧνΣΠϯ • ࣈ۟ղੳͱ͔໘౗͝ͱ͸શͯҾ͖ड͚ͯ͘Ε Δ • ؔ਺ఆٛɺม਺ఆٛɺೋ߲ԋࢉͳͲɺಛఆͷ ෦෼Λநग़Ͱ͖Δ • ੩తղੳʹΑΔม਺ͷείʔϓղੳɺ͋Δఔ ౓ͷࣗಈ࠷దԽ

Slide 15

Slide 15 text

• 100ߦҎ಺Ͱͬ͘͞ΓDIΛ࡞ΕΔ • 100ߦҎ಺Ͱͬ͘͞Γ࠷దԽϓϥάΠϯΛ࡞Ε Δ • 100ߦҎ಺Ͱͬ͘͞ΓԋࢉࢠΦʔόϥΠυΛ࣮ ݱͰ͖Δ BabelͰͰ͖Δ͜ͱͷྫ

Slide 16

Slide 16 text

https://github.com/erukiti/autodebugger

Slide 17

Slide 17 text

͜Ε͔Βͷϝλϓϩάϥϛϯά • BabelͷΤίγεςϜʹ৐͔ͬΔ • جຊ͸ࣄલbuild • ։ൃ࣌͸਺ߦ଍ͤ͹ಈతॻ͖׵͑΋Մೳ • ίʔσΟϯάλΠϜίϯύΠϧͱ͍͏৽ٕज़

Slide 18

Slide 18 text

ίʔσΟϯάλΠϜίϯύΠϧ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

s2s - source to source • @akameco ͞ΜͷϓϩμΫτ • ϑΝΠϧ͕࡞੒ɾߋ৽͞ΕͨΒࣗಈͰBabelϓϥά ΠϯΛ૸ΒͤΔ • React/ReduxΛ௒ߴ଎ίʔσΟϯά • ίʔσΟϯά్தͰ૸ΔίϯύΠϧ͔ͩΒίʔσΟ ϯάλΠϜίϯύΠϧ

Slide 21

Slide 21 text

s2sͰͰ͖Δ͜ͱ • ReduxͷreducerΛ௥Ճͨ͠Βɺউखʹ combineReducers͞ΕΔ • ϑΝΠϧΛtouchͨ͠ΒςϯϓϨʔτ͕ࣗಈల։ • ؔ਺Λॻ͍ͨΒJsDoc͕ࣗಈੜ੒͞ΕΔ • ؔ਺Λॻ͍ͨΒɺରԠ͢ΔϢχοτςετ͕ࣗಈੜ੒ ͞ΕΔ

Slide 22

Slide 22 text

ΞΠσΞ͍ͬͺ͍ɺເ͍ͬͺ͍ • ܕਪ࿦ͰࣗಈͰܕΛ͚ͭΔ • ܕ৘ใ͔ΒassertΛࣗಈੜ੒ • ָͳॻ͖ํͰܖ໿ϓϩάϥϛϯάΛ࣮ݱ͢Δ • طଘͷ΋ͷΑΓ΋ڧྗͳproperty based testing͕࣮ݱͰ͖ͦ ͏ • ΤϯτϦϙΠϯτΛॻ͍ͨΒࣗಈͰJSON Scheme Λੜ੒͢Δ

Slide 23

Slide 23 text

ASTΛ৮Δ͚ͩ͡Όͳ͍ • ࠷ۙϋϯυϥʔͱ͍͏࢓૊Έ͕ೖͬͯɺBabelϓ ϥάΠϯҎ֎΋૸ΒͤΒΕΔΑ͏ʹͳͬͨ • JavaScript, TypeScriptʹݶΒͣ͋ΒΏΔ΋ͷΛ watchͯ͠JSͷίʔυ΍͋Δ͍͸ଞͷԿ͔ʹม׵ ͢Δ͜ͱ΋Ͱ͖Δ • ྫ͑͹pegjsΛίʔσΟϯάλΠϜͰม׵Ͱ͖Δ

Slide 24

Slide 24 text

ίʔσΟϯάλΠϜίϯύΠϧ • ίʔσΟϯά͠ͳ͕ΒϦΞϧλΠϜͰιʔείʔ υ͕ల։͞ΕΔ • ίϯύΠϧࡁΈͳͷͰɺVSCodeͳͲIDEͷࢧ ԉΛ࠷େݶड͚ΒΕΔ • ܕ৘ใ΋׆༻͠์୊

Slide 25

Slide 25 text

͜Ε͔Βͷϓϩάϥϛϯάͷਖ਼ٛ • ίʔσΟϯάλΠϜίϯύΠϧͱ͍͏৽ٕज़ • ஆ͔ΈᷓΕΔख࡞ۀΛࠜઈ • ੜ࢈ੑΛ޲্ͯ͠ɺ૬ର௞ۚΛ্͛Δ

Slide 26

Slide 26 text

ࠂ஌ • ٕज़ॻయ3Ͱ൦෍ͨ͠ʰ؆୯JavaScript ASTೖ ໳ʱ਺࡭࢒ͬͯΔͷͰख౉͠Ͱ൦෍Ͱ͖·͢ɻ • લճͷModern JavaScriptʹଓ͍ͯɺASTຊ΋ ঎ۀԽ࡞ۀਐߦதͰ͢ɻ • ঎ۀ൛JSຊɺΞοϓσʔτ༧ఆͰ͢ɻ