Webで自動化って どういうこと? - 大まかに理解する 自動化の入り口の話

Webで自動化って どういうこと? - 大まかに理解する
自動化の入り口の話

Transcript

1. WebͰࣗಈԽͬͯ Ͳ͏͍͏͜ͱ? 2018/11/09 @tacck ⼤まかに理解する
 ⾃動化の⼊り⼝の話
2. ୭ !UBDDL
   ໊લ ࡶͳϑϧελοΫΤϯδχΞ
   ͓࢓ࣄ εϓϨουɾΠʔάϧ
   ޷͖ͳϑΟΪϡΞεέʔτͷٕ
3. ಥવͰ͕͢
4. Έͳ͞Μ ָΛ͍ͨ͠Ͱ͔͢?
5. Έͳ͞Μ ָΛ͍ͨ͠Ͱ͔͢? ͍ͨ͠Ͱ͢ΑͶʂ
6. ָΛͯ͠ྑ͍ΜͰ͔͢?
7. ָΛͯ͠ྑ͍ΜͰ͔͢? ྑ͍ΜͰ͢!!
8. ָΛ͢ΔͨΊʹ ԿΛ஌Δ΂͖͔?
9. ࠓ೔͓࿩͢͠Δ͜ͱ • Web։ൃք۾Ͱฉ͘ʮࣗಈԽʯͱ͸? • ࣗಈԽ͢ΔͱԿ͕خ͍͠ͷ͔ • ۩ମతͳ͓࿩͸ɺଞͷํͷൃදʹظ଴!
10. ͦ΋ͦ΋࿦ “Webٕज़” #ͱ͸
11. Webٕज़ (͜ͷࢿྉͰͷఆٛ) ௥Ճ Ԡ༻ WebαΠτ WebΞϓϦ(WebγεςϜ) WebΞϓϦͷཁૉٕज़ͷൃల جຊ
12. • ੩తϖʔδදࣔ • ϒϥ΢βͰදࣔޙʹ
 ϖʔδ಺༰(σʔλ)͕มԽ͠ͳ͍ WebαΠτ جຊ
13. • ಈతϖʔδදࣔ • ϒϥ΢βͰදࣔޙʹ΋
 ϖʔδ಺༰(σʔλ)͕มԽ͢Δ ௥Ճ WebΞϓϦ(WebγεςϜ)
14. ͍͍ͩͨ͜͏͍͏ύλʔϯ • ϑΝΠϧ഑ஔͷΈͷ੩తαΠτ • όοΫΤϯυͰϖʔδੜ੒͢Δ੩తαΠτ • όοΫΤϯυͰϖʔδੜ੒͢ΔಈతαΠτ • ϑϩϯτΤϯυʹΑΔಈతαΠτ
15. ੩తαΠτ ಈతαΠτ ϑϩϯτΤϯυ ᶃ
    ϑΝΠϧ഑ஔͷΈ ᶆ
    9)3࢖͏λΠϓ όοΫΤϯυ ᶄ
    ݻఆͷϑΝΠϧੜ੒ ᶅ
    ঢ়ଶʹԠͨ͡
 ϑΝΠϧੜ੒
16. ొ৔ਓ෺ • HTML/CSS • JavaScript • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
17. ᶃϑΝΠϧ഑ஔͷΈͷ
 ɹ੩తαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • ϛυϧ΢ΣΞ(HTTPαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
18. ᶃϑΝΠϧ഑ஔͷΈͷ
 ɹ੩తαΠτ Πϯϑϥ αʔόωοτϫʔΫ )5.-
    
    $44 +BWB4DSJQU )551αʔό ϑΝΠϧऔಘ
19. ᶄόοΫΤϯυͰ
 ɹϖʔδੜ੒͢Δ੩తαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) • ϛυϧ΢ΣΞ(HTTPαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
20. ᶄόοΫΤϯυͰ
 ɹϖʔδੜ੒͢Δ੩తαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥ΢β͔Β͸
    ϑΝΠϧऔಘ
    ʹݟ͍͑ͯΔ όοΫΤϯυ )5.-
    
    $44 +BWB4DSJQU όοΫΤϯυͰϑΝΠϧΛੜ੒ͯ͠
    )551αʔό΁౉͢
