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