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__

Transcript

1. #BCFMQMVHJOΛ࡞ͬͯ

   "45ͱ#BCFMΛֶͿ
   

   View Slide

2. /BNF
   4BLJUP.VLBJ
   5XJUUFS

   !@@TBLJUP@@
   +PC
   $ZCP[VJOD

   'SPOUFOE&YQFSU5FBN

   ,BJ[FO1MBUGPSN
   'SPOUFOE"EWJTPS
   "CPVUNF
   

   View Slide

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

   View Slide

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

   View Slide

5. "45

   "CTUSBDU4ZOUBY5SFF ந৅ߏจ໦
   
   

   View Slide

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

   "CTUSBDU4ZOUBY5SFF ந৅ߏจ໦
   
   

   View Slide

7. &45SFF

   IUUQTHJUIVCDPNFTUSFFFTUSFF
   

   View Slide

8. "45&YQMPSFS

   IUUQTHJUIVCDPNFTUSFFFTUSFF
   

   View Slide

9. "45&YQMPSFS

   IUUQTHJUIVCDPNFTUSFFFTUSFF
   

   View Slide

10. #BCFMͱ͸ʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    ֤ϒϥ΢βͰ࢖༻Ͱ͖ΔΑ͏ʹ͢ΔͨΊ#BCFMΛ࢖༻͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ
    w1BSTJOH!CBCFMQBSTFS

    ιʔείʔυΛ"CTUSBDU4ZOUBY5SFF "45
    ʹม׵
    w5SBOTGPSNBUJPO

    "45Λม׵͢Δɺ#BCFMͷϓϥάΠϯ͕

    ͜ͷ໾ׂΛ୲͍ͬͯΔ
    w$PEF(FOFSBU!CBCFMHFOFSBUPS

    "45Λιʔείʔυʹม׵͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ࢖༻ͨ͠ίʔυ

    IUUQTHJUIVCDPNTBLJUPCBCFMQMVHJOEFNP
    

    View Slide

25. ͓ΘΓ
    

    View Slide