KILL ALL HUMANS (動画なし版)

JavaScript メタプログラミング勉強会@さくらインターネット metapro.es セクション2 → 動画あり版はこちら https://akameco.github.io/slide/20170220_metapro/assets/player/KeynoteDHTMLPlayer.html#0

Transcript

1. KILL ALL HUMANS @akameco
2. @akameco ͔͋Ί ๭ॴͰΞϧόΠτ.js 
3. զʑ͕௚໘͢Δ໰୊ 
4. Կ౓΋ಉ͡Α͏ͳ͜ͱΛ ࢦఠ͢ΔίʔυϨϏϡʔ 
5. ೖΓࠞͬͨ͡ݹ͍ίʔυͱ ৽͍͠ίʔυ 
6. ܾ·Γ͖ͬͨύλʔϯΛ ॻ͘࡞ۀΛ܁Γฦ͢ 
7. ͜ΕΒΛղܾ͢Δ ౴͑͸΋͏ ͝ଘ஌Ͱ͢Ͷ 
8. 
9. 
10. ”KILL ALL HUMANS” • ਓؒ͸ඞͣؒҧ͑Λ൜͢ • Αͬͯɺਓ͕ؒਖ਼֬͞ΛٻΊΒΕΔ࡞ۀΛͯ͠ ͸ͳΒͳ͍ • ͦͯ͠Ұ؏ੑΛอͭͷ͸ਓؒͷ࢓ࣄͰ͸ͳ͍ • ͔ͩΒਓؒΛഉআ͢Δͷ͕جຊతͳํ਑Ͱ͋Δ • ਓؒ͸ਓؒʹ͔͠ग़དྷͳ͍ຊ࣭ʹऔΓ૊Ή΂͖ 
11. ͔ͩΒ AST 
12. ਓؒΛഉআ͢ΔASTΛ࢖ͬͨ ୅දతͳπʔϧͨͪ • ESLint https://github.com/eslint/eslint • Ұ؏ͨ͠ίʔυݕࠪ • prettier https://github.com/prettier/prettier • Ұ؏ͨ͠ίʔυϑΥʔϚοτ 
13. ͔͠͠ɺզʑ͕௚໘͢Δ ໰୊͸·ͩ͋Δ 
14. Object.assign vs {…} 
15. 
16. ίʔυϕʔεͷ੒௕ʹͭΕͯ Object.assign({}, state, …)ͱ {…state}͕ࠞ͡Δ 
17. reducer͕1ͭ΍2ͭͳΒखಈ Ͱͪ·ͪ·࡞ۀͯ͠΋͍͍͔ 
18. ·͔ͦ͞Μͳ͸ͣ͸ͳ͍… caseจ͕10,50,100,1000… ͜ͷ”࡞ۀ”ʹͲͷ͘Β͍ͷ ͕͔͔࣌ؒΔ͔ʁ 
19. 
20. jscodeshift 
21. facebook/jscodeshift • ෳ਺ͷϑΝΠϧʹର͢ΔASTϕʔεͷม׵πʔ ϧ • ͜ͷΑ͏ͳطଘͷιʔεࣗମʹม׵Λߦ͏πʔ ϧ܈͸Codemodͱݺ͹ΕΕΔ • ͳ͓ɺਓΛKILL͢Δπʔϧ͸͍͍ͨͯfacebook ͕࡞ͬͯΔ 
22. $ yarn global add jscodeshift $ git clone https://github.com/cpojer/js-codemod/ $ jscodeshift -t js-codemod/transforms/rm-object- assign.js src 
23. ਺ඵͰม׵׬ྃ 
24. Object.assignΛม׵͠Α͏ ͦ͏ߟ͑ͯ πʔϧͷΠϯετʔϧ͔Βม׵׬ྃ·Ͱ 1෼Ͱ ”΋Εͳ͘ਖ਼֬ʹ” Object rest spread΁ 
25. ଞͷCodemod΋͍͔ͭ͘ 
26. js-codemod/object-shorthand • ஫: ͜Ε͸eslintͷ—fixͰ΋ࣗಈमਖ਼ՄೳͰ͢ • https://eslint.org/docs/rules/object-shorthand 
27. react-codemod/manual-bind- to-arrow bindΛΫϥεϓϩύςΟʹॻ͖׵͑ 
28. ࡞ऀ΍ओཁίϯτϦϏϡʔλʔ • Felix Kling(@fkling) astexplorer, jscodeshift (Facebook) • Christoph Nakazawa(@cpojer) jest Λ࡞ͬͯΔ (Facebook) • Brian Vaughn(@bvaughn) react- virtualized (Facebook) • Andrew Clark(@acdlite) recompose΍FSA (Facebook) 
29. ࡞ऀ͕͍͍ͨͯFacebookؔ܎ऀͳͷͰجຊతʹ ม׵πʔϧ܈͸ReactΤίγεςϜΛத৺ͱͯ͠ൃ ల͍ͯ͠Δ Facebookʹͨ͠ΒϓϩδΣΫτʹ͋Δ50000ίϯϙʔωϯτ Λࣗಈม׵ग़དྷͳ͖Ό΍ͬͯΒΕͶʔΑతͳ࿩ͩͱฉ͍ͨ 
30. ࣗ෼ͰcodemodΛॻ͘ͱ͖͸ʁ • jscodeshift͸Babel Pluginͱ͸ҟͳΔܗࣜΛཁ ٻ͢ΔͷͰΦεεϝ͠ͳ͍ • ΋͠৽͘͠codemodΛ࡞Γ͍ͨͳΒBabel pluginͱͯ͠ॻ͍ͯsquareࣾͷbabel-codemod Λ࢖͏ͷ͕͍͍ • https://github.com/square/babel-codemod 
31. Babel Plugin 
32. ஫: ઌʹॻ͍͓ͯ͘ͱɺ͜͜Ͱ ͸BabelPluginͷॻ͖ํ౳ͷ આ໌͸͠·ͤΜɻ ASTຊ·ͨ͸QiitaʹࢀߟϦϯ ΫूΛ·ͱΊͯ͋ΔͷͰͦͪ ΒΛࢀর͍ͯͩ͘͠͞ Babel PluginΛ࡞੒͢Δͱ͖ʹ༗ޮͳ৘ใ·ͱΊ - Qiita https://qiita.com/akameco/items/af81882fabf2728f2567 
33. babel-react-optimize 
34. babel-react-optimize • 2೥લ͔Β͋Δreactͷ4ͭͷ࠷దԽ ϓϥάΠϯ٧Ί߹Θͤ • ࡞ऀ͸@jamiebuildɻݩ thejameskyleɻbabel/yarn/flow/ lerna/babel-handbook/ͱ͔babel- utilsͳͲΊͪΌͪ͘ΌؔΘͬͯΔɻ Flowਪ͠ɻ࠷ۙͩͱunstated ͱ͔ glow ͱ͔͕ྲྀߦͬͨ Jamie (͜ͷલ·Ͱࣸਅ ͩͬͨͷʹԿނ) 
35. Input output transform-react-pure-class-to-function 
36. ࢖͏΂͖ʁ • ڈ೥ͷ10݄·Ͱ͸ kriasoft/react-starter-kit ͳͲͷε λʔ16000↑ͷϘΠϥʔϓϨʔτ͕࢖༻ • ͕ɺ@babel͕͜ΕΒͷϓϥάΠϯΛٵऩͨ͠ͷͰɺ react-starter-kitͳͲ͸ͦͪΒʹҠߦ͍ͯ͠Δɻ • ಉ͡Α͏ʹͦͪΒΛ࢖͑͹Α͍ͱࢥ͏(ͳ͓babelrcͰ͸ ͳ͘webpack.config.jsʹ͜ΕΒͷهड़͕͋ΔͷͰ஫ҙ) • ͡Ό͋ͳΜͰ঺հͨ͠ͷ͔ͱ͍͏ͱɺཧ༝͸ޙड़ 
37. babel-plugin-macros https://babeljs.io/blog/2017/09/11/zero- config-with-babel-macros 
38. babel-plugin-macros • babel pluginΛθϩίϯϑΟάϨʔ γϣϯͰ͔ͭϞδϡʔϧͱͯ͠Πϯ ϙʔτՄೳʹ͢ΔϓϥάΠϯ • ࡞ऀ͸ paypal ͷΤϯδχΞͰ tc39 ͷϝϯόʔͰ΋͋ΔKent C. DoddsɻCSSinJSͷglamorous΍ downshiftͷ࡞ऀ Kent C. Dodds 
39. ͳͥ͜Εʹ஫໨͢Δͷʁ • create-react-app v2ʹಋೖ༧ఆ(Ϛʔδ ࡁΈ) • egoistઌੜ(Vueք۾ͷϠόΠਓ)ͷpoi Ͱ΋ಋೖ͞ΕͯΔ • ଞʹ͸storybookͰ࢖ΘΕͯͨΓͱɺ ࠓޙ޿͘࢖ΘΕΔՄೳੑ͕͋Δ EGOIST 
40. Ͳ͏΍ͬͯ࢖͏ͷʁ • macroΛϥΠϒϥϦͱಉ͡Α͏ʹimport͢Δ • ͍͔ͭ͘ͷmacroΛ঺հ 
41. preval.macro • ίϯύΠϧ࣌ʹࣄલ࣮ߦΛఏڙ͢Δ • Ͳ͏ͤ஋ʹͳΔͷͰϑϩϯτΤϯυͰfsΛ࢖ ͏ͱ͔ɺ·͋ԿͰ΋͋Γ • fs 
42. import-all.macro globܗࣜͰ dynamic import 
43. Կ͕خ͍͠ͷʁ • ϑϩϯτΤϯυͰ fsͱ͔pathͱ͔࢖͍์୊ • .babelrcʹ௥ՃͤͣʹɺίϯύΠϧ࣌ॲཧΛ ϥΠϒϥϦͱͯ͠ѻ͏͜ͱ͕Ͱ͖Δ 
44. Ͳ͏΍ͬͯ࡞Δͷʁ • babel-macrosઐ༻ͷϥΠϒ ϥϦΛॻ͘ɺ͕ɺbabelͷ࢓ ૊ΈͰѻ͏ͷͰbabel pluginΛॻ͚Ε͹ಛʹࠔΔ ͜ͱͳ͘ॻ͚Δɻ • ms.macro͕খ͍͞ͷͰͦΕ Λࢀߟʹ͢Δͱ͍͍ͱࢥ͏ 
45. σϝϦοτ • Ұݴɺ BabelΛલఏͱ͢Δ 
46. ͦͯ͠ Ϗϧυ࣌ΑΓ͞Βʹલ ίʔσΟϯάλΠϜ ίϯύΠϧ 
47. s2s 
48. s2s(Source to Source)ͱ͸Կ͔ʁ • ιʔείʔυ͔Βιʔείʔυ΁ͷίʔσΟϯά࣌ʹίϯ ύΠϧΛߦ͏πʔϧ • ϋϯυϥͱ͍͏൚༻తͳ࢓૊ΈΛ࣋ͪɺjsΛBabelͰॲཧ ͨ͠ΓɺcssΛॲཧͨ͠ΓՄೳɻ • આ໌͞ΕΔΑΓ࢖ͬͨํ͕ࣗ໌ͳͷͰɺhttps:// github.com/akameco/s2s ͷαϯϓϧΛ৮ͬͯΈΔͱΑ͍ Ͱ͢(⭐͓ئ͍͠·͢) 
49. ϋϯυϥʔ ϑοΫ(੔ܗ) v0.14~ݱࡏ 
50. ͰɺԿ͕Ͱ͖Δͷʁ 
51. ·͔͞ReactͰClass͔ΒSFC ΁ͷม׵Λख࡞ۀͰ΍ͬͯΔ ਓ͸͍ͳ͍ΑͶʁ 
52. 
53. 
54. 
55. How? • react-optimizeͰొ৔ͨ͠babel-plugin-transform- react-pure-class-to-functionΛs2s.config.jsʹࢦఆ (͑͑ɺશͯͷbabelͷࢿ࢈Λ࢖͑·͢) 
56. ·͔͞ܕ͕ͳ͍ঢ়ଶͰCSS- ModulesΛॻ͍͍ͯΔͷ͔ʁ 
57. 
58. 
59. 
60. How? • cssͷΫϥε໊ʹରԠ͢ΔܕఆٛΛੜ੒ • inspired by Quramy/typed-css-modules • ͔͠͠ߴස౓Ͱ͏·͘ಈ͔ͳ͍ޙ͔Β.flowΛ௥Ճ͢Δͱflow͕Ṗ ͷڍಈΛ͢Δ͜ͱ͕͋Δ(Object͕stringͱͯ͠ೝࣝ͞ΕͨΓͳʂ) 
61. DEMO s2s؀ڥʹ͓͚Δredux ίʔσΟϯά 
62. ͪΐͬͱऔΓ૊ΜͰͰσϞ͠Α͏ͱ ࢥ͚ͬͯͨͲؒʹ߹Θͳ͔ͬͨ΋ͷ • awaitΛॻ͍ͨॠؒʹؔ਺ʹasyncΛ෇Ճ͢Δ ϓϥάΠϯ(ͨͿΜདྷ݄ʹ͸ެ։͢Δͱࢥ͏) 
63. s2sʹ͍ͭͯΑ͋͘Δ ࣭໰ͱճ౴ 
64. Q. s2sͷTypeScript༻ͷbabel plugin͕શવͳ͍Μ͚ͩͲ A. @akameco͕Flow࢖ͬͯͯ TepeScriptʹڵຯͳ͔ͬͨɻ babel7Λ࢖ͬͯࣗ෼ͰBabel Plugin Λॻ͜͏ʂ΋ͪΖΜPR͸׻ܴɻ 
65. Q. ϓϩδΣΫτݻ༗ͷBabelPlugin Λ࢖͍͍͚ͨͲެ։͸ͨ͘͠ͳ͍ A. s2sͰ΋BabelͰ΋ϓϩδΣ Ϋτ಺Ͱॻ͍ͯrequireͰ૬ରύ ε͔ΒಡΈࠐΊ·͢ 
66. Q.vimͱ͔ࣗಈಡΈࠐΈͰ͖ͳ͍͔ Βs2sػೳ͠ͳ͍Μ͚ͩͲ A. 21ੈلͷΤσΟλΛ࢖ͬͯ Լ͍͞ (ͱΏ͏͔ΦʔτϦϩʔυ͕ग़དྷͳ͍ΤσΟλΛ ࢖͏ͷ͸ۤߦͳͷͰ͸…vimͷਓͨͪprettierͱ ͔eslint--fixͱ͔Ͳ͏͍ͯ͠ΔΜͩΖ͏...) 
67. Q.s2sͷΦϦδφϧ͸Կʁ A. Կނ͔Α͘ฉ͔ΕΔ͚Ͳɺڧ͍ͯ ݴ͑͹ɺ2017೥6݄ࠒʹҏ౻ܭ֢ͷ ϋʔϞχʔʹొ৔͢ΔWatchMe͔Β ર͍ͨ΋ͷͳͷͰɺݪ఺͸ҏ౻ܭ֢ɻ (ެ։લ͸watchmeͱ͍͏໊લͩͬͨ) 
68. ·ͱΊ 
69. KILL ALL HUMANS • ਓؒΛഉআ͢Δ͜ͱʹΑͬͯੜ࢈ੑ͸্͕Δ • ࣗ໌ͳ࡞ۀ͸ແବͰ͔͠ͳ͍ͷͰɺͦΜͳ͜ ͱ͸ػցʹ΍Βͤͯɺຊ࣭ʹऔΓ૊Ή΂͖ • ͦͷͨΊͷπʔϧ͕prettier΍jscodeshiftɺ s2sͳͲͷASTΛ࢖ͬͨπʔϧ܈ • KILL ALL HUMANS ΍͍͖ͬͯ·͠ΐ͏ 
71. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 
72. ࣭ٙԠ౴