21. ᶅόοΫΤϯυͰ
 ɹϖʔδੜ੒͢ΔಈతαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
22. ᶅόοΫΤϯυͰ
 ɹϖʔδੜ੒͢ΔಈతαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥ΢β͔Β͸
    ϑΝΠϧऔಘ
    ʹݟ͍͑ͯΔ όοΫΤϯυ )5.-
    
    $44 +BWB4DSJQU %#αʔό όοΫΤϯυͰϑΝΠϧΛੜ੒ͯ͠
    )551αʔό΁౉͢
23. ᶆϑϩϯτΤϯυʹΑΔ
 ɹಈతαΠτ • HTML/CSS • JavaScript (֎෦௨৴͋Γ) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
24. ᶆϑϩϯτΤϯυʹΑΔ
 ɹಈతαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥ΢β͸
    ϑΝΠϧऔಘͱ
    9)3ʹΑΔσʔλऔಘ όοΫΤϯυ
    9)3Λड͚Δ"1* )5.-
    
    $44 +BWB4DSJQU %#αʔό όοΫΤϯυͰ
    σʔλ࡞੒ +4
    9)3
25. WebΞϓϦΛ࡞Δʹ͸ • ࠷ऴతʹɺଟ͘ͷཁૉ͕ඞཁʹͳͬͯ͘Δɻ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ ͦΕͧΕ͕ผͷٕज़ཁૉͰ੒Γཱ͍ͬͯΔɻ • ࣗಈԽͰ͖ͦ͏?
26. ੔ཧ͢Δલʹ
27. ࣗಈԽ #ͱ͸
28. ࣗಈԽͱ͸ • ͋Δಛఆͷ࡞ۀ಺༰ɺ࡞ۀखॱΛɺ
 ػց(ίϯϐϡʔλ)ʹ೚ͤΔ͜ͱɻ • ਓ͕ؒͰ͖Δ͜ͱ
 (͔ͭɺ܁Γฦ͠΍Δ͜ͱ)Λ
 ίϯϐϡʔλʹ೚ͤΔɻ
29. • جຊ໘౗ͳ࡞ۀ • ಉ͜͡ͱΛେྔʹ܁Γฦ͢ • ͦͷׂʹؾΛ࢖͏ • ͦͷ্Ͱؒҧ͑Δ • ؒҧ͑ͨ৔߹γϟϨʹͳΒͳ͍ ਓ͕ؒͰ͖Δ͜ͱΛ೚ͤΔ
30. ࣗಈԽͯ͠خ͍͜͠ͱ
31. خ͍͜͠ͱ • ఆܕॲཧΛ࣮֬ʹߦͳ͑Δ • Ұ୴੒ޭͨ͠Βͣͬͱ੒ޭ • ΋ࣦ͠ഊͨ͠ΒʮखॱҎ֎ʯʹ໰୊͕͋Δ ͜ͱ͕Θ͔Δ
32. خ͍͜͠ͱ • ָ͕Ͱ͖Δ • ৽͍͜͠ͱʹखΛ͚ͭΒΕΔ • ػೳ௥Ճɾվળ • ৽͍͠αʔϏε
33. Ͳ͏͍͏͜ͱΛ ࣗಈԽͰ͖Δ͔
34. ࣗಈԽͰ͖Δ͜ͱ • ఆܕॲཧ͸͢΂ͯ
35. ϑϩϯτΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ) • ΦʔτϦϩʔυ • Lint / Format • ςετ • σϓϩΠ
36. ϑϩϯτΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ) • Babel, Webpack, … • ΦʔτϦϩʔυ • Webpack, … • Lint / Format • ESLint, … • ςετ • Jest, … • σϓϩΠ • SCP, …
37. όοΫΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ) • ϗοτσϓϩΠ • Lint / Format • ςετ • σϓϩΠ
38. όοΫΤϯυཁૉ (Java) • Ϗϧυ (ίϯύΠϧ) • Javac + Gradle, … • ϗοτσϓϩΠ • IDE + Gradle, … • Lint / Format • Checkstyle, .. • ςετ • JUnit, … • σϓϩΠ • SCP, …
39. Πϯϑϥཁૉ • ߏ੒؅ཧπʔϧ • ϗετ(VM)ߏங • ϛυϧ΢ΣΞߏங • ςετ • VM/ίϯςφͷΠϝʔδϏϧυ
40. Πϯϑϥཁૉ • ߏ੒؅ཧπʔϧ • ϗετ(VM)ߏங • ϛυϧ΢ΣΞߏங • Ansible, Chef, … • ςετ • ServerSpec, … • VM/ίϯςφͷΠϝʔδϏϧυ • Docker, Packer, …
41. Ԡ༻ • CI • Git΁ͷίϛοτΛݕ஌ͯ͠ςετ • CD • ςετͰ໰୊ͳ͚Ε͹ • σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங • σϓϩΠ
42. Ԡ༻ • CI • Git΁ͷίϛοτΛݕ஌ͯ͠ςετ • CD • ςετͰ໰୊ͳ͚Ε͹ • σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங • σϓϩΠ • Jenkins, CircleCI,…
43. ࡉʑ͖ͯͨ͠ͷͰ
 ͬ͘͟Γೝࣝ
