Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kihara, Takuya

November 09, 2018
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. WebͰࣗಈԽͬͯ
    Ͳ͏͍͏͜ͱ?
    2018/11/09
    @tacck
    ⼤まかに理解する

    ⾃動化の⼊り⼝の話

    View Slide


  2. !UBDDL
    ໊લ
    ࡶͳϑϧελοΫΤϯδχΞ
    ͓࢓ࣄ
    εϓϨουɾΠʔάϧ
    ޷͖ͳϑΟΪϡΞεέʔτͷٕ

    View Slide

  3. ಥવͰ͕͢

    View Slide

  4. Έͳ͞Μ
    ָΛ͍ͨ͠Ͱ͔͢?

    View Slide

  5. Έͳ͞Μ
    ָΛ͍ͨ͠Ͱ͔͢?
    ͍ͨ͠Ͱ͢ΑͶʂ

    View Slide

  6. ָΛͯ͠ྑ͍ΜͰ͔͢?

    View Slide

  7. ָΛͯ͠ྑ͍ΜͰ͔͢?
    ྑ͍ΜͰ͢!!

    View Slide

  8. ָΛ͢ΔͨΊʹ
    ԿΛ஌Δ΂͖͔?

    View Slide

  9. ࠓ೔͓࿩͢͠Δ͜ͱ
    • Web։ൃք۾Ͱฉ͘ʮࣗಈԽʯͱ͸?
    • ࣗಈԽ͢ΔͱԿ͕خ͍͠ͷ͔
    • ۩ମతͳ͓࿩͸ɺଞͷํͷൃදʹظ଴!

    View Slide

  10. ͦ΋ͦ΋࿦
    “Webٕज़” #ͱ͸

    View Slide

  11. Webٕज़ (͜ͷࢿྉͰͷఆٛ)
    ௥Ճ
    Ԡ༻
    WebαΠτ
    WebΞϓϦ(WebγεςϜ)
    WebΞϓϦͷཁૉٕज़ͷൃల
    جຊ

    View Slide

  12. • ੩తϖʔδදࣔ
    • ϒϥ΢βͰදࣔޙʹ

    ϖʔδ಺༰(σʔλ)͕มԽ͠ͳ͍
    WebαΠτ
    جຊ

    View Slide

  13. • ಈతϖʔδදࣔ
    • ϒϥ΢βͰදࣔޙʹ΋

    ϖʔδ಺༰(σʔλ)͕มԽ͢Δ
    ௥Ճ WebΞϓϦ(WebγεςϜ)

    View Slide

  14. ͍͍ͩͨ͜͏͍͏ύλʔϯ
    • ϑΝΠϧ഑ஔͷΈͷ੩తαΠτ
    • όοΫΤϯυͰϖʔδੜ੒͢Δ੩తαΠτ
    • όοΫΤϯυͰϖʔδੜ੒͢ΔಈతαΠτ
    • ϑϩϯτΤϯυʹΑΔಈతαΠτ

    View Slide

  15. ੩తαΠτ ಈతαΠτ
    ϑϩϯτΤϯυ

    ϑΝΠϧ഑ஔͷΈ

    9)3࢖͏λΠϓ
    όοΫΤϯυ

    ݻఆͷϑΝΠϧੜ੒

    ঢ়ଶʹԠͨ͡

    ϑΝΠϧੜ੒

    View Slide

  16. ొ৔ਓ෺
    • HTML/CSS
    • JavaScript
    • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ)
    • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό)
    • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)

    View Slide

  17. ᶃϑΝΠϧ഑ஔͷΈͷ

    ɹ੩తαΠτ
    • HTML/CSS
    • JavaScript (֎෦௨৴ͳ͠)
    • ϛυϧ΢ΣΞ(HTTPαʔό)
    • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)

    View Slide

  18. ᶃϑΝΠϧ഑ஔͷΈͷ

    ɹ੩తαΠτ
    Πϯϑϥ αʔόωοτϫʔΫ

    )5.-$44 +BWB4DSJQU
    )551αʔό
    ϑΝΠϧऔಘ

    View Slide

  19. ᶄόοΫΤϯυͰ

    ɹϖʔδੜ੒͢Δ੩తαΠτ
    • HTML/CSS
    • JavaScript (֎෦௨৴ͳ͠)
    • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ)
    • ϛυϧ΢ΣΞ(HTTPαʔό)
    • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)

    View Slide

  20. ᶄόοΫΤϯυͰ

    ɹϖʔδੜ੒͢Δ੩తαΠτ
    Πϯϑϥ αʔόωοτϫʔΫ

    )551αʔό
    ϒϥ΢β͔Β͸
    ϑΝΠϧऔಘ
    ʹݟ͍͑ͯΔ όοΫΤϯυ
    )5.-$44 +BWB4DSJQU
    όοΫΤϯυͰϑΝΠϧΛੜ੒ͯ͠
    )551αʔό΁౉͢

    View Slide

  21. ᶅόοΫΤϯυͰ

    ɹϖʔδੜ੒͢ΔಈతαΠτ
    • HTML/CSS
    • JavaScript (֎෦௨৴ͳ͠)
    • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ)
    • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό)
    • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)

    View Slide

  22. ᶅόοΫΤϯυͰ

    ɹϖʔδੜ੒͢ΔಈతαΠτ
    Πϯϑϥ αʔόωοτϫʔΫ

    )551αʔό
    ϒϥ΢β͔Β͸
    ϑΝΠϧऔಘ
    ʹݟ͍͑ͯΔ όοΫΤϯυ
    )5.-$44 +BWB4DSJQU
    %#αʔό
    όοΫΤϯυͰϑΝΠϧΛੜ੒ͯ͠
    )551αʔό΁౉͢

    View Slide

  23. ᶆϑϩϯτΤϯυʹΑΔ

    ɹಈతαΠτ
    • HTML/CSS
    • JavaScript (֎෦௨৴͋Γ)
    • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ)
    • ϛυϧ΢ΣΞ(HTTPαʔό/DBαʔό)
    • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)

    View Slide

  24. ᶆϑϩϯτΤϯυʹΑΔ

    ɹಈతαΠτ
    Πϯϑϥ αʔόωοτϫʔΫ

    )551αʔό
    ϒϥ΢β͸
    ϑΝΠϧऔಘͱ
    9)3ʹΑΔσʔλऔಘ
    όοΫΤϯυ
    9)3Λड͚Δ"1*

    )5.-$44
    +BWB4DSJQU
    %#αʔό
    όοΫΤϯυͰ
    σʔλ࡞੒
    +4
    9)3

    View Slide

  25. WebΞϓϦΛ࡞Δʹ͸
    • ࠷ऴతʹɺଟ͘ͷཁૉ͕ඞཁʹͳͬͯ͘Δɻ
    • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ
    ͦΕͧΕ͕ผͷٕज़ཁૉͰ੒Γཱ͍ͬͯΔɻ
    • ࣗಈԽͰ͖ͦ͏?

    View Slide

  26. ੔ཧ͢Δલʹ

    View Slide

  27. ࣗಈԽ #ͱ͸

    View Slide

  28. ࣗಈԽͱ͸
    • ͋Δಛఆͷ࡞ۀ಺༰ɺ࡞ۀखॱΛɺ

    ػց(ίϯϐϡʔλ)ʹ೚ͤΔ͜ͱɻ
    • ਓ͕ؒͰ͖Δ͜ͱ

    (͔ͭɺ܁Γฦ͠΍Δ͜ͱ)Λ

    ίϯϐϡʔλʹ೚ͤΔɻ

    View Slide

  29. • جຊ໘౗ͳ࡞ۀ
    • ಉ͜͡ͱΛେྔʹ܁Γฦ͢
    • ͦͷׂʹؾΛ࢖͏
    • ͦͷ্Ͱؒҧ͑Δ
    • ؒҧ͑ͨ৔߹γϟϨʹͳΒͳ͍
    ਓ͕ؒͰ͖Δ͜ͱΛ೚ͤΔ

    View Slide

  30. ࣗಈԽͯ͠خ͍͜͠ͱ

    View Slide

  31. خ͍͜͠ͱ
    • ఆܕॲཧΛ࣮֬ʹߦͳ͑Δ
    • Ұ୴੒ޭͨ͠Βͣͬͱ੒ޭ
    • ΋ࣦ͠ഊͨ͠ΒʮखॱҎ֎ʯʹ໰୊͕͋Δ
    ͜ͱ͕Θ͔Δ

    View Slide

  32. خ͍͜͠ͱ
    • ָ͕Ͱ͖Δ
    • ৽͍͜͠ͱʹखΛ͚ͭΒΕΔ
    • ػೳ௥Ճɾվળ
    • ৽͍͠αʔϏε

    View Slide

  33. Ͳ͏͍͏͜ͱΛ
    ࣗಈԽͰ͖Δ͔

    View Slide

  34. ࣗಈԽͰ͖Δ͜ͱ
    • ఆܕॲཧ͸͢΂ͯ

    View Slide

  35. ϑϩϯτΤϯυཁૉ
    • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ)
    • ΦʔτϦϩʔυ
    • Lint / Format
    • ςετ
    • σϓϩΠ

    View Slide

  36. ϑϩϯτΤϯυཁૉ
    • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ)
    • Babel, Webpack, …
    • ΦʔτϦϩʔυ
    • Webpack, …
    • Lint / Format
    • ESLint, …
    • ςετ
    • Jest, …
    • σϓϩΠ
    • SCP, …

    View Slide

  37. όοΫΤϯυཁૉ
    • Ϗϧυ (ίϯύΠϧ)
    • ϗοτσϓϩΠ
    • Lint / Format
    • ςετ
    • σϓϩΠ

    View Slide

  38. όοΫΤϯυཁૉ (Java)
    • Ϗϧυ (ίϯύΠϧ)
    • Javac + Gradle, …
    • ϗοτσϓϩΠ
    • IDE + Gradle, …
    • Lint / Format
    • Checkstyle, ..
    • ςετ
    • JUnit, …
    • σϓϩΠ
    • SCP, …

    View Slide

  39. Πϯϑϥཁૉ
    • ߏ੒؅ཧπʔϧ
    • ϗετ(VM)ߏங
    • ϛυϧ΢ΣΞߏங
    • ςετ
    • VM/ίϯςφͷΠϝʔδϏϧυ

    View Slide

  40. Πϯϑϥཁૉ
    • ߏ੒؅ཧπʔϧ
    • ϗετ(VM)ߏங
    • ϛυϧ΢ΣΞߏங
    • Ansible, Chef, …
    • ςετ
    • ServerSpec, …
    • VM/ίϯςφͷΠϝʔδϏϧυ
    • Docker, Packer, …

    View Slide

  41. Ԡ༻
    • CI
    • Git΁ͷίϛοτΛݕ஌ͯ͠ςετ
    • CD
    • ςετͰ໰୊ͳ͚Ε͹
    • σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங
    • σϓϩΠ

    View Slide

  42. Ԡ༻
    • CI
    • Git΁ͷίϛοτΛݕ஌ͯ͠ςετ
    • CD
    • ςετͰ໰୊ͳ͚Ε͹
    • σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங
    • σϓϩΠ
    • Jenkins, CircleCI,…

    View Slide

  43. ࡉʑ͖ͯͨ͠ͷͰ

    ͬ͘͟Γೝࣝ

    View Slide

  44. ͬ͘͟Γೝࣝ
    • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ
    ͦΕͧΕͷࣗಈԽର৅Λݟ௚ͯ͠Έͯɺ

    ͬ͘͟Γͱͨ͠ೝࣝΛݻΊΔɻ

    View Slide

  45. ͬ͘͟Γೝࣝ
    • ϑϩϯτΤϯυ/όοΫΤϯυͰ΍Γ͍ͨ͜ͱ
    ͸݁ߏࣅ͍ͯΔ
    • ࢖͏ݴޠ΍πʔϧͷҧ͍͔ΒͦΕͧΕʹൃ
    ల͍ͯ͠Δ͕ɺຊ࣭తʹ΍Γ͍ͨ͜ͱ͸ಉ
    ͡ɻ
    • Πϯϑϥ΋ίʔυͷ࣌୅
    • ߏ੒؅ཧπʔϧͰίʔυԽ͢Δ͜ͱͰ࠶ݱ
    ੑ͕֬อ͞ΕɺࣗಈԽ͕ਐΜͰ͍Δɻ

    View Slide

  46. Ϗϧυ
    ϗοτσϓϩΠ
    ίϛοτ
    Ϗϧυ
    όοΫΤϯυ
    ϑϩϯτΤϯυ Πϯϑϥ
    ΦʔτϦϩʔυ
    ߏจνΣοΫ
    ։ൃ؀ڥߏங
    ੩తղੳ
    ΠϯλϓϦλ
    ίϯύΠϥ
    खݩ ։ൃ؀ڥ
    Ͱಈ࡞֬ೝ
    ςετ࣮ߦ

    View Slide

  47. ίϛοτ
    $*
    $%
    ੩తղੳ
    Ϗϧυ
    ςετ ຊ൪؀ڥߏங
    σϓϩΠ
    ςετ؀ڥߏங

    View Slide

  48. ·ͱΊ

    View Slide

  49. ·ͱΊ
    • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ

    ͦΕͧΕʹࣗಈԽΛ͢Δٕज़ɾπʔϧ͕͋Δɻ
    • ԼهͷͨΊʹ΍Δɻ
    • ҆શ
    • ࣮֬
    • ָΛ͢Δ

    View Slide

  50. ·ͱΊ
    • ݸʑͷٕज़͸ɺ୹͍ඥɻ
    • ෳ਺ͷٕज़Λܨ͗߹ΘͤͯɺҰຊͷ௕͍ඥʹ
    ͢Δɻ
    • ͦͷඥ͕ɺϢʔβʔʹՁ஋ͱͯ͠ಧ͘Α͏ʹɺ
    ௕͘ଠ͍ͯ͘͜͠͏ɻ
    • ͦΕ͕ɺʮࣗಈԽʯͷٕज़ɻ

    View Slide

  51. ·ͣ͸
    • ୹ͯ͘ྑ͍ͷͰඥΛฤΜͰΈΔ
    • ίϚϯυΛฒ΂ͨεΫϦϓτΛ࡞Δ͜ͱ΋ɺ
    ཱ೿ͳࣗಈԽɻ
    • Ձ஋ΛੜΉͨΊʹָΛ͠Α͏!
    • ָΛ͢ΔͨΊʹ޻෉Λ͠Α͏!

    View Slide

  52. ࣗಈԽͷੈք΁Α͏ͦ͜

    View Slide

  53. end

    View Slide