Babel plugin を作ってAST と Babel を学ぶ

2917a3c430817eb71086f8973c06ebba?s=47 sakito
December 07, 2019

Babel plugin を作ってAST と Babel を学ぶ

【We Are JavaScripters! 3周年記念】 WeJS Festival ! で使用した資料
https://wajs.connpass.com/event/151413/

ライブコーディングで使用したコード
https://github.com/sakito21/babel-plugin-demo

Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

December 07, 2019
Tweet

Transcript

  1. #BCFMQMVHJOΛ࡞ͬͯ
 "45ͱ#BCFMΛֶͿ

  2. /BNF 4BLJUP.VLBJ 5XJUUFS
 !@@TBLJUP@@ +PC $ZCP[VJOD
 'SPOUFOE&YQFSU5FBN
 ,BJ[FO1MBUGPSN 'SPOUFOE"EWJTPS "CPVUNF

  3. աڈʹ࿩ͨ͠಺༰͔Β#BCFMʹϑΥʔΧεͨ͠࿩

  4. w"45ʹ͍ͭͯ w#BCFMʹ͍ͭͯ w#BCFM1MVHJOʹ͍ͭͯϥΠϒίʔσΟϯά "HFOEB

  5. "45
 "CTUSBDU4ZOUBY5SFF ந৅ߏจ໦

  6. wϓϩάϥϜͷߏ଄ࣔͨ͠σʔλ wਖ਼نදݱͰ͸දݱͰ͖ͳ͍ύλʔϯʹ΋ରԠͰ͖Δ w+BWB4DSJQUͰ͸+40/σʔλͷܗʹͳΔ wجຊతͳ࢓༷͸&45SFFʹ४ڌ͍ͯ͠Δ w&4-JOU #BCMF XFCQBDLͳͲ޿͘࢖ΘΕ͍ͯΔ "45
 "CTUSBDU4ZOUBY5SFF ந৅ߏจ໦

  7. &45SFF
 IUUQTHJUIVCDPNFTUSFFFTUSFF

  8. "45&YQMPSFS
 IUUQTHJUIVCDPNFTUSFFFTUSFF

  9. "45&YQMPSFS
 IUUQTHJUIVCDPNFTUSFFFTUSFF

  10. #BCFMͱ͸ʁ

  11. #BCFMͱ͸ʁ w+BWB4DSJQUͷDPNQJMFS w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ w +49ߏจ΍5ZQF4DSJQU΋+BWB4DSJQUʹม׵Ͱ͖Δ

  12. #BCFMͷ஀ੜ wݩʑ͸UPͱ͍͏໊લͩͬͨ w&4͔Β&4΁ίʔυΛม׵͢Δػೳ͔͍࣋ͬͯ͠ͳ͔ͬͨ w͔ͦ͜Β༷ʑͳཁ๬͕͋Γɺ#BCFMʹมߋ͞Εͨ

  13. ͳͥ#BCFM͕ඞཁͳͷ͔ w࢖༻Ͱ͖Δ+BWB4DSJQU͸ϒϥ΢βʹΑͬͯҟͳΔ wศརͳػೳ͸࢖͍͍ͨ wͦ͜Ͱɺ৽͍͠+BWB4DSJQUΛ
 ֤ϒϥ΢βͰ࢖༻Ͱ͖ΔΑ͏ʹ͢ΔͨΊ#BCFMΛ࢖༻͢Δ

  14. #BCFMͷػೳ wߏจม׵ wλʔήοτϒϥ΢βʹͳ͍؀ڥͷ1PMZpMMͷఏڙ wιʔείʔυม׵ DPEFNPET

  15. #BCFM͸+BWB4DSJQUΛม׵͢Δ +BWB4DSJQU 5ZQF4DSJQU +49 +BWB4DSJQU

  16. ରԠ͍ͯ͠ͳ͍ϒϥ΢β͕ଘࡏ

  17. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵

  18. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵ +BWB4DSJQU

  19. ίʔυΛͲͷΑ͏ʹม׵͢Δͷ͔ʁ

  20. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ w1BSTJOH!CBCFMQBSTFS
 ιʔείʔυΛ"CTUSBDU4ZOUBY5SFF "45 ʹม׵ w5SBOTGPSNBUJPO
 "45Λม׵͢Δɺ#BCFMͷϓϥάΠϯ͕
 ͜ͷ໾ׂΛ୲͍ͬͯΔ w$PEF(FOFSBU!CBCFMHFOFSBUPS
 "45Λιʔείʔυʹม׵͢Δ

  21. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ 1BSTJOH ιʔε "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU ιʔε

  22. ࣮ࡍʹڍಈΛ͔֬Ί͍ͯ͜͏

  23. ͔͜͜ΒϥΠϒίʔσΟϯά

  24. ࢖༻ͨ͠ίʔυ
 IUUQTHJUIVCDPNTBLJUPCBCFMQMVHJOEFNP

  25. ͓ΘΓ