Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webで自動化って どういうこと? - 大まかに理解する 自動化の入り口の話
Kihara, Takuya
November 09, 2018
Technology
1
210
Webで自動化って どういうこと? - 大まかに理解する 自動化の入り口の話
Webで自動化って どういうこと? - 大まかに理解する 自動化の入り口の話
Kihara, Takuya
November 09, 2018
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
ゆるWeb勉強会@札幌 OnLine #18 #ゆるWeb札幌
tacck
0
110
AWS Amplify でホスティングしよう #ゆるWeb札幌
tacck
0
46
AWS Amplify と AWS CDK の良い関係 #awsbasics #AWSAmplifyJP
tacck
1
710
ゆるWeb勉強会@札幌 OnLine #17 #ゆるWeb札幌
tacck
0
47
Twitter の OAuth 2.0 を使ってみた #ゆるWeb札幌
tacck
0
92
ゆるWeb勉強会@札幌 OnLine #16 #ゆるWeb札幌
tacck
0
64
Create your "personal" products with AWS Amplify #jawsug #jawspankration #jawspankration2021
tacck
1
86
ゆるWeb勉強会@札幌 OnLine #15 #ゆるWeb札幌
tacck
0
230
AWS CDK を触ってみた話 #ゆるWeb札幌
tacck
0
89
Other Decks in Technology
See All in Technology
LIFF Deep Dive 2022
line_developers
PRO
1
810
Agile and Requirement : アジャイルな要件定義について考える
kawaguti
PRO
11
3.7k
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
4k
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
220
20220523_akibaaws-online-08-s3
hiashisan
0
110
統計学と機械学習の違いと接点とは?
ueniki
0
250
Kubernetesでハマるメタバースとエッジで夢見る世界観
yudaiono
0
130
Kubernetesの上に作る、統一されたマイクロサービス運用体験
tkuchiki
1
1.4k
Unity Package Managerで自作パッケージを配布する方法
yunoda
0
270
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
3.8k
新規ゲームのリリース(開発)前からのSRE活動
tmkoikee
1
660
STORES・STORES レジを支えるチーム開発文化 / Sustaining the team culture of STORES EC Regi
phayacell
0
110
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
85
3.9k
Building Your Own Lightsaber
phodgson
94
4.6k
Docker and Python
trallard
27
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Web development in the modern age
philhawksworth
197
9.3k
Designing for Performance
lara
596
63k
Teambox: Starting and Learning
jrom
121
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
What the flash - Photography Introduction
edds
61
10k
Transcript
WebͰࣗಈԽͬͯ Ͳ͏͍͏͜ͱ? 2018/11/09 @tacck ⼤まかに理解する ⾃動化の⼊り⼝の話
୭ !UBDDL ໊લ ࡶͳϑϧελοΫΤϯδχΞ ͓ࣄ εϓϨουɾΠʔάϧ ͖ͳϑΟΪϡΞεέʔτͷٕ
ಥવͰ͕͢
Έͳ͞Μ ָΛ͍ͨ͠Ͱ͔͢?
Έͳ͞Μ ָΛ͍ͨ͠Ͱ͔͢? ͍ͨ͠Ͱ͢ΑͶʂ
ָΛͯ͠ྑ͍ΜͰ͔͢?
ָΛͯ͠ྑ͍ΜͰ͔͢? ྑ͍ΜͰ͢!!
ָΛ͢ΔͨΊʹ ԿΛΔ͖͔?
ࠓ͓͢͠Δ͜ͱ • Web։ൃք۾Ͱฉ͘ʮࣗಈԽʯͱ? • ࣗಈԽ͢ΔͱԿ͕خ͍͠ͷ͔ • ۩ମతͳ͓ɺଞͷํͷൃදʹظ!
ͦͦ “Webٕज़” #ͱ
Webٕज़ (͜ͷࢿྉͰͷఆٛ) Ճ Ԡ༻ WebαΠτ WebΞϓϦ(WebγεςϜ) WebΞϓϦͷཁૉٕज़ͷൃల جຊ
• ੩తϖʔδදࣔ • ϒϥβͰදࣔޙʹ ϖʔδ༰(σʔλ)͕มԽ͠ͳ͍ WebαΠτ جຊ
• ಈతϖʔδදࣔ • ϒϥβͰදࣔޙʹ ϖʔδ༰(σʔλ)͕มԽ͢Δ Ճ WebΞϓϦ(WebγεςϜ)
͍͍ͩͨ͜͏͍͏ύλʔϯ • ϑΝΠϧஔͷΈͷ੩తαΠτ • όοΫΤϯυͰϖʔδੜ͢Δ੩తαΠτ • όοΫΤϯυͰϖʔδੜ͢ΔಈతαΠτ • ϑϩϯτΤϯυʹΑΔಈతαΠτ
੩తαΠτ ಈతαΠτ ϑϩϯτΤϯυ ᶃ ϑΝΠϧஔͷΈ ᶆ 9)3͏λΠϓ όοΫΤϯυ ᶄ ݻఆͷϑΝΠϧੜ
ᶅ ঢ়ଶʹԠͨ͡ ϑΝΠϧੜ
ొਓ • HTML/CSS • JavaScript • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) • ϛυϧΣΞ(HTTPαʔό/DBαʔό) •
Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
ᶃϑΝΠϧஔͷΈͷ ɹ੩తαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • ϛυϧΣΞ(HTTPαʔό) •
Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
ᶃϑΝΠϧஔͷΈͷ ɹ੩తαΠτ Πϯϑϥ αʔόωοτϫʔΫ )5.-$44 +BWB4DSJQU )551αʔό ϑΝΠϧऔಘ
ᶄόοΫΤϯυͰ ɹϖʔδੜ͢Δ੩తαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) •
ϛυϧΣΞ(HTTPαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
ᶄόοΫΤϯυͰ ɹϖʔδੜ͢Δ੩తαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥβ͔Β ϑΝΠϧऔಘ ʹݟ͍͑ͯΔ όοΫΤϯυ )5.-$44
+BWB4DSJQU όοΫΤϯυͰϑΝΠϧΛੜͯ͠ )551αʔό͢
ᶅόοΫΤϯυͰ ɹϖʔδੜ͢ΔಈతαΠτ • HTML/CSS • JavaScript (֎෦௨৴ͳ͠) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) •
ϛυϧΣΞ(HTTPαʔό/DBαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
ᶅόοΫΤϯυͰ ɹϖʔδੜ͢ΔಈతαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥβ͔Β ϑΝΠϧऔಘ ʹݟ͍͑ͯΔ όοΫΤϯυ )5.-$44
+BWB4DSJQU %#αʔό όοΫΤϯυͰϑΝΠϧΛੜͯ͠ )551αʔό͢
ᶆϑϩϯτΤϯυʹΑΔ ɹಈతαΠτ • HTML/CSS • JavaScript (֎෦௨৴͋Γ) • όοΫΤϯυ(ݴޠ/ϑϨʔϜϫʔΫ) •
ϛυϧΣΞ(HTTPαʔό/DBαʔό) • Πϯϑϥ(Ϛγϯ/ωοτϫʔΫ)
ᶆϑϩϯτΤϯυʹΑΔ ɹಈతαΠτ Πϯϑϥ αʔόωοτϫʔΫ )551αʔό ϒϥβ ϑΝΠϧऔಘͱ 9)3ʹΑΔσʔλऔಘ όοΫΤϯυ 9)3Λड͚Δ"1*
)5.-$44 +BWB4DSJQU %#αʔό όοΫΤϯυͰ σʔλ࡞ +4 9)3
WebΞϓϦΛ࡞Δʹ • ࠷ऴతʹɺଟ͘ͷཁૉ͕ඞཁʹͳͬͯ͘Δɻ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ ͦΕͧΕ͕ผͷٕज़ཁૉͰΓཱ͍ͬͯΔɻ • ࣗಈԽͰ͖ͦ͏?
ཧ͢Δલʹ
ࣗಈԽ #ͱ
ࣗಈԽͱ • ͋Δಛఆͷ࡞ۀ༰ɺ࡞ۀखॱΛɺ ػց(ίϯϐϡʔλ)ʹͤΔ͜ͱɻ • ਓ͕ؒͰ͖Δ͜ͱ (͔ͭɺ܁Γฦ͠Δ͜ͱ)Λ ίϯϐϡʔλʹͤΔɻ
• جຊ໘ͳ࡞ۀ • ಉ͜͡ͱΛେྔʹ܁Γฦ͢ • ͦͷׂʹؾΛ͏ • ͦͷ্Ͱؒҧ͑Δ • ؒҧ͑ͨ߹γϟϨʹͳΒͳ͍
ਓ͕ؒͰ͖Δ͜ͱΛͤΔ
ࣗಈԽͯ͠خ͍͜͠ͱ
خ͍͜͠ͱ • ఆܕॲཧΛ࣮֬ʹߦͳ͑Δ • Ұ୴ޭͨ͠Βͣͬͱޭ • ࣦ͠ഊͨ͠ΒʮखॱҎ֎ʯʹ͕͋Δ ͜ͱ͕Θ͔Δ
خ͍͜͠ͱ • ָ͕Ͱ͖Δ • ৽͍͜͠ͱʹखΛ͚ͭΒΕΔ • ػೳՃɾվળ • ৽͍͠αʔϏε
Ͳ͏͍͏͜ͱΛ ࣗಈԽͰ͖Δ͔
ࣗಈԽͰ͖Δ͜ͱ • ఆܕॲཧͯ͢
ϑϩϯτΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ) • ΦʔτϦϩʔυ • Lint
/ Format • ςετ • σϓϩΠ
ϑϩϯτΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ / τϥϯεύΠϧ) • Babel, Webpack, …
• ΦʔτϦϩʔυ • Webpack, … • Lint / Format • ESLint, … • ςετ • Jest, … • σϓϩΠ • SCP, …
όοΫΤϯυཁૉ • Ϗϧυ (ίϯύΠϧ) • ϗοτσϓϩΠ • Lint / Format
• ςετ • σϓϩΠ
όοΫΤϯυཁૉ (Java) • Ϗϧυ (ίϯύΠϧ) • Javac + Gradle, …
• ϗοτσϓϩΠ • IDE + Gradle, … • Lint / Format • Checkstyle, .. • ςετ • JUnit, … • σϓϩΠ • SCP, …
Πϯϑϥཁૉ • ߏཧπʔϧ • ϗετ(VM)ߏங • ϛυϧΣΞߏங • ςετ •
VM/ίϯςφͷΠϝʔδϏϧυ
Πϯϑϥཁૉ • ߏཧπʔϧ • ϗετ(VM)ߏங • ϛυϧΣΞߏங • Ansible, Chef,
… • ςετ • ServerSpec, … • VM/ίϯςφͷΠϝʔδϏϧυ • Docker, Packer, …
Ԡ༻ • CI • GitͷίϛοτΛݕͯ͠ςετ • CD • ςετͰͳ͚Ε •
σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங • σϓϩΠ
Ԡ༻ • CI • GitͷίϛοτΛݕͯ͠ςετ • CD • ςετͰͳ͚Ε •
σϓϩΠͷͨΊʹΠϯϑϥΛࣗಈߏங • σϓϩΠ • Jenkins, CircleCI,…
ࡉʑ͖ͯͨ͠ͷͰ ͬ͘͟Γೝࣝ
ͬ͘͟Γೝࣝ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ ͦΕͧΕͷࣗಈԽରΛݟͯ͠Έͯɺ ͬ͘͟Γͱͨ͠ೝࣝΛݻΊΔɻ
ͬ͘͟Γೝࣝ • ϑϩϯτΤϯυ/όοΫΤϯυͰΓ͍ͨ͜ͱ ݁ߏࣅ͍ͯΔ • ͏ݴޠπʔϧͷҧ͍͔ΒͦΕͧΕʹൃ ల͍ͯ͠Δ͕ɺຊ࣭తʹΓ͍ͨ͜ͱಉ ͡ɻ • Πϯϑϥίʔυͷ࣌
• ߏཧπʔϧͰίʔυԽ͢Δ͜ͱͰ࠶ݱ ੑ͕֬อ͞ΕɺࣗಈԽ͕ਐΜͰ͍Δɻ
Ϗϧυ ϗοτσϓϩΠ ίϛοτ Ϗϧυ όοΫΤϯυ ϑϩϯτΤϯυ Πϯϑϥ ΦʔτϦϩʔυ ߏจνΣοΫ ։ൃڥߏங
੩తղੳ ΠϯλϓϦλ ίϯύΠϥ खݩ ։ൃڥ Ͱಈ࡞֬ೝ ςετ࣮ߦ
ίϛοτ $* $% ੩తղੳ Ϗϧυ ςετ ຊ൪ڥߏங σϓϩΠ ςετڥߏங
·ͱΊ
·ͱΊ • ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺ ͦΕͧΕʹࣗಈԽΛ͢Δٕज़ɾπʔϧ͕͋Δɻ • ԼهͷͨΊʹΔɻ • ҆શ • ࣮֬
• ָΛ͢Δ
·ͱΊ • ݸʑͷٕज़ɺ͍ඥɻ • ෳͷٕज़Λܨ͗߹ΘͤͯɺҰຊͷ͍ඥʹ ͢Δɻ • ͦͷඥ͕ɺϢʔβʔʹՁͱͯ͠ಧ͘Α͏ʹɺ ͘ଠ͍ͯ͘͜͠͏ɻ •
ͦΕ͕ɺʮࣗಈԽʯͷٕज़ɻ
·ͣ • ͯ͘ྑ͍ͷͰඥΛฤΜͰΈΔ • ίϚϯυΛฒͨεΫϦϓτΛ࡞Δ͜ͱɺ ཱͳࣗಈԽɻ • ՁΛੜΉͨΊʹָΛ͠Α͏! • ָΛ͢ΔͨΊʹΛ͠Α͏!
ࣗಈԽͷੈքΑ͏ͦ͜
end