GASで始めるサーバーレス 頑張らない社内アプリケーション開発

builderscon tokyo 2019 LT 登壇資料
https://builderscon.io/tokyo/2019

Transcript

1. GASͰ࢝ΊΔαʔόʔϨε ؤுΒͳ͍ࣾ಺ΞϓϦέʔγϣϯ։ൃ Builderscon Tokyo 2019 LT
2. ࣗݾ঺հ • ༄ ྙߒʢ΍ͳ͗ ͱ΋ͻΖʣ • @TGreenmonkey (t-yng) • Hamee גࣜձࣾ ɾϑϩϯτΤϯυ͕޷͖ ɾझຯͰ Flutter Λษڧத
3. ձࣾͰͷͱ͋ΔͰ͖͝ͱ...
4. ͓ޓ͍ͷ͜ͱΛ஌ΔͨΊʹ
 ࣾ಺༻ͷࣾһͷϓϩϑΟʔϧ ϖʔδΛ࡞ͬͯ΄͍͠Ͱ͢ ͍͍Ͱ͢Α
5. ͓ޓ͍ͷ͜ͱΛ஌ΔͨΊʹࣾһ ͷϓϩϑΟʔϧϖʔδΛ࡞ͬͯ ΄͍͠Ͱ͢ ͍͍Ͱ͢Α ࣾ಺ͷϓϩϑΟʔϧϖʔδΛ
 ։ൃ͢Δ͜ͱʹͳͬͨ
6. ϓϩϑΟʔϧϖʔδͷཁ݅ ɾࣾ಺ͷϓϩϑΟʔϧϖʔδ͕ཉ͍͠ ɾϓϩϑΟʔϧ৘ใ͸ࣾһ͕ࣗ༝ʹฤूՄೳ ɾमਖ਼݁Ռ͸ϦΞϧλΠϜʹ൓ө
8. ࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ੜ੒ ΞϓϦέʔγϣϯαʔόʔ
9. ͪΐͬͱ଴ͬͯʂʂ
10. ϓϩϑΟʔϧϖʔδΛϖʔδ
    ࡞Δ͚ͩͩΑͶʁ
11. ࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϝϯόʔ঺հϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ੜ੒ ΞϓϦέʔγϣϯαʔόʔ
12. ࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϝϯόʔ঺հϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ੜ੒ ΞϓϦέʔγϣϯαʔόʔ ৑௕͗͢ͳ͍ʁʁ
13. ແବʹ͔͔࣌ؒΓͦ͏
    %#ͱ͔αʔόʔͷ؅ཧ΍Γͨ͘ͳ͍
14. ಇ͖ͨ͘ͳ͍ʂʂ
15. GASΛ࢖ͬͯ
 ؆୯ʹղܾͰ͖ΔΜ͡Όͳ͍ʁ
16. GASͱ͸ʁ ɾGoogle͕։ൃͨ͠εΫϦϓτϓϥοτϑΥʔϜ
 ɾεϓϨουγʔτͳͲͷυΩϡϝϯτͱ࿈ܞ͕Մೳ
 ɾdoPost, doGet ؔ਺ͰPOSTɺGETϦΫΤετ
 ɹΛॲཧͰ͖Δ
 ɾHTMLService Λར༻ͯ͠ɺHTML΋ฦ͢͜ͱ͕Ͱ͖Δ
 
 => ؆қతͳWebαʔόʔɺAPIαʔόʔͱͯ͠࢖͑Δ
17. ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ ฤूը໘ΛͲ͏ʹ͔͢Δ
18. ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ Google Sheets Λར༻
19. ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ DBΛͲ͏ʹ͔͢Δ
20. ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ ɾDBͱͯ͠΋ར༻ ɾdoPost ؔ਺ͰAPIαʔόʔͱͯ͠ಈ࡞ APIαʔόʔ
21. ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ ϓϩϑΟʔϧҰཡ ΞϓϦέʔγϣϯαʔόʔ
 ΛͲ͏ʹ͔͢Δ
22. ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML Webαʔόʔ ϓϩϑΟʔϧҰཡ ɾdoGetؔ਺ + HTMLService ɹͰHTMLΛฦ͢ ɾಈతͳHTMLͷੜ੒͕೉͍͠ ɾը໘ߏஙΛͲ͏͢Δ͔ʁ
23. ૢ࡞ ϓϩϑΟʔϧϖʔδ
 ʢSPAʣ Ӿཡ ੩తHTML Webαʔόʔ APIαʔόʔ ϓϩϑΟʔϧ
 ʢfetchͰऔಘʣ SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣͰ࣮૷ͯ͠ϑϩϯτͰը໘Λߏங
24. SPAͰ࣮૷͢ΔͳΒ React ࢖͍͍ͨ
25. ਓͱͯ͠ͷ͕͞ʢ৑ஊͰ͢ʣ
26. ૢ࡞ ϓϩϑΟʔϧϖʔδ ʢSPAʣ Ӿཡ ੩తHTML Webαʔόʔ APIαʔόʔ ϓϩϑΟʔϧ
 ʢajaxͰऔಘʣ ɹ੩తͳHTML͔͠ฦͤͳ͍ React Ͳ͏૊Έ͜΋͏ʁ SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣͰ࣮૷ͯ͠ϑϩϯτͰը໘Λߏங
27. ϏϧυࡁΈ js, css શ෦ೖΓͷ ੩తHTML Λੜ੒ 1. js, css ΛϏϧυɺόϯυϧ ͯ͠ bunlde.js Λੜ੒ 2. bundle.js Λ jantimon/html-webpack-pluginΛ࢖ͬͯ
 HTMLʹΠϯϥΠϯల։ ΠϯϥΠϯల։ Ϗϧυ Ϗϧυ bundle.js
28. webpack.common.js
29. ΠϯϥΠϯʹల։
30. GAS΁ͷσϓϩΠ google/clasp Ͱ GAS ʹ ੩తHTML ΛσϓϩΠ
 What is clasp?
 Google͕ެࣜͰఏڙ͍ͯ͠ΔCLIͰGASϓϩδΣΫτΛ؅ཧͰ͖Δπʔϧ GAS΁ͷ൓ө͸͜Ε͚ͩͰ׬ྃ
31. ૢ࡞ ϓϩϑΟʔϧϖʔδ ʢSPAʣ Ӿཡ ϓϩϑΟʔϧ
 ʢajaxͰऔಘʣ ੩తHTML Webαʔόʔ ϓϩϑΟʔϧҰཡ ࠷ऴߏ੒ ϩʔΧϧϏϧυ HTMLΛσϓϩΠ/clasp ΍ͬͨͶʂ ʌ(ˏʈ˜ʈˏ)ů
32. ·ͱΊ ɾGAS + SPA + Clasp
 ɹͰ͓खܰʹαʔόʔϨεͳ։ൃΛ࣮ݱͰ͖Δ ɾ؆୯ͳࣾ಺޲͚ͷΞϓϦέʔγϣϯͳΒίϨͰे෼
 ʢͨͩ૝૾Ҏ্ʹ஗͍ => ରࡦ͢Ε͹ૣ͘ͳΔ͔΋ʣ
33. ͓ΘΓ