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

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

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

November 09, 2018
Tweet

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