Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making mock-up in web application
Search
Kusamao Abe
August 07, 2018
Programming
0
94
Making mock-up in web application
Kusamao Abe
August 07, 2018
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
500
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
250
Keep a distance from jQuery
kusamao
0
130
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
アセットのコンパイルについて
ojun9
0
130
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
Rancher と Terraform
fufuhu
2
460
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
230
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
Deep Dive into Kotlin Flow
jmatsu
1
340
Navigating Dependency Injection with Metro
zacsweers
3
960
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
testingを眺める
matumoto
1
140
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
rage against annotate_predecessor
junk0612
0
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cult of Friendly URLs
andyhume
79
6.6k
Navigating Team Friction
lara
189
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Docker and Python
trallard
45
3.6k
Building an army of robots
kneath
306
46k
Designing Experiences People Love
moore
142
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Fireside Chat
paigeccino
39
3.6k
Bash Introduction
62gerente
615
210k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Documentation Writing (for coders)
carmenintech
74
5k
Transcript
ϞοΫΞοϓɺ Ͳ͏ӡ༻͢Δʁ 2018/08/04 JAM plus #02 at tambourine commune
҆෦ຑੜ Kusamao Abe גࣜձࣾλϯόϦϯ ʢtambourine.incʣ ɾςΫχΧϧσΟϨΫλʔ ɾWebΤϯδχΞ
JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScript API MarkUpΒ͍͠ w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏ͭ ϑϩϯτΤϯυΛࢦ͢Β͍͠ w
plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ w ϩΰͱ͔΄͍͠ؾ͕͢Δ
Web੍࡞ʹ͓͚ΔϚʔΫΞοϓ ϫΠϠʔϑϨʔϜ σβΠϯΧϯϓ࡞ ϚʔΫΞοϓ WebαΠτ੍࡞ WebΞϓϦέʔγϣϯ੍࡞ σβΠϯΧϯϓ࡞ ϚʔΫΞοϓ γεςϜઃܭ ϓϩάϥϛϯά
ςετ ཁ݅ఆٛ ϫΠϠʔϑϨʔϜ
ϞοΫΞοϓΛ࡞Δ w ϞοΫΞοϓʢmock-upʣɿ࣮ͱಉ͡େ͖͞ʹ࡞ͬͨܕɻݪੇܕɻ w ਫ਼៛ͳܕΛ࡞Δ͜ͱͰɺ࣮ࡍʹ࣮ͯ͠Έͯग़ͯ͘ΔΛ௵ͨ͠Γɺ ࣮ݱՄೳੑΛνΣοΫͨ͠Γ w ITۀքͰଞͷ࡞ۀϓϩηεʹґଘͤͣʹ੍࡞ΛਐΊ͓͍ͯͯɺޙ͔Βଞ ͷϓϩηεͱΈ߹ΘͤΔ͜ͱ
ଞͷۀքͰ w ۙͳͱ͜ΖͰ͍͑ܞଳిɾεϚʔτϑΥϯͷళ಄ϞοΫΞοϓ w ݐஙۀքͰɺઃܭਤͲ͓Γʹ࡞ΕΔ͔ΛνΣοΫͨ͠Γ w ߤۭػͳͲͰ
5IF(PMEFO)BOETPG7BO$MFFG"SQFMTc:BU[FS IUUQTXXXZBU[FSDPNHPMEFOIBOETWBODMFFGBSQFMT l5IFNPDLVQTUVEJP "GUFSUIFESBXJOHSPPN UIFKFXFMEFTJHONBLFTJUTXBZUPUIFNPLF VQXPSLTIPQ XIFSFFYQFSJFODFENPDLVQNBLFSTDSFBUFBNPDLVQPG UIFKFXFMVTJOHQFXUFSBOETUSBTTDSZTUBMT SIJOFTUPOFT 5IJTJTBO
JNQPSUBOUQIBTFJOUIFEFTJHOQSPDFTT CFDBVTFUIFEFTJHOFSDBOTFF IJTIFSESBXJOHDPNFUPMJGFXJUIPVUXBTUJOHQSFDJPVTNBUFSJBMT BOE UIFKFXFMMFSTDBOUFTUUIFXFJHIU NPWFNFOUBOETIBQFPGBKFXFM CFGPSFUIFZTUBSUXPSLJOHPOUIFSFBMQJFDF7BO$MFFG"SQFMTJT QFSIBQTUIFPOMZKFXFMMFSZIPVTFJOUIFXPSMEUIBUQSPWJEFTJUTUFBN XJUIUIFMVYVSZPGBNPDLVQNBLJOHTUVEJP UIVTFOIBODJOHUIF DPNNVOJDBUJPOCFUXFFOEFTJHOFSTBOEKFXFMMFSTBOEBMMPXJOHSPPNGPS UFTUJOHBOEDSFBUJWFFYQFSJNFOUBUJPOz
WebΞϓϦέʔγϣϯͱϞοΫ w σβΠϯΧϯϓ͚ͩͰೖग़ྗͷΠϯλϥΫγϣϯ੍࡞ύλʔϯͷཏ ͕Ή͔͍ͣ͠ w ϓϩτλΠϐϯάπʔϧͷ಄ͰɺͲ͏ಈ͖͔͘ͱ͍͏ͷ͕࡞Γ͢ ͘ͳ͖ͬͯͨ w ϚʔΫΞοϓ࣌Ͱͦͷύλʔϯɺ͍ΔΑͶʁ w
όοΫΤϯυଆͷϩδοΫ͕Ͱ͖ͯͳͯ͘ਐΊ͓͖͍ͯͨΑͶ
ྫ Aʮ͜Εهࣄͳ͍ͱ͖ͷύλʔϯͲ͏͢Ε ͍͍Ͱ͔͢ʁʯ Bʮ͋ͬɺͲ͏͠Α͔ͬʙʯ
࣮Ҋ݅ͱϞοΫΞοϓ 01
ECαΠτ w ཧը໘আ͍ͯύλʔϯ΄Ͳͷը໘͕ඞཁ w PC൛ͷΈͷ੍࡞ͰOK • αʔόαΠυΞϓϦέʔγϣϯ
w ϚʔΫΞοϓͱViewͷΈࠐΈɾ࣮୲ऀ͕ผ w σβΠφʔ͕ுΓ͍͍ͯΔҊ݅Ͱͳ͔ͬͨʢνͰΑ͋͘Δʣ w ը໘ઃܭˠσβΠϯˠϚʔΫΞοϓ w جຊઃܭˠৄࡉઃܭˠ࣮ɹͷ͕ͭฒߦՔಇ w σβΠφʔɿɹϑϩϯτΤϯυɿɹόοΫΤϯυɿ͍ͬͺ͍
ˠσβΠφʔ͕ΧϯϓΛߋ৽͚ͭͮ͠ΔΘ͚Ͱͳ͍ ˠʢ݁ՌతʹʣσβΠφʔ͕ϓϩδΣΫτ్தͰୀ৬
ํ w ࣮͠ऴ͑Δ·ͰϞοΫΞοϓΛʮਖ਼ʯͱͯ͠νΣοΫ w ͍ͭͰ୭Ͱ֬ೝͰ͖ΔΑ͏ʹɺϞοΫΞοϓͷΠϯελϯεΛཱͯΔ w ˠϞοΫΞοϓΛΞϓϦέʔγϣϯͱผͷϦϙδτϦʹ w ݁Ռతʹผʹ͖ͩͬͨ͢ͷ͔͕͋Δʢࣗͷͳ͔Ͱʣ
ߏ w ຊମLaravel • pug w SCSS autoprefixer • gulp
QVH w extend͠·ͬͨ͘ΒϏϧυ͕࣌ؒͲΜͲ͜૿͑Δ w ։ൃ࣌expressmiddlewareͰϦΫΤετ͕དྷͨͷΛ HTMLʹͯ͠ฦͯ͠ɺඞཁͳͱ͖͚ͩϏϧυ͢ΔΑ͏ʹมߋ w svgΛinlineͰຒΊࠐΉͷʹinclude͍·ͬͨ͘Βݟ௨͠ྑ͘ͳͬͨ͠ ϦΫΤετݮͬͨΜ͕ͩHTML͕ϋνϟϝνϟͳݟ௨͠ʹ w
ͳΜ͔ͩΜͩهड़͕গͳ͍ͷͱςϯϓϨʔτϔϧύ͕ଟ͍ͷָ
$44 w {{pageName}}--{{blockName}}__{{modifierName}} ͰCSSηϨΫλΛ౷Ұͯ͠ɺϖʔδ͝ͱʹݻ༗ͷηϨΫλʹ w mixinΛͬͯ෦తʹಉ͡ελΠϧΛཧ ʢ͜ͷ͋ͨΓͷઃܭ·͍͔͍ͨͭͨ͠Ͱ͢Ͷʣ w ΊΜͲ͏ͳͷͰશ෦ϑΝΠϧʹͨ͠ɺkB͘Β͍͋Δʜ w
ECSSͱ͔FLOCSSͱ͔ʹணΛಘͯຐվͨ͠
ผϦϙδτϦʹͯ͠Ͳ͏ͩͬͨʁ w CSSΛ࠷৽masterͷঢ়ଶͰຖϏϧυͯ͠ΞϓϦέʔγϣϯʹ͍࣋ͬͯ͘ ͷ͕compressedͳͷͰ͕ࠩ͋ͬͯΔ͔Θ͔Βͳ͍ w खݩͰϏϧυͨ͠ͱ͖ʹ͏͔ͬΓmaster͕࠷৽͡Όͳ͍ͱσάϨ͢Δ w ͭ·ΓσάϨͨ͠ͱ͍͏͜ͱͰ͢ w ֤͕ࣗΞϓϦέʔγϣϯͷڥߏஙΛ͠ͳͯ͘मਖ਼ରԠ͓ͯ͠٬͞Μɾ
σΟϨΫλʔʹ֬ೝͯ͠Β͑Δͷָͩͬͨ
ਖ਼ϦϙδτϦͭʹ͍ͨ͠
w Ξηοτʹશ෦ೖΕ͓͍ͯͯɺDocumentRootΛΓସ͑ͯσϓϩΠͰ͖ ͨΒϦϙδτϦͭͰΠϯελϯεผʹͰ͖ΔͷͰʁ w HerokuͰProcfileΛͲ͏ʹ͔͢ΕͰ͖ͦ͏ʂ
࣮Ҋ݅ͱϞοΫΞοϓ 02
ϚΠϖʔδܥWebΞϓϦ w ݩϚΠϖʔδͷͳ͍WordPressαΠτ w Ծొˠຊొˠొใͷมߋ͕Ͱ͖ΔܥͷWebΞϓϦʹϦχϡʔΞϧ w ϚΠϖʔδ֎ʹίϯςϯπ͕͋Δ w ϦχϡʔΞϧલ͔ΒϞοΫΞοϓϦϙδτϦ͕ผͰଘࡏ w
ը໘ऑʢશ෦1$41ผͳͷͰ࣮࣭ʣˠϦχϡʔΞϧͰഒ͘Β͍ w ్ͬͪ͜தͰσβΠφʔୀ৬ˠผͷύʔτφʔ͞ΜʹҾ͖ܧ͗
ํ w ϦϙδτϦΛ౷Ұͯ͠ΈΑ͏ w ಉ͡ιʔεϕʔεͷGitϦϙδτϦ͔ΒɺϞοΫڥɾεςʔδϯάΛͦ ΕͧΕHerokuͰσϓϩΠ͍ͨ͠ʢReview Appsʣ w Review AppsɿPull
Request͝ͱʹΠϯελϯε্ཱ͕͕ͪΔ w ຊ൪AWS EC2
ߏ w ຊମLaravel • ejs w SCSS autoprefixer • gulp
FKT w extend͕ͳ͍ͱ͜ΜͳʹͭΒ͍ͷ͔ʂ w <%= %>ɺJISྻͩͱΊͬͪΌଧͪͮΒ͍ؾ͕͢Δ w ػೳ໘Ͱ͍͏ͱੵۃతʹ࠾༻͢Δཧ༝͋Μ·Γͳͦ͞͏ ʢҊ݅։࢝ॳʹ͓ئ͍ͨ͠ϚʔΫΞοϓͷํ͕pugͬͯͳ͔ͬͨʣ
ϦϙδτϦΛ·ͱΊΔ w ejsςϯϓϨʔτΛSFTPVSDFTBTTFUTUFNQMBUFTʹ w SCSSΛSFTPVSDFTBTTFUTTUZMFTIFFUTʹ w ຊ൪༻ϏϧυQVCMJDDTTʹ w ϞοΫΞοϓ༻ʹผͷDocRootͱͯ͠NPDLΛ࡞ w
ը૾ͱ͔શ෦QVCMJD͔ΒNPDLʹίϐʔ͢ΔλεΫΛHVMQͰ࡞ w DocRootڥมͰΓସ͑Δ ʢࢀߟɿIUUQTRJJUBDPNVTLJUFNTFDGFʣ
Heroku Pipeline w develop / staging / productionͷͲ͜ʹAppΠϯελϯεΛஔͯ͠Ͳ͜ʹίʔ υΛద༻͢Δ͔Λ੍ޚͰ͖Δ w
Review AppsΛͬͯɺ Pull Request͕͋ͬͨΒdevelopʹରԠ͢ΔAppΠϯελϯεΛࣗಈͰཱͯ masterʹpush͞ΕͨΒstagingͷAppʹࣗಈσϓϩΠ productionʹखಈͰϘλϯԡͯ͠promoteͤ͞ΔΈ͍ͨͳ͍ํ w ผͷMeetupͰ͠ΌͬͨͷͰࢀߟ·Ͱʹ IUUQTTQFBLFSEFDLDPNLVTBNBPVTJOHIFSPLVPOFOUSVTUFEEFWFMPQNFOU
Review Apps w Review AppsͰʮϞοΫͷPull Requestʯͱʮ௨ৗͷPull RequestʯΛݟ ͚ͯڥมΛΓସ͑ΒΕͳ͍ w ͭ·ΓɺͻͱͭͷPipeline͔ΒͷReview
AppsϞοΫ༻͔௨ৗͷ։ൃ ༻Ͳ͔ͬͪʹ͔͠ద༻Ͱ͖ͳ͍ w ࠓߋ͚ͩͲɺPipelineΛ͚Ε͜Μͳ͜ͱඞཁͳ͔ͬͨ ʢ͜Εॻ͍ͯΔͱ͖·Ͱؾ͕͔ͳ͔ͬͨʣ
։ൃதʙӡ༻ w ։ൃॳظ w ࠷ॳϞοΫ͕Review AppsͰ࡞͞ΕΔΑ͏ʹ͍ͯͨ͠ w ·ͩΞϓϦଆ΄ͱΜͲ৮ͬͯͳ͍ঢ়ଶ w ։ൃޙظ
w ΞϓϦଆΛReview AppsͰදࣔ͞ΕΔΑ͏ʹมߋ w ͋ͱ͔Βݟͨͷௐ͕͋ͬͯͪΐ͍ͪΐ͍Ϛʔδ͔ͯ͠ΒνΣοΫͯͨ͠ w Ϗϧυͨ͠CSSΛ࣋ͬͯ͜ͳ͍͍ͯ͘ͷ͔ͳΓָʢCSS͕ͦͦϑΝΠϧଟ͍ʣ
ϦϦʔεޙ w ϚΠϖʔδ͕ϩʔΧϧͰ֬ೝͰ͖ͳ͍ਓ͕͍ͨ w ϞοΫΛಉ͡ςϯϓϨʔτߏʹ͓͍ͯͯ͠ɺ࣮ࡍͷಈ࡞Λ֬ೝͰ͖ ͳ͍ͷͭΒ͍ w ϞοΫΛ࠷৽ʹอ͓ͬͯ͜͏ͱ͢ΔͱPull Request͕ ͱ͔ʹ
ͳͬͯϨϏϡϫʔ͕ԕ͍Λ͢Δ
Θ͔͖ͬͯͨͧ
ΈΜͳͰ҆શʹ։ൃ͢Δ ͦͦσβΠϯΧϯϓɾϓϩτλΠϓΛߋ৽͠ͳ͍ͱӡ༻͕ͭΒ͍ ͠σβΠϯΧϯϓΛߋ৽͠ͳ͍ͷͩͱͨ͠ΒɺϩʔΧϧϦϞʔτͰ ୭Ͱ֬ೝͰ͖ΔΑ͏ʹ͓͍ͯͯ͠ɺ؆୯ʹࢼͤΔΑ͏ʹ͓ͯ͘͠ ϑΝΠϧΛίϐʔͯ͠ผͷϦϙδτϦʹ͍࣋ͬͯ͘ͷ͏ΊΑ͏ ϞοΫΞοϓͱ࠷ऴతͳςϯϓϨʔτͷॻ͖ํ͕ҧ͏ͷεΠονϯά
ίετ͔͔Δ͠ϛε૿͑Δ
ελΠϧΨΠυͱϞοΫΞοϓ w ελΠϧΨΠυ͋ΔͳΒଟલఏ͕͍Ζ͍Ζҧ͏ w ͦͦΨΠυ͕มΘΔͷେৎͳͷ͔ͱ͍͏ͷͱ͔͘ɺมߋͷ өͱ͔ߟ͑ΔͱΠϯελϯεཱ͕ͬͯͯಉ͡ιʔεϕʔε͡Όͳ͍ͱݫ͠ ͦ͏ w ελΠϧΨΠυ͋ΕϞοΫΞοϓ͕͍Βͳ͍ͷ͔Ͳ͏͔ɺ͍Βͳ͍ؾ ͢Δʢͬͨ͜ͱͳ͍͔Βڭ͑ͯ͘Εʂʂʂʂʣ
͜Ε͔Βͷํ w ϞοΫΞοϓΛͲ͜·Ͱอ͓͔࣋ͯ͘͠ΛઌʹΑ͘ߟ͑Δ w ͳ͋ͳ͋Ͱӡ༻͠ͳ͍ w ελʔτͨ͠Βଟ͍Βͳ͍ͣ w ͠ӡ༻͢ΔͳΒɺϦϙδτϦͭʹ͍ͨ͠ʢҊ݅ʹΑΔ͕ʣ w
Ͱ͖ΕΞϓϦͰ͏ςϯϓϨʔτΤϯδϯͰ࡞ͬͨ΄͏͕͍͍
ͨͱ͑LaravelͳΒ w ࠷ॳ͔ΒbladeͰॻ͘ w ίʔσΟϯά୲ͷͻͱʹLaravelΛଟগ͕ΜͬͯΒ͏ඞཁ͕͋Δ w Ͱͦͷޙͷमਖ਼ͱ͔͍͢͠ͷͰ w Γ୭ͷڥͰಈ͘։ൃڥis preciousʜ
ͨͱ͑LaravelͳΒ w ڥมͰproductionҎ֎ ͷͱ͖ʹಈ͘ϞοΫ༻ͷϧʔ τΛ࡞͓ͬͯ͘ w ˠDocRootΓସ͑ͳ͘ ͍͍ͯʂ w ˠgulpͱ͔Θͣʹ
laravel-mix͚ͩͰ͍͍ʁ
ͱ͜ΖͰͲ͏͍͏ ۀͯ͠·͔͢
w σβΠφʔϚʔΫΞοϓ͢Δʁ͠ͳ͍ʁ w ϑϩϯτΤϯυΤϯδχΞViewͷΈࠐΈ͢Δʁ͠ͳ͍ʁ w όοΫΤϯυΤϯδχΞCSS৮Δʁ৮Βͳ͍ʁʢ৮Γͨ͘ͳ͍ʁʣ w ͦͦϑϩϯτΤϯυͱ͔όοΫΤϯυͱ͔͠ΌΒͤ͑͘ʁ ΦϨ͕શ෦ͬͯΔͥʁ
41"ͩͬͨΒʁ w ݸਓతʹ࠷ॳ͔ΒΨϦΨϦॻ͍ͨ΄͏ָ͕ w ͱ͍͑ɺ͢Ͱʹͬͨ͜ͱ͕͋Δ͔Βͳͷ͔ w σβΠφʔ͞Μ͕ίʔυॻ͘ͳΒ࡞Δ͔͠Εͳ͍ʜʜʁ
ͬ͘͟Γ·ͱΊΔͱ w ΞϓϦέʔγϣϯͷςϯϓϨʔτΛ࡞Δͱ͖ʹϞοΫΞοϓͭ͘ΔલఏͰ w ϞοΫΞοϓΛ͍ͭ·Ͱอ࣋͢Δͷ͔֬ೝ w σβΠϯΧϯϓϓϩτλΠϓߋ৽͞ΕΔͷ͔֬ೝ w ୭ͰݟΒΕΔঢ়ଶʹ͓͖͔ͯ֬͘͠ೝ w
ΞϓϦέʔγϣϯͷςϯϓϨʔτΤϯδϯΛ͏΄͏ָ͕ w ίʔυϕʔεΛ͚ͯϑΝΠϧΛίϐʔ͢ΔͷࣄނΓ͍͢ͷͰΊΑ͏
ϞοΫΞοϓΛ࡞Δత w ϞοΫαʔόͷΑ͏ʹɺͰ͖ͯͳ͍ͱ͜ΖΛସ͢Δ w ઌʹਫ਼៛ͳͷΛ࡞ͬͯΫϦΤΠςΟϒͷίϛϡχέʔγϣϯΛ׆ൃԽ͞ ͤΔ w ͘͠ɺσβΠϯҰཡͷସ w ۀ͢ΔͨΊʹͰ͖Δͱ͜Ζ·ͰͬͯΒ͏
ελΠϧΨΠυͷͱ͔ ฉ͖͍ͨͷͰͥͻ#03ͰͬͯΔͥʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