44. ͬ͘͟Γೝࣝ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ ͦΕͧΕͷࣗಈԽର৅Λݟ௚ͯ͠Έͯɺ
 ͬ͘͟Γͱͨ͠ೝࣝΛݻΊΔɻ
45. ͬ͘͟Γೝࣝ • ϑϩϯτΤϯυ/όοΫΤϯυͰ΍Γ͍ͨ͜ͱ ͸݁ߏࣅ͍ͯΔ • ࢖͏ݴޠ΍πʔϧͷҧ͍͔ΒͦΕͧΕʹൃ ల͍ͯ͠Δ͕ɺຊ࣭తʹ΍Γ͍ͨ͜ͱ͸ಉ ͡ɻ • Πϯϑϥ΋ίʔυͷ࣌୅ • ߏ੒؅ཧπʔϧͰίʔυԽ͢Δ͜ͱͰ࠶ݱ ੑ͕֬อ͞ΕɺࣗಈԽ͕ਐΜͰ͍Δɻ
46. Ϗϧυ ϗοτσϓϩΠ ίϛοτ Ϗϧυ όοΫΤϯυ ϑϩϯτΤϯυ Πϯϑϥ ΦʔτϦϩʔυ ߏจνΣοΫ ։ൃ؀ڥߏங ੩తղੳ ΠϯλϓϦλ ίϯύΠϥ खݩ ։ൃ؀ڥ Ͱಈ࡞֬ೝ
    ςετ࣮ߦ
47. ίϛοτ $* $% ੩తղੳ Ϗϧυ ςετ ຊ൪؀ڥߏங σϓϩΠ ςετ؀ڥߏங
48. ·ͱΊ
49. ·ͱΊ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ
 ͦΕͧΕʹࣗಈԽΛ͢Δٕज़ɾπʔϧ͕͋Δɻ • ԼهͷͨΊʹ΍Δɻ • ҆શ • ࣮֬ • ָΛ͢Δ
50. ·ͱΊ • ݸʑͷٕज़͸ɺ୹͍ඥɻ • ෳ਺ͷٕज़Λܨ͗߹ΘͤͯɺҰຊͷ௕͍ඥʹ ͢Δɻ • ͦͷඥ͕ɺϢʔβʔʹՁ஋ͱͯ͠ಧ͘Α͏ʹɺ ௕͘ଠ͍ͯ͘͜͠͏ɻ • ͦΕ͕ɺʮࣗಈԽʯͷٕज़ɻ
51. ·ͣ͸ • ୹ͯ͘ྑ͍ͷͰඥΛฤΜͰΈΔ • ίϚϯυΛฒ΂ͨεΫϦϓτΛ࡞Δ͜ͱ΋ɺ ཱ೿ͳࣗಈԽɻ • Ձ஋ΛੜΉͨΊʹָΛ͠Α͏! • ָΛ͢ΔͨΊʹ޻෉Λ͠Α͏!
52. ࣗಈԽͷੈք΁Α͏ͦ͜
53. end